{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mines","type":"registry:block","title":"Mines","description":"A mines board: pick tiles to find gems, each one raising the multiplier, and cash out before you hit a mine. Each gem you find is numbered in pick order, an odds ring shows the chance the next pick is safe, and the round's end reveals every tile in a ripple from your last pick before a ticket-stub result card rises with the outcome, stats and a miniature of your run. Distinct synthesized sounds for gems, streaks, mines and cash outs; keyboard playable, reduced-motion safe.","author":"Saurabh ","dependencies":["@floating-ui/dom","clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/mines.tsx","type":"registry:component","target":"@components/motion/mines.tsx","content":"\"use client\";\n// beui.dev/components/blocks/mines\n\nimport { Gem, Volume2, VolumeX } from \"lucide-react\";\nimport { AnimatePresence, motion, useAnimate, useReducedMotion } from \"motion/react\";\nimport { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from \"react\";\nimport { ActionSwapCascadeIcon } from \"@/components/motion/action-swap-cascade\";\nimport {\n AdaptiveStepper,\n AdaptiveStepperDecrement,\n AdaptiveStepperIncrement,\n AdaptiveStepperValue,\n} from \"@/components/motion/adaptive-stepper\";\nimport { Button } from \"@/components/motion/button\";\nimport { NumberTicker } from \"@/components/motion/number-ticker\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { createGameSounds, type GameSounds } from \"@/lib/game-sounds\";\nimport { PresenceGate, type PresenceGateRenderProps } from \"@/lib/presence-gate\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MinesTile = \"gem\" | \"mine\";\n\nexport interface MinesProps {\n /** Tiles per side, rounded, at least 2. Default 5 (a 5 × 5 board). Changing it ends the round. */\n size?: number;\n /** Mines on the board (controlled), rounded and kept between 1 and tiles − 1. Takes effect from the next round. */\n mines?: number;\n /** Initial mine count when uncontrolled. Default 3. */\n defaultMines?: number;\n /** Called when the mine count changes between rounds. */\n onMinesChange?: (mines: number) => void;\n /** Called for every tile picked during a round; a mine reports multiplier 0 and ends it. */\n onReveal?: (tile: number, result: MinesTile, multiplier: number) => void;\n /** Called when the player cashes out, or clears every gem. */\n onCashOut?: (multiplier: number, gems: number) => void;\n /** Play synthesized sounds (controlled): gem chimes, a mine blast and a cash-out arpeggio. */\n sound?: boolean;\n /** Initial sound state when uncontrolled. Default false. */\n defaultSound?: boolean;\n /** Called when the sound button is toggled. */\n onSoundChange?: (sound: boolean) => void;\n /** Show the result card when a round ends. Default true. */\n showResult?: boolean;\n /** Accessible name for the game. Default \"Mines\". */\n \"aria-label\"?: string;\n className?: string;\n}\n\ntype Phase = \"idle\" | \"playing\" | \"busted\" | \"cashed\";\n\n/**\n * Fair payout after `gems` safe picks on a board of `tiles` with `mines`:\n * the inverse of the chance of picking that many gems in a row. `mines` is\n * kept between 0 and tiles − 1 and `gems` between 0 and the safe tiles, so\n * the result is always finite.\n */\nexport function minesMultiplier(tiles: number, mines: number, gems: number) {\n const safeMines = Math.max(0, Math.min(Math.round(mines), tiles - 1));\n const safeGems = Math.max(0, Math.min(Math.round(gems), tiles - safeMines));\n let multiplier = 1;\n for (let i = 0; i < safeGems; i++) multiplier *= (tiles - i) / (tiles - safeMines - i);\n return multiplier;\n}\n\n// Revealed icons arrive from a quarter size, transparent and blurred, on a\n// spring with no bounce. A round's closing reveal ripples outward from the\n// last pick, one ring of tiles every 25ms.\nconst ICON_SPRING = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\nconst RIPPLE_STEP = 0.025;\n// A mine shakes once, quickly: 300ms, settling to rest.\nconst SHAKE = { duration: 0.3, ease: EASE_OUT } as const;\n// A found gem's tile springs back from a slight squash.\nconst GEM_POP = { type: \"spring\", duration: 0.35, bounce: 0.4 } as const;\n// The cash-out pulse runs through the picked gems 40ms apart over 350ms, in\n// seconds. The result opens once the last tile's closing animation is done.\nconst PULSE_STEP = 0.04;\nconst PULSE_TIME = 0.35;\n// Exits are shorter than entrances.\nconst EXIT = { duration: 0.12, ease: EASE_OUT } as const;\n\n/**\n * A mines board: pick tiles to find gems, each raising the multiplier, and\n * cash out before you hit a mine. The round's end reveals every tile.\n */\nexport function Mines({\n size: sizeProp = 5,\n mines: minesProp,\n defaultMines = 3,\n onMinesChange,\n onReveal,\n onCashOut,\n sound,\n defaultSound = false,\n onSoundChange,\n showResult = true,\n \"aria-label\": ariaLabel = \"Mines\",\n className,\n}: MinesProps) {\n const reduce = useReducedMotion() ?? false;\n const size = Math.max(2, Math.round(sizeProp) || 2);\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\" && size !== sizeProp)\n console.warn(`Mines: size must be a whole number of at least 2; using ${size}.`);\n }, [size, sizeProp]);\n const tiles = size * size;\n const [internalMines, setInternalMines] = useState(defaultMines);\n const chosenMines = Math.min(Math.max(1, Math.round(minesProp ?? internalMines) || 1), tiles - 1);\n const [phase, setPhase] = useState(\"idle\");\n const [mineSet, setMineSet] = useState>(new Set());\n const [picked, setPicked] = useState([]);\n const [cursor, setCursor] = useState(0);\n const [announcement, setAnnouncement] = useState(\"\");\n const [resultOpen, setResultOpen] = useState(false);\n const sectionRef = useRef(null);\n const mainButtonRef = useRef(null);\n const tileRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const [, animate] = useAnimate();\n\n // Only sets state, so the render-time size reset below can call it.\n const resetBoard = () => {\n setPhase(\"idle\");\n setPicked([]);\n setMineSet(new Set());\n setResultOpen(false);\n };\n\n // A new size renumbers every tile, so the mines placed for the old board no\n // longer match it. End the round in the same render.\n const [boardSize, setBoardSize] = useState(size);\n if (boardSize !== size) {\n setBoardSize(size);\n resetBoard();\n setCursor(0);\n }\n\n // Once a round starts, its payout follows the mines actually on the board,\n // even if a controlled `mines` changes before the next round.\n const mines = phase === \"idle\" ? chosenMines : mineSet.size;\n const gems = picked.filter((tile) => !mineSet.has(tile)).length;\n const multiplier = minesMultiplier(tiles, mines, gems);\n const next = minesMultiplier(tiles, mines, gems + 1);\n const over = phase === \"busted\" || phase === \"cashed\";\n // Chance the next pick is a gem.\n const safe = (tiles - mines - gems) / (tiles - gems);\n const lastPick = picked.at(-1) ?? Math.floor(tiles / 2);\n // Turning showResult off hides an open ticket too.\n const resultShown = resultOpen && showResult && over;\n\n const [internalSound, setInternalSound] = useState(defaultSound);\n const soundOn = sound ?? internalSound;\n const player = useRef(null);\n const getPlayer = () => {\n if (!player.current) player.current = createGameSounds();\n return player.current;\n };\n useEffect(\n () => () => {\n player.current?.dispose();\n player.current = null;\n },\n [],\n );\n\n const setMines = (value: number) => {\n // A finished board shows the old count's mines; clear it for the new one.\n if (over) resetBoard();\n if (minesProp === undefined) setInternalMines(value);\n onMinesChange?.(value);\n };\n\n const closeResult = () => {\n setResultOpen(false);\n mainButtonRef.current?.focus();\n };\n\n const start = () => {\n resetBoard();\n // Mines are placed when the round starts, never on the server.\n const order = Array.from({ length: tiles }, (_, i) => i);\n for (let i = order.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [order[i], order[j]] = [order[j], order[i]];\n }\n setMineSet(new Set(order.slice(0, chosenMines)));\n setPhase(\"playing\");\n if (!reduce) {\n tileRefs.current.forEach((tile, index) => {\n if (!tile) return;\n const wave = Math.floor(index / size) + (index % size);\n animate(tile, { scale: [0.94, 1], opacity: [0.5, 1] }, { duration: 0.2, delay: wave * 0.025, ease: EASE_OUT });\n });\n }\n setAnnouncement(`Round started with ${chosenMines} ${chosenMines === 1 ? \"mine\" : \"mines\"}.`);\n if (soundOn) getPlayer().prepare();\n };\n\n const cashOut = (finalGems = gems) => {\n if (phase !== \"playing\" || finalGems === 0) return;\n const value = minesMultiplier(tiles, mines, finalGems);\n setPhase(\"cashed\");\n setAnnouncement(`Cashed out at ${formatMultiplier(value)}.`);\n if (soundOn) getPlayer().cashOut();\n onCashOut?.(value, finalGems);\n };\n\n const pick = (tile: number) => {\n if (phase !== \"playing\" || picked.includes(tile)) return;\n setPicked((current) => [...current, tile]);\n if (mineSet.has(tile)) {\n setPhase(\"busted\");\n setAnnouncement(\"Mine. The round is over.\");\n if (soundOn) getPlayer().mine();\n onReveal?.(tile, \"mine\", 0);\n return;\n }\n const found = gems + 1;\n const node = tileRefs.current[tile];\n if (node && !reduce) animate(node, { scale: [0.92, 1] }, GEM_POP);\n const value = minesMultiplier(tiles, mines, found);\n if (soundOn) getPlayer().gem(found);\n onReveal?.(tile, \"gem\", value);\n if (found === tiles - mines) {\n cashOut(found);\n return;\n }\n setAnnouncement(`Gem. ${formatMultiplier(value)}.`);\n };\n\n const onKeyDown = (event: KeyboardEvent, tile: number) => {\n const row = Math.floor(tile / size);\n const col = tile % size;\n const target = {\n ArrowRight: row * size + Math.min(size - 1, col + 1),\n ArrowLeft: row * size + Math.max(0, col - 1),\n ArrowDown: Math.min(size - 1, row + 1) * size + col,\n ArrowUp: Math.max(0, row - 1) * size + col,\n Home: row * size,\n End: row * size + size - 1,\n }[event.key];\n if (target === undefined) return;\n event.preventDefault();\n setCursor(target);\n tileRefs.current[target]?.focus();\n };\n\n // When the board's closing animation ends, in seconds: unpicked tiles\n // reveal in a ripple from the last pick, and picked gems pulse on a cash out.\n let closingEnd = 0;\n if (over) {\n for (let tile = 0; tile < tiles; tile++) {\n const order = picked.indexOf(tile);\n const end =\n order === -1\n ? ringFrom(lastPick, tile, size) * RIPPLE_STEP + ICON_SPRING.duration\n : phase === \"cashed\" && !reduce\n ? order * PULSE_STEP + PULSE_TIME\n : 0;\n closingEnd = Math.max(closingEnd, end);\n }\n }\n\n // The ticket rises once the closing animation has played. A timer, not an\n // animation callback, so a cut-short animation can't keep it shut; a new\n // round or a reset clears it.\n useEffect(() => {\n if (!over || !showResult) return;\n const id = setTimeout(() => {\n // The main button already says Play again, so a player still on the\n // board lands there. Focus elsewhere on the page stays put.\n if (sectionRef.current?.contains(document.activeElement)) mainButtonRef.current?.focus({ preventScroll: true });\n setResultOpen(true);\n }, closingEnd * 1000);\n return () => clearTimeout(id);\n }, [over, showResult, closingEnd]);\n\n const toggleSound = () => {\n const nextSound = !soundOn;\n if (nextSound) getPlayer().prepare();\n if (sound === undefined) setInternalSound(nextSound);\n onSoundChange?.(nextSound);\n };\n\n return (\n {\n if (event.key !== \"Escape\" || !resultShown) return;\n // Escape is used up here; an enclosing dialog must not close too.\n event.stopPropagation();\n closeResult();\n }}\n >\n
\n `${value} ${value === 1 ? \"mine\" : \"mines\"}`}\n aria-label=\"Mine count\"\n >\n \n \n {(value) => (\n \n \n {value}\n \n )}\n \n \n \n\n
\n
\n {phase === \"busted\" ? (\n // The multiplier is lost: struck through, as on the ticket. A plain\n // span, since a line-through skips the ticker's inline-block digits.\n \n {formatMultiplier(multiplier)}\n \n ) : (\n \n )}\n
\n

\n {over ? (\n phase === \"busted\" ? \"Multiplier lost\" : \"Multiplier\"\n ) : (\n <>\n \n {phase === \"playing\"\n ? `${Math.round(safe * 100)}% safe · next ${formatMultiplier(next)}`\n : `First pick ${Math.round(safe * 100)}% safe`}\n \n )}\n

\n
\n
\n\n {/* Board panel: 12px tiles + 12px padding give the 24px outer radius. */}\n
\n {/* Under the result card the tiles leave the tab order. */}\n \n Tiles\n {Array.from({ length: tiles }, (_, tile) => {\n const isPicked = picked.includes(tile);\n const isMine = mineSet.has(tile);\n const shown = isPicked || over;\n const content: MinesTile | null = shown ? (isMine ? \"mine\" : \"gem\") : null;\n const hit = isPicked && isMine;\n const row = Math.floor(tile / size);\n const col = tile % size;\n const ripple = ringFrom(lastPick, tile, size);\n const order = picked.indexOf(tile);\n const celebrate = phase === \"cashed\" && isPicked && !reduce;\n const interactive = phase === \"playing\" && !isPicked;\n return (\n {\n tileRefs.current[tile] = node;\n }}\n type=\"button\"\n tabIndex={tile === cursor ? 0 : -1}\n aria-disabled={!interactive}\n aria-label={`Row ${row + 1}, column ${col + 1}, ${tileState(content, isPicked, order)}`}\n onFocus={() => setCursor(tile)}\n onClick={() => pick(tile)}\n onKeyDown={(event) => onKeyDown(event, tile)}\n animate={hit && !reduce ? { x: [0, -5, 5, -3, 3, 0] } : { x: 0 }}\n transition={SHAKE}\n className={cn(\n \"relative grid aspect-square place-items-center rounded-xl border outline-none\",\n // The mine's shockwave paints over its neighbours.\n hit && \"z-10\",\n \"transition-[translate,scale,background-color,border-color] duration-150 ease-out\",\n \"focus-visible:ring-2 focus-visible:ring-ring\",\n interactive\n ? \"cursor-pointer border-border bg-card hover:-translate-y-0.5 hover:border-(--color-border-strong) active:scale-[0.96]\"\n : \"cursor-default border-transparent\",\n !interactive && !shown && \"bg-card/60\",\n content === \"gem\" && (isPicked ? \"bg-primary/15\" : \"bg-card/40\"),\n content === \"mine\" && (hit ? \"bg-rose-500/20\" : \"bg-card/40\"),\n )}\n >\n {hit && !reduce ? (\n \n ) : null}\n {isPicked && !isMine ? (\n \n {order + 1}\n \n ) : null}\n \n {content ? (\n \n {content === \"gem\" ? (\n \n ) : (\n \n )}\n \n ) : null}\n \n \n );\n })}\n \n\n \n {resultShown ? (\n \n {({ gate }) => (\n \n )}\n \n ) : null}\n \n
\n\n
\n {/* aria-disabled, not disabled: Start turns into this button, and a\n disabled button would drop the keyboard focus that pressed it. */}\n (phase === \"playing\" ? cashOut() : start())}\n >\n {phase === \"playing\" ? `Cash out ${formatMultiplier(multiplier)}` : over ? \"Play again\" : \"Start\"}\n \n {/* aria-label names the button; the tooltip shows the same label on hover\n and focus. Tooltip's asLabel would hydrate differently from the server. */}\n \n \n \n {soundOn ? : }\n \n \n \n
\n\n

\n {announcement}\n

\n \n );\n}\n\n// The ticket's tear line sits this far down; the side notches are cut there.\nconst TEAR = 104;\nconst NOTCH_MASK = `radial-gradient(circle 9px at 0 ${TEAR}px, transparent 98%, black), radial-gradient(circle 9px at 100% ${TEAR}px, transparent 98%, black)`;\n// Rises with a little settle (a rare, end-of-round moment), leaves quickly.\nconst CARD_IN = { type: \"spring\", duration: 0.4, bounce: 0.15 } as const;\nconst CARD_OUT = { duration: 0.15, ease: EASE_OUT } as const;\n\ninterface ResultProps {\n gate: PresenceGateRenderProps[\"gate\"];\n outcome: \"cashed\" | \"busted\";\n multiplier: number;\n gems: number;\n safeTiles: number;\n mines: number;\n size: number;\n picked: number[];\n mineSet: ReadonlySet;\n reduce: boolean;\n onClose: () => void;\n}\n\n/**\n * The end-of-round summary over a dimmed board. It has no buttons: the main\n * action below the board already says Play again, and tapping anywhere on\n * the board (or Escape) puts the card away to study the board.\n */\nfunction ResultCard(props: ResultProps) {\n const { gate, reduce, onClose } = props;\n return (\n <>\n \n \n \n \n \n \n \n );\n}\n\n// Inside the ticket, chunks arrive in reading order: outcome, multiplier,\n// stats, then the run replays on the mini map in pick order.\nconst STAGE = { duration: 0.25, ease: EASE_OUT } as const;\nconst REPLAY_START = 0.3;\nconst REPLAY_STEP = 0.05;\n// Mini map cells pop in with a small overshoot: each is 8px, so a bounce\n// reads as a cell landing rather than a wobble.\nconst CELL_SPRING = { type: \"spring\", duration: 0.3, bounce: 0.3 } as const;\n\nfunction Stage({ delay, reduce, className, children }: { delay: number; reduce: boolean; className?: string; children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nfunction MiniMap({ size, picked, mineSet, reduce }: Pick) {\n const hit = picked.at(-1);\n // 8px cells 3px apart, kept within 88px so big boards leave the stats room.\n const gap = size > 10 ? 1 : 3;\n return (\n \n {Array.from({ length: size * size }, (_, tile) => {\n const isMine = mineSet.has(tile);\n const isPicked = picked.includes(tile);\n const order = picked.indexOf(tile);\n return (\n \n );\n })}\n \n );\n}\n\nconst CARD_SHADOW = \"shadow-[0_1px_2px_rgb(0_0_0/0.12),0_16px_40px_-12px_rgb(0_0_0/0.45)]\";\n\n/** A ticket stub, notched at a dashed tear line. */\nfunction Ticket({ outcome, multiplier, gems, safeTiles, mines, size, picked, mineSet, reduce }: ResultProps) {\n const cashed = outcome === \"cashed\";\n return (\n \n \n \n

\n {cashed ? \"Cashed out\" : \"Mine hit\"}\n

\n \n \n

\n {cashed ? (\n \n ) : (\n {formatMultiplier(multiplier)}\n )}\n

\n \n \n
\n
\n \n
\n \n \n \n
\n \n {/* A narrow ticket keeps the stats on one line each and drops the map. */}\n \n \n \n
\n
\n );\n}\n\nfunction Row({ label, value }: { label: string; value: string | number }) {\n return (\n
\n
{label}
\n
{value}
\n
\n );\n}\n\n// The classic minesweeper mine: a solid ball (so it never reads as a sun),\n// four thick spikes on the axes and four shorter ones on the diagonals.\nconst SPIKES = Array.from({ length: 8 }, (_, i) => {\n const angle = (i * Math.PI) / 4;\n const main = i % 2 === 0;\n const [cos, sin] = [Math.cos(angle), Math.sin(angle)];\n const reach = main ? 10.5 : 9;\n return { main, x1: 12 + cos * 6, y1: 12 + sin * 6, x2: 12 + cos * reach, y2: 12 + sin * reach };\n});\n\n/** A mine on Lucide's 24px grid, sized to pair with the gem. */\nfunction MineIcon({ className }: { className?: string }) {\n // Decorative: tiles and the stepper name the mine in text.\n return (\n \n {SPIKES.map((spike) => (\n \n ))}\n \n \n \n );\n}\n\n/** A small ring that fills with the chance the next pick is safe. */\nfunction OddsRing({ safe, reduce }: { safe: number; reduce: boolean }) {\n return (\n \n \n \n \n );\n}\n\n/** What a tile shows, and for revealed tiles whether the player picked it. */\nfunction tileState(content: MinesTile | null, isPicked: boolean, order: number) {\n if (!content) return \"hidden\";\n if (!isPicked) return `${content}, not picked`;\n return content === \"mine\" ? \"mine, hit\" : `gem, pick ${order + 1}`;\n}\n\n/** Rings between two tiles: 0 for the same tile, 1 for its neighbours. */\nfunction ringFrom(from: number, tile: number, size: number) {\n return Math.max(\n Math.abs(Math.floor(tile / size) - Math.floor(from / size)),\n Math.abs((tile % size) - (from % size)),\n );\n}\n\n// Payouts grow without limit (a cleared 5 × 5 board with 12 mines pays over\n// five million), so big ones are shortened to fit: 5.2M, then 1.3E29.\nconst SHORT = new Intl.NumberFormat(\"en\", { notation: \"compact\", maximumFractionDigits: 1 });\nconst SCIENTIFIC = new Intl.NumberFormat(\"en\", { notation: \"scientific\", maximumFractionDigits: 1 });\n\nfunction compact(multiplier: number) {\n if (multiplier < 10_000) return multiplier.toFixed(2);\n return (multiplier < 1e15 ? SHORT : SCIENTIFIC).format(multiplier);\n}\n\n/** A multiplier as Mines shows it: 2.50×, or shortened when large (5.2M×). */\nexport function formatMultiplier(multiplier: number) {\n return `${compact(multiplier)}×`;\n}\n"},{"path":"components/motion/action-swap-cascade.tsx","type":"registry:component","target":"@components/motion/action-swap-cascade.tsx","content":"\"use client\";\n\nimport {\n ActionSwapButton,\n ActionSwapIcon,\n ActionSwapText,\n type ActionSwapButtonProps,\n type ActionSwapIconProps,\n type ActionSwapTextProps,\n} from \"./action-swap\";\n\nexport type {\n ActionSwapButtonSize,\n ActionSwapButtonVariant,\n ActionSwapItem,\n} from \"./action-swap\";\n\nexport type ActionSwapCascadeButtonProps = Omit;\nexport type ActionSwapCascadeTextProps = Omit;\nexport type ActionSwapCascadeIconProps = Omit;\n\nexport function ActionSwapCascadeButton(props: ActionSwapCascadeButtonProps) {\n return ;\n}\n\nexport function ActionSwapCascadeText(props: ActionSwapCascadeTextProps) {\n return ;\n}\n\nexport function ActionSwapCascadeIcon(props: ActionSwapCascadeIconProps) {\n return ;\n}\n"},{"path":"components/motion/adaptive-stepper.tsx","type":"registry:component","target":"@components/motion/adaptive-stepper.tsx","content":"\"use client\";\n\nimport { Minus, Plus } from \"lucide-react\";\nimport {\n AnimatePresence,\n type HTMLMotionProps,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n createContext,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n useContext,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n EASE_OUT,\n SPRING_PRESS,\n} from \"@/lib/ease\";\nimport {\n Liquid,\n LiquidItem,\n type LiquidTransition,\n} from \"@/components/motion/liquid\";\nimport { cn } from \"@/lib/utils\";\n\n// The deliberately elastic separation curve from the liquid email reference.\nconst STEPPER_LIQUID_TRANSITION = {\n duration: 600,\n ease: [0.22, 1.3, 0.71, 1],\n} as const satisfies LiquidTransition;\n\ntype StepDirection = -1 | 0 | 1;\n\ntype AdaptiveStepperContextValue = {\n value: number;\n valueText: string;\n direction: StepDirection;\n atMin: boolean;\n atMax: boolean;\n disabled: boolean;\n reduce: boolean;\n decrement: (restoreFocus: boolean) => void;\n increment: (restoreFocus: boolean) => void;\n decrementRef: React.MutableRefObject;\n incrementRef: React.MutableRefObject;\n};\n\nconst AdaptiveStepperContext = createContext(\n null,\n);\n\nfunction useAdaptiveStepperContext(component: string) {\n const context = useContext(AdaptiveStepperContext);\n if (!context) {\n throw new Error(`${component} must be used within `);\n }\n return context;\n}\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(max, Math.max(min, value));\n}\n\nfunction cleanNumber(value: number) {\n return Number(value.toFixed(10));\n}\n\nfunction nextStep(\n value: number,\n direction: -1 | 1,\n min: number,\n max: number,\n step: number,\n) {\n if (direction === 1) {\n const nextIndex = Math.floor((value - min) / step + 1e-10) + 1;\n return cleanNumber(Math.min(max, min + nextIndex * step));\n }\n\n const previousIndex = Math.ceil((value - min) / step - 1e-10) - 1;\n return cleanNumber(Math.max(min, min + previousIndex * step));\n}\n\nfunction mergeRefs(...refs: Array | undefined>) {\n return (node: T | null) => {\n for (const ref of refs) {\n if (typeof ref === \"function\") ref(node);\n else if (ref && typeof ref === \"object\") {\n (ref as React.MutableRefObject).current = node;\n }\n }\n };\n}\n\nexport interface AdaptiveStepperProps {\n children: ReactNode;\n value?: number;\n defaultValue?: number;\n onValueChange?: (value: number) => void;\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n name?: string;\n formatValueText?: (value: number) => string;\n className?: string;\n \"aria-label\"?: string;\n}\n\nexport function AdaptiveStepper({\n children,\n value: controlledValue,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = 10,\n step = 1,\n disabled = false,\n name,\n formatValueText,\n className,\n \"aria-label\": ariaLabel = \"Quantity\",\n}: AdaptiveStepperProps) {\n const reduce = useReducedMotion() ?? false;\n const labelId = useId();\n const decrementRef = useRef(null);\n const incrementRef = useRef(null);\n const lower = Number.isFinite(min) ? min : 0;\n const suppliedMax = Number.isFinite(max) ? max : lower;\n const upper = suppliedMax > lower ? suppliedMax : lower;\n const stride = Number.isFinite(step) && step > 0 ? step : 1;\n const [internalValue, setInternalValue] = useState(() =>\n clamp(Number.isFinite(defaultValue) ? defaultValue : lower, lower, upper),\n );\n const controlled = controlledValue !== undefined;\n const suppliedValue = controlled ? controlledValue : internalValue;\n const currentValue = clamp(\n Number.isFinite(suppliedValue) ? suppliedValue : lower,\n lower,\n upper,\n );\n const previousValueRef = useRef(currentValue);\n const currentValueRef = useRef(currentValue);\n const direction: StepDirection =\n currentValue === previousValueRef.current\n ? 0\n : currentValue > previousValueRef.current\n ? 1\n : -1;\n\n useLayoutEffect(() => {\n previousValueRef.current = currentValue;\n currentValueRef.current = currentValue;\n }, [currentValue]);\n\n const commit = useCallback(\n (nextValue: number, restoreFocus: boolean) => {\n const next = clamp(cleanNumber(nextValue), lower, upper);\n if (next === currentValue) return;\n if (!controlled) setInternalValue(next);\n onValueChange?.(next);\n\n if (!restoreFocus) return;\n requestAnimationFrame(() => {\n if (next === upper && currentValueRef.current === upper) {\n decrementRef.current?.focus();\n } else if (next === lower && currentValueRef.current === lower) {\n incrementRef.current?.focus();\n }\n });\n },\n [controlled, currentValue, lower, onValueChange, upper],\n );\n\n const decrement = useCallback(\n (restoreFocus: boolean) => {\n if (disabled || currentValue <= lower) return;\n commit(nextStep(currentValue, -1, lower, upper, stride), restoreFocus);\n },\n [commit, currentValue, disabled, lower, stride, upper],\n );\n\n const increment = useCallback(\n (restoreFocus: boolean) => {\n if (disabled || currentValue >= upper) return;\n commit(nextStep(currentValue, 1, lower, upper, stride), restoreFocus);\n },\n [commit, currentValue, disabled, lower, stride, upper],\n );\n\n const valueText = formatValueText?.(currentValue) ?? String(currentValue);\n const context = useMemo(\n () => ({\n value: currentValue,\n valueText,\n direction,\n atMin: currentValue <= lower,\n atMax: currentValue >= upper,\n disabled,\n reduce,\n decrement,\n increment,\n decrementRef,\n incrementRef,\n }),\n [\n currentValue,\n decrement,\n direction,\n disabled,\n increment,\n lower,\n reduce,\n upper,\n valueText,\n ],\n );\n\n return (\n \n \n \n {ariaLabel}. Current value: {valueText}\n \n \n {children}\n \n {name ? : null}\n \n \n );\n}\n\nexport interface AdaptiveStepperActionProps\n extends Omit, \"children\" | \"onClick\"> {\n children?: ReactNode;\n onClick?: (event: MouseEvent) => void;\n ref?: Ref;\n}\n\nfunction StepperAction({\n direction,\n children,\n className,\n onClick,\n ref,\n style,\n tabIndex,\n \"aria-label\": ariaLabel,\n ...props\n}: AdaptiveStepperActionProps & { direction: -1 | 1 }) {\n const context = useAdaptiveStepperContext(\"AdaptiveStepper action\");\n const hidden = direction === -1 ? context.atMin : context.atMax;\n const actionRef =\n direction === -1 ? context.decrementRef : context.incrementRef;\n const label =\n ariaLabel ?? (direction === -1 ? \"Decrease value\" : \"Increase value\");\n const action = direction === -1 ? context.decrement : context.increment;\n const x =\n direction === -1\n ? hidden\n ? 32\n : 0\n : hidden\n ? 136\n : 168;\n\n return (\n \n