51: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"] 52:I[544296,["/_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"],"ItemStyles"] 53:I[8513,["/_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"],"ScrollArea"] 54:I[8513,["/_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"],"ScrollBar"] 55:I[34002,["/_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"],"CodeEditor"] 56: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"] 57:T277d,"use client"; import { useEffect, useId, useMemo, useRef, useState, type ComponentProps, type CSSProperties, type Ref, } from "react"; import { useInView } from "@/registry/default/hooks/use-in-view"; import { cn } from "@/registry/default/lib/utils"; // Strokes speed up and slow down like a pen. const PEN = "cubic-bezier(0.65, 0, 0.35, 1)"; // A hair past a full length, so round caps leave no dot before drawing starts. const UNDRAWN = 1.01; function prefersReducedMotion() { return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true; } function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } interface SignatureProps extends Omit, "children"> { /** SVG path data, drawn in this order. Use the same coordinates as `viewBox`. */ paths: string[]; /** * "in-view" draws once when the drawing scrolls into view. "scroll" draws * with the scroll position, on CSS scroll-driven animations; browsers * without them show it finished. Scroll follows the nearest scroll * container: clip ancestors with `overflow-clip`, as `overflow-hidden` makes * one that never scrolls. "manual" follows `progress` and nothing else, * for drawings driven by your own timeline, a slider or a scroll hook. */ trigger?: "in-view" | "scroll" | "manual"; /** * Manual: how much is drawn, from 0 to 1. Strokes are drawn in order, each * taking a share of the progress proportional to its length. */ progress?: number; /** In-view: total drawing time in ms; longer strokes get a bigger share. */ duration?: number; /** In-view: wait before the first stroke, in ms. */ delay?: number; /** Scroll: the CSS `animation-range` the drawing spans. */ scrollRange?: string; /** * Width of the pen. With `ink`, 0 draws the fill alone, without the * outline strokes. */ strokeWidth?: number; /** * Fill the shapes as the pen passes, like ink soaking into letters. For * closed outlines such as glyphs; leave it off for open lines and routes. */ ink?: boolean; /** Ink: how wide it spreads behind the pen, in viewBox units. */ inkWidth?: number; } /** * Draws SVG strokes as if by hand: a signature, a route on a map, an * underline. Strokes use the current text colour; with `ink`, closed * shapes fill in behind the pen. Give it an `aria-label` when it carries * meaning; without one it is hidden from screen readers. With * `prefers-reduced-motion` it appears finished. To write any text in a * font of your choice, see TextSignature. * * In-view drawings start blank, so they need JavaScript to show up. * * With `trigger="manual"` the drawing follows `progress` and nothing else: * no observer and no transition, and `prefers-reduced-motion` does not * finish it for you, as the parent is in charge. Pass 1 when it should * appear finished, e.g. when your own timeline is off for reduced motion. * * Outlines with holes (the counters of "o" or "B") fill correctly with * `fillRule="evenodd"` on the component: the ink inherits it from the svg. * * @example * * * @example * // Driven by your own progress, from 0 to 1. * */ function Signature({ paths, trigger = "in-view", duration = 2400, delay = 0, progress = 0, scrollRange = "entry 25% cover 50%", strokeWidth = 2, ink = false, inkWidth = 14, className, style, ref, "aria-label": label, ...props }: SignatureProps) { const id = useId().replace(/[^\w-]/g, ""); const timeline = `--signature-${id}`; const maskId = `signature-ink-${id}`; // With ink and no pen, only the fill shows: the outline strokes are left out. const showStrokes = !(ink && strokeWidth === 0); // The paths measured for timing: the strokes, or the ink mask without them. const measured = useRef<(SVGPathElement | null)[]>([]); const measure = () => paths.map((_, index) => { const path = measured.current[index]; return typeof path?.getTotalLength === "function" ? path.getTotalLength() : 1; }); const [drawing, setDrawing] = useState<{ lengths: number[]; instant: boolean } | null>(null); const [observe] = useInView({ once: true, amount: 0.4, onChange: (inView) => { if (!inView) return; setDrawing({ lengths: measure(), instant: prefersReducedMotion() }); }, }); // Manual: lengths are measured once mounted; until then every stroke gets an equal share. const pathsKey = paths.join("\n"); const [manualLengths, setManualLengths] = useState<{ key: string; lengths: number[] } | null>( null ); useEffect(() => { if (trigger !== "manual") return; // Measured before the next paint, once layout has the paths. const frame = requestAnimationFrame(() => setManualLengths({ key: pathsKey, lengths: measure() }) ); return () => cancelAnimationFrame(frame); // `measure` reads the current paths, which `pathsKey` stands for. // eslint-disable-next-line react-hooks/exhaustive-deps }, [trigger, pathsKey, showStrokes]); const mergedRef = useMemo( () => mergeRefs(ref, trigger === "in-view" ? observe : undefined), [ref, observe, trigger] ); // Each stroke gets a share of `duration` proportional to its length, and // starts when the previous one ends. const total = drawing?.lengths.reduce((sum, length) => sum + length, 0) || 1; const timings = (drawing?.lengths ?? []).map((length) => (length / total) * duration); const waits = timings.map( (_, index) => delay + timings.slice(0, index).reduce((sum, share) => sum + share, 0) ); // Manual: where each stroke starts and ends along the whole drawing, from 0 to 1. const manualShares = (() => { if (trigger !== "manual") return []; const lengths = manualLengths?.key === pathsKey && manualLengths.lengths.length === paths.length ? manualLengths.lengths : paths.map(() => 1); const sum = lengths.reduce((a, b) => a + b, 0) || 1; let start = 0; return lengths.map((length) => { const share = { start: start / sum, size: length / sum }; start += length; return share; }); })(); const drawn = Math.min(Math.max(Number.isFinite(progress) ? progress : 0, 0), 1); const drawClass = trigger === "scroll" ? "supports-[animation-timeline:view()]:animate-signature-draw motion-reduce:!animate-none" : undefined; const strokeStyle = (index: number): CSSProperties => { if (trigger === "manual") { const share = manualShares[index]; const local = share ? share.size > 0 ? Math.min(Math.max((drawn - share.start) / share.size, 0), 1) : drawn >= share.start ? 1 : 0 : 0; return { strokeDasharray: "1 2", strokeDashoffset: local <= 0 ? UNDRAWN : 1 - local }; } if (trigger === "scroll") { return { strokeDasharray: "1 2", strokeDashoffset: 0, animationTimeline: timeline, animationRange: scrollRange, }; } if (!drawing) return { strokeDasharray: "1 2", strokeDashoffset: UNDRAWN }; return { strokeDasharray: "1 2", strokeDashoffset: 0, transition: drawing.instant ? undefined : `stroke-dashoffset ${timings[index] ?? 0}ms ${PEN} ${waits[index] ?? 0}ms`, }; }; return ( ); } export { Signature, type SignatureProps }; 50:["$","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":[null,["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-in-view"]}]]}],["$","$L52",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L53",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","animate-signature-draw",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","animate-signature-draw",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"signature-draw linear both"}]]}]]}],["$","$L54",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L55",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes signature-draw {\n\tfrom {\n\t\tstroke-dashoffset: 1.01;\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L56",null,{"files":[{"path":"registry/default/ui/signature.tsx","content":"$57","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]