# Compose UI - Complete Documentation

> A React component library built on Base UI primitives with Tailwind CSS styling.

## Table of Contents

- Tabs
- Scroll Area
- Progress
- Meter
- Drawer
- Dialog
- Button
- Avatar
- Alert Dialog
- Accordion

---

# Tabs

A component for toggling between related panels on the same page with an animated indicator.

## Installation

```bash
npm install @lglab/compose-ui
```

## Import

```tsx
import { TabsRoot, TabsList, TabsTab, TabsIndicator, TabsPanel } from '@lglab/compose-ui'
```

## Examples

### Basic

```tsx
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from '@lglab/compose-ui'

export default function BasicExample() {
  return (
    <TabsRoot defaultValue='overview'>
      <TabsList>
        <TabsTab value='overview'>Overview</TabsTab>
        <TabsTab value='projects'>Projects</TabsTab>
        <TabsTab value='settings'>Settings</TabsTab>
        <TabsIndicator />
      </TabsList>
      <TabsPanel value='overview'>
        <div className='rounded-md p-4'>
          <p>
            This is the overview panel. Here you can see a summary of your account and
            recent activity.
          </p>
        </div>
      </TabsPanel>
      <TabsPanel value='projects'>
        <div className='rounded-md p-4'>
          <p>
            View and manage your projects here. Create new projects or edit existing ones.
          </p>
        </div>
      </TabsPanel>
      <TabsPanel value='settings'>
        <div className='rounded-md p-4'>
          <p>Configure your account settings, preferences, and notification options.</p>
        </div>
      </TabsPanel>
    </TabsRoot>
  )
}
```

### With Icons

```tsx
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from '@lglab/compose-ui'
import { FolderIcon, SettingsIcon, UserIcon } from 'lucide-react'

export default function WithIconsExample() {
  return (
    <TabsRoot defaultValue='account'>
      <TabsList>
        <TabsTab value='account' className='gap-1.5'>
          <UserIcon className='size-4' />
          Account
        </TabsTab>
        <TabsTab value='projects' className='gap-1.5'>
          <FolderIcon className='size-4' />
          Projects
        </TabsTab>
        <TabsTab value='settings' className='gap-1.5'>
          <SettingsIcon className='size-4' />
          Settings
        </TabsTab>
        <TabsIndicator />
      </TabsList>
      <TabsPanel value='account'>
        <div className='rounded-md p-4'>
          <p>Manage your account details and profile information.</p>
        </div>
      </TabsPanel>
      <TabsPanel value='projects'>
        <div className='rounded-md p-4'>
          <p>Browse and manage all your projects in one place.</p>
        </div>
      </TabsPanel>
      <TabsPanel value='settings'>
        <div className='rounded-md p-4'>
          <p>Customize your experience with various settings options.</p>
        </div>
      </TabsPanel>
    </TabsRoot>
  )
}
```

### Sizes

```tsx
import { TabsIndicator, TabsList, TabsRoot, TabsTab } from '@lglab/compose-ui'

export default function SizesExample() {
  return (
    <div className='space-y-4'>
      <div>
        <p className='mb-2 text-xs'>Small</p>
        <TabsRoot defaultValue='tab1'>
          <TabsList>
            <TabsTab value='tab1' size='sm'>
              Tab 1
            </TabsTab>
            <TabsTab value='tab2' size='sm'>
              Tab 2
            </TabsTab>
            <TabsTab value='tab3' size='sm'>
              Tab 3
            </TabsTab>
            <TabsIndicator />
          </TabsList>
        </TabsRoot>
      </div>
      <div>
        <p className='mb-2 text-xs'>Default</p>
        <TabsRoot defaultValue='tab1'>
          <TabsList>
            <TabsTab value='tab1'>Tab 1</TabsTab>
            <TabsTab value='tab2'>Tab 2</TabsTab>
            <TabsTab value='tab3'>Tab 3</TabsTab>
            <TabsIndicator />
          </TabsList>
        </TabsRoot>
      </div>
      <div>
        <p className='mb-2 text-xs'>Large</p>
        <TabsRoot defaultValue='tab1'>
          <TabsList>
            <TabsTab value='tab1' size='lg'>
              Tab 1
            </TabsTab>
            <TabsTab value='tab2' size='lg'>
              Tab 2
            </TabsTab>
            <TabsTab value='tab3' size='lg'>
              Tab 3
            </TabsTab>
            <TabsIndicator />
          </TabsList>
        </TabsRoot>
      </div>
    </div>
  )
}
```

### Disabled Tab

