13:I[37568,["/_next/static/immutable/chunks/2-9vr-e42s8dr.js","/_next/static/immutable/chunks/2_omr-qreewwb.js","/_next/static/immutable/chunks/01f2nfogzffw7.js","/_next/static/immutable/chunks/3k56s_r4mk904.js","/_next/static/immutable/chunks/1s6zm_s8-c7ni.js","/_next/static/immutable/chunks/181_42an756jy.js","/_next/static/immutable/chunks/1jihvr95juttv.js","/_next/static/immutable/chunks/092nngb_-as9i.js","/_next/static/immutable/chunks/1j32oyta3515h.js"],"Playground"] 12:T423,{"@context":"https://schema.org","@graph":[{"@type":"SoftwareSourceCode","@id":"https://trytweenly.vercel.app/docs/components/number-stepper#code","name":"Number Stepper","description":"Minus / plus stepper whose digits roll individually, with hold-to-repeat and a shake at the limits.","url":"https://trytweenly.vercel.app/docs/components/number-stepper","codeRepository":"https://github.com/mirukullacode/tweenly","programmingLanguage":[{"@type":"ComputerLanguage","name":"TypeScript"},{"@type":"ComputerLanguage","name":"React"}],"runtimePlatform":"React","keywords":"Buttons, react, shadcn, animation","isPartOf":{"@type":"WebSite","name":"tweenly","url":"https://trytweenly.vercel.app"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Docs","item":"https://trytweenly.vercel.app/docs"},{"@type":"ListItem","position":2,"name":"Components","item":"https://trytweenly.vercel.app/docs"},{"@type":"ListItem","position":3,"name":"Number Stepper","item":"https://trytweenly.vercel.app/docs/components/number-stepper"}]}]}14:T1b36,"use client" import { useEffect, useRef, useState } from "react" import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" export interface NumberStepperProps { /** Controlled value. */ value?: number /** Initial value when uncontrolled. Default: min */ defaultValue?: number /** Called with the new value on every change. */ onValueChange?: (value: number) => void /** Lowest allowed value. Default: 0 */ min?: number /** Highest allowed value. Default: 99 */ max?: number /** Amount added or removed per step. Default: 1 */ step?: number /** Text shown before the value, e.g. "$". */ prefix?: string /** Text shown after the value, e.g. "kg". */ suffix?: string /** Control size. Default: "md" */ size?: "sm" | "md" | "lg" /** Accessible label for the value. Default: "Quantity" */ "aria-label"?: string className?: string } const sizes = { sm: { root: "h-9 gap-1 p-1 text-sm", button: "size-7", value: "min-w-10" }, md: { root: "h-11 gap-1.5 p-1 text-base", button: "size-9", value: "min-w-12" }, lg: { root: "h-14 gap-2 p-1.5 text-xl", button: "size-11", value: "min-w-16" }, } const decimals = (n: number) => (String(n).split(".")[1] ?? "").length const Minus = () => ( ) const Plus = () => ( ) export function NumberStepper({ value, defaultValue, onValueChange, min = 0, max = 99, step = 1, prefix, suffix, size = "md", "aria-label": ariaLabel = "Quantity", className, }: NumberStepperProps) { const reduced = useReducedMotion() const [internal, setInternal] = useState(defaultValue ?? min) const current = value ?? internal const [prev, setPrev] = useState(current) const [dir, setDir] = useState(1) if (current !== prev) { setPrev(current) setDir(current > prev ? 1 : -1) } const [scope, animate] = useAnimate() const valueRef = useRef(current) const holdTimer = useRef>(undefined) useEffect(() => { valueRef.current = current }, [current]) useEffect(() => () => clearTimeout(holdTimer.current), []) const places = Math.max(decimals(step), decimals(min)) const shake = () => { if (reduced || !scope.current) return animate(scope.current, { x: [0, -5, 5, -3, 3, 0] }, { duration: 0.35 }) } const change = (delta: number) => { const raw = valueRef.current + delta * step const next = Number(Math.min(max, Math.max(min, raw)).toFixed(places)) if (next === valueRef.current) { shake() return false } valueRef.current = next if (value === undefined) setInternal(next) onValueChange?.(next) return true } const stopHold = () => clearTimeout(holdTimer.current) const startHold = (e: React.PointerEvent, delta: number) => { if (e.button !== 0) return stopHold() if (!change(delta)) return const repeat = (delay: number) => { holdTimer.current = setTimeout(() => { if (change(delta)) repeat(Math.max(40, delay * 0.85)) }, delay) } repeat(400) } const onKeyDown = (e: React.KeyboardEvent) => { const map: Record void> = { ArrowUp: () => change(1), ArrowRight: () => change(1), ArrowDown: () => change(-1), ArrowLeft: () => change(-1), PageUp: () => change(10), PageDown: () => change(-10), Home: () => change((min - valueRef.current) / step), End: () => change((max - valueRef.current) / step), } if (!map[e.key]) return e.preventDefault() map[e.key]() } const text = Math.abs(current).toFixed(places) const chars = text.split("") const s = sizes[size] const button = (delta: number, label: string, icon: React.ReactNode, disabled: boolean) => ( startHold(e, delta)} onPointerUp={stopHold} onPointerLeave={stopHold} onPointerCancel={stopHold} onClick={(e) => { if (e.detail === 0) change(delta) }} whileTap={reduced ? undefined : { scale: 0.82 }} transition={{ type: "spring", stiffness: 600, damping: 15 }} className={cn( "grid shrink-0 place-items-center rounded-full bg-background text-foreground shadow-sm ring-1 ring-border transition-opacity hover:bg-accent dark:bg-accent dark:hover:bg-accent/70", s.button, disabled && "opacity-40" )} > {icon} ) return (

{button(-1, "Decrease", , current <= min)}

{prefix && {prefix}} {current < 0 && -} {chars.map((char, i) => { const position = chars.length - i return ( ({ y: reduced ? 0 : d > 0 ? "100%" : "-100%", opacity: 0 }), center: { y: "0%", opacity: 1 }, exit: (d: number) => ({ y: reduced ? 0 : d > 0 ? "-100%" : "100%", opacity: 0 }), }} initial="enter" animate="center" exit="exit" transition={reduced ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 32 }} className="inline-block" > {char} ) })} {suffix && {suffix}}

{button(1, "Increase", , current >= max)}

) } 7:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$12"}}],["$","$L13",null,{"slug":"number-stepper","source":"$14"}]]