@lglab/compose-ui-mcp 0.0.1

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

@@ -0,0 +1,261 @@
+# Toggle Group
+
+Provides a shared state to a series of toggle buttons.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { ToggleGroupRoot, ToggleGroupItem } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <ToggleGroupRoot defaultValue={['left']}>
+      <ToggleGroupItem value='left' aria-label='Align left' size='icon'>
+        <AlignLeftIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='center' aria-label='Align center' size='icon'>
+        <AlignCenterIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='right' aria-label='Align right' size='icon'>
+        <AlignRightIcon />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  )
+}
+```
+
+### Multiple Selection
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react'
+
+export default function MultipleExample() {
+  return (
+    <ToggleGroupRoot multiple defaultValue={['bold']}>
+      <ToggleGroupItem value='bold' aria-label='Bold' size='icon'>
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='italic' aria-label='Italic' size='icon'>
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='underline' aria-label='Underline' size='icon'>
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  )
+}
+```
+
+### Controlled
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
+import { useState } from 'react'
+
+export default function ControlledExample() {
+  const [value, setValue] = useState<string[]>(['left'])
+
+  return (
+    <div className='flex flex-col items-center gap-3'>
+      <ToggleGroupRoot value={value} onValueChange={setValue}>
+        <ToggleGroupItem value='left' aria-label='Align left' size='icon'>
+          <AlignLeftIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='center' aria-label='Align center' size='icon'>
+          <AlignCenterIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='right' aria-label='Align right' size='icon'>
+          <AlignRightIcon />
+        </ToggleGroupItem>
+      </ToggleGroupRoot>
+      <span className='text-sm'>
+        {value.length > 0 ? `Aligned: ${value[0]}` : 'No alignment'}
+      </span>
+    </div>
+  )
+}
+```
+
+### Disabled
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
+
+export default function DisabledExample() {
+  return (
+    <ToggleGroupRoot disabled defaultValue={['left']}>
+      <ToggleGroupItem value='left' aria-label='Align left' size='icon'>
+        <AlignLeftIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='center' aria-label='Align center' size='icon'>
+        <AlignCenterIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='right' aria-label='Align right' size='icon'>
+        <AlignRightIcon />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  )
+}
+```
+
+### Sizes
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
+
+export default function SizesExample() {
+  return (
+    <div className='flex flex-col items-start gap-4'>
+      <ToggleGroupRoot defaultValue={['left']}>
+        <ToggleGroupItem value='left' aria-label='Align left' size='icon-sm'>
+          <AlignLeftIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='center' aria-label='Align center' size='icon-sm'>
+          <AlignCenterIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='right' aria-label='Align right' size='icon-sm'>
+          <AlignRightIcon />
+        </ToggleGroupItem>
+      </ToggleGroupRoot>
+
+      <ToggleGroupRoot defaultValue={['left']}>
+        <ToggleGroupItem value='left' aria-label='Align left' size='icon'>
+          <AlignLeftIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='center' aria-label='Align center' size='icon'>
+          <AlignCenterIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='right' aria-label='Align right' size='icon'>
+          <AlignRightIcon />
+        </ToggleGroupItem>
+      </ToggleGroupRoot>
+
+      <ToggleGroupRoot defaultValue={['left']}>
+        <ToggleGroupItem value='left' aria-label='Align left' size='icon-lg'>
+          <AlignLeftIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='center' aria-label='Align center' size='icon-lg'>
+          <AlignCenterIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value='right' aria-label='Align right' size='icon-lg'>
+          <AlignRightIcon />
+        </ToggleGroupItem>
+      </ToggleGroupRoot>
+    </div>
+  )
+}
+```
+
+### Vertical Orientation
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
+
+export default function OrientationExample() {
+  return (
+    <ToggleGroupRoot orientation='vertical' defaultValue={['left']}>
+      <ToggleGroupItem value='left' aria-label='Align left' size='icon'>
+        <AlignLeftIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='center' aria-label='Align center' size='icon'>
+        <AlignCenterIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='right' aria-label='Align right' size='icon'>
+        <AlignRightIcon />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  )
+}
+```
+
+### With Text
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react'
+
+export default function WithTextExample() {
+  return (
+    <ToggleGroupRoot defaultValue={['bold']}>
+      <ToggleGroupItem value='bold' aria-label='Bold'>
+        <BoldIcon />
+        Bold
+      </ToggleGroupItem>
+      <ToggleGroupItem value='italic' aria-label='Italic'>
+        <ItalicIcon />
+        Italic
+      </ToggleGroupItem>
+      <ToggleGroupItem value='underline' aria-label='Underline'>
+        <UnderlineIcon />
+        Underline
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  )
+}
+```
+
+### Ghost
+
+```tsx
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import { Bookmark, Heart, Star } from 'lucide-react'
+
+export default function GhostExample() {
+  return (
+    <ToggleGroupRoot multiple>
+      <ToggleGroupItem
+        value='star'
+        variant='ghost'
+        aria-label='Favorite'
+        size='icon'
+        className='data-pressed:*:[svg]:fill-yellow-500 data-pressed:*:[svg]:stroke-yellow-500'
+      >
+        <Star />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value='heart'
+        variant='ghost'
+        aria-label='Like'
+        size='icon'
+        className='data-pressed:*:[svg]:fill-red-500 data-pressed:*:[svg]:stroke-red-500'
+      >
+        <Heart />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value='bookmark'
+        variant='ghost'
+        aria-label='Bookmark'
+        size='icon'
+        className='data-pressed:*:[svg]:fill-blue-500 data-pressed:*:[svg]:stroke-blue-500'
+      >
+        <Bookmark />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Toggle Group Documentation](https://base-ui.com/react/components/toggle-group)
+- [API Reference](https://base-ui.com/react/components/toggle-group#api-reference)

package/dist/assets/llms/toggle.md

@@ -0,0 +1,161 @@
+# Toggle
+
+A two-state button that can be on or off.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { Toggle } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { BoldIcon } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <Toggle aria-label='Toggle bold' size='icon'>
+      <BoldIcon />
+    </Toggle>
+  )
+}
+```
+
+### Sizes
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { BoldIcon } from 'lucide-react'
+
+export default function SizesExample() {
+  return (
+    <div className='flex items-center flex-wrap gap-2'>
+      <Toggle aria-label='Toggle bold' size='icon-sm'>
+        <BoldIcon className='size-3.5' />
+      </Toggle>
+      <Toggle aria-label='Toggle bold' size='icon'>
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label='Toggle bold' size='icon-lg'>
+        <BoldIcon />
+      </Toggle>
+    </div>
+  )
+}
+```
+
+### Pressed
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { BoldIcon } from 'lucide-react'
+
+export default function PressedExample() {
+  return (
+    <Toggle defaultPressed aria-label='Toggle bold' size='icon'>
+      <BoldIcon />
+    </Toggle>
+  )
+}
+```
+
+### Controlled
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { BoldIcon } from 'lucide-react'
+import { useState } from 'react'
+
+export default function ControlledExample() {
+  const [pressed, setPressed] = useState(false)
+
+  return (
+    <div className='flex items-center gap-3'>
+      <Toggle
+        pressed={pressed}
+        onPressedChange={setPressed}
+        aria-label='Toggle bold'
+        size='icon'
+      >
+        <BoldIcon />
+      </Toggle>
+      <span className='text-sm'>{pressed ? 'Bold on' : 'Bold off'}</span>
+    </div>
+  )
+}
+```
+
+### Disabled
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { BoldIcon } from 'lucide-react'
+
+export default function DisabledExample() {
+  return (
+    <div className='flex flex-wrap gap-2'>
+      <Toggle disabled aria-label='Toggle bold' size='icon'>
+        <BoldIcon />
+      </Toggle>
+      <Toggle disabled defaultPressed aria-label='Toggle bold' size='icon'>
+        <BoldIcon />
+      </Toggle>
+    </div>
+  )
+}
+```
+
+### With Text
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { BoldIcon } from 'lucide-react'
+
+export default function WithTextExample() {
+  return (
+    <div className='flex flex-wrap gap-2'>
+      <Toggle aria-label='Toggle bold'>
+        <BoldIcon />
+        Bold
+      </Toggle>
+      <Toggle aria-label='Toggle bold'>Bold</Toggle>
+    </div>
+  )
+}
+```
+
+### Ghost
+
+```tsx
+import { Toggle } from '@lglab/compose-ui/toggle'
+import { Heart } from 'lucide-react'
+
+export default function GhostExample() {
+  return (
+    <div className='flex flex-wrap gap-2'>
+      <Toggle
+        variant='ghost'
+        aria-label='Toggle like'
+        className='data-pressed:*:[svg]:fill-red-500 data-pressed:*:[svg]:stroke-red-500'
+      >
+        <Heart />
+      </Toggle>
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Toggle Documentation](https://base-ui.com/react/components/toggle)
+- [API Reference](https://base-ui.com/react/components/toggle#api-reference)

package/dist/assets/llms/toolbar.md

@@ -0,0 +1,148 @@
+# Toolbar
+
+A container for grouping a set of buttons and controls.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { ToolbarRoot, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Rich Text Editor
+
+```tsx
+import {
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+} from '@lglab/compose-ui/select'
+import { ToggleGroupItem, ToggleGroupRoot } from '@lglab/compose-ui/toggle-group'
+import {
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarRoot,
+  ToolbarSeparator,
+} from '@lglab/compose-ui/toolbar'
+import {
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  BoldIcon,
+  CheckIcon,
+  ChevronsUpDownIcon,
+  ItalicIcon,
+  UnderlineIcon,
+} from 'lucide-react'
+
+const fontFaces = [
+  { label: 'Helvetica', value: 'helvetica' },
+  { label: 'Arial', value: 'arial' },
+  { label: 'Times New Roman', value: 'times' },
+  { label: 'Georgia', value: 'georgia' },
+]
+
+export default function DefaultExample() {
+  return (
+    <ToolbarRoot>
+      <ToggleGroupRoot className='flex' multiple>
+        <ToolbarButton
+          render={<ToggleGroupItem value='bold' size='icon-sm' />}
+          aria-label='Bold'
+        >
+          <BoldIcon className='size-4' />
+        </ToolbarButton>
+        <ToolbarButton
+          render={<ToggleGroupItem value='italic' size='icon-sm' />}
+          aria-label='Italic'
+        >
+          <ItalicIcon className='size-4' />
+        </ToolbarButton>
+        <ToolbarButton
+          render={<ToggleGroupItem value='underline' size='icon-sm' />}
+          aria-label='Underline'
+        >
+          <UnderlineIcon className='size-4' />
+        </ToolbarButton>
+      </ToggleGroupRoot>
+
+      <ToolbarSeparator />
+
+      <ToggleGroupRoot defaultValue={['left']} className='flex'>
+        <ToolbarButton
+          render={<ToggleGroupItem value='left' size='icon-sm' />}
+          aria-label='Align left'
+        >
+          <AlignLeftIcon className='size-4' />
+        </ToolbarButton>
+        <ToolbarButton
+          render={<ToggleGroupItem value='center' size='icon-sm' />}
+          aria-label='Align center'
+        >
+          <AlignCenterIcon className='size-4' />
+        </ToolbarButton>
+        <ToolbarButton
+          render={<ToggleGroupItem value='right' size='icon-sm' />}
+          aria-label='Align right'
+        >
+          <AlignRightIcon className='size-4' />
+        </ToolbarButton>
+      </ToggleGroupRoot>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup aria-label='Format'>
+        <ToolbarButton size='sm'>$</ToolbarButton>
+        <ToolbarButton size='sm'>%</ToolbarButton>
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <SelectRoot items={fontFaces} defaultValue='helvetica'>
+        <ToolbarButton render={<SelectTrigger />}>
+          <SelectValue />
+          <SelectIcon>
+            <ChevronsUpDownIcon className='size-4 opacity-50' />
+          </SelectIcon>
+        </ToolbarButton>
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectList>
+                {fontFaces.map((fontFace) => (
+                  <SelectItem key={fontFace.value} value={fontFace.value}>
+                    <SelectItemText>{fontFace.label}</SelectItemText>
+                    <SelectItemIndicator>
+                      <CheckIcon className='size-4' />
+                    </SelectItemIndicator>
+                  </SelectItem>
+                ))}
+              </SelectList>
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+      </SelectRoot>
+    </ToolbarRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Toolbar Documentation](https://base-ui.com/react/components/toolbar)
+- [API Reference](https://base-ui.com/react/components/toolbar#api-reference)