50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T40b0,"use client" import { useState } from "react" import { CheckCircle, Code, Database, Download, Palette, Rocket, Settings, Upload, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import ToolbarExpandable from "@/registry/default/ui/toolbar-expandable" const deploymentSteps = [ { id: "setup", title: "Project Setup", description: "Initialize your project with the required dependencies and configuration.", icon: Settings, content: (

Project Name

Framework


    ),
  },
  {
    id: "configure",
    title: "Configuration",
    description:
      "Set up environment variables and project settings for optimal performance.",
    icon: Database,
    content: (
      
        
          API Key
          
        
        
          Database URL
          
        
        
          Environment
          
        
        
      
    ),
  },
  {
    id: "customize",
    title: "Customize Design",
    description:
      "Personalize your application's appearance and branding elements.",
    icon: Palette,
    content: (
      
        
          
            Primary Color
            
              
              
              
            
          
          
            Theme
            
          
        
        
          Logo Upload
          
        
        
      
    ),
  },
  {
    id: "upload",
    title: "Upload Assets",
    description:
      "Upload your project files, images, and other assets to the platform.",
    icon: Upload,
    content: (
      
        
          
          Drag and drop files here
          
        
        
          Asset Description
                  </div>
        <Button className="w-full">
          <Upload className="mr-2 h-4 w-4" />
          Upload Assets
        </Button>
      </div>
    ),
  },
  {
    id: "deploy",
    title: "Deploy",
    description:
      "Deploy your application to production with automatic scaling and monitoring.",
    icon: Rocket,
    content: (
      <div className="space-y-4">
        <div className="rounded-lg border border-green-200 bg-green-50 p-4">
          <div className="mb-2 flex items-center gap-2">
            <CheckCircle className="h-5 w-5 text-green-600" />
            <span className="font-medium text-green-800">Ready to Deploy</span>
          </div>
          <p className="text-sm text-green-700">
            All checks passed. Your application is ready for production
            deployment.
          </p>
        </div>
        <div className="space-y-2">
          <Label>Deployment Region</Label>
          <select className="w-full rounded-md border p-2">
            <option>US East (Virginia)</option>
            <option>US West (California)</option>
            <option>Europe (Frankfurt)</option>
            <option>Asia Pacific (Singapore)</option>
          </select>
        </div>
        <Button className="w-full bg-green-600 hover:bg-green-700">
          <Rocket className="mr-2 h-4 w-4" />
          Deploy to Production
        </Button>
      </div>
    ),
  },
]

const downloadSteps = [
  {
    id: "format",
    title: "Choose Format",
    description: "Select the download format that best suits your needs.",
    icon: Download,
    content: (
      <div className="space-y-4">
        <div className="grid gap-3">
          <label className="flex cursor-pointer items-center gap-3 rounded-lg border p-3 hover:bg-gray-50">
            <input type="radio" name="format" value="zip" defaultChecked />
            <div>
              <div className="font-medium">ZIP Archive</div>
              <div className="text-sm text-gray-600">
                Complete project as compressed file
              </div>
            </div>
          </label>
          <label className="flex cursor-pointer items-center gap-3 rounded-lg border p-3 hover:bg-gray-50">
            <input type="radio" name="format" value="git" />
            <div>
              <div className="font-medium">Git Repository</div>
              <div className="text-sm text-gray-600">
                Clone-ready repository with history
              </div>
            </div>
          </label>
        </div>
      </div>
    ),
  },
  {
    id: "options",
    title: "Download Options",
    description: "Configure additional options for your download.",
    icon: Settings,
    content: (
      <div className="space-y-4">
        <div className="space-y-3">
          <label className="flex items-center gap-2">
            <input type="checkbox" defaultChecked />
            <span className="text-sm">Include dependencies</span>
          </label>
          <label className="flex items-center gap-2">
            <input type="checkbox" defaultChecked />
            <span className="text-sm">Include documentation</span>
          </label>
          <label className="flex items-center gap-2">
            <input type="checkbox" />
            <span className="text-sm">Include example files</span>
          </label>
        </div>
        <Button variant="outline" className="w-full bg-transparent">
          <Settings className="mr-2 h-4 w-4" />
          Configure Options
        </Button>
      </div>
    ),
  },
]

export default function DynamicToolbarDemo() {
  const [controlledExpanded, setControlledExpanded] = useState(false)
  const [controlledActiveStep, setControlledActiveStep] = useState<
    string | null
  >(null)

  return (
    <div className="">
      <div className="mx-auto max-w-sm sm:max-w-5xl">
        <div className="relative">
          <div className="px-4 pt-8 pb-8 text-center sm:px-6 sm:pt-16 sm:pb-12">
            <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">
              Component Demo
            </div>
            <h1 className="text-foreground mb-3 text-2xl font-semibold text-balance sm:text-3xl">
              Dynamic Toolbar Expandable
            </h1>
            <p className="text-muted-foreground mx-auto max-w-lg text-sm leading-relaxed text-balance sm:text-base">
              Sophisticated expandable toolbar with smooth animations and
              step-based navigation for complex workflows.
            </p>
          </div>
        </div>

        <div className="mx-auto max-w-2xl space-y-12 px-4 sm:space-y-16 sm:px-0">
          <section className="sm:bg-muted/50 rounded-xl p-4 pb-6 sm:border sm:p-6 sm:pb-8">
            <div className="mb-8">
              <h2 className="text-foreground mb-2 text-lg font-medium">
                Controlled Usage
              </h2>
              <p className="text-muted-foreground text-sm">
                External state management for programmatic control
              </p>
            </div>

            <div className="mb-6 p-3 sm:p-4">
              <div className="mb-3 flex flex-wrap gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs sm:text-sm"
                  onClick={() => {
                    setControlledExpanded(!controlledExpanded)
                    if (!controlledExpanded && !controlledActiveStep) {
                      setControlledActiveStep("setup")
                    }
                  }}
                >
                  {controlledExpanded ? "Collapse" : "Expand"}
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs sm:text-sm"
                  onClick={() => {
                    setControlledExpanded(true)
                    setControlledActiveStep("configure")
                  }}
                >
                  Configuration
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs sm:text-sm"
                  onClick={() => {
                    setControlledExpanded(true)
                    setControlledActiveStep("deploy")
                  }}
                >
                  Deploy
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs sm:text-sm"
                  onClick={() => {
                    setControlledExpanded(false)
                    setControlledActiveStep(null)
                  }}
                >
                  Reset
                </Button>
              </div>
              <div className="text-muted-foreground font-mono text-xs">
                expanded: {controlledExpanded.toString()} • active:{" "}
                {controlledActiveStep || "null"}
              </div>
            </div>

            <ToolbarExpandable
              steps={deploymentSteps}
              badgeText="CONTROLLED"
              expanded={controlledExpanded}
              onExpandedChange={setControlledExpanded}
              activeStep={controlledActiveStep}
              onActiveStepChange={setControlledActiveStep}
            />
          </section>

          <section className="sm:bg-muted/50 rounded-xl p-4 pb-6 sm:border sm:p-6 sm:pb-8">
            <div className="mb-8">
              <h2 className="text-foreground mb-2 text-lg font-medium">
                Deployment Workflow
              </h2>
              <p className="text-muted-foreground text-sm">
                5-step process with internal state management
              </p>
            </div>

            <ToolbarExpandable steps={deploymentSteps} badgeText="DEPLOYMENT" />
          </section>

          <section className="sm:bg-muted/50 rounded-xl p-4 pb-6 sm:border sm:p-6 sm:pb-8">
            <div className="mb-8">
              <h2 className="text-foreground mb-2 text-lg font-medium">
                Download Configuration
              </h2>
              <p className="text-muted-foreground text-sm">
                2-step process for download preferences
              </p>
            </div>

            <ToolbarExpandable steps={downloadSteps} badgeText="DOWNLOAD" />
          </section>

          <section className="pb-16">
            <div className="mb-8">
              <h2 className="text-foreground mb-2 text-lg font-medium">
                Features
              </h2>
              <p className="text-muted-foreground text-sm">
                Key capabilities and technical highlights
              </p>
            </div>

            <div className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 sm:gap-x-8">
              <div className="flex items-start gap-3">
                <div className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500"></div>
                <div>
                  <div className="text-foreground text-sm font-medium">
                    Smooth Animations
                  </div>
                  <div className="text-muted-foreground text-xs">
                    Framer Motion with spring transitions
                  </div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500"></div>
                <div>
                  <div className="text-foreground text-sm font-medium">
                    Responsive Design
                  </div>
                  <div className="text-muted-foreground text-xs">
                    Fully responsive with mobile optimization
                  </div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500"></div>
                <div>
                  <div className="text-foreground text-sm font-medium">
                    Enhanced Scrolling
                  </div>
                  <div className="text-muted-foreground text-xs">
                    Automatic fade masks and touch support
                  </div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500"></div>
                <div>
                  <div className="text-foreground text-sm font-medium">
                    Performance Optimized
                  </div>
                  <div className="text-muted-foreground text-xs">
                    Memoized components and callbacks
                  </div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500"></div>
                <div>
                  <div className="text-foreground text-sm font-medium">
                    Controllable State
                  </div>
                  <div className="text-muted-foreground text-xs">
                    Controlled and uncontrolled patterns
                  </div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500"></div>
                <div>
                  <div className="text-foreground text-sm font-medium">
                    TypeScript Support
                  </div>
                  <div className="text-muted-foreground text-xs">
                    Fully typed with comprehensive interfaces
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  )
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":["toolbar-expandable","button","input","label","textarea"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/example/toolbar-expandable-demo.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>