@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms/select.md

@@ -0,0 +1,276 @@
+# Select
+
+A common form component for choosing a predefined value in a dropdown menu.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { SelectRoot, SelectTrigger, SelectValue, SelectIcon, SelectBackdrop, SelectPortal, SelectPositioner, SelectPopup, SelectList, SelectArrow, SelectItem, SelectItemText, SelectItemIndicator, SelectGroup, SelectGroupLabel, SelectScrollUpArrow, SelectScrollDownArrow, SelectSeparator } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectRoot,
+  SelectScrollDownArrow,
+  SelectScrollUpArrow,
+  SelectTrigger,
+  SelectValue,
+} from '@lglab/compose-ui/select'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+const apples = [
+  { label: 'Gala', value: 'gala' },
+  { label: 'Fuji', value: 'fuji' },
+  { label: 'Honeycrisp', value: 'honeycrisp' },
+  { label: 'Granny Smith', value: 'granny-smith' },
+  { label: 'Pink Lady', value: 'pink-lady' },
+]
+
+export default function DefaultExample() {
+  return (
+    <FieldRoot className='flex flex-col gap-1'>
+      <FieldLabel nativeLabel={false} render={<div />}>
+        Apple
+      </FieldLabel>
+      <SelectRoot items={apples}>
+        <SelectTrigger>
+          <SelectValue placeholder='Select apple' />
+          <SelectIcon>
+            <ChevronsUpDown className='size-4' />
+          </SelectIcon>
+        </SelectTrigger>
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectScrollUpArrow />
+              <SelectList>
+                {apples.map(({ label, value }) => (
+                  <SelectItem key={label} value={value}>
+                    <SelectItemText>{label}</SelectItemText>
+                    <SelectItemIndicator>
+                      <Check className='size-3.5' />
+                    </SelectItemIndicator>
+                  </SelectItem>
+                ))}
+              </SelectList>
+              <SelectScrollDownArrow />
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+      </SelectRoot>
+    </FieldRoot>
+  )
+}
+```
+
+### Multiple Selection
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+} from '@lglab/compose-ui/select'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+const languages = {
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  python: 'Python',
+  java: 'Java',
+  csharp: 'C#',
+  php: 'PHP',
+  cpp: 'C++',
+  rust: 'Rust',
+  go: 'Go',
+  swift: 'Swift',
+}
+
+type Language = keyof typeof languages
+
+const values = Object.keys(languages) as Language[]
+
+function renderValue(value: Language[]) {
+  if (value.length === 0) {
+    return 'Select languages…'
+  }
+
+  const firstLanguage = languages[value[0]]
+  const additionalLanguages = value.length > 1 ? ` (+${value.length - 1} more)` : ''
+  return firstLanguage + additionalLanguages
+}
+
+export default function MultipleExample() {
+  return (
+    <FieldRoot className='flex flex-col gap-1'>
+      <FieldLabel nativeLabel={false} render={<div />}>
+        Languages
+      </FieldLabel>
+      <SelectRoot multiple defaultValue={['javascript', 'typescript']}>
+        <SelectTrigger>
+          <SelectValue>{renderValue}</SelectValue>
+          <SelectIcon>
+            <ChevronsUpDown className='size-4' />
+          </SelectIcon>
+        </SelectTrigger>
+        <SelectPortal>
+          <SelectPositioner alignItemWithTrigger={false}>
+            <SelectPopup>
+              <SelectList>
+                {values.map((value) => (
+                  <SelectItem key={value} value={value}>
+                    <SelectItemText>{languages[value]}</SelectItemText>
+                    <SelectItemIndicator>
+                      <Check className='size-3.5' />
+                    </SelectItemIndicator>
+                  </SelectItem>
+                ))}
+              </SelectList>
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+      </SelectRoot>
+    </FieldRoot>
+  )
+}
+```
+
+### Object Values
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectRoot,
+  SelectScrollDownArrow,
+  SelectScrollUpArrow,
+  SelectTrigger,
+  SelectValue,
+} from '@lglab/compose-ui/select'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+interface ShippingMethod {
+  id: string
+  name: string
+  duration: string
+  price: string
+}
+
+const shippingMethods: ShippingMethod[] = [
+  {
+    id: 'standard',
+    name: 'Standard',
+    duration: 'Delivers in 4-6 business days',
+    price: '$4.99',
+  },
+  {
+    id: 'express',
+    name: 'Express',
+    duration: 'Delivers in 2-3 business days',
+    price: '$9.99',
+  },
+  {
+    id: 'overnight',
+    name: 'Overnight',
+    duration: 'Delivers next business day',
+    price: '$19.99',
+  },
+]
+
+export default function ObjectValuesExample() {
+  return (
+    <FieldRoot className='flex flex-col gap-1'>
+      <FieldLabel nativeLabel={false} render={<div />}>
+        Shipping method
+      </FieldLabel>
+      <SelectRoot<ShippingMethod>
+        defaultValue={shippingMethods[0]}
+        itemToStringValue={(item) => item.id}
+      >
+        <SelectTrigger className='min-h-10 items-start py-2'>
+          <SelectValue>
+            {(method: ShippingMethod) => (
+              <span className='flex flex-col items-start text-left'>
+                <span className='text-base font-medium'>{method.name}</span>
+                <span className='text-sm'>
+                  {method.duration} ({method.price})
+                </span>
+              </span>
+            )}
+          </SelectValue>
+          <SelectIcon className='self-center'>
+            <ChevronsUpDown className='size-4' />
+          </SelectIcon>
+        </SelectTrigger>
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectScrollUpArrow />
+              <SelectList>
+                {shippingMethods.map((method) => (
+                  <SelectItem
+                    key={method.id}
+                    value={method}
+                    className='items-start py-2.5'
+                  >
+                    <SelectItemText className='flex flex-col items-start text-left'>
+                      <span className='text-base font-medium'>{method.name}</span>
+                      <span className='text-sm'>
+                        {method.duration} ({method.price})
+                      </span>
+                    </SelectItemText>
+                    <SelectItemIndicator className='relative top-[0.4em]'>
+                      <Check className='size-3.5' />
+                    </SelectItemIndicator>
+                  </SelectItem>
+                ))}
+              </SelectList>
+              <SelectScrollDownArrow />
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+      </SelectRoot>
+    </FieldRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Select Documentation](https://base-ui.com/react/components/select)
+- [API Reference](https://base-ui.com/react/components/select#api-reference)

package/dist/assets/llms/separator.md

@@ -0,0 +1,49 @@
+# Separator
+
+A separator element accessible to screen readers.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { Separator } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Separator } from '@lglab/compose-ui/separator'
+
+export default function DefaultExample() {
+  return (
+    <div className='space-y-2'>
+      <div>
+        <h4 className='font-medium'>Compose UI</h4>
+        <p className='text-sm text-muted-foreground'>
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator />
+      <div className='flex h-5 items-center space-x-4 text-sm'>
+        <div>Overview</div>
+        <Separator orientation='vertical' />
+        <div>Quick Start</div>
+        <Separator orientation='vertical' />
+        <div>Theming</div>
+      </div>
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Separator Documentation](https://base-ui.com/react/components/separator)
+- [API Reference](https://base-ui.com/react/components/separator#api-reference)

package/dist/assets/llms/skeleton.md

@@ -0,0 +1,96 @@
+# Skeleton
+
+A placeholder component for content that is loading. Use className to define custom shapes and sizes.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { Skeleton } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Skeleton } from '@lglab/compose-ui/skeleton'
+
+export default function DefaultExample() {
+  return (
+    <div className='flex items-center gap-4'>
+      <Skeleton className='size-12 rounded-full' />
+      <div className='space-y-2'>
+        <Skeleton className='h-4 w-[230px]' />
+        <Skeleton className='h-4 w-[190px]' />
+      </div>
+    </div>
+  )
+}
+```
+
+### Shimmer Animation
+
+```tsx
+import { Skeleton } from '@lglab/compose-ui/skeleton'
+
+export default function ShimmerExample() {
+  return (
+    <div className='flex items-center gap-4'>
+      <Skeleton animation='shimmer' className='size-12 rounded-full' />
+      <div className='space-y-2'>
+        <Skeleton animation='shimmer' className='h-4 w-[230px]' />
+        <Skeleton animation='shimmer' className='h-4 w-[190px]' />
+      </div>
+    </div>
+  )
+}
+```
+
+### Card
+
+```tsx
+import { CardContent, CardRoot } from '@lglab/compose-ui/card'
+import { Skeleton } from '@lglab/compose-ui/skeleton'
+
+export default function CardExample() {
+  return (
+    <CardRoot className='w-[300px] overflow-hidden'>
+      <Skeleton className='h-[125px] w-full' />
+      <CardContent className='space-y-2 pt-4'>
+        <Skeleton className='h-4 w-full' />
+        <Skeleton className='h-4 w-3/4' />
+      </CardContent>
+    </CardRoot>
+  )
+}
+```
+
+### No Animation
+
+```tsx
+import { CardContent, CardRoot } from '@lglab/compose-ui/card'
+import { Skeleton } from '@lglab/compose-ui/skeleton'
+
+export default function NoAnimationExample() {
+  return (
+    <CardRoot className='w-[300px] overflow-hidden'>
+      <Skeleton animation='none' className='h-[125px] w-full' />
+      <CardContent className='space-y-2 pt-4'>
+        <Skeleton animation='none' className='h-4 w-full' />
+        <Skeleton animation='none' className='h-4 w-3/4' />
+      </CardContent>
+    </CardRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Skeleton Documentation](https://base-ui.com/react/components/skeleton)
+- [API Reference](https://base-ui.com/react/components/skeleton#api-reference)

package/dist/assets/llms/slider.md

@@ -0,0 +1,161 @@
+# Slider
+
+A control for selecting a value or range from a continuous or discrete set of values.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { SliderRoot, SliderValue, SliderControl, SliderTrack, SliderIndicator, SliderThumb } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  SliderControl,
+  SliderIndicator,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from '@lglab/compose-ui/slider'
+
+export default function DefaultExample() {
+  return (
+    <SliderRoot
+      className='mx-auto w-full max-w-md space-y-0.5'
+      defaultValue={43}
+      thumbAlignment='edge'
+    >
+      <div className='flex items-center justify-between text-sm'>
+        <span className='font-medium'>Volume</span>
+        <SliderValue className='tabular-nums' />
+      </div>
+      <SliderControl>
+        <SliderTrack>
+          <SliderIndicator />
+          <SliderThumb aria-label='Volume' />
+        </SliderTrack>
+      </SliderControl>
+    </SliderRoot>
+  )
+}
+```
+
+### Range
+
+```tsx
+import {
+  SliderControl,
+  SliderIndicator,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from '@lglab/compose-ui/slider'
+
+export default function RangeExample() {
+  return (
+    <SliderRoot
+      className='mx-auto w-full max-w-md space-y-0.5'
+      defaultValue={[40, 80]}
+      min={10}
+      max={120}
+      format={{ style: 'currency', currency: 'EUR' }}
+    >
+      <div className='flex items-center justify-between text-sm'>
+        <span className='font-medium'>Price Range</span>
+        <SliderValue className='tabular-nums' />
+      </div>
+      <SliderControl>
+        <SliderTrack>
+          <SliderIndicator />
+          <SliderThumb aria-label='Minimum price' />
+          <SliderThumb aria-label='Maximum price' />
+        </SliderTrack>
+      </SliderControl>
+    </SliderRoot>
+  )
+}
+```
+
+### Step
+
+```tsx
+import {
+  SliderControl,
+  SliderIndicator,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from '@lglab/compose-ui/slider'
+
+export default function StepExample() {
+  return (
+    <SliderRoot
+      className='mx-auto w-full max-w-md space-y-0.5'
+      defaultValue={100}
+      min={25}
+      max={200}
+      step={25}
+      format={{ style: 'unit', unit: 'percent' }}
+    >
+      <div className='flex items-center justify-between text-sm'>
+        <span className='font-medium'>Zoom Level</span>
+        <SliderValue className='tabular-nums' />
+      </div>
+      <SliderControl>
+        <SliderTrack>
+          <SliderIndicator />
+          <SliderThumb aria-label='Zoom level' />
+        </SliderTrack>
+      </SliderControl>
+    </SliderRoot>
+  )
+}
+```
+
+### Vertical
+
+```tsx
+import {
+  SliderControl,
+  SliderIndicator,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from '@lglab/compose-ui/slider'
+
+export default function VerticalExample() {
+  return (
+    <SliderRoot
+      className='mx-auto flex h-40 w-full max-w-md flex-col items-center'
+      orientation='vertical'
+      defaultValue={50}
+    >
+      <SliderValue className='mb-2 text-sm' />
+      <SliderControl className='h-full w-fit flex-col py-0 px-3'>
+        <SliderTrack className='h-full w-1.5'>
+          <SliderIndicator />
+          <SliderThumb aria-label='Value' />
+        </SliderTrack>
+      </SliderControl>
+    </SliderRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Slider Documentation](https://base-ui.com/react/components/slider)
+- [API Reference](https://base-ui.com/react/components/slider#api-reference)

package/dist/assets/llms/switch.md

@@ -0,0 +1,101 @@
+# Switch
+
+A control that indicates whether a setting is on or off.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { SwitchRoot, SwitchThumb } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { SwitchRoot, SwitchThumb } from '@lglab/compose-ui/switch'
+
+export default function DefaultExample() {
+  return (
+    <SwitchRoot>
+      <SwitchThumb />
+    </SwitchRoot>
+  )
+}
+```
+
+### Checked
+
+```tsx
+import { SwitchRoot, SwitchThumb } from '@lglab/compose-ui/switch'
+
+export default function CheckedExample() {
+  return (
+    <SwitchRoot defaultChecked>
+      <SwitchThumb />
+    </SwitchRoot>
+  )
+}
+```
+
+### Controlled
+
+```tsx
+import { SwitchRoot, SwitchThumb } from '@lglab/compose-ui/switch'
+import { useState } from 'react'
+
+export default function ControlledExample() {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <div className='flex items-center gap-2'>
+      <SwitchRoot checked={checked} onCheckedChange={setChecked}>
+        <SwitchThumb />
+      </SwitchRoot>
+      <span className='text-sm font-medium'>
+        {checked ? 'Notifications enabled' : 'Notifications disabled'}
+      </span>
+    </div>
+  )
+}
+```
+
+### Disabled
+
+```tsx
+import { SwitchRoot, SwitchThumb } from '@lglab/compose-ui/switch'
+
+export default function DisabledExample() {
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='flex items-center gap-2'>
+        <SwitchRoot disabled>
+          <SwitchThumb />
+        </SwitchRoot>
+        <span className='text-sm font-medium text-muted-foreground'>
+          Disabled unchecked
+        </span>
+      </div>
+      <div className='flex items-center gap-2'>
+        <SwitchRoot disabled defaultChecked>
+          <SwitchThumb />
+        </SwitchRoot>
+        <span className='text-sm font-medium text-muted-foreground'>
+          Disabled checked
+        </span>
+      </div>
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Switch Documentation](https://base-ui.com/react/components/switch)
+- [API Reference](https://base-ui.com/react/components/switch#api-reference)