{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-headless-tabs",
  "title": "Headless Tabs Demo",
  "description": "Demo showing an animated headless tabs.",
  "registryDependencies": [
    "@animate-ui/primitives-headless-tabs"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/headless/tabs/index.tsx",
      "content": "import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabHighlight,\n  TabHighlightItem,\n  TabList,\n  Tab,\n} from '@/components/animate-ui/primitives/headless/tabs';\n\ninterface HeadlessTabsDemoProps {\n  mode: 'auto-height' | 'layout';\n}\n\nexport function HeadlessTabsDemo({ mode }: HeadlessTabsDemoProps) {\n  return (\n    <TabGroup className=\"w-[400px]\">\n      <TabHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabHighlightItem index={0} className=\"flex-1\">\n            <Tab\n              index={0}\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </Tab>\n          </TabHighlightItem>\n          <TabHighlightItem index={1} className=\"flex-1\">\n            <Tab\n              index={1}\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </Tab>\n          </TabHighlightItem>\n        </TabList>\n      </TabHighlight>\n      <TabPanels\n        mode={mode}\n        className=\"bg-background p-3 border-4 border-accent border-t-0\"\n      >\n        <TabPanel className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabPanel>\n        <TabPanel className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/headless/tabs.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "TabsPanels": {
        "mode": {
          "value": "auto-height",
          "options": {
            "auto-height": "auto-height",
            "layout": "layout"
          }
        }
      }
    }
  },
  "type": "registry:ui"
}