{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkbox-tally-notch", "title": "Checkbox Tally Notch", "description": "Checkbox group rendered as a carpenter's tally: each check carves a notch stroke into its row and adds a stroke to an aggregate tally cluster in the header, where every fifth stroke slashes diagonally across its group of four. Strokes draw on with a dashoffset sweep and retract on uncheck.", "dependencies": [], "files": [ { "path": "registry/core/checkbox-tally-notch/component.tsx", "content": "\"use client\";\n\nimport { useMemo, useRef, useState } from \"react\";\n\n// Checkbox group rendered as a carpenter's tally: each check carves a notch\n// stroke into the row and adds a stroke to an aggregate tally cluster, where\n// every fifth stroke slashes diagonally across its group of four. Strokes\n// draw on with a dashoffset sweep and retract on uncheck; per-stroke jitter\n// is seeded by index so the carving looks hand-cut but renders identically\n// every mount. Pure DOM+SVG, tokens only, reduced-motion snaps instantly.\n\nexport interface TallyNotchItem {\n id: string;\n label: string;\n hint?: string;\n}\n\nexport interface TallyNotchProps {\n /** the checkbox rows, in order */\n items: TallyNotchItem[];\n /** ids checked at mount */\n defaultChecked?: string[];\n /** called with the full list of checked ids after any toggle */\n onChange?: (checkedIds: string[]) => void;\n /** heading shown above the group; also the group's accessible name */\n label?: string;\n /** extra classes merged onto the rendered root element */\n className?: string;\n}\n\n// deterministic per-index jitter — mulberry32, so screenshots are stable\nfunction jitter(i: number) {\n let t = (i + 1) * 0x6d2b79f5;\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n const r = ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n return r * 2 - 1; // -1..1\n}\n\n// delay folded into the shorthand itself, not a separate transitionDelay\n// longhand — mixing transition (shorthand) and transitionDelay (longhand)\n// for the same property gives React two owners for one CSS value and it\n// warns (and can genuinely race) on rerender.\nconst STROKE_STYLE = (drawn: boolean, reduced: boolean, delayMs = 0) =>\n ({\n strokeDasharray: 1,\n strokeDashoffset: drawn ? 0 : 1,\n transition: reduced\n ? \"none\"\n : `stroke-dashoffset 260ms ${drawn ? \"cubic-bezier(0.22, 1, 0.36, 1)\" : \"cubic-bezier(0.55, 0, 0.55, 0.2)\"} ${delayMs}ms`,\n }) as const;\n\nfunction TallyCluster({\n count,\n max,\n reduced,\n}: {\n count: number;\n max: number;\n reduced: boolean;\n}) {\n const groups = Math.ceil(max / 5);\n const GW = 30; // group width\n const H = 26;\n const paths = useMemo(() => {\n const out: { d: string; idx: number }[] = [];\n for (let i = 0; i < max; i++) {\n const g = Math.floor(i / 5);\n const k = i % 5;\n const gx = g * (GW + 10);\n if (k < 4) {\n // vertical stroke with seeded lean and length variance\n const x = gx + 4 + k * 6 + jitter(i) * 1.2;\n const lean = jitter(i * 7 + 3) * 1.8;\n const top = 3 + jitter(i * 13 + 5) * 1.4;\n out.push({ d: `M ${x + lean} ${top} L ${x - lean} ${H - 3}`, idx: i });\n } else {\n // the fifth: a diagonal slash across the group of four\n const y1 = 6 + jitter(i) * 1.5;\n const y2 = H - 6 + jitter(i * 3) * 1.5;\n out.push({ d: `M ${gx - 1} ${y1} L ${gx + 23} ${y2}`, idx: i });\n }\n }\n return out;\n }, [max]);\n\n return (\n \n {paths.map((p) => (\n \n ))}\n \n );\n}\n\nfunction NotchMark({ checked, reduced }: { checked: boolean; reduced: boolean }) {\n return (\n \n \n {/* two-cut carved notch: down-stroke lands, then the long up-stroke */}\n \n \n \n );\n}\n\nexport function TallyNotch({\n items,\n defaultChecked = [],\n onChange,\n label = \"Tally\",\n className = \"\",\n}: TallyNotchProps) {\n const [checked, setChecked] = useState>(() => new Set(defaultChecked));\n const reduced = useRef(\n typeof window !== \"undefined\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n ).current;\n\n const toggle = (id: string) => {\n setChecked((prev) => {\n const next = new Set(prev);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n onChange?.(items.filter((it) => next.has(it.id)).map((it) => it.id));\n return next;\n });\n };\n\n return (\n \n
\n {label}\n
\n \n \n {checked.size}/{items.length}\n \n
\n
\n
\n {items.map((it) => {\n const isChecked = checked.has(it.id);\n return (\n toggle(it.id)}\n className={[\n \"group flex cursor-pointer items-center gap-3 border-b border-border px-4 py-3 text-left last:border-b-0\",\n \"transition-colors duration-150 hover:bg-border/40\",\n \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ns-accent\",\n ].join(\" \")}\n >\n \n \n \n {it.label}\n \n {it.hint ? (\n {it.hint}\n ) : null}\n \n \n );\n })}\n
\n \n );\n}\n", "type": "registry:ui", "target": "components/ui/checkbox-tally-notch.tsx" } ], "cssVars": { "theme": { "color-ns-muted": "var(--ns-muted)", "color-ns-accent": "var(--ns-accent)", "color-surface": "var(--surface)" }, "light": { "ns-muted": "#4d4d4d", "ns-accent": "#006bff", "surface": "#fafafa" }, "dark": { "ns-muted": "#8f8f8f", "surface": "#171717" } }, "meta": { "collection": "core", "tags": [ "checkbox", "checklist", "form", "svg", "micro-interaction" ], "instruction": "Build a checkbox group styled as a carved tally board. STRUCTURE: a bordered bg-surface card (role=group with aria-label from the label prop) whose header carries the group label, an SVG tally cluster, and an aria-live 'checked/total' mono counter; below, one full-width row per item, each a real