50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4cb1,"use client"; import { AnimatePresence, motion, useInView } from "motion/react"; import * as React from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type RatchetTone = "danger" | "neutral"; export interface RatchetHandle { /** Return to the idle state immediately (clears a latched confirmation). */ reset(): void; } type OwnedHandlers = | "children" | "onClick" | "onPointerDown" | "onPointerUp" | "onPointerMove" | "onPointerCancel" | "onLostPointerCapture" | "onKeyDown" | "onKeyUp" | "onBlur" | "onContextMenu"; export interface RatchetProps extends Omit, OwnedHandlers> { /** Idle label, shown to the right of the toothed ring. @default "Hold to confirm" */ children?: React.ReactNode; /** Label shown (and politely announced) after the hold completes. @default "Confirmed" */ confirmedLabel?: React.ReactNode; /** Milliseconds of continuous holding needed to fill all 24 teeth. @default 1200 */ holdMs?: number; /** Fires once when the ring completes. Never fires on an early release. */ onConfirm?: () => void; /** Stay in the confirmed state instead of resetting after 1.6s (call `ref.reset()` to clear). @default false */ latch?: boolean; /** Accent family: `danger` is rust, `neutral` is graphite. @default "danger" */ tone?: RatchetTone; /** Override the tone's accent color (any CSS color). */ accentColor?: string; /** Icon inside the well. @default a trash glyph (danger) or an up-arrow (neutral) */ icon?: React.ReactNode; /** Really disable the button. @default false */ disabled?: boolean; /** Imperative handle: `{ reset() }`. */ ref?: React.Ref; } const TEETH = 24; const DRAIN_SPEED = 2.6; // release ratchets down this many times faster than it went up const CONFIRM_DWELL = 1600; const TONE_ACCENT: Record = { danger: "#e2683f", // rust neutral: "#d4d4d8", // graphite (lit zinc on dark) }; // One tooth, drawn at 12 o'clock in a 100×100 box: a trapezoid wider at its root. const TOOTH_PATH = (() => { const cx = 50; const cy = 50; const pt = (r: number, deg: number) => { const a = ((deg - 90) * Math.PI) / 180; return `${(cx + r * Math.cos(a)).toFixed(3)} ${(cy + r * Math.sin(a)).toFixed(3)}`; }; const rRoot = 35; const rTip = 48.5; return `M${pt(rRoot, -5.4)} L${pt(rTip, -3.6)} L${pt(rTip, 3.6)} L${pt(rRoot, 5.4)} Z`; })(); function TrashGlyph() { return ( ); } function ArrowGlyph() { return ( ); } /** * Ratchet — a hold-to-confirm button for destructive or irreversible actions. * A toothed ring (24 teeth) wraps a circular icon well; pressing and holding * (pointer, or Space/Enter held — key auto-repeat ignored) advances the ring * tooth by tooth, each tooth landing with a tiny click-scale. Let go early * and it ratchets back down, faster than it went up. On completion the ring * flashes once, the icon morphs into a check, `onConfirm` fires and the label * swaps to `confirmedLabel` for 1.6s (or stays, with `latch`). A real * ` Press and hold to confirm {confirmed ? confirmedLabel : null} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@crucible","registryDependencies":["https://crucibleui.com/r/use-reduced-motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/buttons/ratchet/ratchet.tsx","content":"$52","type":"registry:ui","target":"components/crucible/ratchet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]