feat: add mc-collapsible component

packages/web/__registry__/index.tsx

@@ -2371,6 +2371,19 @@ export const Index: Record<string, any> = {
       },
     ],
   },
+  'mc-collapsible': {
+    name: 'mc-collapsible',
+    description: 'A collapsible component for MicroClub UI',
+    type: 'registry:component',
+    files: [
+      {
+        path: 'registry/ui/mc-collapsible.tsx',
+        content:
+          '\'use client\';\n\nimport { Collapsible as CollapsiblePrimitive } from \'@base-ui/react/collapsible\';\n\nfunction McCollapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;\n}\n\nfunction McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;\n}\n\nfunction McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />;\n}\n\nexport { McCollapsible, McCollapsibleTrigger, McCollapsibleContent };\n',
+        type: 'registry:component',
+      },
+    ],
+  },
   'mc-separator': {
     name: 'mc-separator',
     description: 'A separator component for MicroClub UI',
@@ -2872,6 +2885,22 @@ export const Index: Record<string, any> = {
     source:
       'import {\n  McAccordion,\n  McAccordionContent,\n  McAccordionItem,\n  McAccordionTrigger,\n} from \'../ui/mc-accordion\';\n\nexport function AccordionDemo() {\n  return (\n    <McAccordion defaultValue={[\'product\']} className="max-w-lg">\n      <McAccordionItem value="product">\n        <McAccordionTrigger>Product Information</McAccordionTrigger>\n        <McAccordionContent>\n          <p>\n            Our flagship product combines cutting-edge technology with sleek design. Built with\n            premium materials, it offers unparalleled performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an intuitive user interface\n            designed for both beginners and experts.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n      <McAccordionItem value="shipping">\n        <McAccordionTrigger>Shipping Details</McAccordionTrigger>\n        <McAccordionContent>\n          <p>We offer standard (5-7 days), express (2-3 days), and overnight shipping.</p>\n          <p>\n            Free shipping on international orders is available once the minimum order amount is\n            reached.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n      <McAccordionItem value="returns">\n        <McAccordionTrigger>Return Policy</McAccordionTrigger>\n        <McAccordionContent>\n          <p>\n            Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n            processed within 5-7 business days.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n    </McAccordion>\n  );\n}\n\nexport default AccordionDemo;\n',
   },
+  'mc-collapsible-demo': {
+    name: 'mc-collapsible-demo',
+    description: 'Demo for MicroClub Collapsible',
+    type: 'registry:example',
+    files: [
+      {
+        path: 'registry/examples/mc-collapsible-demo.tsx',
+        content:
+          'import type { ComponentProps } from \'react\';\nimport { ChevronsUpDown } from \'lucide-react\';\n\nimport { McCollapsible, McCollapsibleContent, McCollapsibleTrigger } from \'../ui/mc-collapsible\';\n\nexport default function McCollapsibleDemo(props: ComponentProps<typeof McCollapsible>) {\n  return (\n    <McCollapsible {...props} className="w-[350px] space-y-2">\n      <div className="flex items-center justify-between gap-4 px-4">\n        <h4 className="paragraph-sm font-semibold text-foreground">\n          @peduarte starred 3 repositories\n        </h4>\n        <McCollapsibleTrigger className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50">\n          <ChevronsUpDown className="size-4" />\n          <span className="sr-only">Toggle repositories</span>\n        </McCollapsibleTrigger>\n      </div>\n      <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">\n        @radix-ui/primitives\n      </div>\n      <McCollapsibleContent className="space-y-2">\n        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">\n          @radix-ui/colors\n        </div>\n        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">\n          @stitches/react\n        </div>\n      </McCollapsibleContent>\n    </McCollapsible>\n  );\n}\n',
+        type: 'registry:example',
+      },
+    ],
+    component: React.lazy(() => import('@/registry/examples/mc-collapsible-demo.tsx')),
+    source:
+      'import type { ComponentProps } from \'react\';\nimport { ChevronsUpDown } from \'lucide-react\';\n\nimport { McCollapsible, McCollapsibleContent, McCollapsibleTrigger } from \'../ui/mc-collapsible\';\n\nexport default function McCollapsibleDemo(props: ComponentProps<typeof McCollapsible>) {\n  return (\n    <McCollapsible {...props} className="w-[350px] space-y-2">\n      <div className="flex items-center justify-between gap-4 px-4">\n        <h4 className="paragraph-sm font-semibold text-foreground">\n          @peduarte starred 3 repositories\n        </h4>\n        <McCollapsibleTrigger className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50">\n          <ChevronsUpDown className="size-4" />\n          <span className="sr-only">Toggle repositories</span>\n        </McCollapsibleTrigger>\n      </div>\n      <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">\n        @radix-ui/primitives\n      </div>\n      <McCollapsibleContent className="space-y-2">\n        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">\n          @radix-ui/colors\n        </div>\n        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">\n          @stitches/react\n        </div>\n      </McCollapsibleContent>\n    </McCollapsible>\n  );\n}\n',
+  },
   'mc-separator-demo': {
     name: 'mc-separator-demo',
     description: 'Demo for MicroClub Separator',

packages/web/__registry__/registry.autogenerated.json

@@ -2467,6 +2467,19 @@
       ],
       "type": "registry:component"
     },
