veza/apps/web/src/components/ui/RadioGroup.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { RadioGroup, RadioGroupItem } from './radio-group';

const meta = {
    title: 'UI/RadioGroup',
    component: RadioGroup,
    tags: ['autodocs'],
    argTypes: {
        disabled: { control: 'boolean' },
    },
} satisfies Meta<typeof RadioGroup>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    render: (args) => (
        <RadioGroup defaultValue="option-one" {...args}>
            <div className="flex items-center space-x-2">
                <RadioGroupItem value="option-one" id="option-one" />
                <label htmlFor="option-one">Option One</label>
            </div>
            <div className="flex items-center space-x-2">
                <RadioGroupItem value="option-two" id="option-two" />
                <label htmlFor="option-two">Option Two</label>
            </div>
        </RadioGroup>
    ),
};

export const Disabled: Story = {
    args: {
        disabled: true,
    },
    render: (args) => (
        <RadioGroup defaultValue="option-one" {...args}>
            <div className="flex items-center space-x-2">
                <RadioGroupItem value="option-one" id="r1" />
                <label htmlFor="r1">Option One</label>
            </div>
            <div className="flex items-center space-x-2">
                <RadioGroupItem value="option-two" id="r2" />
                <label htmlFor="r2">Option Two</label>
            </div>
        </RadioGroup>
    ),
};