{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "SpringCheck-TS-TW", "title": "SpringCheck", "description": "Checkbox row where one spring fills the box, draws the tick and strikes through the label.", "type": "registry:component", "files": [ { "type": "registry:component", "path": "SpringCheck/SpringCheck.tsx", "content": "'use client';\n\nimport React, { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';\nimport { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from 'motion/react';\nimport { Tick02Icon } from '@hugeicons/core-free-icons';\n\nexport type StrikeSide = 'left' | 'center' | 'right' | 'none';\n\nexport interface SpringCheckProps {\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 = String(Tick02Icon[0][1].d);\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\nconst SpringCheck: React.FC = ({\n label = 'Ship the build',\n checked,\n defaultChecked = false,\n onChange,\n disabled = false,\n color = '#ffffff',\n fillColor = '#ffffff',\n checkColor = '#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}) => {\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 cfg.current = { doneOpacity, strikeLag };\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 = (e: React.PointerEvent) => {\n if (e.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 r = readings(t.get(), 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 '--sc-ink': color,\n '--sc-fill': fillColor,\n '--sc-check': checkColor,\n '--sc-box': `${boxSize}px`,\n '--sc-radius': `${boxRadius}px`,\n '--sc-font': `${fontSize}px`,\n '--sc-ring': `${ring}px`,\n '--sc-gap': `${gap}px`,\n '--sc-row': `${Math.max(44, boxSize + 16)}px`,\n '--sc-rule': `${ruleHeight}px`,\n '--sc-origin': ORIGIN[strike] || ORIGIN.left,\n '--sc-ease-out': 'cubic-bezier(0.23, 1, 0.32, 1)'\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 default SpringCheck;\n" } ], "registryDependencies": [], "dependencies": [ "motion@^12.23.12", "@hugeicons/core-free-icons@^4.3.3" ] }