{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group-story",
  "title": "Radio Group Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating radio group component usage and variants",
  "registryDependencies": [
    "radio-group",
    "label"
  ],
  "files": [
    {
      "path": "registry/ui/radio-group-story/radio-group-base.stories.tsx",
      "content": "import { expect, userEvent, waitFor } from \"storybook/test\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport { Label } from \"@/components/ui/label\";\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/components/ui/radio-group\";\n\n/**\n * A set of checkable buttons—known as radio buttons—where no more than one of\n * the buttons can be checked at a time.\n */\nconst meta = {\n  title: \"ui/base/RadioGroup\",\n  component: RadioGroup,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {\n    defaultValue: \"comfortable\",\n    className: \"grid gap-2 grid-cols-[1rem_1fr] items-center\",\n  },\n  render: (args) => (\n    <RadioGroup {...args}>\n      <RadioGroupItem value=\"default\" id=\"r1\" />\n      <Label htmlFor=\"r1\">Default</Label>\n      <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n      <Label htmlFor=\"r2\">Comfortable</Label>\n      <RadioGroupItem value=\"compact\" id=\"r3\" />\n      <Label htmlFor=\"r3\">Compact</Label>\n    </RadioGroup>\n  ),\n} satisfies Meta<typeof RadioGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the radio group.\n */\nexport const Default: Story = {};\n\nexport const ShouldToggleRadio: Story = {\n  name: \"when clicking on a radio button, it should toggle its state\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvas, step }) => {\n    const radios = await canvas.findAllByRole(\"radio\");\n    expect(radios).toHaveLength(3);\n\n    await step(\"click the default radio button\", async () => {\n      await userEvent.click(radios[0]);\n      await waitFor(() => expect(radios[0]).toBeChecked());\n      await waitFor(() => expect(radios[1]).not.toBeChecked());\n    });\n\n    await step(\"click the comfortable radio button\", async () => {\n      await userEvent.click(radios[1]);\n      await waitFor(() => expect(radios[1]).toBeChecked());\n      await waitFor(() => expect(radios[0]).not.toBeChecked());\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "radio",
    "form"
  ],
  "type": "registry:component"
}