{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-tour",
  "type": "registry:component",
  "title": "Product Tour",
  "description": "A card-style onboarding walkthrough with dot indicators and free navigation.",
  "author": "Stepperize",
  "dependencies": [
    "@stepperize/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "categories": [
    "onboarding"
  ],
  "meta": {
    "capabilities": [
      "non-linear"
    ],
    "level": "beginner",
    "tags": [
      "tour",
      "walkthrough",
      "carousel",
      "dots",
      "non-linear"
    ]
  },
  "files": [
    {
      "path": "components/stepperize/product-tour.tsx",
      "type": "registry:component",
      "target": "components/stepperize/product-tour.tsx",
      "content": "\"use client\";\n\nimport { defineStepper } from \"@stepperize/react\";\nimport { Sparkles, Wand2, Zap } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst { Stepper } = defineStepper([\n\t{\n\t\tid: \"welcome\",\n\t\ttitle: \"Welcome aboard\",\n\t\tdescription: \"A quick tour of what you can do here.\",\n\t},\n\t{\n\t\tid: \"automate\",\n\t\ttitle: \"Automate everything\",\n\t\tdescription: \"Turn repetitive work into one-click flows.\",\n\t},\n\t{\n\t\tid: \"ship\",\n\t\ttitle: \"Ship faster\",\n\t\tdescription: \"Go from idea to production in minutes.\",\n\t},\n]);\n\nconst art: Record<string, { icon: typeof Zap; tint: string }> = {\n\twelcome: { icon: Sparkles, tint: \"bg-primary/10 text-primary\" },\n\tautomate: { icon: Wand2, tint: \"bg-chart-2/15 text-chart-2\" },\n\tship: { icon: Zap, tint: \"bg-chart-3/15 text-chart-3\" },\n};\n\nexport function ProductTourBlock() {\n\tconst [started, setStarted] = useState(false);\n\n\treturn (\n\t\t<Stepper.Root className=\"w-full max-w-sm overflow-hidden rounded-2xl border bg-background shadow-sm\">\n\t\t\t{({ stepper }) => {\n\t\t\t\tconst { icon: Icon, tint } = art[stepper.current.id];\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={`flex h-36 items-center justify-center ${tint.split(\" \")[0]}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className={`size-12 ${tint.split(\" \")[1]}`} />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"p-6\">\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-lg font-semibold\">\n\t\t\t\t\t\t\t\t\t{started ? \"You're ready to start\" : stepper.current.title}\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"mt-1.5 text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{started\n\t\t\t\t\t\t\t\t\t\t? \"The tour is complete. Jump into the workspace.\"\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</Stepper.Content>\n\n\t\t\t\t\t\t\t<div className=\"mt-6 flex items-center justify-between\">\n\t\t\t\t\t\t\t\t<Stepper.List className=\"flex gap-1.5\">\n\t\t\t\t\t\t\t\t\t<Stepper.Items>\n\t\t\t\t\t\t\t\t\t\t{(step) => (\n\t\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\t<Stepper.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Stepper.Indicator className=\"block h-1.5 rounded-full transition-all data-[status=active]:w-6 data-[status=active]:bg-primary data-[status=previous]:w-1.5 data-[status=previous]:bg-primary data-[status=upcoming]:w-1.5 data-[status=upcoming]:bg-border\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Stepper.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t</Stepper.Item>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</Stepper.Items>\n\t\t\t\t\t\t\t\t</Stepper.List>\n\n\t\t\t\t\t\t\t\t<Stepper.Actions className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t\t{!stepper.isLast && (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => stepper.goTo(\"ship\")}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex h-9 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tSkip\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{started ? (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetStarted(false);\n\t\t\t\t\t\t\t\t\t\t\t\tstepper.reset();\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\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\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRestart tour\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t) : stepper.isLast ? (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setStarted(true)}\n\t\t\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\t\t>\n\t\t\t\t\t\t\t\t\t\t\tGet started\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\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\t\t\tNext\n\t\t\t\t\t\t\t\t\t\t</Stepper.Next>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Stepper.Actions>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\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 ProductTourBlock;\n"
    }
  ]
}