{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-base-toggle-group",
  "title": "Base Toggle Group Demo",
  "description": "Demo showing an animated base toggle group.",
  "registryDependencies": [
    "@odysseyui/primitives-base-toggle-group"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/base/toggle-group/index.tsx",
      "content": "import {\n  ToggleGroup,\n  Toggle,\n  ToggleGroupHighlight,\n  ToggleHighlight,\n} from '@/components/odyssey/primitives/base/toggle-group';\nimport { Bold, Italic, Underline } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n}\n\nexport const BaseToggleGroupDemo = ({\n  toggleMultiple,\n}: BaseToggleGroupDemoProps) => {\n  const [value, setValue] = useState<any[]>([]);\n\n  useEffect(() => {\n    setValue(['bold']);\n  }, [toggleMultiple]);\n\n  return !toggleMultiple ? (\n    <ToggleGroup value={value} onValueChange={setValue} className=\"flex gap-2\">\n      <ToggleGroupHighlight className=\"bg-accent\">\n        <ToggleHighlight value=\"bold\">\n          <Toggle\n            value=\"bold\"\n            aria-label=\"Toggle bold\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Bold className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value=\"italic\">\n          <Toggle\n            value=\"italic\"\n            aria-label=\"Toggle italic\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Italic className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value=\"underline\">\n          <Toggle\n            value=\"underline\"\n            aria-label=\"Toggle underline\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Underline className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n      </ToggleGroupHighlight>\n    </ToggleGroup>\n  ) : (\n    <ToggleGroup\n      multiple\n      value={value}\n      onValueChange={setValue}\n      className=\"flex gap-2\"\n    >\n      <ToggleHighlight value=\"bold\" className=\"bg-accent\">\n        <Toggle\n          value=\"bold\"\n          aria-label=\"Toggle bold\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Bold className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value=\"italic\" className=\"bg-accent\">\n        <Toggle\n          value=\"italic\"\n          aria-label=\"Toggle italic\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Italic className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value=\"underline\" className=\"bg-accent\">\n        <Toggle\n          value=\"underline\"\n          aria-label=\"Toggle underline\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Underline className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n    </ToggleGroup>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/odysseyui/demo/primitives/base/toggle-group.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "ToggleGroup": {
        "toggleMultiple": {
          "value": false
        }
      }
    }
  },
  "type": "registry:ui"
}