{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toolbar-expandable-demo",
  "type": "registry:component",
  "registryDependencies": [
    "toolbar-expandable",
    "button",
    "input",
    "label",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/default/example/toolbar-expandable-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  CheckCircle,\n  Code,\n  Database,\n  Download,\n  Palette,\n  Rocket,\n  Settings,\n  Upload,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport ToolbarExpandable from \"@/registry/default/ui/toolbar-expandable\"\n\nconst deploymentSteps = [\n  {\n    id: \"setup\",\n    title: \"Project Setup\",\n    description:\n      \"Initialize your project with the required dependencies and configuration.\",\n    icon: Settings,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"project-name\">Project Name</Label>\n          <Input id=\"project-name\" placeholder=\"my-awesome-app\" />\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"framework\">Framework</Label>\n          <select className=\"w-full rounded-md border p-2\">\n            <option>Next.js</option>\n            <option>React</option>\n            <option>Vue.js</option>\n          </select>\n        </div>\n        <Button className=\"w-full\">\n          <Code className=\"mr-2 h-4 w-4\" />\n          Initialize Project\n        </Button>\n      </div>\n    ),\n  },\n  {\n    id: \"configure\",\n    title: \"Configuration\",\n    description:\n      \"Set up environment variables and project settings for optimal performance.\",\n    icon: Database,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"api-key\">API Key</Label>\n          <Input\n            id=\"api-key\"\n            type=\"password\"\n            placeholder=\"Enter your API key\"\n          />\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"database-url\">Database URL</Label>\n          <Input id=\"database-url\" placeholder=\"postgresql://...\" />\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"environment\">Environment</Label>\n          <select className=\"w-full rounded-md border p-2\">\n            <option>Development</option>\n            <option>Staging</option>\n            <option>Production</option>\n          </select>\n        </div>\n        <Button variant=\"outline\" className=\"w-full bg-transparent\">\n          <Settings className=\"mr-2 h-4 w-4\" />\n          Save Configuration\n        </Button>\n      </div>\n    ),\n  },\n  {\n    id: \"customize\",\n    title: \"Customize Design\",\n    description:\n      \"Personalize your application's appearance and branding elements.\",\n    icon: Palette,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          <div className=\"space-y-2\">\n            <Label>Primary Color</Label>\n            <div className=\"flex gap-2\">\n              <div className=\"h-8 w-8 rounded-md border-2 border-blue-600 bg-blue-500\"></div>\n              <div className=\"h-8 w-8 rounded-md bg-green-500\"></div>\n              <div className=\"h-8 w-8 rounded-md bg-purple-500\"></div>\n            </div>\n          </div>\n          <div className=\"space-y-2\">\n            <Label>Theme</Label>\n            <select className=\"w-full rounded-md border p-2\">\n              <option>Light</option>\n              <option>Dark</option>\n              <option>Auto</option>\n            </select>\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"logo\">Logo Upload</Label>\n          <Input id=\"logo\" type=\"file\" accept=\"image/*\" />\n        </div>\n        <Button variant=\"outline\" className=\"w-full bg-transparent\">\n          <Palette className=\"mr-2 h-4 w-4\" />\n          Apply Theme\n        </Button>\n      </div>\n    ),\n  },\n  {\n    id: \"upload\",\n    title: \"Upload Assets\",\n    description:\n      \"Upload your project files, images, and other assets to the platform.\",\n    icon: Upload,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"rounded-lg border-2 border-dashed border-gray-300 p-6 text-center\">\n          <Upload className=\"mx-auto mb-2 h-8 w-8 text-gray-400\" />\n          <p className=\"mb-2 text-sm text-gray-600\">Drag and drop files here</p>\n          <Button variant=\"outline\" size=\"sm\">\n            Choose Files\n          </Button>\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"description\">Asset Description</Label>\n          <Textarea\n            id=\"description\"\n            placeholder=\"Describe your assets...\"\n            rows={3}\n          />\n        </div>\n        <Button className=\"w-full\">\n          <Upload className=\"mr-2 h-4 w-4\" />\n          Upload Assets\n        </Button>\n      </div>\n    ),\n  },\n  {\n    id: \"deploy\",\n    title: \"Deploy\",\n    description:\n      \"Deploy your application to production with automatic scaling and monitoring.\",\n    icon: Rocket,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"rounded-lg border border-green-200 bg-green-50 p-4\">\n          <div className=\"mb-2 flex items-center gap-2\">\n            <CheckCircle className=\"h-5 w-5 text-green-600\" />\n            <span className=\"font-medium text-green-800\">Ready to Deploy</span>\n          </div>\n          <p className=\"text-sm text-green-700\">\n            All checks passed. Your application is ready for production\n            deployment.\n          </p>\n        </div>\n        <div className=\"space-y-2\">\n          <Label>Deployment Region</Label>\n          <select className=\"w-full rounded-md border p-2\">\n            <option>US East (Virginia)</option>\n            <option>US West (California)</option>\n            <option>Europe (Frankfurt)</option>\n            <option>Asia Pacific (Singapore)</option>\n          </select>\n        </div>\n        <Button className=\"w-full bg-green-600 hover:bg-green-700\">\n          <Rocket className=\"mr-2 h-4 w-4\" />\n          Deploy to Production\n        </Button>\n      </div>\n    ),\n  },\n]\n\nconst downloadSteps = [\n  {\n    id: \"format\",\n    title: \"Choose Format\",\n    description: \"Select the download format that best suits your needs.\",\n    icon: Download,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"grid gap-3\">\n          <label className=\"flex cursor-pointer items-center gap-3 rounded-lg border p-3 hover:bg-gray-50\">\n            <input type=\"radio\" name=\"format\" value=\"zip\" defaultChecked />\n            <div>\n              <div className=\"font-medium\">ZIP Archive</div>\n              <div className=\"text-sm text-gray-600\">\n                Complete project as compressed file\n              </div>\n            </div>\n          </label>\n          <label className=\"flex cursor-pointer items-center gap-3 rounded-lg border p-3 hover:bg-gray-50\">\n            <input type=\"radio\" name=\"format\" value=\"git\" />\n            <div>\n              <div className=\"font-medium\">Git Repository</div>\n              <div className=\"text-sm text-gray-600\">\n                Clone-ready repository with history\n              </div>\n            </div>\n          </label>\n        </div>\n      </div>\n    ),\n  },\n  {\n    id: \"options\",\n    title: \"Download Options\",\n    description: \"Configure additional options for your download.\",\n    icon: Settings,\n    content: (\n      <div className=\"space-y-4\">\n        <div className=\"space-y-3\">\n          <label className=\"flex items-center gap-2\">\n            <input type=\"checkbox\" defaultChecked />\n            <span className=\"text-sm\">Include dependencies</span>\n          </label>\n          <label className=\"flex items-center gap-2\">\n            <input type=\"checkbox\" defaultChecked />\n            <span className=\"text-sm\">Include documentation</span>\n          </label>\n          <label className=\"flex items-center gap-2\">\n            <input type=\"checkbox\" />\n            <span className=\"text-sm\">Include example files</span>\n          </label>\n        </div>\n        <Button variant=\"outline\" className=\"w-full bg-transparent\">\n          <Settings className=\"mr-2 h-4 w-4\" />\n          Configure Options\n        </Button>\n      </div>\n    ),\n  },\n]\n\nexport default function DynamicToolbarDemo() {\n  const [controlledExpanded, setControlledExpanded] = useState(false)\n  const [controlledActiveStep, setControlledActiveStep] = useState<\n    string | null\n  >(null)\n\n  return (\n    <div className=\"\">\n      <div className=\"mx-auto max-w-sm sm:max-w-5xl\">\n        <div className=\"relative\">\n          <div className=\"px-4 pt-8 pb-8 text-center sm:px-6 sm:pt-16 sm:pb-12\">\n            <div className=\"bg-muted text-muted-foreground mb-6 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium\">\n              Component Demo\n            </div>\n            <h1 className=\"text-foreground mb-3 text-2xl font-semibold text-balance sm:text-3xl\">\n              Dynamic Toolbar Expandable\n            </h1>\n            <p className=\"text-muted-foreground mx-auto max-w-lg text-sm leading-relaxed text-balance sm:text-base\">\n              Sophisticated expandable toolbar with smooth animations and\n              step-based navigation for complex workflows.\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mx-auto max-w-2xl space-y-12 px-4 sm:space-y-16 sm:px-0\">\n          <section className=\"sm:bg-muted/50 rounded-xl p-4 pb-6 sm:border sm:p-6 sm:pb-8\">\n            <div className=\"mb-8\">\n              <h2 className=\"text-foreground mb-2 text-lg font-medium\">\n                Controlled Usage\n              </h2>\n              <p className=\"text-muted-foreground text-sm\">\n                External state management for programmatic control\n              </p>\n            </div>\n\n            <div className=\"mb-6 p-3 sm:p-4\">\n              <div className=\"mb-3 flex flex-wrap gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"text-xs sm:text-sm\"\n                  onClick={() => {\n                    setControlledExpanded(!controlledExpanded)\n                    if (!controlledExpanded && !controlledActiveStep) {\n                      setControlledActiveStep(\"setup\")\n                    }\n                  }}\n                >\n                  {controlledExpanded ? \"Collapse\" : \"Expand\"}\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"text-xs sm:text-sm\"\n                  onClick={() => {\n                    setControlledExpanded(true)\n                    setControlledActiveStep(\"configure\")\n                  }}\n                >\n                  Configuration\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"text-xs sm:text-sm\"\n                  onClick={() => {\n                    setControlledExpanded(true)\n                    setControlledActiveStep(\"deploy\")\n                  }}\n                >\n                  Deploy\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-xs sm:text-sm\"\n                  onClick={() => {\n                    setControlledExpanded(false)\n                    setControlledActiveStep(null)\n                  }}\n                >\n                  Reset\n                </Button>\n              </div>\n              <div className=\"text-muted-foreground font-mono text-xs\">\n                expanded: {controlledExpanded.toString()} • active:{\" \"}\n                {controlledActiveStep || \"null\"}\n              </div>\n            </div>\n\n            <ToolbarExpandable\n              steps={deploymentSteps}\n              badgeText=\"CONTROLLED\"\n              expanded={controlledExpanded}\n              onExpandedChange={setControlledExpanded}\n              activeStep={controlledActiveStep}\n              onActiveStepChange={setControlledActiveStep}\n            />\n          </section>\n\n          <section className=\"sm:bg-muted/50 rounded-xl p-4 pb-6 sm:border sm:p-6 sm:pb-8\">\n            <div className=\"mb-8\">\n              <h2 className=\"text-foreground mb-2 text-lg font-medium\">\n                Deployment Workflow\n              </h2>\n              <p className=\"text-muted-foreground text-sm\">\n                5-step process with internal state management\n              </p>\n            </div>\n\n            <ToolbarExpandable steps={deploymentSteps} badgeText=\"DEPLOYMENT\" />\n          </section>\n\n          <section className=\"sm:bg-muted/50 rounded-xl p-4 pb-6 sm:border sm:p-6 sm:pb-8\">\n            <div className=\"mb-8\">\n              <h2 className=\"text-foreground mb-2 text-lg font-medium\">\n                Download Configuration\n              </h2>\n              <p className=\"text-muted-foreground text-sm\">\n                2-step process for download preferences\n              </p>\n            </div>\n\n            <ToolbarExpandable steps={downloadSteps} badgeText=\"DOWNLOAD\" />\n          </section>\n\n          <section className=\"pb-16\">\n            <div className=\"mb-8\">\n              <h2 className=\"text-foreground mb-2 text-lg font-medium\">\n                Features\n              </h2>\n              <p className=\"text-muted-foreground text-sm\">\n                Key capabilities and technical highlights\n              </p>\n            </div>\n\n            <div className=\"grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 sm:gap-x-8\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500\"></div>\n                <div>\n                  <div className=\"text-foreground text-sm font-medium\">\n                    Smooth Animations\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Framer Motion with spring transitions\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500\"></div>\n                <div>\n                  <div className=\"text-foreground text-sm font-medium\">\n                    Responsive Design\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Fully responsive with mobile optimization\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500\"></div>\n                <div>\n                  <div className=\"text-foreground text-sm font-medium\">\n                    Enhanced Scrolling\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Automatic fade masks and touch support\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500\"></div>\n                <div>\n                  <div className=\"text-foreground text-sm font-medium\">\n                    Performance Optimized\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Memoized components and callbacks\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500\"></div>\n                <div>\n                  <div className=\"text-foreground text-sm font-medium\">\n                    Controllable State\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Controlled and uncontrolled patterns\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex items-start gap-3\">\n                <div className=\"mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500\"></div>\n                <div>\n                  <div className=\"text-foreground text-sm font-medium\">\n                    TypeScript Support\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Fully typed with comprehensive interfaces\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}