+    {
+      "name": "mc-collapsible",
+      "title": "MicroClub Collapsible",
+      "description": "A collapsible component for MicroClub UI",
+      "dependencies": ["@base-ui/react"],
+      "files": [
+        {
+          "path": "registry/ui/mc-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
     {
       "name": "mc-separator",
       "title": "MicroClub Separator",

packages/web/content/docs/components/mc-collapsible.mdx

@@ -1,9 +1,112 @@
 ---
 title: MC Collapsible
-description: A component that can show or hide content.
+description: An interactive component that expands and collapses a panel.
 ---
 
-<Callout type="warn">
-  This component is coming soon. Check our [contributing guide](/docs/introduction#contributing) for
-  more information.
-</Callout>
+## Overview
+
+The `mc-collapsible` component shows or hides a single panel. It uses the **@base-ui/react**
+collapsible primitive for accessible behavior and leaves visual styling to the consumer.
+
+## Preview
+
+<Tabs items={['preview', 'code']}>
+  <Tab>
+    <ComponentPreview name="mc-collapsible-demo" />
+  </Tab>
+  <Tab>
+    <ComponentSource name="mc-collapsible-demo" />
+  </Tab>
+</Tabs>
+
+## Add to Your Project
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npx mcoli-ui@latest add mc-collapsible</Tab>
+  <Tab value="pnpm">pnpm dlx mcoli-ui@latest add mc-collapsible</Tab>
+  <Tab value="yarn">yarn dlx mcoli-ui@latest add mc-collapsible</Tab>
+  <Tab value="bun">bunx mcoli-ui@latest add mc-collapsible</Tab>
+</Tabs>
+
+### Manual Setup
+
+<Steps>
+
+<Step>Install the dependency</Step>
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npm install @base-ui/react</Tab>
+  <Tab value="pnpm">pnpm add @base-ui/react</Tab>
+  <Tab value="yarn">yarn add @base-ui/react</Tab>
+  <Tab value="bun">bun add @base-ui/react</Tab>
+</Tabs>
+
+<Step>Copy the source code</Step>
+
+<ComponentSource name="mc-collapsible" />
+
+</Steps>
+
+## Usage
+
+```tsx
+import {
+  McCollapsible,
+  McCollapsibleContent,
+  McCollapsibleTrigger,
+} from '@/components/ui/mc-collapsible';
+
+export default function Example() {
+  return (
+    <McCollapsible>
+      <McCollapsibleTrigger>Toggle collapse</McCollapsibleTrigger>
+      <McCollapsibleContent>Details are shown when the panel is open.</McCollapsibleContent>
+    </McCollapsible>
+  );
+}
+```
+
+## Controlled State
+
+Use `open` and `onOpenChange` to control the component state.
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import {
+  McCollapsible,
+  McCollapsibleContent,
+  McCollapsibleTrigger,
+} from '@/components/ui/mc-collapsible';
+
+export default function ControlledExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <McCollapsible open={open} onOpenChange={setOpen}>
+      <McCollapsibleTrigger>{open ? 'Hide' : 'Show'} details</McCollapsibleTrigger>
+      <McCollapsibleContent>Controlled panel content.</McCollapsibleContent>
+    </McCollapsible>
+  );
+}
+```
+
+## API Reference
+
+### McCollapsible
+
+| Prop           | Type                      | Default | Description                        |
+| -------------- | ------------------------- | ------- | ---------------------------------- |
+| `defaultOpen`  | `boolean`                 | `false` | Initial state when uncontrolled    |
+| `open`         | `boolean`                 | `-`     | Controlled open state              |
+| `onOpenChange` | `(open: boolean) => void` | `-`     | Called when the open state changes |
+| `disabled`     | `boolean`                 | `false` | Prevents the trigger from toggling |
+
+### McCollapsibleTrigger
+
+Accepts all Base UI collapsible trigger props, including `render` for custom trigger elements.
+
+### McCollapsibleContent
+
+Accepts all Base UI collapsible panel props, including `keepMounted` and `hiddenUntilFound`.

packages/web/content/docs/components/meta.json

@@ -26,6 +26,7 @@
     "mc-dropdown-menu",
     "mc-context-menu",
     "mc-accordion",
+    "mc-collapsible",
     "mc-separator",
     "mc-calendar",
     "mc-scrollarea",
@@ -37,7 +38,6 @@
     "mc-carousel",
     "---Coming Soon---",
     "mc-data-table",
-    "mc-collapsible",
     "mc-progress",
     "mc-slider"
   ]

packages/web/public/r/mc-collapsible.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mc-collapsible",
+  "title": "MicroClub Collapsible",
+  "description": "A collapsible component for MicroClub UI",
+  "dependencies": ["@base-ui/react"],
+  "files": [
+    {
+      "path": "registry/ui/mc-collapsible.tsx",
+      "content": "'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nfunction McCollapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nfunction McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n  return <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { McCollapsible, McCollapsibleTrigger, McCollapsibleContent };\n",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}

packages/web/public/r/registry.json

@@ -2467,6 +2467,19 @@
       ],
       "type": "registry:component"
     },
+    {
+      "name": "mc-collapsible",
+      "title": "MicroClub Collapsible",
+      "description": "A collapsible component for MicroClub UI",
+      "dependencies": ["@base-ui/react"],
+      "files": [
+        {
+          "path": "registry/ui/mc-collapsible.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
     {
       "name": "mc-separator",
       "title": "MicroClub Separator",

packages/web/registry/examples/mc-collapsible-demo.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from 'react';
+import { ChevronsUpDown } from 'lucide-react';
+
+import { McCollapsible, McCollapsibleContent, McCollapsibleTrigger } from '../ui/mc-collapsible';
+
+export default function McCollapsibleDemo(props: ComponentProps<typeof McCollapsible>) {
+  return (
+    <McCollapsible {...props} className="w-[350px] space-y-2">
+      <div className="flex items-center justify-between gap-4 px-4">
+        <h4 className="paragraph-sm font-semibold text-foreground">
+          @peduarte starred 3 repositories
+        </h4>
+        <McCollapsibleTrigger className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50">
+          <ChevronsUpDown className="size-4" />
+          <span className="sr-only">Toggle repositories</span>
+        </McCollapsibleTrigger>
+      </div>
+      <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">
+        @radix-ui/primitives
+      </div>
+      <McCollapsibleContent className="space-y-2">
+        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">
+          @radix-ui/colors
+        </div>
+        <div className="paragraph-sm rounded-md border border-border bg-background px-4 py-2 text-primary">
+          @stitches/react
+        </div>
+      </McCollapsibleContent>
+    </McCollapsible>
+  );
+}

packages/web/registry/registry-examples.ts

@@ -314,6 +314,20 @@ export const examples: Registry['items'] = [
     ],
     registryDependencies: [`${REGISTRY_URL}/r/mc-accordion.json`],
   },
+  {
+    name: 'mc-collapsible-demo',
+    type: 'registry:example',
+    title: 'MicroClub Collapsible Demo',
+    description: 'Demo for MicroClub Collapsible',
+    files: [
+      {
+        path: 'examples/mc-collapsible-demo.tsx',
+        type: 'registry:example',
+      },
+    ],
+    dependencies: ['lucide-react'],
+    registryDependencies: [`${REGISTRY_URL}/r/mc-collapsible.json`],
+  },
   {
     name: 'mc-separator-demo',
     type: 'registry:example',

packages/web/registry/registry-ui.ts

@@ -313,6 +313,19 @@ export const ui: Registry['items'] = [
     ],
     dependencies: ['@base-ui/react', 'lucide-react'],
   },
+  {
+    name: 'mc-collapsible',
+    type: 'registry:component',
+    title: 'MicroClub Collapsible',
+    description: 'A collapsible component for MicroClub UI',
+    files: [
+      {
+        path: 'ui/mc-collapsible.tsx',
+        type: 'registry:component',
+      },
+    ],
+    dependencies: ['@base-ui/react'],
+  },
   {
     name: 'mc-separator',
     type: 'registry:component',

packages/web/registry/ui/mc-collapsible.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+
+function McCollapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />;
+}
+
+export { McCollapsible, McCollapsibleTrigger, McCollapsibleContent };

packages/web/stories/McCollapsible.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+import McCollapsibleDemo from '@/registry/examples/mc-collapsible-demo';
+
+const meta: Meta<typeof McCollapsibleDemo> = {
+  title: 'Components/McCollapsible',
+  component: McCollapsibleDemo,
+  tags: ['autodocs'],
+  args: {
+    defaultOpen: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof McCollapsibleDemo>;
+
+export const Playground: Story = {};
+
+export const DefaultOpen: Story = {
+  args: {
+    defaultOpen: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};