@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms/meter.md

@@ -0,0 +1,181 @@
+# Meter
+
+A graphical display of a numeric value within a defined range.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { MeterRoot, MeterTrack, MeterIndicator, MeterValue, MeterLabel } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  MeterIndicator,
+  MeterLabel,
+  MeterRoot,
+  MeterTrack,
+  MeterValue,
+} from '@lglab/compose-ui/meter'
+
+export default function BasicExample() {
+  return (
+    <div className='space-y-6 w-full max-w-md mx-auto'>
+      <MeterRoot value={24}>
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Storage Used</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+
+      <MeterRoot value={65}>
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>CPU Usage</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+
+      <MeterRoot value={90}>
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Memory Usage</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  )
+}
+```
+
+### Animated
+
+```tsx
+import {
+  MeterIndicator,
+  MeterLabel,
+  MeterRoot,
+  MeterTrack,
+  MeterValue,
+} from '@lglab/compose-ui/meter'
+
+export default function AnimatedExample() {
+  return (
+    <div className='space-y-6 w-full max-w-md mx-auto'>
+      <MeterRoot value={24} animated>
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Storage Used</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+
+      <MeterRoot value={65} animated>
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>CPU Usage</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+
+      <MeterRoot value={90} animated>
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Memory Usage</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  )
+}
+```
+
+### Custom Format
+
+```tsx
+import {
+  MeterIndicator,
+  MeterLabel,
+  MeterRoot,
+  MeterTrack,
+  MeterValue,
+} from '@lglab/compose-ui/meter'
+
+export default function CustomFormatExample() {
+  return (
+    <div className='space-y-6 w-full max-w-md mx-auto'>
+      <MeterRoot
+        value={2500}
+        min={0}
+        max={5000}
+        format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
+      >
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Budget Used</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+
+      <MeterRoot
+        value={3.5}
+        min={0}
+        max={5}
+        format={{ style: 'decimal', minimumFractionDigits: 1, maximumFractionDigits: 1 }}
+      >
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Rating</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+
+      <MeterRoot
+        value={75}
+        min={0}
+        max={100}
+        getAriaValueText={(formattedValue, value) => `${value}% complete`}
+      >
+        <div className='flex items-center justify-between mb-2'>
+          <MeterLabel>Progress</MeterLabel>
+          <MeterValue />
+        </div>
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      </MeterRoot>
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Meter Documentation](https://base-ui.com/react/components/meter)
+- [API Reference](https://base-ui.com/react/components/meter#api-reference)

package/dist/assets/llms/navigation-menu.md

@@ -0,0 +1,187 @@
+# Navigation Menu
+
+A navigation component with support for dropdowns and submenus.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuIcon, NavigationMenuContent, NavigationMenuLink, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuViewport, NavigationMenuArrow, NavigationMenuBackdrop } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  NavigationMenuArrow,
+  NavigationMenuContent,
+  NavigationMenuIcon,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuPopup,
+  NavigationMenuPortal,
+  NavigationMenuPositioner,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from '@lglab/compose-ui/navigation-menu'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+const gettingStartedLinks = [
+  {
+    href: '/overview/quick-start',
+    title: 'Quick Start',
+    description: 'Get started with Compose UI in your React project.',
+  },
+  {
+    href: '/overview/composition',
+    title: 'Composition',
+    description: 'Learn about composable components and architecture.',
+  },
+  {
+    href: '/overview/accessibility',
+    title: 'Accessibility',
+    description: 'Built-in ARIA, keyboard navigation, and focus management.',
+  },
+  {
+    href: '/overview/theming',
+    title: 'Theming',
+    description: 'Customize colors, typography, and dark mode.',
+  },
+]
+
+const componentsLinks = [
+  { href: '/components/button', title: 'Button' },
+  { href: '/components/card', title: 'Card' },
+  { href: '/components/dialog', title: 'Dialog' },
+  { href: '/components/menu', title: 'Menu' },
+  { href: '/components/navigation-menu', title: 'Navigation Menu' },
+]
+
+const moreComponentsLinks = [
+  { href: '/components/accordion', title: 'Accordion' },
+  { href: '/components/tabs', title: 'Tabs' },
+  { href: '/components/tooltip', title: 'Tooltip' },
+  { href: '/components/popover', title: 'Popover' },
+]
+
+export default function NavigationMenuExample() {
+  return (
+    <NavigationMenuRoot>
+      <NavigationMenuList className='flex-col sm:flex-row'>
+        <NavigationMenuItem value='home'>
+          <NavigationMenuLink render={<Link href='/overview/quick-start' />}>
+            Home
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem value='getting-started'>
+          <NavigationMenuTrigger>
+            Getting Started
+            <NavigationMenuIcon>
+              <ChevronDown className='size-4' />
+            </NavigationMenuIcon>
+          </NavigationMenuTrigger>
+          <NavigationMenuContent className='max-w-[500px]'>
+            <ul className='grid gap-1 md:grid-cols-2'>
+              {gettingStartedLinks.map((link) => (
+                <li key={link.href}>
+                  <NavigationMenuLink
+                    render={<Link href={link.href} />}
+                    className='flex flex-col'
+                  >
+                    <div className='font-medium'>{link.title}</div>
+                    <p className='text-sm text-muted-foreground'>{link.description}</p>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem value='components'>
+          <NavigationMenuTrigger>
+            Components
+            <NavigationMenuIcon>
+              <ChevronDown className='size-4' />
+            </NavigationMenuIcon>
+          </NavigationMenuTrigger>
+          <NavigationMenuContent className='w-[220px]'>
+            <ul className='grid'>
+              {componentsLinks.map((link) => (
+                <li key={link.href}>
+                  <NavigationMenuLink render={<Link href={link.href} />}>
+                    {link.title}
+                  </NavigationMenuLink>
+                </li>
+              ))}
+              <li>
+                <NavigationMenuRoot orientation='vertical' className='w-full'>
+                  <NavigationMenuList className='flex-col items-stretch'>
+                    <NavigationMenuItem value='more-components'>
+                      <NavigationMenuTrigger className='w-full justify-between'>
+                        More Components
+                        <NavigationMenuIcon>
+                          <ChevronRight className='size-4' />
+                        </NavigationMenuIcon>
+                      </NavigationMenuTrigger>
+                      <NavigationMenuContent className='w-[200px]'>
+                        <ul className='grid'>
+                          {moreComponentsLinks.map((link) => (
+                            <li key={link.href}>
+                              <NavigationMenuLink render={<Link href={link.href} />}>
+                                {link.title}
+                              </NavigationMenuLink>
+                            </li>
+                          ))}
+                        </ul>
+                      </NavigationMenuContent>
+                    </NavigationMenuItem>
+                  </NavigationMenuList>
+
+                  <NavigationMenuPortal>
+                    <NavigationMenuPositioner side='right' align='start'>
+                      <NavigationMenuPopup>
+                        <NavigationMenuViewport />
+                      </NavigationMenuPopup>
+                    </NavigationMenuPositioner>
+                  </NavigationMenuPortal>
+                </NavigationMenuRoot>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem value='resources'>
+          <NavigationMenuLink render={<Link href='/overview/llms' />}>
+            LLMs
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+
+      <NavigationMenuPortal>
+        <NavigationMenuPositioner>
+          <NavigationMenuPopup>
+            <NavigationMenuArrow />
+            <NavigationMenuViewport />
+          </NavigationMenuPopup>
+        </NavigationMenuPositioner>
+      </NavigationMenuPortal>
+    </NavigationMenuRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Navigation Menu Documentation](https://base-ui.com/react/components/navigation-menu)
+- [API Reference](https://base-ui.com/react/components/navigation-menu#api-reference)

package/dist/assets/llms/number-field.md

@@ -0,0 +1,243 @@
+# Number Field
+
+A numeric input element with increment and decrement buttons, and a scrub area.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldGroup, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from '@lglab/compose-ui/number-field'
+import { Minus, MoveHorizontal, Plus } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <FieldRoot>
+      <NumberFieldRoot defaultValue={100}>
+        <NumberFieldScrubArea>
+          <FieldLabel>Amount</FieldLabel>
+          <NumberFieldScrubAreaCursor>
+            <MoveHorizontal className='size-4' />
+          </NumberFieldScrubAreaCursor>
+        </NumberFieldScrubArea>
+
+        <NumberFieldGroup>
+          <NumberFieldDecrement>
+            <Minus className='size-4' />
+          </NumberFieldDecrement>
+          <NumberFieldInput />
+          <NumberFieldIncrement>
+            <Plus className='size-4' />
+          </NumberFieldIncrement>
+        </NumberFieldGroup>
+      </NumberFieldRoot>
+    </FieldRoot>
+  )
+}
+```
+
+### Min/Max
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from '@lglab/compose-ui/number-field'
+import { Minus, MoveHorizontal, Plus } from 'lucide-react'
+
+export default function MinMaxExample() {
+  return (
+    <FieldRoot>
+      <NumberFieldRoot defaultValue={50} min={0} max={100}>
+        <NumberFieldScrubArea>
+          <FieldLabel>Percentage (0-100)</FieldLabel>
+          <NumberFieldScrubAreaCursor>
+            <MoveHorizontal className='size-4' />
+          </NumberFieldScrubAreaCursor>
+        </NumberFieldScrubArea>
+
+        <NumberFieldGroup>
+          <NumberFieldDecrement>
+            <Minus className='size-4' />
+          </NumberFieldDecrement>
+          <NumberFieldInput />
+          <NumberFieldIncrement>
+            <Plus className='size-4' />
+          </NumberFieldIncrement>
+        </NumberFieldGroup>
+      </NumberFieldRoot>
+    </FieldRoot>
+  )
+}
+```
+
+### Step
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from '@lglab/compose-ui/number-field'
+import { Minus, MoveHorizontal, Plus } from 'lucide-react'
+
+export default function StepExample() {
+  return (
+    <FieldRoot>
+      <NumberFieldRoot defaultValue={0} step={5}>
+        <NumberFieldScrubArea>
+          <FieldLabel>Quantity (step: 5)</FieldLabel>
+          <NumberFieldScrubAreaCursor>
+            <MoveHorizontal className='size-4' />
+          </NumberFieldScrubAreaCursor>
+        </NumberFieldScrubArea>
+
+        <NumberFieldGroup>
+          <NumberFieldDecrement>
+            <Minus className='size-4' />
+          </NumberFieldDecrement>
+          <NumberFieldInput />
+          <NumberFieldIncrement>
+            <Plus className='size-4' />
+          </NumberFieldIncrement>
+        </NumberFieldGroup>
+      </NumberFieldRoot>
+    </FieldRoot>
+  )
+}
+```
+
+### Controlled
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from '@lglab/compose-ui/number-field'
+import { Minus, MoveHorizontal, Plus } from 'lucide-react'
+import * as React from 'react'
+
+export default function ControlledExample() {
+  const [value, setValue] = React.useState<number | null>(50)
+
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <FieldRoot>
+        <NumberFieldRoot value={value} onValueChange={setValue}>
+          <NumberFieldScrubArea>
+            <FieldLabel>Controlled Value</FieldLabel>
+            <NumberFieldScrubAreaCursor>
+              <MoveHorizontal className='size-4' />
+            </NumberFieldScrubAreaCursor>
+          </NumberFieldScrubArea>
+
+          <NumberFieldGroup>
+            <NumberFieldDecrement>
+              <Minus className='size-4' />
+            </NumberFieldDecrement>
+            <NumberFieldInput />
+            <NumberFieldIncrement>
+              <Plus className='size-4' />
+            </NumberFieldIncrement>
+          </NumberFieldGroup>
+        </NumberFieldRoot>
+      </FieldRoot>
+
+      <div className='flex gap-2'>
+        <Button onClick={() => setValue(0)}>Set to 0</Button>
+        <Button onClick={() => setValue(100)}>Set to 100</Button>
+        <Button onClick={() => setValue(50)}>Reset to 50</Button>
+      </div>
+    </div>
+  )
+}
+```
+
+### Format
+
+```tsx
+import { FieldLabel, FieldRoot } from '@lglab/compose-ui/field'
+import {
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from '@lglab/compose-ui/number-field'
+import { Minus, MoveHorizontal, Plus } from 'lucide-react'
+
+export default function FormatExample() {
+  return (
+    <FieldRoot>
+      <NumberFieldRoot
+        defaultValue={1234.56}
+        locale='ja-JP'
+        format={{ style: 'currency', currency: 'JPY' }}
+      >
+        <NumberFieldScrubArea>
+          <FieldLabel>Japanese Yen (ja-JP)</FieldLabel>
+          <NumberFieldScrubAreaCursor>
+            <MoveHorizontal className='size-4' />
+          </NumberFieldScrubAreaCursor>
+        </NumberFieldScrubArea>
+
+        <NumberFieldGroup>
+          <NumberFieldDecrement>
+            <Minus className='size-4' />
+          </NumberFieldDecrement>
+          <NumberFieldInput />
+          <NumberFieldIncrement>
+            <Plus className='size-4' />
+          </NumberFieldIncrement>
+        </NumberFieldGroup>
+      </NumberFieldRoot>
+    </FieldRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Number Field Documentation](https://base-ui.com/react/components/number-field)
+- [API Reference](https://base-ui.com/react/components/number-field#api-reference)