{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "org-setup",
  "type": "registry:component",
  "title": "Organization Setup",
  "description": "Workspace, branding, and members setup for a new SaaS tenant.",
  "author": "Stepperize",
  "dependencies": [
    "@stepperize/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "radio-group"
  ],
  "categories": [
    "onboarding"
  ],
  "meta": {
    "capabilities": [
      "navigation"
    ],
    "level": "intermediate",
    "tags": [
      "saas",
      "workspace",
      "tenant",
      "branding"
    ]
  },
  "files": [
    {
      "path": "components/stepperize/org-setup.tsx",
      "type": "registry:component",
      "target": "components/stepperize/org-setup.tsx",
      "content": "\"use client\";\n\nimport { defineStepper } from \"@stepperize/react\";\nimport { Building2, Mail, UserPlus } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\n\nconst { Stepper } = defineStepper([\n\t{ id: \"workspace\", title: \"Workspace\" },\n\t{ id: \"branding\", title: \"Branding\" },\n\t{ id: \"members\", title: \"Members\" },\n]);\n\nconst SWATCHES = [\n\t\"oklch(54.6% 0.2152 262.9)\",\n\t\"oklch(69.6% 0.1491 162.5)\",\n\t\"oklch(76.9% 0.1647 70.08)\",\n\t\"oklch(63.7% 0.2078 25.33)\",\n\t\"oklch(58.5% 0.2041 277.1)\",\n];\n\nexport function OrgSetupBlock() {\n\tconst [created, setCreated] = useState(false);\n\n\treturn (\n\t\t<Stepper.Root\n\t\t\tlinear\n\t\t\tclassName=\"w-full max-w-md rounded-xl border bg-background p-6 shadow-sm\"\n\t\t>\n\t\t\t{({ stepper }) => (\n\t\t\t\t<>\n\t\t\t\t\t<Stepper.List className=\"flex gap-1 rounded-lg bg-muted p-1\">\n\t\t\t\t\t\t<Stepper.Items>\n\t\t\t\t\t\t\t{(step) => (\n\t\t\t\t\t\t\t\t<Stepper.Item key={step.id} step={step.id} className=\"flex-1\">\n\t\t\t\t\t\t\t\t\t<Stepper.Trigger className=\"w-full rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors disabled:cursor-not-allowed data-[status=active]:bg-background data-[status=active]:text-foreground data-[status=active]:shadow-sm data-[status=previous]:text-foreground\">\n\t\t\t\t\t\t\t\t\t\t<Stepper.Title />\n\t\t\t\t\t\t\t\t\t</Stepper.Trigger>\n\t\t\t\t\t\t\t\t</Stepper.Item>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Stepper.Items>\n\t\t\t\t\t</Stepper.List>\n\n\t\t\t\t\t<div className=\"mt-6 min-h-32\">\n\t\t\t\t\t\t<Stepper.Content step=\"workspace\" className=\"space-y-3\">\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t<span className=\"grid size-11 place-items-center rounded-lg bg-primary/10 text-primary\">\n\t\t\t\t\t\t\t\t\t<Building2 className=\"size-5\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\tGive your organization a name.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Input placeholder=\"Acme Inc.\" />\n\t\t\t\t\t\t</Stepper.Content>\n\n\t\t\t\t\t\t<Stepper.Content step=\"branding\" className=\"space-y-3\">\n\t\t\t\t\t\t\t<p className=\"text-sm font-medium\">Accent color</p>\n\t\t\t\t\t\t\t<RadioGroup defaultValue={SWATCHES[0]} className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t{SWATCHES.map((color) => (\n\t\t\t\t\t\t\t\t\t<RadioGroupItem\n\t\t\t\t\t\t\t\t\t\tkey={color}\n\t\t\t\t\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\t\t\t\t\taria-label={color}\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-8 rounded-full border-0 ring-offset-2 ring-offset-background data-checked:bg-(--swatch) data-checked:ring-2 data-checked:ring-foreground\"\n\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\"--swatch\": color,\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</RadioGroup>\n\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\tUsed across buttons, links, and highlights.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</Stepper.Content>\n\n\t\t\t\t\t\t<Stepper.Content step=\"members\" className=\"space-y-2\">\n\t\t\t\t\t\t\t{created ? (\n\t\t\t\t\t\t\t\t<div className=\"rounded-lg border bg-chart-2/10 p-4 text-sm\">\n\t\t\t\t\t\t\t\t\t<p className=\"font-medium\">Organization created</p>\n\t\t\t\t\t\t\t\t\t<p className=\"mt-1 text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tYour workspace, branding, and member setup are ready.\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t\t<span className=\"flex h-8 flex-1 items-center gap-2 rounded-lg border bg-background px-3 text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t<Mail className=\"size-4\" /> teammate@acme.com\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<Button variant=\"outline\">\n\t\t\t\t\t\t\t\t\t\t<UserPlus /> Invite\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t2 seats included on your plan.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Stepper.Actions className=\"mt-6 flex justify-between\">\n\t\t\t\t\t\t<Stepper.Prev className={buttonVariants({ variant: \"outline\" })}>\n\t\t\t\t\t\t\tBack\n\t\t\t\t\t\t</Stepper.Prev>\n\t\t\t\t\t\t{created ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetCreated(false);\n\t\t\t\t\t\t\t\t\tstepper.reset();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName={buttonVariants()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tStart over\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : stepper.isLast ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => setCreated(true)}\n\t\t\t\t\t\t\t\tclassName={buttonVariants()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tCreate organization\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Stepper.Next className={buttonVariants()}>Continue</Stepper.Next>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Stepper.Actions>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Stepper.Root>\n\t);\n}\n\nexport default OrgSetupBlock;\n"
    }
  ]
}