diff --git a/packages/web/__registry__/index.tsx b/packages/web/__registry__/index.tsx index 4dcbdcf..30816aa 100644 --- a/packages/web/__registry__/index.tsx +++ b/packages/web/__registry__/index.tsx @@ -2371,6 +2371,19 @@ export const Index: Record = { }, ], }, + '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 ;\n}\n\nfunction McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return ;\n}\n\nfunction McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return ;\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 = { source: 'import {\n McAccordion,\n McAccordionContent,\n McAccordionItem,\n McAccordionTrigger,\n} from \'../ui/mc-accordion\';\n\nexport function AccordionDemo() {\n return (\n \n \n Product Information\n \n

\n Our flagship product combines cutting-edge technology with sleek design. Built with\n premium materials, it offers unparalleled performance and reliability.\n

\n

\n Key features include advanced processing capabilities, and an intuitive user interface\n designed for both beginners and experts.\n

\n \n \n \n Shipping Details\n \n

We offer standard (5-7 days), express (2-3 days), and overnight shipping.

\n

\n Free shipping on international orders is available once the minimum order amount is\n reached.\n

\n \n \n \n Return Policy\n \n

\n Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n processed within 5-7 business days.\n

\n \n \n \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) {\n return (\n \n
\n

\n @peduarte starred 3 repositories\n

\n \n \n Toggle repositories\n \n
\n
\n @radix-ui/primitives\n
\n \n
\n @radix-ui/colors\n
\n
\n @stitches/react\n
\n \n \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) {\n return (\n \n
\n

\n @peduarte starred 3 repositories\n

\n \n \n Toggle repositories\n \n
\n
\n @radix-ui/primitives\n
\n \n
\n @radix-ui/colors\n
\n
\n @stitches/react\n
\n \n \n );\n}\n', + }, 'mc-separator-demo': { name: 'mc-separator-demo', description: 'Demo for MicroClub Separator', diff --git a/packages/web/__registry__/registry.autogenerated.json b/packages/web/__registry__/registry.autogenerated.json index 9617e84..7c7d537 100644 --- a/packages/web/__registry__/registry.autogenerated.json +++ b/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", diff --git a/packages/web/content/docs/components/mc-collapsible.mdx b/packages/web/content/docs/components/mc-collapsible.mdx index f40dc31..77b92e4 100644 --- a/packages/web/content/docs/components/mc-collapsible.mdx +++ b/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. --- - - This component is coming soon. Check our [contributing guide](/docs/introduction#contributing) for - more information. - +## 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 + + + + + + + + + + +## Add to Your Project + + + npx mcoli-ui@latest add mc-collapsible + pnpm dlx mcoli-ui@latest add mc-collapsible + yarn dlx mcoli-ui@latest add mc-collapsible + bunx mcoli-ui@latest add mc-collapsible + + +### Manual Setup + + + +Install the dependency + + + npm install @base-ui/react + pnpm add @base-ui/react + yarn add @base-ui/react + bun add @base-ui/react + + +Copy the source code + + + + + +## Usage + +```tsx +import { + McCollapsible, + McCollapsibleContent, + McCollapsibleTrigger, +} from '@/components/ui/mc-collapsible'; + +export default function Example() { + return ( + + Toggle collapse + Details are shown when the panel is open. + + ); +} +``` + +## 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 ( + + {open ? 'Hide' : 'Show'} details + Controlled panel content. + + ); +} +``` + +## 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`. diff --git a/packages/web/content/docs/components/meta.json b/packages/web/content/docs/components/meta.json index c50ba5a..f389c18 100644 --- a/packages/web/content/docs/components/meta.json +++ b/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" ] diff --git a/packages/web/public/r/mc-collapsible.json b/packages/web/public/r/mc-collapsible.json new file mode 100644 index 0000000..a0039be --- /dev/null +++ b/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 ;\n}\n\nfunction McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return ;\n}\n\nfunction McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return ;\n}\n\nexport { McCollapsible, McCollapsibleTrigger, McCollapsibleContent };\n", + "type": "registry:component" + } + ], + "type": "registry:component" +} diff --git a/packages/web/public/r/registry.json b/packages/web/public/r/registry.json index 9617e84..7c7d537 100644 --- a/packages/web/public/r/registry.json +++ b/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", diff --git a/packages/web/registry/examples/mc-collapsible-demo.tsx b/packages/web/registry/examples/mc-collapsible-demo.tsx new file mode 100644 index 0000000..1d160a8 --- /dev/null +++ b/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) { + return ( + +
+

+ @peduarte starred 3 repositories +

+ + + Toggle repositories + +
+
+ @radix-ui/primitives +
+ +
+ @radix-ui/colors +
+
+ @stitches/react +
+ + + ); +} diff --git a/packages/web/registry/registry-examples.ts b/packages/web/registry/registry-examples.ts index 8541a6e..16c173b 100644 --- a/packages/web/registry/registry-examples.ts +++ b/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', diff --git a/packages/web/registry/registry-ui.ts b/packages/web/registry/registry-ui.ts index 1978a25..02702ea 100644 --- a/packages/web/registry/registry-ui.ts +++ b/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', diff --git a/packages/web/registry/ui/mc-collapsible.tsx b/packages/web/registry/ui/mc-collapsible.tsx new file mode 100644 index 0000000..651da2f --- /dev/null +++ b/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 ; +} + +function McCollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) { + return ; +} + +function McCollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) { + return ; +} + +export { McCollapsible, McCollapsibleTrigger, McCollapsibleContent }; diff --git a/packages/web/stories/McCollapsible.stories.tsx b/packages/web/stories/McCollapsible.stories.tsx new file mode 100644 index 0000000..27990a7 --- /dev/null +++ b/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 = { + title: 'Components/McCollapsible', + component: McCollapsibleDemo, + tags: ['autodocs'], + args: { + defaultOpen: false, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Playground: Story = {}; + +export const DefaultOpen: Story = { + args: { + defaultOpen: true, + }, +}; + +export const Disabled: Story = { + args: { + disabled: true, + }, +};