feat: add new accordion particles

apps/ui/public/r/accordion-multi-level.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-multi-level",
+  "type": "registry:example",
+  "description": "Accordion with multiple levels",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json",
+    "https://coss.com/ui/r/collapsible.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-multi-level.tsx",
+      "content": "import { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes coss.com ui different?\",\n    collapsibles: [\n      {\n        title: \"What about performance?\",\n        content:\n          \"We optimize every component for maximum performance and minimal bundle size.\",\n      },\n      {\n        title: \"How is the documentation?\",\n        content:\n          \"Our documentation is comprehensive and includes live examples for every component.\",\n      },\n    ],\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    collapsibles: [\n      {\n        title: \"Can I use custom themes?\",\n        content:\n          \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n      },\n      {\n        title: \"What about Tailwind support?\",\n        content:\n          \"We have first-class support for Tailwind CSS with custom utility classes.\",\n      },\n    ],\n  },\n  {\n    id: \"3\",\n    title: \"Is coss.com ui optimized for performance?\",\n    collapsibles: [\n      {\n        title: \"What's the bundle size impact?\",\n        content:\n          \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n        open: true,\n      },\n      {\n        title: \"How is code splitting handled?\",\n        content:\n          \"We support automatic code splitting for optimal loading performance.\",\n      },\n    ],\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    collapsibles: [\n      {\n        title: \"Which screen readers are supported?\",\n        content:\n          \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n      },\n      {\n        title: \"What about keyboard navigation?\",\n        content:\n          \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n      },\n    ],\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">Multi-level</h2>\n      <Accordion multiple className=\"w-full -space-y-px\" defaultValue={[\"3\"]}>\n        {items.map((item) => (\n          <AccordionItem\n            value={item.id}\n            key={item.id}\n            className=\"relative border bg-background outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n          >\n            <AccordionTrigger className=\"rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"p-0\">\n              {item.collapsibles.map((collapsible, index) => (\n                <CollapsibleDemo\n                  key={index}\n                  title={collapsible.title}\n                  content={collapsible.content}\n                  open={collapsible.open}\n                />\n              ))}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n\nfunction CollapsibleDemo({\n  title,\n  content,\n  open,\n}: {\n  title: string\n  content: string\n  open?: boolean\n}) {\n  return (\n    <Collapsible className=\"border-t bg-accent px-4 py-3\" defaultOpen={open}>\n      <CollapsibleTrigger className=\"flex gap-2 text-[15px] leading-6 font-semibold [&[data-panel-open]>svg]:rotate-180\">\n        <ChevronDownIcon\n          size={16}\n          className=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\n          aria-hidden=\"true\"\n        />\n        {title}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"data-[panel-closed]:animate-collapsible-up data-[panel-open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm text-muted-foreground transition-all\">\n        {content}\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}

apps/ui/public/r/accordion-table.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-table",
+  "type": "registry:example",
+  "description": "Accordion with table like layout",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-table.tsx",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionTableDemo() {\n  return (\n    <Accordion className=\"w-full\" multiple={true}>\n      <AccordionItem\n        value=\"item-1\"\n        className=\"border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b\"\n      >\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          What is Base UI?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem\n        value=\"item-2\"\n        className=\"border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b\"\n      >\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          How do I get started?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem\n        value=\"item-3\"\n        className=\"border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b\"\n      >\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          Can I use it for my project?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}

apps/ui/public/r/accordion-tabs.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-tabs",
+  "type": "registry:example",
+  "description": "Accordion with tabs like layout",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-tabs.tsx",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionTabsDemo() {\n  return (\n    <Accordion className=\"w-full space-y-2\" multiple={true}>\n      <AccordionItem value=\"item-1\" className=\"rounded-lg border last:border-b\">\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          What is Base UI?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\" className=\"rounded-lg border last:border-b\">\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          How do I get started?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\" className=\"rounded-lg border last:border-b\">\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          Can I use it for my project?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}

apps/ui/public/r/accordion-with-icon.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-with-icon",
+  "type": "registry:example",
+  "description": "Accordion with icon",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-with-icon.tsx",
+      "content": "import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: CommandIcon,\n    title: \"What makes coss.com ui different?\",\n    content:\n      \"coss.com ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    icon: EclipseIcon,\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    icon: ZapIcon,\n    title: \"Is coss.com ui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    icon: AtSignIcon,\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Accordion multiple={false} className=\"w-full\" defaultValue={[\"3\"]}>\n      {items.map((item) => (\n        <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n          <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n            <span className=\"flex items-center gap-3\">\n              <item.icon\n                size={16}\n                className=\"shrink-0 opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>{item.title}</span>\n            </span>\n          </AccordionTrigger>\n          <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n            {item.content}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}

apps/ui/public/r/registry.json

@@ -693,6 +693,75 @@
         "accordion"
       ]
     },
+    {
+      "name": "accordion-with-icon",
+      "description": "Accordion with icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-multi-level",
+      "description": "Accordion with multiple levels",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json",
+        "https://coss.com/ui/r/collapsible.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-multi-level.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-table",
+      "description": "Accordion with table like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-table.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-tabs",
+      "description": "Accordion with tabs like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-tabs.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
     {
       "name": "accordion-single",
       "description": "Accordion with one panel open",

apps/ui/registry.json

@@ -693,6 +693,75 @@
         "accordion"
       ]
     },
+    {
+      "name": "accordion-with-icon",
+      "description": "Accordion with icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-multi-level",
+      "description": "Accordion with multiple levels",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json",
+        "https://coss.com/ui/r/collapsible.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-multi-level.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-table",
+      "description": "Accordion with table like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-table.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-tabs",
+      "description": "Accordion with tabs like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-tabs.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
     {
       "name": "accordion-single",
       "description": "Accordion with one panel open",

apps/ui/registry/__index__.tsx

@@ -834,6 +834,78 @@ export const Index: Record<string, any> = {
     categories: ["accordion"],
     meta: undefined,
   },
+  "accordion-with-icon": {
+    name: "accordion-with-icon",
+    description: "Accordion with icon",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [{
+      path: "registry/default/examples/accordion-with-icon.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-with-icon.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
+  "accordion-multi-level": {
+    name: "accordion-multi-level",
+    description: "Accordion with multiple levels",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json","https://coss.com/ui/r/collapsible.json"],
+    files: [{
+      path: "registry/default/examples/accordion-multi-level.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-multi-level.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
+  "accordion-table": {
+    name: "accordion-table",
+    description: "Accordion with table like layout",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [{
+      path: "registry/default/examples/accordion-table.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-table.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
+  "accordion-tabs": {
+    name: "accordion-tabs",
+    description: "Accordion with tabs like layout",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [{
+      path: "registry/default/examples/accordion-tabs.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-tabs.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
   "accordion-single": {
     name: "accordion-single",
     description: "Accordion with one panel open",