{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bounce-checkbox", "title": "Bounce Checkbox", "author": "henriquegpb ", "description": "A checkbox whose fill springs out past the box with a little swell, draws its tick, then strikes the label through and dims it.", "dependencies": [ "motion" ], "files": [ { "path": "registry/microkit/bounce-checkbox.tsx", "content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, PointerEvent, ReactNode } from \"react\";\nimport { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from \"motion/react\";\n\nexport type StrikeSide = \"left\" | \"center\" | \"right\" | \"none\";\n\nexport type BounceCheckboxProps = {\n label?: ReactNode;\n checked?: boolean;\n defaultChecked?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n color?: string;\n fillColor?: string;\n checkColor?: string;\n boxSize?: number;\n boxRadius?: number;\n fontSize?: number;\n bounce?: number;\n strikeLag?: number;\n doneOpacity?: number;\n strike?: StrikeSide;\n ariaLabel?: string;\n className?: string;\n};\n\nconst VISUAL_DURATION = 0.2;\nconst RULE_END = 0.84;\nconst SWELL = 0.35;\nconst TICK_PATH = \"M5 14L8.5 17.5L19 6.5\";\nconst ORIGIN: Record = {\n left: \"left center\",\n center: \"center\",\n right: \"right center\",\n none: \"left center\",\n};\n\nconst clamp01 = (value: number) => Math.min(1, Math.max(0, value));\nconst zetaOf = (bounce: number) =>\n bounce <= 0 ? 1 : -Math.log(bounce) / Math.sqrt(Math.PI ** 2 + Math.log(bounce) ** 2);\n\nconst readings = (t: number, doneOpacity: number, strikeLag: number) => {\n const held = clamp01(t);\n return {\n fill: `scale(${Math.max(t, 0)})`,\n box: `scale(${1 + SWELL * Math.max(0, t - 1)})`,\n tick: 1 - held,\n word: 1 - (1 - doneOpacity) * held,\n rule: `scaleX(${clamp01((held - strikeLag) / (RULE_END - strikeLag))})`,\n };\n};\n\nexport function BounceCheckbox({\n label = \"Write the changelog\",\n checked,\n defaultChecked = false,\n onChange,\n disabled = false,\n color = \"light-dark(#14181e, #f2f4f6)\",\n fillColor = \"light-dark(#14181e, #f2f4f6)\",\n checkColor = \"light-dark(#ffffff, #0b0b0f)\",\n boxSize = 28,\n boxRadius = 9,\n fontSize = 18,\n bounce = 0.2,\n strikeLag = 0.12,\n doneOpacity = 0.42,\n strike = \"left\",\n ariaLabel,\n className = \"\",\n}: BounceCheckboxProps) {\n const controlled = checked !== undefined;\n const [inner, setInner] = useState(defaultChecked);\n const on = controlled ? checked : inner;\n const reduce = useReducedMotion();\n\n const t = useMotionValue(on ? 1 : 0);\n const viaPointer = useRef(false);\n const instant = useRef(false);\n const rowRef = useRef(null);\n const boxRef = useRef(null);\n const fillRef = useRef(null);\n const tickRef = useRef(null);\n const wordRef = useRef(null);\n const ruleRef = useRef(null);\n const cfg = useRef({ doneOpacity, strikeLag });\n\n useLayoutEffect(() => {\n cfg.current = { doneOpacity, strikeLag };\n });\n\n const write = (value: number) => {\n const r = readings(value, cfg.current.doneOpacity, cfg.current.strikeLag);\n if (fillRef.current) fillRef.current.style.transform = r.fill;\n if (boxRef.current) boxRef.current.style.transform = r.box;\n if (tickRef.current) tickRef.current.style.strokeDashoffset = String(r.tick);\n if (wordRef.current) wordRef.current.style.opacity = String(r.word);\n if (ruleRef.current) ruleRef.current.style.transform = r.rule;\n };\n useMotionValueEvent(t, \"change\", write);\n useLayoutEffect(() => {\n write(t.get());\n });\n\n useEffect(() => {\n const target = on ? 1 : 0;\n if (reduce || instant.current) {\n instant.current = false;\n t.jump(target);\n return undefined;\n }\n if (t.get() === target && t.getVelocity() === 0) return undefined;\n const controls = animate(t, target, {\n type: \"spring\",\n visualDuration: VISUAL_DURATION,\n bounce: 1 - zetaOf(bounce),\n });\n return () => controls.stop();\n }, [on, reduce, bounce, t]);\n\n const handlePointerDown = (event: PointerEvent) => {\n if (event.button !== 0 || disabled) return;\n viaPointer.current = true;\n if (!reduce && rowRef.current) rowRef.current.dataset.pressed = \"\";\n };\n const handlePointerUp = () => {\n if (rowRef.current) delete rowRef.current.dataset.pressed;\n };\n const handlePointerCancel = () => {\n viaPointer.current = false;\n handlePointerUp();\n };\n const toggle = () => {\n if (disabled) return;\n instant.current = !viaPointer.current;\n viaPointer.current = false;\n const next = !on;\n if (!controlled) setInner(next);\n onChange?.(next);\n };\n\n const initial = readings(on ? 1 : 0, doneOpacity, strikeLag);\n const ring = boxSize >= 24 ? 2 : 1.5;\n const gap = Math.min(16, Math.max(8, Math.round(boxSize * 0.43)));\n const ruleHeight = Math.max(1.5, Math.round(fontSize / 6) / 2);\n\n const cssVars = {\n \"--bc-ink\": color,\n \"--bc-fill\": fillColor,\n \"--bc-check\": checkColor,\n \"--bc-box\": `${boxSize}px`,\n \"--bc-radius\": `${boxRadius}px`,\n \"--bc-font\": `${fontSize}px`,\n \"--bc-ring\": `${ring}px`,\n \"--bc-gap\": `${gap}px`,\n \"--bc-row\": `${Math.max(44, boxSize + 16)}px`,\n \"--bc-rule\": `${ruleHeight}px`,\n \"--bc-origin\": ORIGIN[strike] || ORIGIN.left,\n } as CSSProperties;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n {label}\n \n {strike !== \"none\" ? (\n \n ) : null}\n \n \n );\n}\n\nexport function BounceCheckboxList() {\n return (\n
\n \n \n
\n );\n}\n", "type": "registry:component", "target": "@components/microkit/bounce-checkbox.tsx" } ], "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/bounce-checkbox", "categories": [ "input", "click" ], "type": "registry:component" }