Dev

CONTRIBUTING.md

@@ -236,7 +236,7 @@ When adding a new item, you will create/edit these files:
 | `mc-context-menu`    | ✅           | ✅        |
 | `mc-data-table`      | ✅           |           |
 | `mc-accordion`       | ✅           | ✅        |
-| `mc-collapsible`     | ✅           |           |
+| `mc-collapsible`     | ✅           | ✅        |
 | `mc-separator`       | ✅           | ✅        |
 | `mc-progress`        | ✅           |           |
 | `mc-calendar`        | ✅           | ✅        |
@@ -246,7 +246,7 @@ When adding a new item, you will create/edit these files:
 | `mc-avatar`          | ✅           | ✅        |
 | `mc-drawer`          | ✅           | ✅        |
 | `mc-hover-card`      | ✅           | ✅        |
-| `mc-slider`          | ✅           |           |
+| `mc-slider`          | ✅           | ✅        |
 | `mc-carousel`        | ✅           | ✅        |
 
 # Important Notes

README.md

@@ -3,9 +3,6 @@
 </p>
 
 <p align="center">
-  <a href="https://app.netlify.com/projects/mcoli-ui/deploys">
-    <img src="https://api.netlify.com/api/v1/badges/51ed2171-a305-4dbf-990c-7c7f82c710af/deploy-status" alt="Netlify Status" />
-  </a>
   <a href="https://www.npmjs.com/package/mcoli-ui">
     <img src="https://img.shields.io/npm/dw/mcoli-ui" alt="npm downloads" />
   </a>

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',
@@ -2475,6 +2488,19 @@ export const Index: Record<string, any> = {
       },
     ],
   },
+  'mc-slider': {
+    name: 'mc-slider',
+    description: 'A slider component for MicroClub UI',
+    type: 'registry:component',
+    files: [
+      {
+        path: 'registry/ui/mc-slider.tsx',
+        content:
+          'import * as React from \'react\';\nimport { Slider as SliderPrimitive } from \'@base-ui/react/slider\';\n\nimport { cn } from \'@/lib/utils\';\n\nfunction McSlider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  showValue = true,\n  border = false,\n  unity,\n  onValueChange,\n  ...props\n}: SliderPrimitive.Root.Props & {\n  showValue?: boolean;\n  border?: boolean;\n  unity?: string;\n}) {\n  const isControlled = value !== undefined;\n\n  const [internalValues, setInternalValues] = React.useState<number[]>(\n    Array.isArray(defaultValue) ? defaultValue : [min]\n  );\n\n  const values = isControlled ? (Array.isArray(value) ? value : [value]) : internalValues;\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\'data-horizontal:w-full data-vertical:h-full mt-12\', className)}\n      data-slot="slider"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment="edge-client-only"\n      onValueChange={(newValues, event) => {\n        if (!isControlled) {\n          setInternalValues(Array.isArray(newValues) ? newValues : [newValues]);\n        }\n        onValueChange?.(newValues, event);\n      }}\n      {...props}\n    >\n      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">\n        <SliderPrimitive.Track\n          data-slot="slider-track"\n          className="relative grow overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-ring select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"\n        >\n          <SliderPrimitive.Indicator\n            data-slot="slider-range"\n            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"\n          />\n        </SliderPrimitive.Track>\n\n        {values.map((currentValue, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            data-slot="slider-thumb"\n            className="group relative block size-3 shrink-0 rounded-full border-2 border-primary bg-muted ring-accent-foreground backdrop-blur-3xl transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 active:bg-primary disabled:pointer-events-none disabled:opacity-50 disabled:bg-blue-500"\n          >\n            {showValue && (\n              <div\n                className={cn(\n                  \'pointer-events-none absolute bottom-full left-1/2 mb-3 -translate-x-1/2 whitespace-nowrap rounded-xl \',\n                  \'px-3.5 py-2.5 gap-2.5  text-md text-foreground bg-transparent \',\n                  border && \'ring-1 ring-inset ring-border bg-muted\'\n                )}\n              >\n                {currentValue} {unity}\n              </div>\n            )}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { McSlider };\n',
+        type: 'registry:component',
+      },
+    ],
+  },
   'mc-carousel': {
     name: 'mc-carousel',
     description: 'A carousel component for MicroClub UI',
@@ -2872,6 +2898,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',
@@ -3000,6 +3042,22 @@ export const Index: Record<string, any> = {
     source:
       'import { McHoverCard, McHoverCardContent, McHoverCardTrigger } from \'../ui/mc-hover-card\';\n\nexport default function McHoverCardDemo() {\n  return (\n    <div>\n      <McHoverCard>\n        <McHoverCardTrigger>\n          <button type="button" className="cursor-pointer rounded-full">\n            hover me\n          </button>\n        </McHoverCardTrigger>\n        <McHoverCardContent\n          textAlign="start"\n          title="John Doe"\n          subtitle="Software Engineer"\n          description="John is a software engineer with 5 years of experience in web development. He loves working with React and TypeScript."\n        />\n      </McHoverCard>\n    </div>\n  );\n}\n',
   },
+  'mc-slider-demo': {
+    name: 'mc-slider-demo',
+    description: 'Demo for MicroClub Slider',
+    type: 'registry:example',
+    files: [
+      {
+        path: 'registry/examples/mc-slider-demo.tsx',
+        content:
+          'import { McSlider } from \'@/registry/ui/mc-slider\';\n\nexport default function SliderDemo() {\n  return <McSlider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;\n}\n',
+        type: 'registry:example',
+      },
+    ],
+    component: React.lazy(() => import('@/registry/examples/mc-slider-demo.tsx')),
+    source:
+      'import { McSlider } from \'@/registry/ui/mc-slider\';\n\nexport default function SliderDemo() {\n  return <McSlider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;\n}\n',
+  },
   'mc-carousel-demo': {
     name: 'mc-carousel-demo',
     description: 'Demo for MicroClub Carousel',

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",
@@ -2571,6 +2584,19 @@
       ],
       "type": "registry:component"
     },
