{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group-story",
  "title": "Toggle Group Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating toggle group component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/ui/toggle-group-story/toggle-group-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { Bold, Italic, Underline } from \"lucide-react\";\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\";\n\n/**\n * A set of two-state buttons that can be toggled on or off.\n */\nconst meta = {\n  title: \"ui/base/ToggleGroup\",\n  component: ToggleGroup,\n  tags: [\"autodocs\"],\n  argTypes: {\n    multiple: {\n      options: [true, false],\n      control: { type: \"radio\" },\n    },\n  },\n  args: {\n    variant: \"default\",\n    size: \"default\",\n    multiple: true,\n    disabled: false,\n  },\n  render: (args) => (\n    <ToggleGroup {...args}>\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof ToggleGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the toggle group.\n */\nexport const Default: Story = {};\n\n/**\n * Use the `outline` variant to emphasizing the individuality of each button\n * while keeping them visually cohesive.\n */\nexport const Outline: Story = {\n  args: {\n    variant: \"outline\",\n  },\n};\n\n/**\n * Use the `single` type to create exclusive selection within the button\n * group, allowing only one button to be active at a time.\n */\nexport const Single: Story = {\n  args: {\n    multiple: false,\n  },\n};\n\n/**\n * Use the `sm` size for a compact version of the button group, featuring\n * smaller buttons for spaces with limited real estate.\n */\nexport const Small: Story = {\n  args: {\n    size: \"sm\",\n  },\n};\n\n/**\n * Use the `lg` size for a more prominent version of the button group, featuring\n * larger buttons for emphasis.\n */\nexport const Large: Story = {\n  args: {\n    size: \"lg\",\n  },\n};\n\n/**\n * Add the `disabled` prop to a button to prevent interactions.\n */\nexport const Disabled: Story = {\n  args: {\n    disabled: true,\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "toggle-group",
    "form"
  ],
  "type": "registry:component"
}