adilallo
688 lines
19 KiB
JavaScript
688 lines
19 KiB
JavaScript
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,
|
|
};
|