```tsx
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from '@lglab/compose-ui'

export default function DisabledExample() {
  return (
    <TabsRoot defaultValue='active'>
      <TabsList>
        <TabsTab value='active'>Active</TabsTab>
        <TabsTab value='disabled' disabled>
          Disabled
        </TabsTab>
        <TabsTab value='another'>Another Tab</TabsTab>
        <TabsIndicator />
      </TabsList>
      <TabsPanel value='active'>
        <div className='rounded-md p-4'>
          <p>This tab is active. The middle tab is disabled and cannot be selected.</p>
        </div>
      </TabsPanel>
      <TabsPanel value='disabled'>
        <div className='rounded-md p-4'>
          <p>You shouldn&apos;t see this content.</p>
        </div>
      </TabsPanel>
      <TabsPanel value='another'>
        <div className='rounded-md p-4'>
          <p>This is another active tab panel.</p>
        </div>
      </TabsPanel>
    </TabsRoot>
  )
}
```

### Vertical Orientation

```tsx
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from '@lglab/compose-ui'

export default function VerticalExample() {
  return (
    <TabsRoot defaultValue='general' orientation='vertical' className='flex-row gap-4'>
      <TabsList orientation='vertical'>
        <TabsTab value='general'>General</TabsTab>
        <TabsTab value='security'>Security</TabsTab>
        <TabsTab value='notifications'>Notifications</TabsTab>
        <TabsTab value='billing'>Billing</TabsTab>
        <TabsIndicator orientation='vertical' />
      </TabsList>
      <div className='flex-1'>
        <TabsPanel value='general' className='mt-0'>
          <div className='rounded-md p-4'>
            <h3 className='font-medium'>General Settings</h3>
            <p className='mt-1 text-sm'>
              Configure general application settings and preferences.
            </p>
          </div>
        </TabsPanel>
        <TabsPanel value='security' className='mt-0'>
          <div className='rounded-md p-4'>
            <h3 className='font-medium'>Security Settings</h3>
            <p className='mt-1 text-sm'>
              Manage your security preferences, two-factor authentication, and sessions.
            </p>
          </div>
        </TabsPanel>
        <TabsPanel value='notifications' className='mt-0'>
          <div className='rounded-md p-4'>
            <h3 className='font-medium'>Notification Preferences</h3>
            <p className='mt-1 text-sm'>
              Control how and when you receive notifications.
            </p>
          </div>
        </TabsPanel>
        <TabsPanel value='billing' className='mt-0'>
          <div className='rounded-md p-4'>
            <h3 className='font-medium'>Billing Information</h3>
            <p className='mt-1 text-sm'>
              View and manage your billing details and payment methods.
            </p>
          </div>
        </TabsPanel>
      </div>
    </TabsRoot>
  )
}
```

## Resources

