@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms/button.md

@@ -0,0 +1,238 @@
+# Button
+
+A versatile button component with multiple variants, sizes, and states including loading indicators.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { Button } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { TrashIcon } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <div className='flex items-center flex-wrap gap-2'>
+      <Button size='sm'>Small</Button>
+      <Button>Default</Button>
+      <Button size='lg'>Large</Button>
+      <Button size='icon-sm'>
+        <TrashIcon />
+      </Button>
+      <Button size='icon'>
+        <TrashIcon />
+      </Button>
+      <Button size='icon-lg'>
+        <TrashIcon />
+      </Button>
+      <Button disabled>Disabled</Button>
+    </div>
+  )
+}
+```
+
+### Secondary
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { TrashIcon } from 'lucide-react'
+
+export default function SecondaryExample() {
+  return (
+    <div className='flex items-center flex-wrap gap-2'>
+      <Button variant='secondary' size='sm'>
+        Small
+      </Button>
+      <Button variant='secondary'>Default</Button>
+      <Button variant='secondary' size='lg'>
+        Large
+      </Button>
+      <Button variant='secondary' size='icon-sm'>
+        <TrashIcon />
+      </Button>
+      <Button variant='secondary' size='icon'>
+        <TrashIcon />
+      </Button>
+      <Button variant='secondary' size='icon-lg'>
+        <TrashIcon />
+      </Button>
+      <Button variant='secondary' disabled>
+        Disabled
+      </Button>
+    </div>
+  )
+}
+```
+
+### Outline
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { TrashIcon } from 'lucide-react'
+
+export default function OutlineExample() {
+  return (
+    <div className='flex items-center flex-wrap gap-2'>
+      <Button variant='outline' size='sm'>
+        Small
+      </Button>
+      <Button variant='outline'>Default</Button>
+      <Button variant='outline' size='lg'>
+        Large
+      </Button>
+      <Button variant='outline' size='icon-sm'>
+        <TrashIcon />
+      </Button>
+      <Button variant='outline' size='icon'>
+        <TrashIcon />
+      </Button>
+      <Button variant='outline' size='icon-lg'>
+        <TrashIcon />
+      </Button>
+      <Button variant='outline' disabled>
+        Disabled
+      </Button>
+    </div>
+  )
+}
+```
+
+### Destructive
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { TrashIcon } from 'lucide-react'
+
+export default function DestructiveExample() {
+  return (
+    <div className='flex items-center flex-wrap gap-2'>
+      <Button variant='destructive' size='sm'>
+        Small
+      </Button>
+      <Button variant='destructive'>Default</Button>
+      <Button variant='destructive' size='lg'>
+        Large
+      </Button>
+      <Button variant='destructive' size='icon-sm'>
+        <TrashIcon />
+      </Button>
+      <Button variant='destructive' size='icon'>
+        <TrashIcon />
+      </Button>
+      <Button variant='destructive' size='icon-lg'>
+        <TrashIcon />
+      </Button>
+      <Button variant='destructive' disabled>
+        Disabled
+      </Button>
+    </div>
+  )
+}
+```
+
+### Ghost
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { TrashIcon } from 'lucide-react'
+
+export default function GhostExample() {
+  return (
+    <div className='flex items-center flex-wrap gap-2'>
+      <Button variant='ghost' size='sm'>
+        Small
+      </Button>
+      <Button variant='ghost'>Default</Button>
+      <Button variant='ghost' size='lg'>
+        Large
+      </Button>
+      <Button variant='ghost' size='icon-sm'>
+        <TrashIcon />
+      </Button>
+      <Button variant='ghost' size='icon'>
+        <TrashIcon />
+      </Button>
+      <Button variant='ghost' size='icon-lg'>
+        <TrashIcon />
+      </Button>
+      <Button variant='ghost' disabled>
+        Disabled
+      </Button>
+    </div>
+  )
+}
+```
+
+### Loading
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { LoaderCircle } from 'lucide-react'
+import { useState } from 'react'
+
+export default function LoadingExample() {
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = () => {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+    }, 2000)
+  }
+
+  return (
+    <div className='flex gap-2'>
+      <Button disabled={loading} focusableWhenDisabled onClick={handleClick}>
+        {loading ? (
+          <div className='flex items-center gap-2'>
+            <LoaderCircle className='animate-spin' /> Loading...
+          </div>
+        ) : (
+          'Submit'
+        )}
+      </Button>
+    </div>
+  )
+}
+```
+
+### As Link
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { Github } from 'lucide-react'
+import Link from 'next/link'
+
+export default function AsLinkExample() {
+  return (
+    <div className='flex gap-2'>
+      <Button
+        render={
+          <Link href='https://github.com/LGLabGreg/compose-ui'>
+            <Github />
+            Github
+          </Link>
+        }
+        nativeButton={false}
+      />
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Button Documentation](https://base-ui.com/react/components/button)
+- [API Reference](https://base-ui.com/react/components/button#api-reference)

package/dist/assets/llms/card.md

@@ -0,0 +1,264 @@
+# Card
+
+A flexible card component with support for media, headers, content sections, and footers. Supports both vertical and horizontal layouts with multiple variants.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { CardRoot, CardMedia, CardHeader, CardTitle, CardDescription, CardContent, CardSection, CardFooter } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardMedia,
+  CardRoot,
+  CardTitle,
+} from '@lglab/compose-ui/card'
+
+export default function VerticalMediaCard() {
+  return (
+    <CardRoot className='w-80 max-w-full'>
+      <CardMedia className='aspect-video rounded-t-lg'>
+        <img
+          src='https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80'
+          alt='Product displayed on a desk with notebook and fruit'
+        />
+      </CardMedia>
+      <CardHeader>
+        <CardTitle>Product Name</CardTitle>
+        <CardDescription>This is a description of the product.</CardDescription>
+      </CardHeader>
+      <CardFooter className='justify-end gap-2'>
+        <Button size='sm' variant='outline'>
+          Details
+        </Button>
+        <Button size='sm'>Add to Cart</Button>
+      </CardFooter>
+    </CardRoot>
+  )
+}
+```
+
+### Horizontal Layout
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardMedia,
+  CardRoot,
+  CardTitle,
+} from '@lglab/compose-ui/card'
+
+export default function HorizontalLayoutCard() {
+  return (
+    <CardRoot className='w-fit flex flex-row'>
+      <CardMedia className='w-30 rounded-l-lg'>
+        <img
+          src='https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80'
+          alt='Grid of user avatars'
+          className='aspect-square'
+        />
+      </CardMedia>
+      <div className='flex flex-1 flex-col'>
+        <CardHeader>
+          <CardTitle>User Profile</CardTitle>
+          <CardDescription>
+            Member since 2024. Active contributor to the community.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter className='gap-2'>
+          <Button size='sm'>Follow</Button>
+          <Button size='sm' variant='outline'>
+            Message
+          </Button>
+        </CardFooter>
+      </div>
+    </CardRoot>
+  )
+}
+```
+
+### Split Layout
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { CardDescription, CardMedia, CardRoot, CardTitle } from '@lglab/compose-ui/card'
+
+export default function SplitLayoutCard() {
+  return (
+    <CardRoot className='max-w-lg overflow-hidden flex flex-col md:flex-row'>
+      <CardMedia className='aspect-video md:w-1/2 shrink-0'>
+        <img
+          src='https://images.unsplash.com/photo-1513185041617-8ab03f83d6c5?q=80'
+          alt='Open book on a wooden table'
+          className='h-full object-cover'
+        />
+      </CardMedia>
+      <div className='flex flex-1 flex-col justify-center p-6'>
+        <CardTitle as='h2' className='text-xl text-primary'>
+          Article Title
+        </CardTitle>
+        <CardDescription className='mt-2'>
+          This is a longer description that provides context about the article content.
+          Perfect for blog posts or news items.
+        </CardDescription>
+        <div className='mt-4 flex gap-2'>
+          <Button size='sm'>Read Article</Button>
+          <Button size='sm' variant='ghost'>
+            Share
+          </Button>
+        </div>
+      </div>
+    </CardRoot>
+  )
+}
+```
+
+### Grid Stats
+
+```tsx
+import { CardContent, CardHeader, CardRoot, CardTitle } from '@lglab/compose-ui/card'
+
+export default function GridStatsCard() {
+  const stats = [
+    { label: 'Total Sales', value: '$12,345' },
+    { label: 'Orders', value: '234' },
+    { label: 'Customers', value: '1,234' },
+    { label: 'Revenue', value: '$45,678' },
+  ]
+
+  return (
+    <CardRoot className='w-full md:w-2/3 lg:w-1/2'>
+      <CardHeader>
+        <CardTitle>Dashboard Overview</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-2 gap-4'>
+          {stats.map((stat) => (
+            <div key={stat.label}>
+              <p className='text-sm text-muted-foreground'>{stat.label}</p>
+              <p className='text-lg font-semibold'>{stat.value}</p>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </CardRoot>
+  )
+}
+```
+
+### Multi-Section
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  CardDescription,
+  CardFooter,
+  CardRoot,
+  CardSection,
+  CardTitle,
+} from '@lglab/compose-ui/card'
+import { Separator } from '@lglab/compose-ui/separator'
+
+export default function MultiSectionCard() {
+  return (
+    <CardRoot className='w-96 max-w-full'>
+      <CardSection className='space-y-0.5'>
+        <CardTitle>Event Details</CardTitle>
+        <CardDescription>Annual Company Meetup</CardDescription>
+      </CardSection>
+
+      <Separator />
+
+      <CardSection>
+        <dl className='space-y-3'>
+          <div>
+            <dt className='text-sm font-semibold'>Date:</dt>
+            <dd className='text-sm'>March 15, 2024</dd>
+          </div>
+          <div>
+            <dt className='text-sm font-semibold'>Location:</dt>
+            <dd className='text-sm'>San Francisco, CA</dd>
+          </div>
+          <div>
+            <dt className='text-sm font-semibold'>Attendees:</dt>
+            <dd className='text-sm'>150 people</dd>
+          </div>
+        </dl>
+      </CardSection>
+
+      <Separator />
+
+      <CardFooter className='gap-2'>
+        <Button size='sm'>Register</Button>
+        <Button size='sm' variant='outline'>
+          Learn More
+        </Button>
+      </CardFooter>
+    </CardRoot>
+  )
+}
+```
+
+### Custom Heading Level
+
+```tsx
+import { CardDescription, CardHeader, CardRoot, CardTitle } from '@lglab/compose-ui/card'
+
+export default function CardWithCustomHeading() {
+  return (
+    <CardRoot className='w-72'>
+      <CardHeader>
+        <CardTitle as='h2' className='text-xl'>
+          Page Title Card
+        </CardTitle>
+        <CardDescription>Using h2 instead of the default h3.</CardDescription>
+      </CardHeader>
+    </CardRoot>
+  )
+}
+```
+
+### Variants
+
+```tsx
+import { CardRoot, CardTitle } from '@lglab/compose-ui/card'
+
+export default function CardVariants() {
+  return (
+    <div className='flex gap-4'>
+      <CardRoot variant='default' className='w-40 p-4'>
+        <CardTitle className='text-sm'>Default</CardTitle>
+      </CardRoot>
+      <CardRoot variant='outline' className='w-40 p-4'>
+        <CardTitle className='text-sm'>Outline</CardTitle>
+      </CardRoot>
+      <CardRoot variant='elevated' className='w-40 p-4'>
+        <CardTitle className='text-sm'>Elevated</CardTitle>
+      </CardRoot>
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Card Documentation](https://base-ui.com/react/components/card)
+- [API Reference](https://base-ui.com/react/components/card#api-reference)

package/dist/assets/llms/checkbox-group.md

@@ -0,0 +1,158 @@
+# Checkbox Group
+
+Provides shared state to a series of checkboxes.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { CheckboxGroupRoot } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { CheckboxIndicator, CheckboxRoot } from '@lglab/compose-ui/checkbox'
+import { CheckboxGroupRoot } from '@lglab/compose-ui/checkbox-group'
+import { Check } from 'lucide-react'
+import * as React from 'react'
+
+const apples = [
+  { value: 'fuji', label: 'Fuji' },
+  { value: 'gala', label: 'Gala' },
+  { value: 'granny-smith', label: 'Granny Smith' },
+]
+
+export default function DefaultExample() {
+  const id = React.useId()
+  const [value, setValue] = React.useState<string[]>(['fuji'])
+
+  return (
+    <CheckboxGroupRoot aria-labelledby={id} value={value} onValueChange={setValue}>
+      <div className='text-sm font-medium text-foreground' id={id}>
+        Favorite apples
+      </div>
+
+      {apples.map((apple) => (
+        <label key={apple.value} className='flex items-center gap-2 text-sm'>
+          <CheckboxRoot name='apple' value={apple.value}>
+            <CheckboxIndicator>
+              <Check className='size-3.5' />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+          {apple.label}
+        </label>
+      ))}
+    </CheckboxGroupRoot>
+  )
+}
+```
+
+### Parent Checkbox
+
+```tsx
+import { CheckboxIndicator, CheckboxRoot } from '@lglab/compose-ui/checkbox'
+import { CheckboxGroupRoot } from '@lglab/compose-ui/checkbox-group'
+import { Check, Minus } from 'lucide-react'
+import * as React from 'react'
+
+const apples = [
+  { value: 'fuji', label: 'Fuji' },
+  { value: 'gala', label: 'Gala' },
+  { value: 'granny-smith', label: 'Granny Smith' },
+]
+
+export default function ParentCheckboxExample() {
+  const id = React.useId()
+  const [value, setValue] = React.useState<string[]>(['fuji'])
+
+  return (
+    <CheckboxGroupRoot
+      aria-labelledby={id}
+      value={value}
+      onValueChange={setValue}
+      allValues={apples.map((apple) => apple.value)}
+      className='pl-4'
+    >
+      <label className='-ml-4 flex items-center gap-2 text-sm font-medium' id={id}>
+        <CheckboxRoot name='apples' parent>
+          <CheckboxIndicator
+            render={(props, state) => (
+              <span {...props}>
+                {state.indeterminate ? (
+                  <Minus className='size-3.5' />
+                ) : (
+                  <Check className='size-3.5' />
+                )}
+              </span>
+            )}
+          />
+        </CheckboxRoot>
+        Apples
+      </label>
+
+      {apples.map((apple) => (
+        <label key={apple.value} className='flex items-center gap-2 text-sm'>
+          <CheckboxRoot value={apple.value}>
+            <CheckboxIndicator>
+              <Check className='size-3.5' />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+          {apple.label}
+        </label>
+      ))}
+    </CheckboxGroupRoot>
+  )
+}
+```
+
+### With Field
+
+```tsx
+import { CheckboxIndicator, CheckboxRoot } from '@lglab/compose-ui/checkbox'
+import { CheckboxGroupRoot } from '@lglab/compose-ui/checkbox-group'
+import { FieldDescription, FieldItem, FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import { FieldsetLegend, FieldsetRoot } from '@lglab/compose-ui/fieldset'
+import { Check } from 'lucide-react'
+
+const fruits = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+]
+
+export default function WithFieldExample() {
+  return (
+    <FieldRoot name='fruits'>
+      <FieldsetRoot render={<CheckboxGroupRoot />}>
+        <FieldsetLegend>Favorite Fruits</FieldsetLegend>
+        {fruits.map((fruit) => (
+          <FieldItem key={fruit.value}>
+            <FieldLabel>
+              <CheckboxRoot value={fruit.value}>
+                <CheckboxIndicator>
+                  <Check className='size-3.5' />
+                </CheckboxIndicator>
+              </CheckboxRoot>
+              {fruit.label}
+            </FieldLabel>
+          </FieldItem>
+        ))}
+      </FieldsetRoot>
+      <FieldDescription>Select your favorite fruits.</FieldDescription>
+    </FieldRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Checkbox Group Documentation](https://base-ui.com/react/components/checkbox-group)
+- [API Reference](https://base-ui.com/react/components/checkbox-group#api-reference)