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

<Meta of={RadioGroupStories} />

<Title>RadioGroup</Title>
<Subtitle>
  A set of checkable buttons—known as radio buttons—where no more than one of
  the buttons can be checked at a time.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/radio-group',
    },
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/radio-group',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas of={RadioGroupStories.Default} layout="padded" sourceState="shown" />

## Import

```tsx
import { RadioGroup, RadioGroupItem } from '@chainlink/blocks'
```

## Usage

The RadioGroup component provides a flexible and accessible way to a set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

```tsx
export const MyRadioGroup = () => {
  return (
    <RadioGroup defaultValue="option-one">
      <RadioGroupItem value="option-one">Option One</RadioGroupItem>
      <RadioGroupItem value="option-two">Option Two</RadioGroupItem>
      <RadioGroupItem value="option-three">Option Three</RadioGroupItem>
    </RadioGroup>
  )
}
```

## Examples

### Disabled

<Canvas of={RadioGroupStories.Disabled} layout="padded" sourceState="shown" />

### With Error

<Canvas of={RadioGroupStories.WithError} layout="padded" sourceState="shown" />

### With Group Error

<Canvas
  of={RadioGroupStories.WithGroupError}
  layout="padded"
  sourceState="shown"
/>

### With Item Error Message

<Canvas
  of={RadioGroupStories.WithItemErrorMessage}
  layout="padded"
  sourceState="shown"
/>

### Controlled

<Canvas of={RadioGroupStories.Controlled} layout="padded" sourceState="shown" />