{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-stories",
  "title": "Button Stories",
  "description": "Optional, portable Button stories for an existing React Storybook. Install Button first; no component or Storybook configuration is overwritten.",
  "files": [
    {
      "path": "registry/new-york/button.stories.tsx",
      "content": "import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Plus } from \"lucide-react\";\n\nimport { Button } from \"./button\";\n\nconst meta = {\n  argTypes: {\n    \"aria-label\": { control: \"text\" },\n    asChild: { control: false },\n    children: { control: \"text\", description: \"Button label.\" },\n    className: { control: \"text\" },\n    disabled: { control: \"boolean\" },\n    isLoading: { control: \"boolean\" },\n    nativeButton: { control: false },\n    render: { control: false },\n    size: {\n      control: \"select\",\n      options: [\n        \"xs\",\n        \"sm\",\n        \"default\",\n        \"lg\",\n        \"icon-xs\",\n        \"icon-sm\",\n        \"icon\",\n        \"icon-lg\",\n      ],\n    },\n    transition: { control: false },\n    variant: {\n      control: \"select\",\n      options: [\n        \"default\",\n        \"secondary\",\n        \"outline\",\n        \"ghost\",\n        \"destructive\",\n        \"link\",\n      ],\n    },\n    whileTap: { control: false },\n  },\n  args: {\n    children: \"Button\",\n    disabled: false,\n    isLoading: false,\n    size: \"default\",\n    variant: \"default\",\n  },\n  component: Button,\n  parameters: { layout: \"centered\" },\n  tags: [\"autodocs\"],\n  title: \"Vandor UI/Button\",\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground: Story = {};\n\nexport const Variants: Story = {\n  argTypes: { children: { control: false }, variant: { control: false } },\n  render: (args) => (\n    <div className=\"flex flex-wrap items-center justify-center gap-3\">\n      {(\n        [\n          \"default\",\n          \"secondary\",\n          \"outline\",\n          \"ghost\",\n          \"destructive\",\n          \"link\",\n        ] as const\n      ).map((variant) => (\n        <Button {...args} key={variant} variant={variant}>\n          {variant}\n        </Button>\n      ))}\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  argTypes: {\n    \"aria-label\": { control: false },\n    children: { control: false },\n    size: { control: false },\n  },\n  render: (args) => (\n    <div className=\"flex flex-col items-center gap-4\">\n      <div className=\"flex flex-wrap items-center justify-center gap-3\">\n        {([\"xs\", \"sm\", \"default\", \"lg\"] as const).map((size) => (\n          <Button {...args} key={size} size={size}>\n            {size}\n          </Button>\n        ))}\n      </div>\n      <div className=\"flex flex-wrap items-center justify-center gap-3\">\n        {([\"icon-xs\", \"icon-sm\", \"icon\", \"icon-lg\"] as const).map((size) => (\n          <Button\n            {...args}\n            key={size}\n            size={size}\n            aria-label={`Add item (${size})`}\n          >\n            <Plus aria-hidden=\"true\" />\n          </Button>\n        ))}\n      </div>\n    </div>\n  ),\n};\n\nexport const Disabled: Story = { args: { disabled: true } };\n\nexport const Loading: Story = { args: { children: \"Saving\", isLoading: true } };\n\nexport const WithIcon: Story = {\n  args: { children: \"Add item\" },\n  render: (args) => (\n    <Button {...args}>\n      <Plus aria-hidden=\"true\" data-icon=\"inline-start\" />\n      {args.children}\n    </Button>\n  ),\n};\n\nexport const IconOnly: Story = {\n  argTypes: { children: { control: false } },\n  args: { \"aria-label\": \"Add item\", size: \"icon\" },\n  render: (args) => (\n    <Button {...args}>\n      <Plus aria-hidden=\"true\" />\n    </Button>\n  ),\n};\n\nexport const AsLink: Story = {\n  argTypes: { disabled: { control: false } },\n  args: { asChild: true, children: \"Browse components\", variant: \"outline\" },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"The child retains link semantics. Native disabled does not disable a link; isLoading blocks clicks. The fragment URL keeps this example inside Storybook.\",\n      },\n    },\n  },\n  render: (args) => (\n    <Button {...args}>\n      <a href=\"#button-story\">{args.children}</a>\n    </Button>\n  ),\n};\n\nexport const WithoutPressAnimation: Story = {\n  args: { children: \"No scale feedback\", whileTap: false },\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:item"
}