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[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"] 54: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"] 55:T3d5d,// Hairline UI · onboarding-checklist · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * ONBOARDING CHECKLIST: the first five things, ticked off * * next the first open task is open in place: what it is, * why it matters and the one button that does it * doing its button spins while your action runs, then a * check draws itself on the row, a strike draws * through the label and the next task opens * progress a ring fills and "2 of 5" rolls with every tick * pick open any task by its row, done or not * folded the whole card folds to its header (ring and * count) and opens again * done the list folds away, the ring fills and becomes a * check with a small burst, and the title morphs to * "You're all set" * * Drive it from your data (done per task) or let it keep its own. * ───────────────────────────────────────────────────────── */ export interface OnboardingTask { id: string; title: string; description?: string; /** The one button that does the task. Return a promise to show progress; it's ticked off when it resolves. */ action?: { label: string; /** Shown while a promise runs, e.g. "Connecting". */ pendingLabel?: string; onClick?: () => void | Promise; href?: string }; /** Controlled: whether it's done. Leave out to let the checklist track it. */ done?: boolean; } export interface OnboardingChecklistProps extends React.HTMLAttributes { tasks: OnboardingTask[]; title?: string; doneTitle?: string; doneDescription?: string; /** Called when a task is ticked off (its action resolved). */ onTaskComplete?: (id: string) => void; /** Called with "Hide" once everything is done. */ onDismiss?: () => void; defaultCollapsed?: boolean; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 240ms ${EASE}, transform 360ms ${EASE}, filter 240ms ${EASE}`, }); function Check({ drawn, reduced, width = 2, delay = 80 }: { drawn: boolean; reduced: boolean; width?: number; delay?: number }) { return ( ); } /** The ring that fills with progress, and becomes a check with a small burst when it's full. */ function Ring({ value, complete, reduced }: { value: number; complete: boolean; reduced: boolean }) { const c = 2 * Math.PI * 9; const burstRef = React.useRef(null); const first = React.useRef(true); React.useEffect(() => { if (first.current) { first.current = false; return; } if (!complete || reduced) return; const dots = burstRef.current?.children; if (!dots) return; Array.from(dots).forEach((dot, i) => { const angle = (i / dots.length) * Math.PI * 2; const dist = 20 + (i % 2) * 6; (dot as HTMLElement).animate( [ { transform: "translate(0,0) scale(1)", opacity: 0 }, { opacity: 1, offset: 0.2 }, { transform: `translate(${Math.cos(angle) * dist}px, ${Math.sin(angle) * dist}px) scale(0.4)`, opacity: 0 }, ], { duration: 700, easing: EASE, delay: 260 } ); }); }, [complete, reduced]); return ( {Array.from({ length: 10 }, (_, i) => ( ))} ); } export function OnboardingChecklist({ tasks, title = "Get started", doneTitle = "You’re all set", doneDescription = "Everything’s in place. Here’s to the first busy Saturday.", onTaskComplete, onDismiss, defaultCollapsed = false, className = "", ...props }: OnboardingChecklistProps) { const reduced = useReducedMotion(); const id = React.useId(); const [own, setOwn] = React.useState>(() => new Set()); const [running, setRunning] = React.useState(null); const [collapsed, setCollapsed] = React.useState(defaultCollapsed); const isDone = (t: OnboardingTask) => t.done ?? own.has(t.id); const firstOpen = tasks.find((t) => !isDone(t))?.id ?? null; const [picked, setPicked] = React.useState(null); const openId = picked ?? firstOpen; const count = tasks.filter(isDone).length; const complete = count === tasks.length && tasks.length > 0; // When the open task gets done, the next open one takes over (unless someone picked a row since). const lastFirst = React.useRef(firstOpen); React.useEffect(() => { if (lastFirst.current !== firstOpen) { lastFirst.current = firstOpen; setPicked(null); } }, [firstOpen]); const run = async (task: OnboardingTask) => { if (!task.action || running) return; const result = task.action.onClick?.(); if (task.action.href && !task.action.onClick) { window.location.assign(task.action.href); return; } if (result instanceof Promise) { setRunning(task.id); try { await result; } catch { setRunning(null); return; } setRunning(null); } if (task.done === undefined) setOwn((s) => new Set(s).add(task.id)); onTaskComplete?.(task.id); }; return (

{complete ? doneTitle : title}

of {tasks.length} done

{complete ? doneTitle : `${count} of ${tasks.length} done`} {complete && onDismiss ? ( ) : ( )}

{/* Done: the list folds away and a line says so. */}

{doneDescription}

{task.description &&
{task.description}
} {task.action && !done && ( )}

); } 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":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L52",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","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":["$","$L53",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L54",null,{"files":[{"path":"registry/onboarding-checklist.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]