4e: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"] 4f: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"] 50:T1acb,import { useState } from 'react' import { Controller, useForm } from 'react-hook-form' import { Card } from '../surface' import { Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Field, Input } from '../Input' import { RadioGroup } from '../radiogroup' import { Button } from '../Button' import { Progress } from '../progress' const STEPS = ['Account', 'Workspace', 'Preferences'] const PLAN_OPTIONS = [ { value: 'solo', label: 'Just me' }, { value: 'team', label: 'With a team' }, { value: 'org', label: 'Whole organization' }, ] interface OnboardingValues { name: string workspace: string plan: string } /** An example onboarding wizard: a progress bar, per-step forms, and * back/next navigation — each step's answer is held in state that outlives * the step, so paging back and forth (or finishing) never loses what was * typed. The finish screen recaps every answer to prove it. */ export function OnboardingBlock() { const [step, setStep] = useState(0) const [done, setDone] = useState(false) const { control, clearErrors, reset: resetForm, trigger, watch, formState: { errors }, } = useForm({ defaultValues: { name: '', workspace: '', plan: 'solo' }, mode: 'onSubmit', reValidateMode: 'onChange', }) const { name, workspace, plan } = watch() const pct = done ? 100 : ((step + 1) / STEPS.length) * 100 async function goNext() { const field = step === 0 ? 'name' : step === 1 ? 'workspace' : undefined if (field && !(await trigger(field, { shouldFocus: true }))) return if (step === STEPS.length - 1) setDone(true) else setStep((s) => s + 1) } function goBack() { clearErrors() setStep((s) => Math.max(0, s - 1)) } function reset() { setStep(0) resetForm() setDone(false) } return (

{done ? 'All set' : `Step ${step + 1} of ${STEPS.length} · ${STEPS[step]}`} {done ? ( You're all set, {name} Nothing you typed on the way here was lost — here's what we kept. Workspace {workspace} Plan {PLAN_OPTIONS.find((o) => o.value === plan)?.label} ) : (

{ event.preventDefault() void goNext() }} noValidate > {step === 0 && ( Welcome to 1st-Pouf {(id, describedBy) => ( value.trim().length > 0 || 'Tell us what to call you.' }} render={({ field }) => ( )} /> )} )} {step === 1 && ( Name your workspace {(id, describedBy) => ( value.trim().length > 0 || 'Pick a name for your workspace.', }} render={({ field }) => ( )} /> )} )} {step === 2 && ( How will you use it? ( )} /> )}

{step < STEPS.length - 1 ? ( ) : ( )}

)} {done ? ( ) : null}

) } 4d:["$","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","react-hook-form",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","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":"react-hook-form"}]]}]}]]}],["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/progress.json","https://1st-pouf.worksonmy.dev/r/radio-group.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/onboarding.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/onboarding.tsx"}],"className":"h-[70svh] min-h-80"}]]}]