+    {
+      "name": "mc-slider",
+      "title": "MicroClub Slider",
+      "description": "A slider component for MicroClub UI",
+      "dependencies": ["@base-ui/react"],
+      "files": [
+        {
+          "path": "registry/ui/mc-slider.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
+    },
     {
       "name": "mc-carousel",
       "title": "MicroClub Carousel",

packages/web/content/docs/components/index.mdx

@@ -78,6 +78,9 @@ description: Explore all available UI components in the MicroClub UI library.
   <Card title="MC Accordion" href="/docs/components/mc-accordion">
     A component that allows expanding and collapsing content sections.
   </Card>
+  <Card title="MC Collapsible" href="/docs/components/mc-collapsible">
+    An interactive component that expands and collapses a panel.
+  </Card>
   <Card title="MC Separator" href="/docs/components/mc-separator">
     A visual divider for grouping content.
   </Card>
@@ -102,6 +105,9 @@ description: Explore all available UI components in the MicroClub UI library.
   <Card title="MC Hover Card" href="/docs/components/mc-hover-card">
     A card that appears on hover with additional information.
   </Card>
+  <Card title="MC Slider" href="/docs/components/mc-slider">
+    A component for selecting a value from a range.
+  </Card>
   <Card title="MC Carousel" href="/docs/components/mc-carousel">
     A component for cycling through a series of content.
   </Card>
@@ -113,13 +119,7 @@ description: Explore all available UI components in the MicroClub UI library.
   <Card title="MC Data Table" href="/docs/components/mc-data-table">
     A powerful table component with sorting, filtering, and pagination.
   </Card>
-  <Card title="MC Collapsible" href="/docs/components/mc-collapsible">
-    A component that can show or hide content.
-  </Card>
   <Card title="MC Progress" href="/docs/components/mc-progress">
     A component that displays progress of an operation.
   </Card>
-  <Card title="MC Slider" href="/docs/components/mc-slider">
-    A component for selecting a value from a range.
-  </Card>
 </Cards>

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`.