{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo",
  "title": "Demo",
  "registryDependencies": [
    "alert-dialog",
    "badge",
    "button",
    "button-group",
    "card",
    "checkbox",
    "dropdown-menu",
    "field",
    "input-group",
    "item",
    "radio-group",
    "slider",
    "switch",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/base-vega/examples/demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Style Overview</CardTitle>\n              <CardDescription className=\"line-clamp-2\">\n                Designers love packing quirky glyphs into test phrases. This is\n                a preview of the typography styles.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--border\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-fit\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}