@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms/preview-card.md

@@ -0,0 +1,146 @@
+# Preview Card
+
+A card that displays contextual content when hovering a link.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { PreviewCardRoot, PreviewCardTrigger, PreviewCardPortal, PreviewCardBackdrop, PreviewCardPositioner, PreviewCardPopup, PreviewCardArrow } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  PreviewCardArrow,
+  PreviewCardPopup,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  PreviewCardRoot,
+  PreviewCardTrigger,
+} from '@lglab/compose-ui/preview-card'
+
+export default function DefaultExample() {
+  return (
+    <p className='text-sm'>
+      The{' '}
+      <PreviewCardRoot>
+        <PreviewCardTrigger href='https://en.wikipedia.org/wiki/Nile'>
+          Nile
+        </PreviewCardTrigger>
+        <PreviewCardPortal>
+          <PreviewCardPositioner>
+            <PreviewCardPopup className='space-y-2'>
+              <PreviewCardArrow />
+              <img
+                src='https://images.unsplash.com/photo-1680356217112-dad9300ce49d?q=80&w=448&h=300'
+                alt='Satellite image of the Nile'
+                className='w-full rounded'
+              />
+              <p className='text-sm'>
+                The Nile is a major north-flowing river in northeastern Africa. It is the
+                longest river in Africa and is among the longest in the world.
+              </p>
+            </PreviewCardPopup>
+          </PreviewCardPositioner>
+        </PreviewCardPortal>
+      </PreviewCardRoot>{' '}
+      is the longest river in Africa.
+    </p>
+  )
+}
+```
+
+### Custom Delay
+
+```tsx
+import {
+  PreviewCardArrow,
+  PreviewCardPopup,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  PreviewCardRoot,
+  PreviewCardTrigger,
+} from '@lglab/compose-ui/preview-card'
+
+export default function WithDelayExample() {
+  return (
+    <p className='text-sm'>
+      Read about{' '}
+      <PreviewCardRoot>
+        <PreviewCardTrigger
+          href='https://en.wikipedia.org/wiki/Machine_learning'
+          delay={300}
+          closeDelay={200}
+        >
+          machine learning
+        </PreviewCardTrigger>
+        <PreviewCardPortal>
+          <PreviewCardPositioner>
+            <PreviewCardPopup className='space-y-2'>
+              <PreviewCardArrow />
+              <p className='text-sm font-semibold'>Machine Learning</p>
+              <p className='text-sm text-muted-foreground'>
+                Machine learning is a branch of artificial intelligence that focuses on
+                building applications that learn from data and improve their accuracy over
+                time.
+              </p>
+            </PreviewCardPopup>
+          </PreviewCardPositioner>
+        </PreviewCardPortal>
+      </PreviewCardRoot>{' '}
+      to understand AI better.
+    </p>
+  )
+}
+```
+
+### Sides
+
+```tsx
+import {
+  PreviewCardArrow,
+  PreviewCardPopup,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  PreviewCardRoot,
+  PreviewCardTrigger,
+} from '@lglab/compose-ui/preview-card'
+
+export default function SidesExample() {
+  const sides = ['top', 'right', 'bottom', 'left'] as const
+
+  return (
+    <div className='flex flex-wrap gap-4'>
+      {sides.map((side) => (
+        <PreviewCardRoot key={side}>
+          <PreviewCardTrigger className='text-sm' href='#'>
+            {side}
+          </PreviewCardTrigger>
+          <PreviewCardPortal>
+            <PreviewCardPositioner side={side}>
+              <PreviewCardPopup>
+                <PreviewCardArrow />
+                <p className='text-sm'>Preview card positioned on the {side}</p>
+              </PreviewCardPopup>
+            </PreviewCardPositioner>
+          </PreviewCardPortal>
+        </PreviewCardRoot>
+      ))}
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Preview Card Documentation](https://base-ui.com/react/components/preview-card)
+- [API Reference](https://base-ui.com/react/components/preview-card#api-reference)

package/dist/assets/llms/progress.md

@@ -0,0 +1,60 @@
+# Progress
+
+The progressbar range widget indicates that a request has been received and the application is making progress toward completing the requested action.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValue, ProgressLabel } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressRoot,
+  ProgressTrack,
+  ProgressValue,
+} from '@lglab/compose-ui/progress'
+import * as React from 'react'
+
+export default function BasicExample() {
+  const [value, setValue] = React.useState(20)
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)))
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <ProgressRoot className='w-full max-w-md mx-auto text-sm font-medium ' value={value}>
+      <div className='flex items-center justify-between mb-2'>
+        <ProgressLabel>
+          {value < 100 ? 'Uploading file...' : 'File uploaded'}
+        </ProgressLabel>
+        <ProgressValue />
+      </div>
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Progress Documentation](https://base-ui.com/react/components/progress)
+- [API Reference](https://base-ui.com/react/components/progress#api-reference)

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

@@ -0,0 +1,105 @@
+# Radio Group
+
+Provides shared state to a series of radio buttons.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { RadioGroupRoot } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { RadioIndicator, RadioRoot } from '@lglab/compose-ui/radio'
+import { RadioGroupRoot } from '@lglab/compose-ui/radio-group'
+import * as React from 'react'
+
+export default function DefaultExample() {
+  const id = React.useId()
+  const [value, setValue] = React.useState<string>('fuji')
+
+  return (
+    <RadioGroupRoot aria-labelledby={id} value={value} onValueChange={setValue}>
+      <div className='text-sm font-medium text-foreground' id={id}>
+        Best apple
+      </div>
+
+      <label className='flex items-center gap-2 text-sm'>
+        <RadioRoot value='fuji'>
+          <RadioIndicator />
+        </RadioRoot>
+        Fuji
+      </label>
+
+      <label className='flex items-center gap-2 text-sm'>
+        <RadioRoot value='gala'>
+          <RadioIndicator />
+        </RadioRoot>
+        Gala
+      </label>
+
+      <label className='flex items-center gap-2 text-sm'>
+        <RadioRoot value='granny-smith'>
+          <RadioIndicator />
+        </RadioRoot>
+        Granny Smith
+      </label>
+    </RadioGroupRoot>
+  )
+}
+```
+
+### With Field
+
+```tsx
+import {
+  FieldDescription,
+  FieldItem,
+  FieldLabel,
+  FieldRoot,
+} from '@lglab/compose-ui/field'
+import { FieldsetLegend, FieldsetRoot } from '@lglab/compose-ui/fieldset'
+import { RadioIndicator, RadioRoot } from '@lglab/compose-ui/radio'
+import { RadioGroupRoot } from '@lglab/compose-ui/radio-group'
+
+const fruits = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+]
+
+export default function WithFieldExample() {
+  return (
+    <FieldRoot name='fruit'>
+      <FieldsetRoot render={<RadioGroupRoot />}>
+        <FieldsetLegend>Favorite Fruit</FieldsetLegend>
+        {fruits.map((fruit) => (
+          <FieldItem key={fruit.value}>
+            <FieldLabel>
+              <RadioRoot value={fruit.value}>
+                <RadioIndicator />
+              </RadioRoot>
+              {fruit.label}
+            </FieldLabel>
+          </FieldItem>
+        ))}
+      </FieldsetRoot>
+      <FieldDescription>Select your favorite fruit.</FieldDescription>
+    </FieldRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Radio Group Documentation](https://base-ui.com/react/components/radio-group)
+- [API Reference](https://base-ui.com/react/components/radio-group#api-reference)

package/dist/assets/llms/scroll-area.md

@@ -0,0 +1,132 @@
+# Scroll Area
+
+A native scroll container with custom scrollbars for consistent styling across browsers.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Vertical Scroll
+
+```tsx
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@lglab/compose-ui/scroll-area'
+
+export default function VerticalScrollExample() {
+  return (
+    <ScrollAreaRoot className='h-72 w-full rounded-md border'>
+      <ScrollAreaViewport>
+        <ScrollAreaContent className='p-4'>
+          <div className='space-y-4'>
+            {Array.from({ length: 20 }).map((_, i) => (
+              <p key={i}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod,
+                nisi vel consectetur interdum, nisl nunc egestas nunc.
+              </p>
+            ))}
+          </div>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation='vertical'>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+    </ScrollAreaRoot>
+  )
+}
+```
+
+### Horizontal Scroll
+
+```tsx
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@lglab/compose-ui/scroll-area'
+
+export default function HorizontalScrollExample() {
+  return (
+    <ScrollAreaRoot className='w-full rounded-md border'>
+      <ScrollAreaViewport>
+        <ScrollAreaContent className='p-4'>
+          <div className='flex gap-4'>
+            {Array.from({ length: 15 }).map((_, i) => (
+              <div
+                key={i}
+                className='flex h-24 w-32 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-medium'
+              >
+                Item {i + 1}
+              </div>
+            ))}
+          </div>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation='horizontal'>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+    </ScrollAreaRoot>
+  )
+}
+```
+
+### Both Scrollbars
+
+```tsx
+import {
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@lglab/compose-ui/scroll-area'
+
+export default function BothScrollbarsExample() {
+  return (
+    <ScrollAreaRoot className='h-72 w-full rounded-md border'>
+      <ScrollAreaViewport>
+        <ScrollAreaContent className='p-4'>
+          <div className='w-[800px] space-y-4'>
+            {Array.from({ length: 20 }).map((_, i) => (
+              <p key={i} className='text-sm whitespace-nowrap'>
+                {i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+                euismod, nisi vel consectetur interdum, nisl nunc egestas nunc, vel
+                consectetur nisl nunc egestas nunc.
+              </p>
+            ))}
+          </div>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation='vertical'>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar orientation='horizontal'>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Scroll Area Documentation](https://base-ui.com/react/components/scroll-area)
+- [API Reference](https://base-ui.com/react/components/scroll-area#api-reference)