import {
  Canvas,
  Controls,
  Meta,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as SheetStories from './Sheet.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={SheetStories} />

<Title>Sheet</Title>
<Subtitle>
  A slide-out panel that extends from the edge of the screen to display
  additional content or actions.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/dialog',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/sheet',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas of={SheetStories.Default} sourceState="shown">
  <Controls />
</Canvas>

## Foundation & Extensibility

This component is built on top of [shadcn/ui Sheet](https://ui.shadcn.com/docs/components/sheet), which uses [Radix UI Dialog primitives](https://www.radix-ui.com/primitives/docs/components/dialog). As a foundational component, Sheet provides the core slide-out functionality that can be extended and customized to create more specific components for your application needs.

**Use this component to build:**

- Navigation drawers and sidebars
- Settings and configuration panels
- Filter and search overlays
- Detail views and information panels
- Mobile-first action sheets
- Any temporary overlay content

For advanced customization and additional API options, refer to the [Radix Dialog documentation](https://www.radix-ui.com/primitives/docs/components/dialog).

## Subcomponents

- `Sheet`: The root component that manages the sheet's state.
- `SheetTrigger`: The button or element that opens the sheet.
- `SheetContent`: The main container for the sheet's content. The `side` prop determines which edge of the screen it slides from.
- `SheetHeader`: A container for the sheet's title and description.
- `SheetTitle`: The title of the sheet.
- `SheetDescription`: A description or subtitle for the sheet.
- `SheetFooter`: The footer section, typically used for action buttons.
- `SheetClose`: A button that closes the sheet.

## Usage

### Import

```tsx
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@chainlink/blocks'
```

### Example

```tsx
export function MySheet() {
  return (
    <Sheet>
      <SheetTrigger>Open Sheet</SheetTrigger>
      <SheetContent side="left">
        <SheetHeader>
          <SheetTitle>Sheet Title</SheetTitle>
          <SheetDescription>
            This is a description for the sheet.
          </SheetDescription>
        </SheetHeader>
        <div className="p-6">{/* Sheet content goes here */}</div>
        <SheetFooter>
          <SheetClose>Close</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

## Examples

The `side` prop controls which edge of the screen the sheet slides in from. Pass it to the `SheetContent` component with values of `'top'`, `'bottom'`, `'left'`, or `'right'`.

### Top

<Canvas of={SheetStories.Top} sourceState="shown" />

### Bottom

<Canvas of={SheetStories.Bottom} sourceState="shown" />

### Left

<Canvas of={SheetStories.Left} sourceState="shown" />

### Right

<Canvas of={SheetStories.Right} sourceState="shown" />