@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms/checkbox.md

@@ -0,0 +1,83 @@
+# Checkbox
+
+A control that allows the user to toggle between checked and unchecked states.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { CheckboxRoot, CheckboxIndicator } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { CheckboxIndicator, CheckboxRoot } from '@lglab/compose-ui/checkbox'
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import { Check } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <FieldRoot>
+      <FieldLabel className='flex items-center gap-2'>
+        <CheckboxRoot defaultChecked>
+          <CheckboxIndicator>
+            <Check className='size-3.5' />
+          </CheckboxIndicator>
+        </CheckboxRoot>
+        Accept terms and conditions
+      </FieldLabel>
+    </FieldRoot>
+  )
+}
+```
+
+### Indeterminate
+
+```tsx
+import { CheckboxIndicator, CheckboxRoot } from '@lglab/compose-ui/checkbox'
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import { Check, Minus } from 'lucide-react'
+import * as React from 'react'
+
+export default function IndeterminateExample() {
+  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate')
+
+  return (
+    <FieldRoot>
+      <FieldLabel className='flex items-center gap-2'>
+        <CheckboxRoot
+          checked={checked === true}
+          indeterminate={checked === 'indeterminate'}
+          onCheckedChange={(newChecked) => setChecked(newChecked)}
+        >
+          <CheckboxIndicator
+            render={(props, state) => (
+              <span {...props}>
+                {state.indeterminate ? (
+                  <Minus className='size-3.5' />
+                ) : (
+                  <Check className='size-3.5' />
+                )}
+              </span>
+            )}
+          />
+        </CheckboxRoot>
+        Select all items
+      </FieldLabel>
+    </FieldRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Checkbox Documentation](https://base-ui.com/react/components/checkbox)
+- [API Reference](https://base-ui.com/react/components/checkbox#api-reference)

package/dist/assets/llms/collapsible.md

@@ -0,0 +1,165 @@
+# Collapsible
+
+A component that allows content to be expanded or collapsed.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  CollapsiblePanel,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '@lglab/compose-ui/collapsible'
+import { ChevronDown } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <CollapsibleRoot className='group w-full max-w-md'>
+      <CollapsibleTrigger
+        render={(props) => (
+          <Button {...props} variant='outline' className='w-full justify-between'>
+            <span>What is Compose UI?</span>
+            <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-open:rotate-180' />
+          </Button>
+        )}
+      />
+      <CollapsiblePanel>
+        <div className='p-2 text-sm'>
+          <p>
+            Compose UI is a collection of accessible React components built with Base UI
+            and Tailwind CSS, ready to use in your design systems and web apps.
+          </p>
+        </div>
+      </CollapsiblePanel>
+    </CollapsibleRoot>
+  )
+}
+```
+
+### Sidebar Menu
+
+```tsx
+import {
+  CollapsiblePanel,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '@lglab/compose-ui/collapsible'
+import { ChevronDown, Settings } from 'lucide-react'
+
+const menuItems = [
+  {
+    title: 'Settings',
+    icon: Settings,
+    items: ['Preferences', 'Notifications', 'Privacy', 'Security'],
+  },
+]
+
+export default function SidebarMenuExample() {
+  return (
+    <nav className='w-3xs'>
+      {menuItems.map((item) => {
+        const Icon = item.icon
+        return (
+          <CollapsibleRoot key={item.title} className='group'>
+            <CollapsibleTrigger className='flex w-full items-center gap-2 px-2 py-1.5 text-sm text-left font-medium text-foreground transition-colors hover:bg-muted'>
+              <Icon className='size-4 shrink-0' />
+              <span className='flex-1'>{item.title}</span>
+              <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 rotate-270 group-data-open:rotate-360' />
+            </CollapsibleTrigger>
+            <CollapsiblePanel>
+              <div className='ml-4 border-l border-border pl-4 pt-1'>
+                <ul className='space-y-0.5'>
+                  {item.items.map((subItem) => (
+                    <li key={subItem}>
+                      <a
+                        href='#'
+                        className='block py-1 text-sm text-muted-foreground transition-colors hover:text-foreground'
+                      >
+                        {subItem}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </CollapsiblePanel>
+          </CollapsibleRoot>
+        )
+      })}
+    </nav>
+  )
+}
+```
+
+### Default Open
+
+```tsx
+import {
+  CollapsiblePanel,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '@lglab/compose-ui/collapsible'
+import { ChevronDown, Settings } from 'lucide-react'
+
+const menuItems = [
+  {
+    title: 'Settings',
+    icon: Settings,
+    items: ['Preferences', 'Notifications', 'Privacy', 'Security'],
+  },
+]
+
+export default function SidebarMenuDefaultOpenExample() {
+  return (
+    <nav className='w-3xs'>
+      {menuItems.map((item) => {
+        const Icon = item.icon
+        return (
+          <CollapsibleRoot key={item.title} className='group' defaultOpen>
+            <CollapsibleTrigger className='flex w-full items-center gap-2 px-2 py-1.5 text-sm text-left font-medium text-foreground transition-colors hover:bg-muted'>
+              <Icon className='size-4 shrink-0' />
+              <span className='flex-1'>{item.title}</span>
+              <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 rotate-270 group-data-open:rotate-360' />
+            </CollapsibleTrigger>
+            <CollapsiblePanel>
+              <div className='ml-4 border-l border-border pl-4 pt-1'>
+                <ul className='space-y-0.5'>
+                  {item.items.map((subItem) => (
+                    <li key={subItem}>
+                      <a
+                        href='#'
+                        className='block py-1 text-sm text-muted-foreground transition-colors hover:text-foreground'
+                      >
+                        {subItem}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </CollapsiblePanel>
+          </CollapsibleRoot>
+        )
+      })}
+    </nav>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Collapsible Documentation](https://base-ui.com/react/components/collapsible)
+- [API Reference](https://base-ui.com/react/components/collapsible#api-reference)