- [Base UI Tabs Documentation](https://base-ui.com/react/components/tabs)
- [API Reference](https://base-ui.com/react/components/tabs#api-reference)

---

# 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'

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'

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'

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)

---

# 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'
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='lg:w-1/2 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)

---

# 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'

export default function BasicExample() {
  return (
    <div className='space-y-6 md:w-3/4 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'

export default function AnimatedExample() {
  return (
    <div className='space-y-6 md:w-3/4 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'

export default function CustomFormatExample() {
  return (
    <div className='space-y-6 md:w-3/4 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)

---

# Drawer

A panel that slides in from the edge of the screen, commonly used for navigation, filters, or supplementary content.

## Installation

```bash
npm install @lglab/compose-ui
```

## Import

```tsx
import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerPopup, DrawerTitle, DrawerDescription, DrawerClose, DrawerHeader, DrawerContent, DrawerFooter } from '@lglab/compose-ui'
```

## Examples

### Basic

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'

export default function BasicExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent>
            <p>
              Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
              bibendum est aliquam mauris laoreet interdum.
            </p>
          </DrawerContent>
          <DrawerFooter className='flex justify-end'>
            <DrawerClose>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

### Sides

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'

const sides = ['top', 'right', 'bottom', 'left'] as const

export default function SidesExample() {
  return (
    <div className='flex flex-wrap gap-2'>
      {sides.map((side) => (
        <DrawerRoot key={side}>
          <DrawerTrigger className='capitalize'>{side}</DrawerTrigger>
          <DrawerPortal>
            <DrawerBackdrop />
            <DrawerPopup side={side}>
              <DrawerHeader>
                <DrawerTitle className='capitalize'>{side} Drawer</DrawerTitle>
                <DrawerDescription>
                  This drawer slides in from the {side}.
                </DrawerDescription>
              </DrawerHeader>
              <DrawerContent>
                <p>
                  Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
                  bibendum est aliquam mauris laoreet interdum.
                </p>
              </DrawerContent>
              <DrawerFooter className='flex justify-end'>
                <DrawerClose>Close</DrawerClose>
              </DrawerFooter>
            </DrawerPopup>
          </DrawerPortal>
        </DrawerRoot>
      ))}
    </div>
  )
}
```

### Custom size

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'

export default function SizeExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup className='w-1/2'>
          <DrawerHeader>
            <DrawerTitle>Custom Size</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent>
            <p>
              Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
              bibendum est aliquam mauris laoreet interdum.
            </p>
          </DrawerContent>
          <DrawerFooter className='flex justify-end'>
            <DrawerClose>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

### Close button

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'
import { X } from 'lucide-react'

export default function CloseButtonExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerClose
            aria-label='Close'
            size='icon-sm'
            className='absolute top-3 right-3'
          >
            <X className='size-4' />
          </DrawerClose>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent>
            <p>
              Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
              bibendum est aliquam mauris laoreet interdum.
            </p>
          </DrawerContent>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

### Scrollable

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'
import {
  ScrollAreaContent,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from '@lglab/compose-ui'

export default function ScrollableExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent className='flex-1 min-h-0'>
            <ScrollAreaRoot className='h-full'>
              <ScrollAreaViewport>
                <ScrollAreaContent>
                  <div className='space-y-4'>
                    {Array.from({ length: 20 }).map((_, i) => (
                      <p key={i}>
                        Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit.
                        Nulla bibendum est aliquam mauris laoreet interdum.
                      </p>
                    ))}
                  </div>
                </ScrollAreaContent>
              </ScrollAreaViewport>
              <ScrollAreaScrollbar orientation='vertical'>
                <ScrollAreaThumb />
              </ScrollAreaScrollbar>
            </ScrollAreaRoot>
          </DrawerContent>
          <DrawerFooter className='flex justify-end'>
            <DrawerClose>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

### Controlled

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
} from '@lglab/compose-ui'
import { Button } from '@lglab/compose-ui'
import { SlidersHorizontal } from 'lucide-react'
import { useState } from 'react'

export default function ControlledExample() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)} variant='outline'>
        <SlidersHorizontal />
        Filters
      </Button>
      <DrawerRoot open={open} onOpenChange={setOpen}>
        <DrawerPortal>
          <DrawerBackdrop />
          <DrawerPopup>
            <DrawerHeader>
              <DrawerTitle>Drawer</DrawerTitle>
              <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
            </DrawerHeader>
            <DrawerContent>
              <p>
                Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
                bibendum est aliquam mauris laoreet interdum.
              </p>
            </DrawerContent>
            <DrawerFooter className='flex justify-end'>
              <DrawerClose>Close</DrawerClose>
            </DrawerFooter>
          </DrawerPopup>
        </DrawerPortal>
      </DrawerRoot>
    </>
  )
}
```

### Nested

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'

export default function NestedExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent>
            <p>
              Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
              bibendum est aliquam mauris laoreet interdum.
            </p>
          </DrawerContent>
          <DrawerFooter className='flex gap-2 justify-end'>
            <DrawerClose>Close</DrawerClose>
            <DrawerRoot>
              <DrawerTrigger>Nested drawer</DrawerTrigger>
              <DrawerPortal>
                <DrawerPopup>
                  <DrawerHeader>
                    <DrawerTitle>Nested drawer</DrawerTitle>
                    <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
                  </DrawerHeader>
                  <DrawerContent>
                    <p>
                      Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit.
                      Nulla bibendum est aliquam mauris laoreet interdum.
                    </p>
                  </DrawerContent>
                  <DrawerFooter className='flex justify-end'>
                    <DrawerClose>Close</DrawerClose>
                  </DrawerFooter>
                </DrawerPopup>
              </DrawerPortal>
            </DrawerRoot>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

### Footer

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'
import { Button } from '@lglab/compose-ui'

export default function FooterExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent className='flex-1'>
            <p>
              Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit. Nulla
              bibendum est aliquam mauris laoreet interdum.
            </p>
          </DrawerContent>
          <DrawerFooter className='flex gap-2 justify-end'>
            <DrawerClose>Cancel</DrawerClose>
            <Button variant='destructive'>Delete</Button>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

## Resources

- [Base UI Drawer Documentation](https://base-ui.com/react/components/drawer)
- [API Reference](https://base-ui.com/react/components/drawer#api-reference)

---

# Dialog

A popup that opens on top of the entire page with a backdrop, commonly used for confirmations, forms, and important messages.

## Installation

```bash
npm install @lglab/compose-ui
```

## Import

```tsx
import { DialogRoot, DialogTrigger, DialogPortal, DialogBackdrop, DialogPopup, DialogTitle, DialogDescription, DialogClose, DialogHeader, DialogFooter } from '@lglab/compose-ui'
```

## Examples

### Basic

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'

export default function BasicExample() {
  return (
    <DialogRoot>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogPopup>
          <DialogTitle>Notifications</DialogTitle>
          <DialogDescription>You are all caught up. Good job!</DialogDescription>
          <DialogFooter>
            <DialogClose>Close</DialogClose>
          </DialogFooter>
        </DialogPopup>
      </DialogPortal>
    </DialogRoot>
  )
}
```

### Trigger Variants

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'

export default function VariantsExample() {
  return (
    <div className='flex flex-wrap gap-2'>
      <DialogRoot>
        <DialogTrigger variant='default'>Default</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup>
            <DialogHeader>
              <DialogTitle>Default Variant</DialogTitle>
              <DialogDescription>Triggered with default button style.</DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger variant='secondary'>Secondary</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup>
            <DialogHeader>
              <DialogTitle>Secondary Variant</DialogTitle>
              <DialogDescription>
                Triggered with secondary button style.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger variant='outline'>Outline</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup>
            <DialogHeader>
              <DialogTitle>Outline Variant</DialogTitle>
              <DialogDescription>Triggered with outline button style.</DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger variant='ghost'>Ghost</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup>
            <DialogHeader>
              <DialogTitle>Ghost Variant</DialogTitle>
              <DialogDescription>Triggered with ghost button style.</DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>
    </div>
  )
}
```

### Sizes

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'

export default function SizesExample() {
  return (
    <div className='flex flex-wrap gap-2'>
      <DialogRoot>
        <DialogTrigger>Small</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup size='sm'>
            <DialogTitle>Small Dialog</DialogTitle>
            <DialogDescription>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
            </DialogDescription>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger>Default</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup>
            <DialogTitle>Default Dialog</DialogTitle>
            <DialogDescription>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
            </DialogDescription>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger>Large</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup size='lg'>
            <DialogTitle>Large Dialog</DialogTitle>
            <DialogDescription>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
            </DialogDescription>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger>Extra Large</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup size='xl'>
            <DialogTitle>Extra Large Dialog</DialogTitle>
            <DialogDescription>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
            </DialogDescription>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger>Full Screen</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup size='full'>
            <DialogHeader>
              <DialogTitle>Full Screen Dialog</DialogTitle>
              <DialogDescription>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
              </DialogDescription>
            </DialogHeader>
            <DialogDescription>
              Nam sed enim a eros eleifend accumsan. Morbi ac risus enim. Praesent in ante
              euismod, laoreet nisl quis, maximus nisl. Maecenas congue placerat aliquet.
              Praesent sit amet orci sed purus volutpat viverra vel vitae quam. Nulla a
              varius lectus. Aenean in facilisis justo.
            </DialogDescription>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>

      <DialogRoot>
        <DialogTrigger>Custom</DialogTrigger>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup className='w-1/2'>
            <DialogHeader>
              <DialogTitle>Custom Size</DialogTitle>
              <DialogDescription>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose>Close</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>
    </div>
  )
}
```

### With Form

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'
import { MailIcon } from 'lucide-react'
import * as React from 'react'

export default function FormDialogExample() {
  const [open, setOpen] = React.useState(false)

  return (
    <DialogRoot open={open} onOpenChange={setOpen}>
      <DialogTrigger className='gap-1.5'>
        <MailIcon className='size-4' />
        Contact Us
      </DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogPopup>
          <DialogHeader>
            <DialogTitle>Send a Message</DialogTitle>
            <DialogDescription>
              Fill out the form below and we&apos;ll get back to you as soon as possible.
            </DialogDescription>
          </DialogHeader>
          <form
            onSubmit={(e) => {
              e.preventDefault()
              setOpen(false)
            }}
          >
            <div className='mt-4 space-y-4'>
              <div>
                <label htmlFor='email' className='mb-1.5 block text-sm font-medium'>
                  Email
                </label>
                <input
                  id='email'
                  type='email'
                  placeholder='you@example.com'
                  className='w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring'
                />
              </div>
              <div>
                <label htmlFor='message' className='mb-1.5 block text-sm font-medium'>
                  Message
                </label>
                <textarea
                  id='message'
                  placeholder='How can we help?'
                  rows={4}
                  className='w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring'
                />
              </div>
            </div>
            <DialogFooter>
              <DialogClose variant='ghost'>Cancel</DialogClose>
              <button
                type='submit'
                className='inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
              >
                Send Message
              </button>
            </DialogFooter>
          </form>
        </DialogPopup>
      </DialogPortal>
    </DialogRoot>
  )
}
```

### Destructive Action

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'
import { Trash2Icon } from 'lucide-react'

export default function DestructiveExample() {
  return (
    <DialogRoot>
      <DialogTrigger variant='outline' className='gap-1.5'>
        <Trash2Icon className='size-4' />
        Delete Account
      </DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogPopup size='sm'>
          <DialogHeader>
            <DialogTitle>Delete Account</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete your account? This action cannot be undone
              and all your data will be permanently removed.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose variant='ghost'>Cancel</DialogClose>
            <DialogClose className='bg-destructive text-white hover:bg-destructive/90'>
              Delete
            </DialogClose>
          </DialogFooter>
        </DialogPopup>
      </DialogPortal>
    </DialogRoot>
  )
}
```

### Scrollable

```tsx
import {
  DrawerBackdrop,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPopup,
  DrawerPortal,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from '@lglab/compose-ui'
import {
  ScrollAreaContent,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from '@lglab/compose-ui'

export default function ScrollableExample() {
  return (
    <DrawerRoot>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerBackdrop />
        <DrawerPopup>
          <DrawerHeader>
            <DrawerTitle>Drawer</DrawerTitle>
            <DrawerDescription>Lorem ipsum dolor sit amet</DrawerDescription>
          </DrawerHeader>
          <DrawerContent className='flex-1 min-h-0'>
            <ScrollAreaRoot className='h-full'>
              <ScrollAreaViewport>
                <ScrollAreaContent>
                  <div className='space-y-4'>
                    {Array.from({ length: 20 }).map((_, i) => (
                      <p key={i}>
                        Curabitur non dui rhoncus, cursus turpis fermentum, cursus elit.
                        Nulla bibendum est aliquam mauris laoreet interdum.
                      </p>
                    ))}
                  </div>
                </ScrollAreaContent>
              </ScrollAreaViewport>
              <ScrollAreaScrollbar orientation='vertical'>
                <ScrollAreaThumb />
              </ScrollAreaScrollbar>
            </ScrollAreaRoot>
          </DrawerContent>
          <DrawerFooter className='flex justify-end'>
            <DrawerClose>Close</DrawerClose>
          </DrawerFooter>
        </DrawerPopup>
      </DrawerPortal>
    </DrawerRoot>
  )
}
```

### Controlled

```tsx
import {
  Button,
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
} from '@lglab/compose-ui'
import { SettingsIcon } from 'lucide-react'
import * as React from 'react'

export default function ControlledDialogExample() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)} variant='outline'>
        <SettingsIcon /> Settings
      </Button>
      <DialogRoot open={open} onOpenChange={setOpen}>
        <DialogPortal>
          <DialogBackdrop />
          <DialogPopup>
            <DialogHeader>
              <DialogTitle>Settings</DialogTitle>
              <DialogDescription>
                Manage your account settings and preferences.
              </DialogDescription>
            </DialogHeader>
            <div className='mt-4 space-y-4'>
              <div className='flex items-center justify-between rounded-lg border border-border p-4'>
                <div>
                  <p className='font-medium'>Email Notifications</p>
                  <p>Receive email updates about your account</p>
                </div>
                <div className='h-5 w-9 rounded-full bg-primary' />
              </div>
              <div className='flex items-center justify-between rounded-lg border border-border p-4'>
                <div>
                  <p className='font-medium'>Marketing Emails</p>
                  <p>Receive emails about new features and offers</p>
                </div>
                <div className='h-5 w-9 rounded-full bg-muted' />
              </div>
            </div>
            <DialogFooter>
              <DialogClose variant='ghost'>Cancel</DialogClose>
              <DialogClose>Save Changes</DialogClose>
            </DialogFooter>
          </DialogPopup>
        </DialogPortal>
      </DialogRoot>
    </>
  )
}
```

### Nested

```tsx
import {
  DialogBackdrop,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'

export default function NestedExample() {
  return (
    <DialogRoot>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogPopup>
          <DialogTitle>Notifications</DialogTitle>
          <DialogDescription>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
          </DialogDescription>
          <DialogFooter>
            <DialogRoot>
              <DialogTrigger>Nested Dialog</DialogTrigger>
              <DialogPortal>
                <DialogBackdrop />
                <DialogPopup>
                  <DialogTitle>Nested Dialog</DialogTitle>
                  <DialogDescription>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
                    quos.
                  </DialogDescription>
                  <DialogFooter>
                    <DialogClose>Close</DialogClose>
                  </DialogFooter>
                </DialogPopup>
              </DialogPortal>
            </DialogRoot>
            <DialogClose>Close</DialogClose>
          </DialogFooter>
        </DialogPopup>
      </DialogPortal>
    </DialogRoot>
  )
}
```

## Resources

- [Base UI Dialog Documentation](https://base-ui.com/react/components/dialog)
- [API Reference](https://base-ui.com/react/components/dialog#api-reference)

---

# 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'
import { TrashIcon } from 'lucide-react'

export default function DefaultExample() {
  return (
    <div className='flex 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'
import { TrashIcon } from 'lucide-react'

export default function SecondaryExample() {
  return (
    <div className='flex 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'
import { TrashIcon } from 'lucide-react'

export default function OutlineExample() {
  return (
    <div className='flex 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'
import { TrashIcon } from 'lucide-react'

export default function DestructiveExample() {
  return (
    <div className='flex 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'
import { TrashIcon } from 'lucide-react'

export default function GhostExample() {
  return (
    <div className='flex 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'
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'
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)

---

# Avatar

An easily stylable avatar component for displaying user profile pictures, initials, or fallback content.

## Installation

```bash
npm install @lglab/compose-ui
```

## Import

```tsx
import { AvatarRoot, AvatarImage, AvatarFallback, AvatarStack } from '@lglab/compose-ui'
```

## Examples

### Basic

```tsx
import { AvatarFallback, AvatarImage, AvatarRoot } from '@lglab/compose-ui'

export default function BasicExample() {
  return (
    <div className='flex gap-4'>
      <AvatarRoot size='sm'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
          alt='Sarah Chen'
        />
        <AvatarFallback>SC</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot>
        <AvatarImage
          src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&dpr=2&q=80'
          alt='Marcus Johnson'
        />
        <AvatarFallback>MJ</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&dpr=2&q=80'
          alt='Emma Wilson'
        />
        <AvatarFallback>EW</AvatarFallback>
      </AvatarRoot>
    </div>
  )
}
```

### Fallback

```tsx
import { AvatarFallback, AvatarImage, AvatarRoot } from '@lglab/compose-ui'

export default function FallbackExample() {
  return (
    <div className='flex gap-4'>
      <AvatarRoot size='sm'>
        <AvatarFallback>SC</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot>
        <AvatarFallback>MJ</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot size='lg'>
        <AvatarImage src='invalid-url' alt='Failed Image' />
        <AvatarFallback>FI</AvatarFallback>
      </AvatarRoot>
    </div>
  )
}
```

### Stack

```tsx
import { AvatarFallback, AvatarImage, AvatarRoot, AvatarStack } from '@lglab/compose-ui'

export default function StackExample() {
  return (
    <AvatarStack aria-label='Project contributors'>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
          alt='Sarah Chen'
        />
        <AvatarFallback>SC</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&dpr=2&q=80'
          alt='Marcus Johnson'
        />
        <AvatarFallback>MJ</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&dpr=2&q=80'
          alt='Emma Wilson'
        />
        <AvatarFallback>EW</AvatarFallback>
      </AvatarRoot>
    </AvatarStack>
  )
}
```

### Stack with overflow

```tsx
import { AvatarFallback, AvatarImage, AvatarRoot, AvatarStack } from '@lglab/compose-ui'

export default function StackOverflowExample() {
  return (
    <AvatarStack aria-label='Project contributors' maxVisible={3}>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
          alt='Sarah Chen'
        />
        <AvatarFallback>SC</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&h=128&dpr=2&q=80'
          alt='Marcus Johnson'
        />
        <AvatarFallback>MJ</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&dpr=2&q=80'
          alt='Emma Wilson'
        />
        <AvatarFallback>EW</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot>
        <AvatarFallback>AB</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot>
        <AvatarFallback>CD</AvatarFallback>
      </AvatarRoot>
      <AvatarRoot>
        <AvatarFallback>EF</AvatarFallback>
      </AvatarRoot>
    </AvatarStack>
  )
}
```

## Resources

- [Base UI Avatar Documentation](https://base-ui.com/react/components/avatar)
- [API Reference](https://base-ui.com/react/components/avatar#api-reference)

---

# Alert Dialog

A dialog that requires a user response to proceed.

## Installation

```bash
npm install @lglab/compose-ui
```

## Import

```tsx
import { AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogViewport, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogClose } from '@lglab/compose-ui'
```

## Examples

### Basic

```tsx
import {
  AlertDialogBackdrop,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@lglab/compose-ui'

export default function BasicExample() {
  return (
    <AlertDialogRoot>
      <AlertDialogTrigger variant='destructive'>Discard draft</AlertDialogTrigger>
      <AlertDialogPortal>
        <AlertDialogBackdrop />
        <AlertDialogPopup>
          <AlertDialogTitle>Discard draft?</AlertDialogTitle>
          <AlertDialogDescription>
            You can&apos;t undo this action.
          </AlertDialogDescription>
          <div className='mt-6 flex justify-end gap-2'>
            <AlertDialogClose>Cancel</AlertDialogClose>
            <AlertDialogClose variant='destructive'>Discard</AlertDialogClose>
          </div>
        </AlertDialogPopup>
      </AlertDialogPortal>
    </AlertDialogRoot>
  )
}
```

### Close confirmation

```tsx
import {
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  Button,
} from '@lglab/compose-ui'
import {
  DialogBackdrop,
  DialogClose,
  DialogPopup,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@lglab/compose-ui'
import { useState } from 'react'

export default function CloseConfirmationExample() {
  const [dialogOpen, setDialogOpen] = useState(false)
  const [confirmationOpen, setConfirmationOpen] = useState(false)
  const [textareaValue, setTextareaValue] = useState('')

  return (
    <DialogRoot
      open={dialogOpen}
      onOpenChange={(open) => {
        if (!open && textareaValue) {
          setConfirmationOpen(true)
        } else {
          setTextareaValue('')
          setDialogOpen(open)
        }
      }}
    >
      <DialogTrigger>Send Message</DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogPopup>
          <DialogTitle>New Message</DialogTitle>
          <form
            className='mt-4 flex flex-col gap-6'
            onSubmit={(event) => {
              event.preventDefault()
              setDialogOpen(false)
            }}
          >
            <textarea
              required
              className='min-h-48 w-full rounded-md border px-3.5 py-2'
              placeholder="What's on your mind?"
              value={textareaValue}
              onChange={(event) => setTextareaValue(event.target.value)}
            />
            <div className='flex justify-end gap-2'>
              <DialogClose>Cancel</DialogClose>
              <Button type='submit'>Send</Button>
            </div>
          </form>
        </DialogPopup>
      </DialogPortal>

      <AlertDialogRoot open={confirmationOpen} onOpenChange={setConfirmationOpen}>
        <AlertDialogPortal>
          <AlertDialogPopup>
            <AlertDialogTitle>Discard message?</AlertDialogTitle>
            <AlertDialogDescription>Your tweet will be lost.</AlertDialogDescription>
            <div className='mt-6 flex items-center justify-end gap-2'>
              <AlertDialogClose>Go back</AlertDialogClose>
              <AlertDialogClose
                variant='destructive'
                onClick={() => {
                  setConfirmationOpen(false)
                  setDialogOpen(false)
                }}
              >
                Discard
              </AlertDialogClose>
            </div>
          </AlertDialogPopup>
        </AlertDialogPortal>
      </AlertDialogRoot>
    </DialogRoot>
  )
}
```

### Detached triggers

```tsx
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@lglab/compose-ui'

const demoAlertDialog = AlertDialog.createHandle()

export default function DetachedTriggersExample() {
  return (
    <>
      <AlertDialogTrigger handle={demoAlertDialog} variant='destructive'>
        Discard draft
      </AlertDialogTrigger>

      <AlertDialogRoot handle={demoAlertDialog}>
        <AlertDialogPortal>
          <AlertDialogBackdrop />
          <AlertDialogPopup>
            <AlertDialogTitle>Discard draft?</AlertDialogTitle>
            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
            <div className='mt-6 flex justify-end gap-2'>
              <AlertDialogClose>Cancel</AlertDialogClose>
              <AlertDialogClose variant='destructive'>Discard</AlertDialogClose>
            </div>
          </AlertDialogPopup>
        </AlertDialogPortal>
      </AlertDialogRoot>
    </>
  )
}
```

### Multiple triggers

```tsx
import {
  AlertDialogBackdrop,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@lglab/compose-ui'

export default function MultipleTriggersExample() {
  return (
    <AlertDialogRoot>
      <div className='flex flex-wrap gap-2'>
        <AlertDialogTrigger variant='destructive'>Delete Item 1</AlertDialogTrigger>
        <AlertDialogTrigger variant='destructive'>Delete Item 2</AlertDialogTrigger>
        <AlertDialogTrigger variant='destructive'>Delete Item 3</AlertDialogTrigger>
      </div>
      <AlertDialogPortal>
        <AlertDialogBackdrop />
        <AlertDialogPopup>
          <AlertDialogTitle>Delete item?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete the item.
          </AlertDialogDescription>
          <div className='mt-6 flex justify-end gap-2'>
            <AlertDialogClose>Cancel</AlertDialogClose>
            <AlertDialogClose variant='destructive'>Delete</AlertDialogClose>
          </div>
        </AlertDialogPopup>
      </AlertDialogPortal>
    </AlertDialogRoot>
  )
}
```

### Controlled mode with multiple triggers

```tsx
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogPopup,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@lglab/compose-ui'
import * as React from 'react'

const demoAlertDialog = AlertDialog.createHandle<{ itemName: string }>()

export default function ControlledMultipleExample() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <div className='flex flex-wrap gap-2'>
        <AlertDialogTrigger
          handle={demoAlertDialog}
          payload={{ itemName: 'Item 1' }}
          variant='destructive'
        >
          Delete Item 1
        </AlertDialogTrigger>
        <AlertDialogTrigger
          handle={demoAlertDialog}
          payload={{ itemName: 'Item 2' }}
          variant='destructive'
        >
          Delete Item 2
        </AlertDialogTrigger>
        <AlertDialogTrigger
          handle={demoAlertDialog}
          payload={{ itemName: 'Item 3' }}
          variant='destructive'
        >
          Delete Item 3
        </AlertDialogTrigger>
      </div>

      <AlertDialogRoot handle={demoAlertDialog} open={open} onOpenChange={setOpen}>
        {({ payload: currentPayload }) => {
          const payload = currentPayload as { itemName: string } | undefined
          return (
            <AlertDialogPortal>
              <AlertDialogBackdrop />
              <AlertDialogPopup>
                <AlertDialogTitle>Delete item?</AlertDialogTitle>
                <AlertDialogDescription>
                  {payload && 'itemName' in payload
                    ? `Are you sure you want to delete ${payload.itemName}? This action cannot be undone.`
                    : 'This action cannot be undone. This will permanently delete the item.'}
                </AlertDialogDescription>
                <div className='mt-6 flex justify-end gap-2'>
                  <AlertDialogClose>Cancel</AlertDialogClose>
                  <AlertDialogClose variant='destructive'>Delete</AlertDialogClose>
                </div>
              </AlertDialogPopup>
            </AlertDialogPortal>
          )
        }}
      </AlertDialogRoot>
    </>
  )
}
```

## Resources

- [Base UI Alert Dialog Documentation](https://base-ui.com/react/components/alert-dialog)
- [API Reference](https://base-ui.com/react/components/alert-dialog#api-reference)

---

# Accordion

A set of collapsible panels with headings.

## Installation

```bash
npm install @lglab/compose-ui
```

## Import

```tsx
import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@lglab/compose-ui'
```

## Examples

### Basic

```tsx
import {
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionRoot,
  AccordionTrigger,
} from '@lglab/compose-ui'
import { ChevronDown } from 'lucide-react'

const items = [
  {
    title: 'What is Compose UI?',
    content:
      'Compose UI is a collection of accessible React components built with Base UI and Tailwind CSS, ready to use in your design systems and web apps.',
  },
  {
    title: 'How do I get started?',
    content:
      'Head to the "Quick start" guide in the docs. Install the package and start using components right away.',
  },
  {
    title: 'Can I use it for my project?',
    content: 'Of course! Compose UI is free and open source.',
  },
]

export default function BasicExample() {
  return (
    <AccordionRoot>
      {items.map((item) => (
        <AccordionItem key={item.title} value={item.title}>
          <AccordionHeader>
            <AccordionTrigger className='group'>
              {item.title}
              <ChevronDown className='h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-180' />
            </AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>
            <div className='pb-4'>
              <p>{item.content}</p>
            </div>
          </AccordionPanel>
        </AccordionItem>
      ))}
    </AccordionRoot>
  )
}
```

### Icon

```tsx
import {
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionRoot,
  AccordionTrigger,
} from '@lglab/compose-ui'
import { Plus } from 'lucide-react'

const items = [
  {
    title: 'What is Compose UI?',
    content:
      'Compose UI is a collection of accessible React components built with Base UI and Tailwind CSS, ready to use in your design systems and web apps.',
  },
  {
    title: 'How do I get started?',
    content:
      'Head to the "Quick start" guide in the docs. Install the package and start using components right away.',
  },
  {
    title: 'Can I use it for my project?',
    content: 'Of course! Compose UI is free and open source.',
  },
]

export default function BasicExample() {
  return (
    <AccordionRoot>
      {items.map((item) => (
        <AccordionItem key={item.title} value={item.title}>
          <AccordionHeader>
            <AccordionTrigger className='group'>
              {item.title}
              <Plus className='size-5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-45 group-data-panel-open:scale-105' />
            </AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>
            <div className='pb-4'>
              <p>{item.content}</p>
            </div>
          </AccordionPanel>
        </AccordionItem>
      ))}
    </AccordionRoot>
  )
}
```

### Multiple

```tsx
import {
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionRoot,
  AccordionTrigger,
} from '@lglab/compose-ui'
import { ChevronDown } from 'lucide-react'

const items = [
  {
    title: 'Installation',
    content:
      'Install Compose UI using your preferred package manager: npm, pnpm, yarn, or bun.',
  },
  {
    title: 'Styling',
    content:
      'Import the default styles and register Compose UI as a Tailwind source in your main CSS file.',
  },
  {
    title: 'Usage',
    content:
      'Import components directly from the package and start using them in your React application.',
  },
  {
    title: 'Customization',
    content:
      'Override the default theme by setting CSS variables. All components accept className props for additional styling.',
  },
]

export default function MultipleExample() {
  return (
    <AccordionRoot multiple>
      {items.map((item) => (
        <AccordionItem key={item.title} value={item.title}>
          <AccordionHeader>
            <AccordionTrigger className='group'>
              {item.title}
              <ChevronDown className='h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-180' />
            </AccordionTrigger>
          </AccordionHeader>
          <AccordionPanel>
            <div className='pb-4'>
              <p>{item.content}</p>
            </div>
          </AccordionPanel>
        </AccordionItem>
      ))}
    </AccordionRoot>
  )
}
```

## Resources

- [Base UI Accordion Documentation](https://base-ui.com/react/components/accordion)
- [API Reference](https://base-ui.com/react/components/accordion#api-reference)