{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "SpringCheck-JS-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.jsx", "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from 'motion/react';\nimport { Tick02Icon } from '@hugeicons/core-free-icons';\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 = { left: 'left center', center: 'center', right: 'right center', none: 'left center' };\n\nconst clamp01 = value => Math.min(1, Math.max(0, value));\nconst zetaOf = bounce => (bounce <= 0 ? 1 : -Math.log(bounce) / Math.sqrt(Math.PI ** 2 + Math.log(bounce) ** 2));\n\nconst readings = (t, doneOpacity, strikeLag) => {\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 default function SpringCheck({\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 => {\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 = r.tick;\n if (wordRef.current) wordRef.current.style.opacity = 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 => {\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 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" } ], "registryDependencies": [], "dependencies": [ "motion@^12.23.12", "@hugeicons/core-free-icons@^4.3.3" ] }