import { j as e } from "./jsx-runtime-C_nHp4yK.js";
import { B as n } from "./Button-Z4hbXct5.js";
import "./iframe-D_aMTKb2.js";
import "./preload-helper-DIZFD4sK.js";
const u = {
    title: "Components/Button",
    component: n,
    parameters: {
      layout: "centered",
      docs: {
        description: {
          component:
            "A versatile button component with multiple variants, sizes, and states. Can render as a button or link with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
        },
      },
    },
    argTypes: {
      variant: {
        control: { type: "select" },
        options: [
          "default",
          "secondary",
          "primary",
          "outlined",
          "dark",
          "inverse",
        ],
        description: "The visual style variant of the button",
      },
      size: {
        control: { type: "select" },
        options: ["xsmall", "small", "medium", "large", "xlarge"],
        description: "The size of the button",
      },
      disabled: {
        control: { type: "boolean" },
        description: "Whether the button is disabled",
      },
      href: {
        control: { type: "text" },
        description: "If provided, renders as a link instead of a button",
      },
      onClick: { action: "clicked" },
    },
    tags: ["autodocs"],
  },
  t = { args: { children: "Button" } },
  s = {
    args: { children: "Button", size: "large" },
    render: (a) =>
      e.jsx("div", {
        className: "space-y-4",
        children: e.jsxs("div", {
          className: "space-x-4",
          children: [
            e.jsx(n, { ...a, variant: "default", children: "Default" }),
            e.jsx(n, { ...a, variant: "secondary", children: "Secondary" }),
            e.jsx(n, { ...a, variant: "primary", children: "Primary" }),
            e.jsx(n, { ...a, variant: "outlined", children: "Outlined" }),
            e.jsx(n, { ...a, variant: "dark", children: "Dark" }),
            e.jsx(n, { ...a, variant: "inverse", children: "Inverse" }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: {
          story: "Different visual variants of the button component.",
        },
      },
    },
  },
  i = {
    args: { children: "Button", variant: "default" },
    render: (a) =>
      e.jsx("div", {
        className: "space-y-4",
        children: e.jsxs("div", {
          className: "space-x-4",
          children: [
            e.jsx(n, { ...a, size: "xsmall", children: "XSmall" }),
            e.jsx(n, { ...a, size: "small", children: "Small" }),
            e.jsx(n, { ...a, size: "medium", children: "Medium" }),
            e.jsx(n, { ...a, size: "large", children: "Large" }),
            e.jsx(n, { ...a, size: "xlarge", children: "XLarge" }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: {
          story: "Different sizes available for the button component.",
        },
      },
    },
  },
  r = {
    args: { children: "Button", size: "large", variant: "default" },
    render: (a) =>
      e.jsx("div", {
        className: "space-y-4",
        children: e.jsxs("div", {
          className: "space-x-4",
          children: [
            e.jsx(n, { ...a, children: "Normal" }),
            e.jsx(n, { ...a, disabled: !0, children: "Disabled" }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: { story: "Different states of the button component." },
      },
    },
  },
  l = {
    args: {},
    render: () =>
      e.jsxs("div", {
        className: "space-y-6",
        children: [
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Default Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, { size: "xsmall", children: "XSmall" }),
                  e.jsx(n, { size: "small", children: "Small" }),
                  e.jsx(n, { size: "medium", children: "Medium" }),
                  e.jsx(n, { size: "large", children: "Large" }),
                  e.jsx(n, { size: "xlarge", children: "XLarge" }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Secondary Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, {
                    variant: "secondary",
                    size: "xsmall",
                    children: "XSmall",
                  }),
                  e.jsx(n, {
                    variant: "secondary",
                    size: "small",
                    children: "Small",
                  }),
                  e.jsx(n, {
                    variant: "secondary",
                    size: "medium",
                    children: "Medium",
                  }),
                  e.jsx(n, {
                    variant: "secondary",
                    size: "large",
                    children: "Large",
                  }),
                  e.jsx(n, {
                    variant: "secondary",
                    size: "xlarge",
                    children: "XLarge",
                  }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Primary Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, {
                    variant: "primary",
                    size: "xsmall",
                    children: "XSmall",
                  }),
                  e.jsx(n, {
                    variant: "primary",
                    size: "small",
                    children: "Small",
                  }),
                  e.jsx(n, {
                    variant: "primary",
                    size: "medium",
                    children: "Medium",
                  }),
                  e.jsx(n, {
                    variant: "primary",
                    size: "large",
                    children: "Large",
                  }),
                  e.jsx(n, {
                    variant: "primary",
                    size: "xlarge",
                    children: "XLarge",
                  }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Outlined Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, {
                    variant: "outlined",
                    size: "xsmall",
                    children: "XSmall",
                  }),
                  e.jsx(n, {
                    variant: "outlined",
                    size: "small",
                    children: "Small",
                  }),
                  e.jsx(n, {
                    variant: "outlined",
                    size: "medium",
                    children: "Medium",
                  }),
                  e.jsx(n, {
                    variant: "outlined",
                    size: "large",
                    children: "Large",
                  }),
                  e.jsx(n, {
                    variant: "outlined",
                    size: "xlarge",
                    children: "XLarge",
                  }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Dark Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, {
                    variant: "dark",
                    size: "xsmall",
                    children: "XSmall",
                  }),
                  e.jsx(n, {
                    variant: "dark",
                    size: "small",
                    children: "Small",
                  }),
                  e.jsx(n, {
                    variant: "dark",
                    size: "medium",
                    children: "Medium",
                  }),
                  e.jsx(n, {
                    variant: "dark",
                    size: "large",
                    children: "Large",
                  }),
                  e.jsx(n, {
                    variant: "dark",
                    size: "xlarge",
                    children: "XLarge",
                  }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Inverse Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, {
                    variant: "inverse",
                    size: "xsmall",
                    children: "XSmall",
                  }),
                  e.jsx(n, {
                    variant: "inverse",
                    size: "small",
                    children: "Small",
                  }),
                  e.jsx(n, {
                    variant: "inverse",
                    size: "medium",
                    children: "Medium",
                  }),
                  e.jsx(n, {
                    variant: "inverse",
                    size: "large",
                    children: "Large",
                  }),
                  e.jsx(n, {
                    variant: "inverse",
                    size: "xlarge",
                    children: "XLarge",
                  }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Disabled States",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(n, {
                    size: "large",
                    disabled: !0,
                    children: "Default Disabled",
                  }),
                  e.jsx(n, {
                    variant: "secondary",
                    size: "large",
                    disabled: !0,
                    children: "Secondary Disabled",
                  }),
                  e.jsx(n, {
                    variant: "primary",
                    size: "large",
                    disabled: !0,
                    children: "Primary Disabled",
                  }),
                  e.jsx(n, {
                    variant: "outlined",
                    size: "large",
                    disabled: !0,
                    children: "Outlined Disabled",
                  }),
                  e.jsx(n, {
                    variant: "dark",
                    size: "large",
                    disabled: !0,
                    children: "Dark Disabled",
                  }),
                  e.jsx(n, {
                    variant: "inverse",
                    size: "large",
                    disabled: !0,
                    children: "Inverse Disabled",
                  }),
                ],
              }),
            ],
          }),
        ],
      }),
    parameters: {
      docs: {
        description: {
          story: "Complete overview of all button variants, sizes, and states.",
        },
      },
    },
  };
t.parameters = {
  ...t.parameters,
  docs: {
    ...t.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Button"
  }
}`,
      ...t.parameters?.docs?.source,
    },
  },
};
s.parameters = {
  ...s.parameters,
  docs: {
    ...s.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Button",
    size: "large"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <Button {...args} variant="default">
          Default
        </Button>
        <Button {...args} variant="secondary">
          Secondary
        </Button>
        <Button {...args} variant="primary">
          Primary
        </Button>
        <Button {...args} variant="outlined">
          Outlined
        </Button>
        <Button {...args} variant="dark">
          Dark
        </Button>
        <Button {...args} variant="inverse">
          Inverse
        </Button>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different visual variants of the button component."
      }
    }
  }
}`,
      ...s.parameters?.docs?.source,
    },
  },
};
i.parameters = {
  ...i.parameters,
  docs: {
    ...i.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Button",
    variant: "default"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <Button {...args} size="xsmall">
          XSmall
        </Button>
        <Button {...args} size="small">
          Small
        </Button>
        <Button {...args} size="medium">
          Medium
        </Button>
        <Button {...args} size="large">
          Large
        </Button>
        <Button {...args} size="xlarge">
          XLarge
        </Button>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different sizes available for the button component."
      }
    }
  }
}`,
      ...i.parameters?.docs?.source,
    },
  },
};
r.parameters = {
  ...r.parameters,
  docs: {
    ...r.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Button",
    size: "large",
    variant: "default"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <Button {...args}>Normal</Button>
        <Button {...args} disabled>
          Disabled
        </Button>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different states of the button component."
      }
    }
  }
}`,
      ...r.parameters?.docs?.source,
    },
  },
};
l.parameters = {
  ...l.parameters,
  docs: {
    ...l.parameters?.docs,
    source: {
      originalSource: `{
  args: {},
  render: () => <div className="space-y-6">
      <div>
        <h3 className="text-white font-semibold mb-3">Default Variant</h3>
        <div className="space-x-4">
          <Button size="xsmall">XSmall</Button>
          <Button size="small">Small</Button>
          <Button size="medium">Medium</Button>
          <Button size="large">Large</Button>
          <Button size="xlarge">XLarge</Button>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Secondary Variant</h3>
        <div className="space-x-4">
          <Button variant="secondary" size="xsmall">
            XSmall
          </Button>
          <Button variant="secondary" size="small">
            Small
          </Button>
          <Button variant="secondary" size="medium">
            Medium
          </Button>
          <Button variant="secondary" size="large">
            Large
          </Button>
          <Button variant="secondary" size="xlarge">
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Primary Variant</h3>
        <div className="space-x-4">
          <Button variant="primary" size="xsmall">
            XSmall
          </Button>
          <Button variant="primary" size="small">
            Small
          </Button>
          <Button variant="primary" size="medium">
            Medium
          </Button>
          <Button variant="primary" size="large">
            Large
          </Button>
          <Button variant="primary" size="xlarge">
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
        <div className="space-x-4">
          <Button variant="outlined" size="xsmall">
            XSmall
          </Button>
          <Button variant="outlined" size="small">
            Small
          </Button>
          <Button variant="outlined" size="medium">
            Medium
          </Button>
          <Button variant="outlined" size="large">
            Large
          </Button>
          <Button variant="outlined" size="xlarge">
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Dark Variant</h3>
        <div className="space-x-4">
          <Button variant="dark" size="xsmall">
            XSmall
          </Button>
          <Button variant="dark" size="small">
            Small
          </Button>
          <Button variant="dark" size="medium">
            Medium
          </Button>
          <Button variant="dark" size="large">
            Large
          </Button>
          <Button variant="dark" size="xlarge">
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
        <div className="space-x-4">
          <Button variant="inverse" size="xsmall">
            XSmall
          </Button>
          <Button variant="inverse" size="small">
            Small
          </Button>
          <Button variant="inverse" size="medium">
            Medium
          </Button>
          <Button variant="inverse" size="large">
            Large
          </Button>
          <Button variant="inverse" size="xlarge">
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Disabled States</h3>
        <div className="space-x-4">
          <Button size="large" disabled>
            Default Disabled
          </Button>
          <Button variant="secondary" size="large" disabled>
            Secondary Disabled
          </Button>
          <Button variant="primary" size="large" disabled>
            Primary Disabled
          </Button>
          <Button variant="outlined" size="large" disabled>
            Outlined Disabled
          </Button>
          <Button variant="dark" size="large" disabled>
            Dark Disabled
          </Button>
          <Button variant="inverse" size="large" disabled>
            Inverse Disabled
          </Button>
        </div>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Complete overview of all button variants, sizes, and states."
      }
    }
  }
}`,
      ...l.parameters?.docs?.source,
    },
  },
};
const v = ["Default", "Variants", "Sizes", "States", "AllVariants"];
export {
  l as AllVariants,
  t as Default,
  i as Sizes,
  r as States,
  s as Variants,
  v as __namedExportsOrder,
  u as default,
};