{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group-demo",
  "title": "Toggle Group: Segmented, outline and ghost",
  "description": "A range picker, alignment and formatting groups.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.cuelark.com/r/toggle-group.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/examples/toggle-group-demo.tsx",
      "content": "import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\n\nimport { ToggleGroup, ToggleGroupItem } from \"@/registry/cuelark/ui/toggle-group\";\n\nexport default function ToggleGroupDemo() {\n  return (\n    <div className=\"flex flex-col items-center gap-6\">\n      <ToggleGroup type=\"single\" defaultValue=\"month\" aria-label=\"Range\">\n        <ToggleGroupItem value=\"day\">Day</ToggleGroupItem>\n        <ToggleGroupItem value=\"week\">Week</ToggleGroupItem>\n        <ToggleGroupItem value=\"month\">Month</ToggleGroupItem>\n        <ToggleGroupItem value=\"year\">Year</ToggleGroupItem>\n      </ToggleGroup>\n      <div className=\"flex gap-4\">\n        <ToggleGroup type=\"single\" variant=\"outline\" defaultValue=\"left\" aria-label=\"Alignment\">\n          <ToggleGroupItem value=\"left\" aria-label=\"Align left\"><AlignLeftIcon /></ToggleGroupItem>\n          <ToggleGroupItem value=\"center\" aria-label=\"Align center\"><AlignCenterIcon /></ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Align right\"><AlignRightIcon /></ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"multiple\" variant=\"ghost\" defaultValue={[\"bold\"]} aria-label=\"Formatting\">\n          <ToggleGroupItem value=\"bold\" aria-label=\"Bold\"><BoldIcon /></ToggleGroupItem>\n          <ToggleGroupItem value=\"italic\" aria-label=\"Italic\"><ItalicIcon /></ToggleGroupItem>\n          <ToggleGroupItem value=\"underline\" aria-label=\"Underline\"><UnderlineIcon /></ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "toggle-group",
    "example"
  ],
  "type": "registry:component"
}