{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circular",
  "type": "registry:component",
  "title": "Circular Stepper",
  "description": "An SVG progress ring around the current step number.",
  "author": "Stepperize",
  "dependencies": [
    "@stepperize/react"
  ],
  "registryDependencies": [],
  "categories": [
    "layouts"
  ],
  "meta": {
    "capabilities": [
      "navigation"
    ],
    "level": "beginner",
    "tags": [
      "ring",
      "svg",
      "circular",
      "percentage"
    ]
  },
  "files": [
    {
      "path": "components/stepperize/circular.tsx",
      "type": "registry:component",
      "target": "components/stepperize/circular.tsx",
      "content": "\"use client\";\n\nimport { defineStepper } from \"@stepperize/react\";\nimport { useState } from \"react\";\n\nconst { Stepper } = defineStepper([\n\t{ id: \"profile\", title: \"Profile\", description: \"Basic information\" },\n\t{ id: \"workspace\", title: \"Workspace\", description: \"Name and logo\" },\n\t{ id: \"invite\", title: \"Invite\", description: \"Add teammates\" },\n\t{ id: \"finish\", title: \"All done\", description: \"Launch your space\" },\n]);\n\nconst RADIUS = 20;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport function CircularBlock() {\n\tconst [launched, setLaunched] = 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\tconst progress = (stepper.index + 1) / stepper.count;\n\t\t\t\tconst next = stepper.steps[stepper.index + 1];\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t\t\t\t<div className=\"relative grid size-16 shrink-0 place-items-center\">\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 48 48\"\n\t\t\t\t\t\t\t\t\tclassName=\"size-16 -rotate-90\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\t\tcx=\"24\"\n\t\t\t\t\t\t\t\t\t\tcy=\"24\"\n\t\t\t\t\t\t\t\t\t\tr={RADIUS}\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tstrokeWidth=\"4\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"stroke-muted\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\t\tcx=\"24\"\n\t\t\t\t\t\t\t\t\t\tcy=\"24\"\n\t\t\t\t\t\t\t\t\t\tr={RADIUS}\n\t\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\t\tstrokeWidth=\"4\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstrokeDasharray={CIRCUMFERENCE}\n\t\t\t\t\t\t\t\t\t\tstrokeDashoffset={CIRCUMFERENCE * (1 - progress)}\n\t\t\t\t\t\t\t\t\t\tclassName=\"stroke-primary transition-all duration-500\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<span className=\"absolute text-sm font-semibold\">\n\t\t\t\t\t\t\t\t\t{stepper.index + 1}/{stepper.count}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<Stepper.Content step={stepper.current.id}>\n\t\t\t\t\t\t\t\t<h3 className=\"text-base font-semibold\">\n\t\t\t\t\t\t\t\t\t{launched ? \"Workspace launched\" : stepper.current.title}\n\t\t\t\t\t\t\t\t</h3>\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\t{launched\n\t\t\t\t\t\t\t\t\t\t? \"Your space is live and ready for collaborators.\"\n\t\t\t\t\t\t\t\t\t\t: stepper.current.description}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t{next && !launched && (\n\t\t\t\t\t\t\t\t\t<p className=\"mt-1 text-xs text-muted-foreground/70\">\n\t\t\t\t\t\t\t\t\t\tNext: {next.title}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<Stepper.Actions className=\"mt-6 flex justify-between\">\n\t\t\t\t\t\t\t<Stepper.Prev className=\"inline-flex h-9 items-center rounded-lg border bg-background px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50\">\n\t\t\t\t\t\t\t\tBack\n\t\t\t\t\t\t\t</Stepper.Prev>\n\t\t\t\t\t\t\t{launched ? (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetLaunched(false);\n\t\t\t\t\t\t\t\t\t\tstepper.reset();\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRestart flow\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t) : stepper.isLast ? (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setLaunched(true)}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tLaunch workspace\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Stepper.Next className=\"inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\">\n\t\t\t\t\t\t\t\t\tContinue\n\t\t\t\t\t\t\t\t</Stepper.Next>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Stepper.Actions>\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t}}\n\t\t</Stepper.Root>\n\t);\n}\n\nexport default CircularBlock;\n"
    }
  ]
}