{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "onboarding-flow", "type": "registry:block", "title": "Onboarding flow", "description": "Organizes account setup, file import, and completion checklist into a successful first-workspace path.", "dependencies": [ "motion" ], "registryDependencies": [ "https://motion-lexicon.pages.dev/r/drawer.json", "https://motion-lexicon.pages.dev/r/file-dropzone.json", "https://motion-lexicon.pages.dev/r/multi-step-form.json", "https://motion-lexicon.pages.dev/r/onboarding-checklist.json", "https://motion-lexicon.pages.dev/r/progress-bar.json", "https://motion-lexicon.pages.dev/r/tabs.json" ], "categories": [ "page-block" ], "docs": "https://motion-lexicon.pages.dev/en/blocks/onboarding-flow/", "meta": { "engines": [ "motion" ], "runtimeCost": "medium", "signature": "Form, import, and checklist completion progress continuously toward the first successful state.", "sceneFamily": "product-mono", "primaryState": "In-progress account setup and import steps", "componentIds": [ "drawer", "file-dropzone", "multi-step-form", "onboarding-checklist", "progress-bar", "tabs" ] }, "files": [ { "path": "src/registry/blocks/onboarding-flow.tsx", "type": "registry:component", "target": "components/motion-lexicon/blocks/onboarding-flow.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { MultiStepForm } from \"@/components/motion-lexicon/multi-step-form\";\nimport { OnboardingChecklist } from \"@/components/motion-lexicon/onboarding-checklist\";\nimport { FileDropzone } from \"@/components/motion-lexicon/file-dropzone\";\nimport { Drawer } from \"@/components/motion-lexicon/drawer\";\nimport { ProgressBar } from \"@/components/motion-lexicon/progress-bar\";\nimport { Tabs } from \"@/components/motion-lexicon/tabs\";\n\ntype Locale = \"zh\" | \"en\";\nexport type OnboardingFlowBlockProps = { locale?: Locale; className?: string };\n\nexport function OnboardingFlowBlock({ locale = \"en\", className = \"\" }: OnboardingFlowBlockProps) {\n const copy = locale === \"zh\" ? zh : en;\n const reduced = useReducedMotion() === true;\n const [workspace, setWorkspace] = useState(\"Northstar\");\n const [files, setFiles] = useState([]);\n const [complete, setComplete] = useState(false);\n const [helpOpen, setHelpOpen] = useState(false);\n const steps = [{ id: \"workspace\", title: copy.stepWorkspace, description: copy.stepWorkspaceCopy, content: , validate: () => workspace.trim() ? null : copy.workspaceError }, { id: \"import\", title: copy.stepImport, description: copy.stepImportCopy, content: setFiles(next.map((file) => file.name))} /> }, { id: \"invite\", title: copy.stepInvite, description: copy.stepInviteCopy, content:
TEAM
Mina · Editor{copy.ready}
Noah · Producer{copy.ready}
}];\n const progress = complete ? 100 : files.length ? 66 : workspace.trim() ? 33 : 0;\n return (\n
\n
\n AArc\n {complete ? copy.complete : copy.setup}\n \n
\n
\n
{copy.eyebrow}

{copy.title}

{copy.intro}

new Promise((resolve) => { window.setTimeout(() => { setComplete(true); resolve(); }, reduced ? 0 : 350); })} />
{files.length ?

{copy.imported}: {files.join(\", \")}

: null}
\n \n
\n

{copy.contact}

\n
\n );\n}\nconst en = { setup: \"SETUP\", complete: \"SETUP COMPLETE\", restart: \"Restart\", eyebrow: \"Welcome to Arc\", title: \"Make your first workspace feel like yours.\", intro: \"Name the space, bring in the working material, and invite the people who will carry the first release with you.\", stepWorkspace: \"Name your workspace\", stepWorkspaceCopy: \"Use the team or project name people already recognize.\", workspace: \"Workspace name\", workspaceError: \"Add a workspace name to continue.\", stepImport: \"Bring in a working file\", stepImportCopy: \"A brief, a note, or the first data export is enough to begin.\", importLabel: \"Drop a brief or browse files\", stepInvite: \"Confirm the first collaborators\", stepInviteCopy: \"You can add more people after the first shared space is ready.\", ready: \"Ready\", finish: \"Create workspace\", imported: \"Ready to import\", checklist: \"Your first session\", checkWorkspace: \"Name the workspace\", unnamed: \"Choose a name\", checkImport: \"Bring in a working file\", checkImportCopy: \"Optional for now\", checkInvite: \"Confirm collaborators\", checkInviteCopy: \"2 people ready\", doneTitle: \"Your workspace is ready.\", doneCopy: \"Northstar has a home, a starting file and its first collaborators. Open the workspace when you are ready to make the next decision.\", help: \"NEED A HAND?\", helpCopy: \"Keep this setup lightweight. You can revisit files, roles and notifications later.\", contact: \"Contact support\" };\nconst zh = { setup: \"设置\", complete: \"设置完成\", restart: \"重新开始\", eyebrow: \"欢迎来到 Arc\", title: \"让第一个工作区从一开始就属于你。\", intro: \"为它命名，带入正在使用的材料，再邀请会和你共同推进首个版本的人。\", stepWorkspace: \"命名工作区\", stepWorkspaceCopy: \"使用团队已经熟悉的项目或组织名称。\", workspace: \"工作区名称\", workspaceError: \"请先填写工作区名称。\", stepImport: \"导入工作文件\", stepImportCopy: \"一份简报、一条笔记或第一份数据导出都足够开始。\", importLabel: \"拖入简报或浏览文件\", stepInvite: \"确认首批协作者\", stepInviteCopy: \"首个共享空间准备好后，还可以继续添加成员。\", ready: \"已就绪\", finish: \"创建工作区\", imported: \"准备导入\", checklist: \"你的第一次会话\", checkWorkspace: \"命名工作区\", unnamed: \"选择一个名称\", checkImport: \"导入工作文件\", checkImportCopy: \"暂时可选\", checkInvite: \"确认协作者\", checkInviteCopy: \"2 人已就绪\", doneTitle: \"工作区已准备好。\", doneCopy: \"Northstar 已拥有一个主页、一个起始文件和最初的协作者。准备好做下一个决定时，打开工作区即可。\", help: \"需要帮助？\", helpCopy: \"保持这次设置足够轻量。文件、角色和通知都可以稍后再调整。\", contact: \"联系支持\" };\n" } ] }