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

\n {complete ? doneTitle : title}\n

\n

\n of {tasks.length} done\n

\n
\n \n {complete ? doneTitle : `${count} of ${tasks.length} done`}\n \n {complete && onDismiss ? (\n \n Hide\n \n ) : (\n setCollapsed((c) => !c)}\n className={`flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${FOCUS}`}\n >\n \n \n \n \n )}\n
\n\n {/* Done: the list folds away and a line says so. */}\n \n
\n

{doneDescription}

\n
\n \n\n \n
\n
    \n {tasks.map((task, i) => {\n const done = isDone(task);\n const open = task.id === openId;\n const busy = running === task.id;\n return (\n
  1. \n setPicked(open ? (task.id === firstOpen ? \"__none__\" : null) : task.id)}\n className={`flex w-full items-center gap-3 rounded-[14px] px-2.5 py-2.5 text-left ${FOCUS}`}\n >\n {/* An open ring that becomes a filled, drawn check. */}\n \n \n \n \n \n \n \n {/* The strike draws itself through the label once it's done. */}\n \n {task.title}\n \n {done ? \", done\" : \"\"}\n \n \n \n
    \n
    \n {task.description &&

    {task.description}

    }\n {task.action && !done && (\n run(task)}\n aria-busy={busy || undefined}\n className={`mt-3 inline-flex h-8 items-center rounded-full bg-primary px-3.5 text-[12.5px] font-medium text-primary-foreground transition-[background-color,transform] duration-200 hover:bg-primary/90 active:scale-[0.97] ${FOCUS}`}\n >\n \n \n \n {busy ? (task.action.pendingLabel ?? \"Working on it\") : task.action.label}\n \n )}\n
    \n
    \n
\n \n );\n })}\n \n \n \n
\n );\n}\n"}],"css":{"@keyframes ui-fade-in":{"from":{"opacity":"0"},"to":{"opacity":"1"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/onboarding-checklist"}