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

<Meta of={PopoverStories} />

<Title>Popover</Title>
<Subtitle>
  A primitive component that displays rich content in a portal, triggered by a
  button.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/popover',
    },
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/popover',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

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

## Components

- `Popover`: The root component that manages the state.
- `PopoverTrigger`: The element that triggers the popover.
- `PopoverContent`: The content that is displayed in the popover.
- `PopoverArrow`: An optional arrow that points to the trigger.

## Import

```tsx
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
} from '@arigato/blocks'
```

## Usage

```tsx
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>The quick brown fox jumps over the lazy dog.</PopoverContent>
</Popover>
```

## Examples

### Without an Arrow

The `PopoverArrow` component is optional.

<Canvas of={PopoverStories.WithoutArrow} sourceState="shown" />

### Side Options

The `PopoverContent` can be positioned on any side of the trigger element using the `side` prop.

<Canvas of={PopoverStories.SideOptions} sourceState="shown" />{' '}