{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "rolling-number-stepper", "title": "Rolling Number Stepper", "author": "henriquegpb ", "description": "A minus and plus stepper where only the digits that change roll, up on the way up and down on the way down, and a digit that appears or disappears opens or closes its column; holding a button keeps stepping.", "files": [ { "path": "registry/microkit/rolling-number-stepper.tsx", "content": "\"use client\";\n\nimport { useEffect, useRef, useState, type MouseEvent, type PointerEvent } from \"react\";\n\nconst MIN = 0;\nconst MAX = 99;\nconst START = 8;\nconst EASE = \"cubic-bezier(.22, 1, .36, 1)\";\n\n// Ref callbacks rather than effects: each one runs once, the moment its digit or column is mounted.\nconst roll = (node: HTMLElement | null) => {\n if (!node) return;\n // Strict Mode attaches refs twice in development; starting over keeps the second pass from stacking on the first.\n node.getAnimations().forEach((animation) => animation.cancel());\n const direction = Number(node.dataset.direction);\n const leaving = node.dataset.roll === \"out\";\n const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n // A step up pushes the old digit out of the top and brings the new one in from below; a step down reverses it.\n const away = `translateY(${direction * -100}%)`;\n const toward = `translateY(${direction * 100}%)`;\n node.animate(\n leaving\n ? [{ transform: \"none\", opacity: 1 }, { transform: away, opacity: 0 }]\n : [{ transform: toward, opacity: 0 }, { transform: \"none\", opacity: 1 }],\n { duration: reduce ? 0 : 450, easing: EASE, fill: leaving ? \"forwards\" : \"none\" },\n );\n};\n\n// A digit that appears or disappears (9 to 10, 10 to 9) opens or closes its column, so the number re-centres smoothly.\nconst resize = (node: HTMLElement | null) => {\n if (!node) return;\n // Measured with any earlier pass cancelled, or a column caught mid-collapse would open to nothing.\n node.getAnimations().forEach((animation) => animation.cancel());\n const width = `${node.offsetWidth}px`;\n const leaving = node.dataset.column === \"out\";\n const reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n node.animate(leaving ? [{ width }, { width: \"0px\" }] : [{ width: \"0px\" }, { width }], {\n duration: reduce ? 0 : 450,\n easing: EASE,\n fill: leaving ? \"forwards\" : \"none\",\n });\n};\n\ntype Change = { value: number; previous: number; direction: number; tick: number };\n\nfunction RollingDigits({ value, previous, direction, tick }: Change) {\n const now = String(value);\n const was = String(previous);\n const length = Math.max(now.length, was.length);\n\n return (\n \n {Array.from({ length }, (_, index) => {\n // Columns are matched from the right, so the ones digit always rolls over the ones digit.\n const place = length - 1 - index;\n const digit = now[now.length - 1 - place];\n const old = was[was.length - 1 - place];\n if (digit === old) {\n return (\n \n {digit}\n \n );\n }\n const column = digit === undefined ? \"out\" : old === undefined ? \"in\" : undefined;\n return (\n // Keyed by the step, so every change mounts fresh digits and their animation plays again.\n \n {old !== undefined && (\n \n {old}\n \n )}\n {digit !== undefined && (\n \n {digit}\n \n )}\n \n );\n })}\n \n );\n}\n\nexport function RollingNumberStepper() {\n const [change, setChange] = useState({ value: START, previous: START, direction: 1, tick: 0 });\n const valueRef = useRef(START);\n const hold = useRef({ delay: 0, repeat: 0 });\n\n useEffect(() => {\n const timers = hold.current;\n return () => {\n clearTimeout(timers.delay);\n clearInterval(timers.repeat);\n };\n }, []);\n\n const release = () => {\n clearTimeout(hold.current.delay);\n clearInterval(hold.current.repeat);\n };\n\n const nudge = (direction: number) => {\n const previous = valueRef.current;\n const value = Math.min(MAX, Math.max(MIN, previous + direction));\n // A disabled button never hears the pointer come up, so reaching the limit ends the hold itself.\n if (value === previous) return release();\n valueRef.current = value;\n setChange((current) => ({ value, previous, direction, tick: current.tick + 1 }));\n };\n\n // Pressing steps once; holding on keeps stepping until the pointer lets go.\n const press = (event: PointerEvent, direction: number) => {\n if (event.button !== 0) return;\n release();\n nudge(direction);\n hold.current.delay = window.setTimeout(() => {\n hold.current.repeat = window.setInterval(() => nudge(direction), 120);\n }, 400);\n };\n\n // Pointer presses already stepped on the way down, so only a keyboard click (detail 0) steps here.\n const click = (event: MouseEvent, direction: number) => {\n if (event.detail === 0) nudge(direction);\n };\n\n return (\n \n press(event, -1)}\n onPointerUp={release}\n onPointerLeave={release}\n onPointerCancel={release}\n onClick={(event) => click(event, -1)}\n disabled={change.value <= MIN}\n >\n \n \n \n \n
\n \n {/* The widest value sizes the box, so the buttons never move while digits come and go. */}\n \n {MAX}\n \n {/* The settled value is what screen readers and copy-paste get, but it is never painted. */}\n \n {change.value}\n \n \n \n Tickets\n
\n press(event, 1)}\n onPointerUp={release}\n onPointerLeave={release}\n onPointerCancel={release}\n onClick={(event) => click(event, 1)}\n disabled={change.value >= MAX}\n >\n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "@components/microkit/rolling-number-stepper.tsx" } ], "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/rolling-number-stepper", "categories": [ "input", "click" ], "type": "registry:component" }