{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "device-pairing",
  "type": "registry:component",
  "title": "Device Pairing",
  "description": "Discover, pair, configure, and ready a device over an async transition.",
  "author": "Stepperize",
  "dependencies": [
    "@stepperize/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "categories": [
    "auth"
  ],
  "meta": {
    "capabilities": [
      "async"
    ],
    "level": "intermediate",
    "tags": [
      "device",
      "pairing",
      "iot",
      "async",
      "connection"
    ]
  },
  "files": [
    {
      "path": "components/stepperize/device-pairing.tsx",
      "type": "registry:component",
      "target": "components/stepperize/device-pairing.tsx",
      "content": "\"use client\";\n\nimport { defineStepper } from \"@stepperize/react\";\nimport { Check, Loader2, Speaker, Wifi } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst { Stepper } = defineStepper([\n\t{ id: \"discover\", title: \"Discover\" },\n\t{ id: \"pair\", title: \"Pair\" },\n\t{ id: \"configure\", title: \"Configure\" },\n\t{ id: \"ready\", title: \"Ready\" },\n]);\n\nexport function DevicePairingBlock() {\n\tconst [finished, setFinished] = useState(false);\n\n\treturn (\n\t\t<Stepper.Root className=\"w-full max-w-sm overflow-hidden rounded-xl border bg-background shadow-sm\">\n\t\t\t{({ stepper }) => (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"relative grid h-32 place-items-center bg-muted/40\">\n\t\t\t\t\t\t<Stepper.Content step=\"discover\">\n\t\t\t\t\t\t\t<span className=\"relative grid size-16 place-items-center\">\n\t\t\t\t\t\t\t\t<span className=\"absolute inset-0 animate-ping rounded-full bg-primary/20\" />\n\t\t\t\t\t\t\t\t<Wifi className=\"relative size-9 text-primary\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t\t<Stepper.Content step=\"pair\">\n\t\t\t\t\t\t\t<Loader2 className=\"size-9 animate-spin text-primary\" />\n\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t\t<Stepper.Content step=\"configure\">\n\t\t\t\t\t\t\t<Speaker className=\"size-9 text-primary\" />\n\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t\t<Stepper.Content step=\"ready\">\n\t\t\t\t\t\t\t<span className=\"grid size-12 place-items-center rounded-full bg-chart-2/15 text-chart-2\">\n\t\t\t\t\t\t\t\t<Check className=\"size-6\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"p-5\">\n\t\t\t\t\t\t<div className=\"mb-3 flex items-center justify-between\">\n\t\t\t\t\t\t\t<h3 className=\"text-sm font-semibold\">{stepper.current.title}</h3>\n\t\t\t\t\t\t\t<Stepper.List className=\"flex gap-1.5\">\n\t\t\t\t\t\t\t\t<Stepper.Items>\n\t\t\t\t\t\t\t\t\t{(step) => (\n\t\t\t\t\t\t\t\t\t\t<Stepper.Item key={step.id} step={step.id}>\n\t\t\t\t\t\t\t\t\t\t\t<Stepper.Indicator className=\"block size-1.5 rounded-full transition-colors data-[status=active]:bg-primary data-[status=previous]:bg-primary data-[status=upcoming]:bg-muted\" />\n\t\t\t\t\t\t\t\t\t\t</Stepper.Item>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Stepper.Items>\n\t\t\t\t\t\t\t</Stepper.List>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"min-h-14 text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t<Stepper.Content step=\"discover\">\n\t\t\t\t\t\t\t\tSearching for nearby devices…\n\t\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t\t\t<Stepper.Content step=\"pair\">\n\t\t\t\t\t\t\t\tPairing with{\" \"}\n\t\t\t\t\t\t\t\t<b className=\"text-foreground\">Living Room Speaker</b>…\n\t\t\t\t\t\t\t</Stepper.Content>\n\t\t\t\t\t\t\t<Stepper.Content step=\"configure\" className=\"space-y-2\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tdefaultValue=\"Living Room Speaker\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-9 w-full rounded-lg border bg-background px-3 text-sm text-foreground outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20\"\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\t<Stepper.Content step=\"ready\">\n\t\t\t\t\t\t\t\t{finished\n\t\t\t\t\t\t\t\t\t? \"Setup finished. Living Room Speaker is ready to play.\"\n\t\t\t\t\t\t\t\t\t: \"Your device is connected and ready to use.\"}\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-4 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{finished ? (\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\tsetFinished(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\tPair another\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={() => setFinished(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\tFinish pairing\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 disabled:pointer-events-none disabled:opacity-50\">\n\t\t\t\t\t\t\t\t\t{stepper.current.id === \"discover\" ? \"Connect\" : \"Next\"}\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</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Stepper.Root>\n\t);\n}\n\nexport default DevicePairingBlock;\n"
    }
  ]
}