import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
  Title,
  Subtitle,
  Controls,
  Description,
} from '@storybook/addon-docs/blocks'
import { LifecycleTag, SourceLinks } from '../../docs/components'
import { Toggle } from './Toggle'
import * as ToggleStories from './Toggle.stories'
import { Lifecycle } from '../../docs/components'

<Meta of={ToggleStories} title="Blocks/Toggle" />

<Title>Toggle</Title>
<Subtitle>A two-state toggle switch that can be turned on or off.</Subtitle>

<SourceLinks
  links={[
    {
      label: 'shadcn/ui Switch',
      href: 'https://ui.shadcn.com/docs/components/switch',
    },
    {
      label: 'Radix UI Switch API',
      href: 'https://www.radix-ui.com/primitives/docs/components/switch#api-reference',
    },
  ]}
/>
<LifecycleTag variant="Stable" />

<Canvas of={ToggleStories.Off} sourceState="shown" />
<Controls of={ToggleStories.Off} />

This component is built on top of [Radix UI's Switch](https://www.radix-ui.com/primitives/docs/components/switch#api-reference). For more details on API and accessibility, refer to the official Radix documentation.

## Usage

Import the toggle from `@chainlink/blocks`

```tsx
import { Toggle } from '@chainlink/blocks'

export function ToggleExample() {
  return <Toggle />
}
```

## Examples

### On

The toggle can be on.

<Canvas of={ToggleStories.On} sourceState="shown" />

### Disabled

<Canvas of={ToggleStories.Disabled} sourceState="shown" />

### Size sm

<Canvas of={ToggleStories.Small} sourceState="shown" />

### Size sm - On

<Canvas of={ToggleStories.SmallOn} sourceState="shown" />