Component/mc slider

package.json

@@ -30,5 +30,8 @@
     "prettier": "^3.8.1",
     "typescript": "^5.7.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "next-themes": "^0.4.6",
+    "sonner": "^2.0.7"
+  }
 }

packages/web/__registry__/registry.autogenerated.json

@@ -2544,6 +2544,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"
     }
   ]
 }

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

@@ -1,9 +1,110 @@
 ---
 title: MC Slider
-description: A component for selecting a value from a range.
+description: A flexible slider for selecting a value from a range.
 ---
 
-<Callout type="warn">
-  This component is coming soon. Check our [contributing guide](/docs/introduction#contributing) for
-  more information.
-</Callout>
+## Overview
+
+The `mc-slider` is a core component of the MicroClub UI library. Built on the **@base-ui/react** slider primitive, it provides an accessible, keyboard-friendly range control with MicroClub's signature styling via **Tailwind CSS v4**.
+
+As part of the MicroClub library, this component is designed for **instant deployment into your codebase**, giving you full ownership of its look and behavior.
+
+## Preview
+
+<Tabs items={['preview', 'code']}>
+  <Tab>
+    <ComponentPreview name="mc-slider-demo" />
+  </Tab>
+  <Tab>
+    <ComponentSource name="mc-slider-demo" />
+  </Tab>
+</Tabs>
+
+## Add to Your Project
+
+Deploy the `mc-slider` directly to your `components/ui` directory:
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npx mcoli-ui@latest add mc-slider</Tab>
+  <Tab value="pnpm">pnpm dlx mcoli-ui@latest add mc-slider</Tab>
+  <Tab value="yarn">yarn dlx mcoli-ui@latest add mc-slider</Tab>
+  <Tab value="bun">bunx mcoli-ui@latest add mc-slider</Tab>
+</Tabs>
+
+### Manual Setup
+
+If you prefer manual control:
+
+<Steps>
+
+<Step>Install the core dependencies</Step>
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npm install clsx tailwind-merge @base-ui/react</Tab>
+  <Tab value="pnpm">pnpm add clsx tailwind-merge @base-ui/react</Tab>
+  <Tab value="yarn">yarn add clsx tailwind-merge @base-ui/react</Tab>
+  <Tab value="bun">bun add clsx tailwind-merge @base-ui/react</Tab>
+</Tabs>
+
+<Step>Copy the source code</Step>
+
+<ComponentSource name="mc-slider" />
+
+<Step>Adjust import paths</Step>
+
+Ensure your `@/lib/utils` or equivalent classname helper is correctly imported.
+
+</Steps>
+
+## Usage
+
+```tsx
+import { McSlider } from '@/components/ui/mc-slider';
+
+export default function Example() {
+  return <McSlider defaultValue={[50]} max={100} step={1} />;
+}
+```
+
+## Examples
+
+### Basic
+
+```tsx
+<McSlider defaultValue={[40]} max={100} step={1} />
+```
+
+### Range
+
+```tsx
+<McSlider defaultValue={[20, 80]} max={100} step={1} />
+```
+
+### Vertical
+
+```tsx
+<McSlider defaultValue={[60]} max={100} orientation="vertical" className="h-48" />
+```
+
+### Disabled
+
+```tsx
+<McSlider defaultValue={[35]} max={100} disabled />
+```
+
+## API Reference
+
+### Props
+
+| Prop           | Type                         | Default        | Description                     |
+| -------------- | ---------------------------- | -------------- | ------------------------------- |
+| `defaultValue` | `number[]`                   | `undefined`    | Initial value(s) for the slider |
+| `value`        | `number[]`                   | `undefined`    | Controlled value(s)             |
+| `min`          | `number`                     | `0`            | Minimum slider value            |
+| `max`          | `number`                     | `100`          | Maximum slider value            |
+| `step`         | `number`                     | `1`            | Increment step                  |
+| `orientation`  | `"horizontal" \| "vertical"` | `"horizontal"` | Slider orientation              |
+| `disabled`     | `boolean`                    | `false`        | Disables interaction            |
+| `className`    | `string`                     | `undefined`    | Additional CSS classes          |
+
+All other props from `@base-ui/react/slider` are supported.

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

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-accordion.tsx",
-      "content": "import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn('flex w-[503px] flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('not-last:border-b', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <ChevronUpIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  );\n}\n\nexport { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };\n",
+      "content": "import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\r\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {\r\n  return (\r\n    <AccordionPrimitive.Root\r\n      data-slot=\"accordion\"\r\n      className={cn('flex w-[503px] flex-col', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\r\n  return (\r\n    <AccordionPrimitive.Item\r\n      data-slot=\"accordion-item\"\r\n      className={cn('not-last:border-b', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\r\n  return (\r\n    <AccordionPrimitive.Header className=\"flex\">\r\n      <AccordionPrimitive.Trigger\r\n        data-slot=\"accordion-trigger\"\r\n        className={cn(\r\n          'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n        <ChevronDownIcon\r\n          data-slot=\"accordion-trigger-icon\"\r\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\r\n        />\r\n        <ChevronUpIcon\r\n          data-slot=\"accordion-trigger-icon\"\r\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\r\n        />\r\n      </AccordionPrimitive.Trigger>\r\n    </AccordionPrimitive.Header>\r\n  );\r\n}\r\n\r\nfunction McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\r\n  return (\r\n    <AccordionPrimitive.Panel\r\n      data-slot=\"accordion-content\"\r\n      className=\"paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up\"\r\n      {...props}\r\n    >\r\n      <div\r\n        className={cn(\r\n          'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </AccordionPrimitive.Panel>\r\n  );\r\n}\r\n\r\nexport { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };\r\n",
       "type": "registry:component"
     }
   ],