{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "click-wheel", "title": "Click wheel", "description": "Click wheel is a production-ready controls component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "next-themes", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/controls/click-wheel.tsx", "content": "\"use client\";\n\nimport { memo, useCallback, useEffect, useId, useRef, useState, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { BJORK_PALETTE, type BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { cubicBezier, ease, springs } from \"@/components/bjork-ui/_core/motion\";\nimport { stepSpring, type SpringState } from \"@/components/bjork-ui/_core/spring\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { useVisibleLoop } from \"@/components/bjork-ui/_core/loop\";\n\nexport interface ClickWheelItem {\n id: string;\n label: string;\n meta?: string;\n}\n\nexport interface ClickWheelProps {\n items: ClickWheelItem[];\n value?: number;\n defaultValue?: number;\n onValueChange?: (index: number) => void;\n onSelect?: (item: ClickWheelItem, index: number) => void;\n onTick?: (index: number) => void;\n detentsPerRev?: number;\n inertia?: number;\n loop?: boolean;\n haptics?: boolean;\n layout?: \"stacked\" | \"wheel-only\";\n size?: number;\n centerLabel?: string;\n ariaLabel?: string;\n tone?: BjorkTone;\n attract?: boolean;\n className?: string;\n}\n\n// Stacked layout: 140 display + 60 gap + 220 wheel = 420 tall.\nconst LIST_W = 260;\nconst LIST_H = 140;\nconst ROW_H = 28;\nconst ROW_TOP = (LIST_H - ROW_H) / 2; // the active row sits in the middle, 56px from the top\nconst PILL_INSET = 4;\nconst PILL_RADIUS = 8;\nconst STACK_GAP = 60;\nconst DEFAULT_SIZE = 220;\nconst CENTER_AT_DEFAULT = 92;\nconst FLASH_MS = 160;\nconst TWEEN_MS = 120;\nconst FLICK_SPEED = 8; // items per second\nconst FLICK_EVERY = 4; // seconds of idle before an attract flick\nconst SNAP_SPEED = 0.5; // items per second, below which the wheel snaps to a detent\nconst MAX_FLICK = 6; // items/s, keeps any flick's settle ≤ 1.2s\nconst RELEASE_WINDOW_MS = 80;\nconst SAMPLE_KEEP_MS = 200;\nconst RUBBER = 0.35;\nconst WHEEL_PX_PER_ITEM = 40;\nconst WHEEL_SNAP_DELAY = 140;\nconst FADE_MASK = \"linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)\";\nconst easeOut = cubicBezier(...ease.out);\n\nfunction mod(a: number, n: number) {\n return ((a % n) + n) % n;\n}\n\nfunction clamp(v: number, lo: number, hi: number) {\n return Math.min(hi, Math.max(lo, v));\n}\n\n// Index shown to the user for an unwrapped step count.\nfunction wrapIndex(k: number, n: number, loop: boolean) {\n if (n <= 0) return 0;\n return loop ? mod(k, n) : clamp(k, 0, n - 1);\n}\n\n// Unwrapped step the wheel may rest on. Without loop, the rest positions stop at the ends.\nfunction restStep(k: number, n: number, loop: boolean) {\n if (n <= 0 || loop) return k;\n return clamp(k, 0, n - 1);\n}\n\nfunction pointerAngle(x: number, y: number, cx: number, cy: number) {\n return (Math.atan2(y - cy, x - cx) * 180) / Math.PI;\n}\n\ninterface WheelRowProps {\n id?: string;\n option: boolean;\n selected: boolean;\n hidden: boolean;\n label: string;\n meta?: string;\n labelColor: string;\n metaColor: string;\n}\n\n// Memoised so a detent only re-renders the rows whose selected state changed, not the whole list.\nconst WheelRow = memo(function WheelRow({ id, option, selected, hidden, label, meta, labelColor, metaColor }: WheelRowProps) {\n return (\n \n \n {label}\n \n {meta && (\n \n {meta}\n \n )}\n \n );\n});\n\n// Token with a palette fallback, so the component keeps its tone outside the site.\nfunction tok(name: string, fallback: string) {\n return `var(--bjork-${name}, ${fallback})`;\n}\n\nexport function ClickWheel({\n items,\n value,\n defaultValue = 0,\n onValueChange,\n onSelect,\n onTick,\n detentsPerRev = 12,\n inertia = 0.94,\n loop = false,\n haptics = true,\n layout = \"stacked\",\n size = DEFAULT_SIZE,\n centerLabel = \"Select\",\n ariaLabel = \"Click wheel\",\n tone,\n attract = false,\n className,\n}: ClickWheelProps) {\n const resolvedTone = useBjorkTone(tone);\n const p = BJORK_PALETTE[resolvedTone];\n const dark = resolvedTone === \"dark\";\n const reduced = useReducedMotion();\n const uid = useId();\n const listboxId = `${uid}-list`;\n const optionId = (i: number) => `${uid}-opt-${i}`;\n\n const n = items.length;\n const detents = Math.max(1, Math.round(detentsPerRev));\n const step = 360 / detents;\n const stacked = layout === \"stacked\";\n const isControlled = value !== undefined;\n const attractOn = attract && !reduced && !isControlled && n > 0;\n const centerD = Math.round((size * CENTER_AT_DEFAULT) / DEFAULT_SIZE);\n // Loop mode repeats the list so the rows around the centre are always filled.\n const mid = loop && n > 0 ? Math.ceil(4 / n) : 0;\n const copies = loop && n > 0 ? 2 * mid + 1 : 1;\n const rowCount = n * copies;\n\n // Continuous position in items, plus the last reported (unwrapped) step.\n const startStep = restStep(value ?? defaultValue, n, loop);\n const posRef = useRef(startStep);\n const lastStepRef = useRef(Math.round(startStep));\n const [index, setIndex] = useState(() => wrapIndex(Math.round(startStep), n, loop));\n const velRef = useRef(0);\n const springTarget = useRef(null);\n const springState = useRef({ x: 0, v: 0 });\n const tween = useRef<{ from: number; to: number; t0: number } | null>(null);\n const drag = useRef<{ cx: number; cy: number; last: number; samples: { t: number; p: number }[] } | null>(null);\n const flashes = useRef<{ tick: number; t0: number }[]>([]);\n const tickEls = useRef<(HTMLSpanElement | null)[]>([]);\n const listEl = useRef(null);\n const invEl = useRef(null);\n const notchEl = useRef(null);\n const wheelEl = useRef(null);\n const rootEl = useRef(null);\n const wakeRef = useRef<() => void>(() => {});\n const inputSeen = useRef(false);\n const idleFor = useRef(0);\n const flickDir = useRef(1);\n const wheelSnap = useRef(null);\n const wheelHandler = useRef<(e: WheelEvent) => void>(() => {});\n\n const kick = useCallback(() => wakeRef.current(), []);\n\n // Writes transforms straight to the DOM. React never re-renders for a frame of motion.\n const paint = useCallback(() => {\n const pos = posRef.current;\n const wrapped = loop && n > 0 ? mod(pos, n) : pos;\n const y = `translate3d(0, ${(ROW_TOP - (wrapped + mid * n) * ROW_H).toFixed(2)}px, 0)`;\n if (listEl.current) listEl.current.style.transform = y;\n if (invEl.current) invEl.current.style.transform = y;\n if (notchEl.current) notchEl.current.style.transform = `rotate(${(pos * step).toFixed(3)}deg)`;\n }, [loop, n, mid, step]);\n\n // Fires the callbacks for every detent between the last reported step and `k`.\n const reportTo = (k: number) => {\n const from = lastStepRef.current;\n if (k === from || n === 0) return;\n const dir = k > from ? 1 : -1;\n const t0 = performance.now();\n lastStepRef.current = k;\n for (let s = from + dir; dir > 0 ? s <= k : s >= k; s += dir) {\n const idx = wrapIndex(s, n, loop);\n if (haptics && typeof navigator !== \"undefined\" && typeof navigator.vibrate === \"function\") {\n navigator.vibrate(3);\n }\n onTick?.(idx);\n onValueChange?.(idx);\n if (!reduced) flashes.current.push({ tick: mod(idx, detents), t0 });\n }\n setIndex(wrapIndex(k, n, loop));\n kick();\n };\n\n const stopMotion = () => {\n velRef.current = 0;\n springTarget.current = null;\n tween.current = null;\n };\n\n const startSpring = (target: number, v0: number) => {\n springTarget.current = target;\n springState.current = { x: posRef.current, v: v0 };\n };\n\n const frame = (dt: number) => {\n const now = performance.now();\n let busy = false;\n\n // Attract: flick every few seconds while nobody touches the wheel. Alternates direction.\n if (attractOn && !drag.current) {\n if (inputSeen.current) {\n inputSeen.current = false;\n idleFor.current = 0;\n } else {\n idleFor.current += dt;\n }\n if (\n idleFor.current >= FLICK_EVERY &&\n !tween.current &&\n springTarget.current === null &&\n velRef.current === 0\n ) {\n idleFor.current = 0;\n velRef.current = flickDir.current * FLICK_SPEED;\n flickDir.current = -flickDir.current;\n }\n busy = true;\n }\n\n if (drag.current) {\n busy = true;\n } else if (tween.current) {\n const tw = tween.current;\n const pr = Math.min(1, (now - tw.t0) / TWEEN_MS);\n posRef.current = tw.from + (tw.to - tw.from) * easeOut(pr);\n if (pr >= 1) {\n posRef.current = tw.to;\n tween.current = null;\n }\n busy = true;\n } else if (springTarget.current !== null) {\n const target = springTarget.current;\n const s = springState.current;\n stepSpring(s, target, springs.settle, dt);\n posRef.current = s.x;\n if (Math.abs(s.x - target) < 1e-3 && Math.abs(s.v) < 1e-3) {\n posRef.current = target;\n springTarget.current = null;\n s.v = 0;\n }\n busy = true;\n } else if (velRef.current !== 0) {\n const v = velRef.current;\n posRef.current += v * dt;\n velRef.current = v * Math.pow(inertia, dt * 60);\n const outside = !loop && n > 0 && (posRef.current < 0 || posRef.current > n - 1);\n if (outside) {\n // Past an end without loop: spring back to the end.\n velRef.current = 0;\n startSpring(restStep(Math.round(posRef.current), n, loop), v);\n } else if (Math.abs(velRef.current) < SNAP_SPEED) {\n // Slow enough: settle on the nearest detent.\n velRef.current = 0;\n startSpring(restStep(Math.round(posRef.current), n, loop), 0);\n }\n busy = true;\n }\n\n if (flashes.current.length > 0) {\n const keep: { tick: number; t0: number }[] = [];\n for (const f of flashes.current) {\n const pr = (now - f.t0) / FLASH_MS;\n const el = tickEls.current[f.tick];\n if (pr >= 1) {\n if (el) el.style.transform = \"\";\n continue;\n }\n // Ticks rest at full opacity, so the flash is a pulse: the tick grows from 6px to 10px and back over 160ms.\n // This deliberately replaces the plan's opacity flash, which dipped the tick below its resting opacity.\n if (el) el.style.transform = `scaleY(${(1 + 0.67 * Math.sin(Math.PI * pr)).toFixed(3)})`;\n keep.push(f);\n }\n flashes.current = keep;\n busy = true;\n }\n\n paint();\n if (!tween.current && !drag.current) {\n reportTo(restStep(Math.round(posRef.current), n, loop));\n }\n return busy;\n };\n\n const { wake } = useVisibleLoop(rootEl, frame);\n useEffect(() => {\n wakeRef.current = wake;\n }, [wake]);\n\n // Keep the DOM transforms in step with the latest render (list, notch).\n useEffect(() => {\n paint();\n });\n\n // The wheel listens natively, non-passive, so it can stop page scroll while the pointer is over it.\n useEffect(() => {\n wheelHandler.current = (e: WheelEvent) => {\n if (n === 0) return;\n e.preventDefault();\n inputSeen.current = true;\n tween.current = null;\n springTarget.current = null;\n velRef.current = 0;\n posRef.current += e.deltaY / WHEEL_PX_PER_ITEM;\n paint();\n reportTo(restStep(Math.round(posRef.current), n, loop));\n if (wheelSnap.current !== null) window.clearTimeout(wheelSnap.current);\n wheelSnap.current = window.setTimeout(() => {\n wheelSnap.current = null;\n const target = restStep(Math.round(posRef.current), n, loop);\n if (reduced) {\n posRef.current = target;\n paint();\n return;\n }\n startSpring(target, 0);\n kick();\n }, WHEEL_SNAP_DELAY);\n };\n });\n\n useEffect(() => {\n const el = wheelEl.current;\n if (!el) return;\n const onWheel = (e: WheelEvent) => wheelHandler.current(e);\n el.addEventListener(\"wheel\", onWheel, { passive: false });\n return () => {\n el.removeEventListener(\"wheel\", onWheel);\n if (wheelSnap.current !== null) window.clearTimeout(wheelSnap.current);\n };\n }, []);\n\n // Controlled value: jump to it when the parent changes it and the user is not dragging.\n useEffect(() => {\n if (value === undefined || n === 0 || drag.current) return;\n const cur = wrapIndex(lastStepRef.current, n, loop);\n const want = wrapIndex(value, n, loop);\n if (cur === want) return;\n let target = want;\n if (loop) {\n let d = mod(want - cur, n);\n if (d > n / 2) d -= n;\n target = lastStepRef.current + d;\n }\n velRef.current = 0;\n springTarget.current = null;\n tween.current = null;\n posRef.current = target;\n lastStepRef.current = target;\n paint();\n kick();\n }, [value, n, loop, paint, kick]);\n\n const selectCurrent = () => {\n if (n === 0) return;\n inputSeen.current = true;\n const idx = wrapIndex(lastStepRef.current, n, loop);\n onSelect?.(items[idx], idx);\n };\n\n const onWheelPointerDown = (e: PointerEvent) => {\n if (n === 0 || e.button !== 0) return;\n // The one measurement on the gesture path. Read once per press, never in pointermove or rAF.\n const rect = e.currentTarget.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n if (Math.hypot(e.clientX - cx, e.clientY - cy) > rect.width / 2) return;\n e.currentTarget.setPointerCapture(e.pointerId);\n e.currentTarget.focus({ preventScroll: true });\n inputSeen.current = true;\n stopMotion();\n drag.current = {\n cx,\n cy,\n last: pointerAngle(e.clientX, e.clientY, cx, cy),\n samples: [{ t: performance.now(), p: posRef.current }],\n };\n kick();\n };\n\n const onWheelPointerMove = (e: PointerEvent) => {\n const d = drag.current;\n if (!d) return;\n const ang = pointerAngle(e.clientX, e.clientY, d.cx, d.cy);\n let delta = ang - d.last;\n if (delta > 180) delta -= 360;\n else if (delta < -180) delta += 360;\n d.last = ang;\n const items = delta / step;\n const outside = !loop && n > 0 && (posRef.current < 0 || posRef.current > n - 1);\n posRef.current += outside ? items * RUBBER : items;\n const t = performance.now();\n d.samples.push({ t, p: posRef.current });\n while (d.samples.length > 2 && t - d.samples[0].t > SAMPLE_KEEP_MS) d.samples.shift();\n paint();\n reportTo(restStep(Math.round(posRef.current), n, loop));\n };\n\n const onWheelPointerEnd = (e: PointerEvent) => {\n const d = drag.current;\n if (!d) return;\n drag.current = null;\n if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n e.currentTarget.releasePointerCapture(e.pointerId);\n }\n const t = performance.now();\n d.samples.push({ t, p: posRef.current });\n const recent = d.samples.filter((s) => t - s.t <= RELEASE_WINDOW_MS);\n let v = 0;\n if (recent.length >= 2) {\n const a = recent[0];\n const b = recent[recent.length - 1];\n const span = (b.t - a.t) / 1000;\n if (span > 0) v = (b.p - a.p) / span;\n }\n v = clamp(v, -MAX_FLICK, MAX_FLICK);\n const pos = posRef.current;\n const outside = !loop && n > 0 && (pos < 0 || pos > n - 1);\n const target = restStep(Math.round(pos), n, loop);\n if (reduced) {\n velRef.current = 0;\n posRef.current = target;\n paint();\n reportTo(target);\n } else if (!outside && Math.abs(v) >= SNAP_SPEED) {\n velRef.current = v;\n springTarget.current = null;\n } else {\n velRef.current = 0;\n startSpring(target, 0);\n }\n kick();\n };\n\n const onWheelKeyDown = (e: KeyboardEvent) => {\n if (n === 0) return;\n const cur = lastStepRef.current;\n let target: number;\n switch (e.key) {\n case \"ArrowUp\":\n case \"ArrowLeft\":\n target = cur - 1;\n break;\n case \"ArrowDown\":\n case \"ArrowRight\":\n target = cur + 1;\n break;\n case \"PageUp\":\n target = cur - 5;\n break;\n case \"PageDown\":\n target = cur + 5;\n break;\n case \"Home\":\n target = loop ? cur - mod(cur, n) : 0;\n break;\n case \"End\":\n target = loop ? cur + (n - 1 - mod(cur, n)) : n - 1;\n break;\n case \"Enter\":\n case \" \":\n e.preventDefault();\n selectCurrent();\n return;\n default:\n return;\n }\n e.preventDefault();\n inputSeen.current = true;\n const dest = restStep(target, n, loop);\n stopMotion();\n if (dest === cur) return;\n if (reduced) {\n posRef.current = dest;\n } else {\n tween.current = { from: posRef.current, to: dest, t0: performance.now() };\n }\n reportTo(dest);\n };\n\n const shown = n === 0 ? 0 : wrapIndex(isControlled ? value : index, n, loop);\n const current = n === 0 ? undefined : items[shown];\n\n const surface = tok(\"surface\", p.surface);\n const border = tok(\"border\", p.border);\n const borderStrong = tok(\"border-strong\", p.borderStrong);\n const text = tok(\"text\", p.text);\n const faint = tok(\"text-faint\", p.textFaint);\n const muted = tok(\"text-muted\", p.textMuted);\n const soft = tok(\"text-soft\", p.textSoft);\n const medium = tok(\"text-medium\", p.textMedium);\n const accent = tok(\"accent\", p.accent);\n const faceCentre = dark ? p.raised : p.surface;\n const faceEdge = dark ? \"#0d0d0d\" : p.raised;\n\n const renderRows = (inverted: boolean) =>\n Array.from({ length: rowCount }, (_, k) => {\n const idx = k % n;\n const copy = Math.floor(k / n);\n const isMid = copy === mid;\n const item = items[idx];\n return (\n