{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-11",
  "type": "registry:block",
  "title": "Dialog Multi-Step Wizard",
  "description": "A dialog multi-step wizard block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "dialog",
    "label",
    "select",
    "separator"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/dialogs/dialog-11.tsx",
      "type": "registry:component",
      "target": "components/dialog-11.tsx",
      "content": "'use client';\n\nimport { AppWindowIcon as Apps } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Label } from '@/components/ui/label';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nexport default function Dialog11() {\n  const [open, setOpen] = useState(true);\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger render={<Button />}>Initialize New Project</DialogTrigger>\n      <DialogContent className=\"gap-0 overflow-visible p-0 sm:max-w-2xl\">\n        <DialogHeader className=\"mb-0 border-b px-6 py-4\">\n          <DialogTitle>Initialize New Project</DialogTitle>\n        </DialogHeader>\n\n        <form action=\"#\" method=\"POST\">\n          <div className=\"flex flex-col-reverse md:flex-row\">\n            <div className=\"flex flex-col justify-between md:w-80 md:border-r\">\n              <div className=\"flex-1 grow\">\n                <div className=\"border-t p-6 md:border-none\">\n                  <div className=\"flex items-center space-x-3\">\n                    <div className=\"inline-flex shrink-0 items-center justify-center rounded-sm bg-muted p-3\">\n                      <Apps\n                        aria-hidden={true}\n                        className=\"size-5 text-foreground\"\n                      />\n                    </div>\n                    <div className=\"space-y-0.5\">\n                      <h3 className=\"text-balance font-medium text-foreground text-sm\">\n                        Project Starter\n                      </h3>\n                      <p className=\"text-pretty text-muted-foreground text-sm\">\n                        Configure your new codebase\n                      </p>\n                    </div>\n                  </div>\n                  <Separator className=\"my-4\" />\n                  <h4 className=\"text-balance font-medium text-foreground text-sm\">\n                    Description\n                  </h4>\n                  <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6\">\n                    Quickly set up the foundational tools for your project.\n                  </p>\n                  <h4 className=\"mt-6 text-balance font-medium text-foreground text-sm\">\n                    Info\n                  </h4>\n                  <p className=\"mt-1 text-pretty text-muted-foreground text-sm leading-6\">\n                    Select your preferred stack and configurations.\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex items-center justify-between border-t p-4\">\n                <DialogClose render={<Button type=\"button\" variant=\"ghost\" />}>\n                  Cancel\n                </DialogClose>\n                <Button size=\"sm\" type=\"submit\">\n                  Initialize\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"flex-1 space-y-6 p-6 md:px-6 md:pt-6 md:pb-8\">\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center space-x-3\">\n                  <div className=\"inline-flex size-6 items-center justify-center rounded-sm bg-muted text-foreground text-sm\">\n                    1\n                  </div>\n                  <Label\n                    className=\"font-medium text-foreground text-sm\"\n                    htmlFor=\"framework\"\n                  >\n                    Select Framework\n                  </Label>\n                </div>\n                <Select\n                  defaultValue=\"react\"\n                  items={{\n                    react: 'Next.js',\n                    vue: 'React Router',\n                    angular: 'Tanstack Start',\n                    svelte: 'SvelteKit',\n                    vanilla: 'SolidStart',\n                  }}\n                >\n                  <SelectTrigger\n                    className=\"w-full\"\n                    id=\"framework\"\n                    name=\"framework\"\n                  >\n                    <SelectValue placeholder=\"Select framework\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"react\">Next.js</SelectItem>\n                    <SelectItem value=\"vue\">React Router</SelectItem>\n                    <SelectItem value=\"angular\">Tanstack Start</SelectItem>\n                    <SelectItem value=\"svelte\">SvelteKit</SelectItem>\n                    <SelectItem value=\"vanilla\">SolidStart</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center space-x-3\">\n                  <div className=\"inline-flex size-6 items-center justify-center rounded-sm bg-muted text-foreground text-sm\">\n                    2\n                  </div>\n                  <Label\n                    className=\"font-medium text-foreground text-sm\"\n                    htmlFor=\"package-manager\"\n                  >\n                    Choose Package Manager\n                  </Label>\n                </div>\n                <Select\n                  defaultValue=\"npm\"\n                  items={{ npm: 'npm', yarn: 'yarn', pnpm: 'pnpm', bun: 'bun' }}\n                >\n                  <SelectTrigger\n                    className=\"w-full\"\n                    id=\"package-manager\"\n                    name=\"package-manager\"\n                  >\n                    <SelectValue placeholder=\"Select manager\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"npm\">npm</SelectItem>\n                    <SelectItem value=\"yarn\">yarn</SelectItem>\n                    <SelectItem value=\"pnpm\">pnpm</SelectItem>\n                    <SelectItem value=\"bun\">bun</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div>\n                <div className=\"flex items-center space-x-3\">\n                  <div className=\"inline-flex size-6 items-center justify-center rounded-sm bg-muted text-foreground text-sm\">\n                    3\n                  </div>\n                  <Label\n                    className=\"font-medium text-foreground text-sm\"\n                    htmlFor=\"linter\"\n                  >\n                    Configure Linter/Formatter\n                  </Label>\n                </div>\n                <p className=\"mt-1 text-pretty text-muted-foreground text-xs\">\n                  Ensure code quality and consistency.\n                </p>\n                <Select\n                  defaultValue=\"eslint-prettier\"\n                  items={{\n                    'eslint-prettier': 'ESLint + Prettier',\n                    eslint: 'ESLint Only',\n                    prettier: 'Prettier Only',\n                    biome: 'Biome',\n                    oxlint: 'Oxlint',\n                    none: 'None',\n                  }}\n                >\n                  <SelectTrigger\n                    className=\"mt-4 w-full\"\n                    id=\"linter\"\n                    name=\"linter\"\n                  >\n                    <SelectValue placeholder=\"Select tools\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"eslint-prettier\">\n                      ESLint + Prettier\n                    </SelectItem>\n                    <SelectItem value=\"eslint\">ESLint Only</SelectItem>\n                    <SelectItem value=\"prettier\">Prettier Only</SelectItem>\n                    <SelectItem value=\"biome\">Biome</SelectItem>\n                    <SelectItem value=\"oxlint\">Oxlint</SelectItem>\n                    <SelectItem value=\"none\">None</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div>\n                <div className=\"flex items-center space-x-3\">\n                  <div className=\"inline-flex size-6 items-center justify-center rounded-sm bg-muted text-foreground text-sm\">\n                    4\n                  </div>\n                  <Label\n                    className=\"font-medium text-foreground text-sm\"\n                    htmlFor=\"testing-tool\"\n                  >\n                    Select Testing Tool\n                  </Label>\n                </div>\n                <p className=\"mt-1 text-pretty text-muted-foreground text-xs\">\n                  Choose a framework for unit/integration tests.\n                </p>\n                <Select\n                  defaultValue=\"jest\"\n                  items={{\n                    jest: 'Jest',\n                    vitest: 'Vitest',\n                    cypress: 'Cypress',\n                    none: 'None',\n                  }}\n                >\n                  <SelectTrigger\n                    className=\"mt-4 w-full\"\n                    id=\"testing-tool\"\n                    name=\"testing-tool\"\n                  >\n                    <SelectValue placeholder=\"Select tool\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"jest\">Jest</SelectItem>\n                    <SelectItem value=\"vitest\">Vitest</SelectItem>\n                    <SelectItem value=\"cypress\">Cypress</SelectItem>\n                    <SelectItem value=\"none\">None</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
    }
  ],
  "categories": [
    "dialogs"
  ]
}