@a2v2ai/uikit 0.0.36 → 0.0.38

package/Button/Button.stories.tsx

@@ -0,0 +1,684 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ArrowRight, Mail, Plus, Search, Trash2, Download, ChevronDown } from "../icons"
+import { Typography } from "../Typography/Typography"
+import { Flex } from "../Flex/Flex"
+import { Button } from "./Button"
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "outline",
+        "ghost",
+        "ghost-muted",
+        "destructive",
+      ],
+      description: "The visual style variant of the button",
+    },
+    size: {
+      control: "select",
+      options: ["mini", "small", "regular", "large"],
+      description: "The size of the button",
+    },
+    roundness: {
+      control: "select",
+      options: ["default", "round"],
+      description: "The roundness of the button corners",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the button is disabled",
+    },
+    asChild: {
+      control: "boolean",
+      description: "Render as child element (for use with Link components)",
+    },
+    leftIcon: {
+      control: false,
+      description: "Icon to display on the left side of the button",
+    },
+    rightIcon: {
+      control: false,
+      description: "Icon to display on the right side of the button",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: "Button",
+    variant: "secondary",
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    children: "Button",
+    variant: "outline",
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    children: "Button",
+    variant: "ghost",
+  },
+}
+
+export const GhostMuted: Story = {
+  args: {
+    children: "Button",
+    variant: "ghost-muted",
+  },
+}
+
+export const Destructive: Story = {
+  args: {
+    children: "Button",
+    variant: "destructive",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: "Button",
+    disabled: true,
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <Flex direction="row" align="center" gap={4}>
+      <Button size="mini">Mini</Button>
+      <Button size="small">Small</Button>
+      <Button size="regular">Regular</Button>
+      <Button size="large">Large</Button>
+    </Flex>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <Flex direction="row" align="center" gap={4}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="ghost-muted">Ghost Muted</Button>
+      <Button variant="destructive">Destructive</Button>
+    </Flex>
+  ),
+}
+
+export const Rounded: Story = {
+  render: () => (
+    <Flex direction="row" align="center" gap={4}>
+      <Button roundness="round" variant="primary">
+        Primary
+      </Button>
+      <Button roundness="round" variant="secondary">
+        Secondary
+      </Button>
+      <Button roundness="round" variant="outline">
+        Outline
+      </Button>
+      <Button roundness="round" variant="ghost">
+        Ghost
+      </Button>
+    </Flex>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <Flex gap={4}>
+      <Flex direction="row" align="center" gap={4}>
+        <Button leftIcon={<Mail />}>
+          Login with Email
+        </Button>
+        <Button rightIcon={<ArrowRight />}>
+          Next Step
+        </Button>
+        <Button leftIcon={<Plus />} rightIcon={<ChevronDown />}>
+          Add New
+        </Button>
+      </Flex>
+      <Flex direction="row" align="center" gap={4}>
+        <Button variant="secondary" leftIcon={<Search />}>
+          Search
+        </Button>
+        <Button variant="outline" leftIcon={<Download />}>
+          Download
+        </Button>
+        <Button variant="destructive" leftIcon={<Trash2 />}>
+          Delete
+        </Button>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const IconPositions: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => (
+    <Flex gap={6}>
+      <Typography variant="subtitle1" color="main-700">Icon Positions</Typography>
+
+      {/* No Icons */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">No Icons</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button variant="primary">Label</Button>
+          <Button variant="secondary">Label</Button>
+          <Button variant="outline">Label</Button>
+          <Button variant="ghost">Label</Button>
+          <Button variant="destructive">Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Left Icon Only */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Left Icon Only</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button variant="primary" leftIcon={<Mail />}>Label</Button>
+          <Button variant="secondary" leftIcon={<Plus />}>Label</Button>
+          <Button variant="outline" leftIcon={<Search />}>Label</Button>
+          <Button variant="ghost" leftIcon={<Download />}>Label</Button>
+          <Button variant="destructive" leftIcon={<Trash2 />}>Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Right Icon Only */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Right Icon Only</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button variant="primary" rightIcon={<ArrowRight />}>Label</Button>
+          <Button variant="secondary" rightIcon={<ChevronDown />}>Label</Button>
+          <Button variant="outline" rightIcon={<ArrowRight />}>Label</Button>
+          <Button variant="ghost" rightIcon={<ChevronDown />}>Label</Button>
+          <Button variant="destructive" rightIcon={<ArrowRight />}>Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Both Icons */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Both Icons</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button variant="primary" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
+          <Button variant="secondary" leftIcon={<Plus />} rightIcon={<ChevronDown />}>Label</Button>
+          <Button variant="outline" leftIcon={<Search />} rightIcon={<ArrowRight />}>Label</Button>
+          <Button variant="ghost" leftIcon={<Download />} rightIcon={<ChevronDown />}>Label</Button>
+          <Button variant="destructive" leftIcon={<Trash2 />} rightIcon={<ArrowRight />}>Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Icon Only (Square Buttons) */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Icon Only (Square)</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button variant="primary" style={{ padding: "0", width: "36px", height: "36px" }}><Plus /></Button>
+          <Button variant="secondary" style={{ padding: "0", width: "36px", height: "36px" }}><Search /></Button>
+          <Button variant="outline" style={{ padding: "0", width: "36px", height: "36px" }}><Mail /></Button>
+          <Button variant="ghost" style={{ padding: "0", width: "36px", height: "36px" }}><Download /></Button>
+          <Button variant="destructive" style={{ padding: "0", width: "36px", height: "36px" }}><Trash2 /></Button>
+        </Flex>
+      </Flex>
+
+      {/* Icon Only (Round Buttons) */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Icon Only (Round)</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button variant="primary" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Plus /></Button>
+          <Button variant="secondary" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Search /></Button>
+          <Button variant="outline" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Mail /></Button>
+          <Button variant="ghost" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Download /></Button>
+          <Button variant="destructive" roundness="round" style={{ padding: "0", width: "36px", height: "36px" }}><Trash2 /></Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const AllSizesWithIcons: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => (
+    <Flex gap={6}>
+      <Typography variant="subtitle1" color="main-700">All Sizes with Icons</Typography>
+
+      {/* Large */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Large</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button size="large">Label</Button>
+          <Button size="large" leftIcon={<Mail />}>Label</Button>
+          <Button size="large" rightIcon={<ArrowRight />}>Label</Button>
+          <Button size="large" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Regular */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Regular</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button size="regular">Label</Button>
+          <Button size="regular" leftIcon={<Mail />}>Label</Button>
+          <Button size="regular" rightIcon={<ArrowRight />}>Label</Button>
+          <Button size="regular" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Small */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Small</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button size="small">Label</Button>
+          <Button size="small" leftIcon={<Mail />}>Label</Button>
+          <Button size="small" rightIcon={<ArrowRight />}>Label</Button>
+          <Button size="small" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
+        </Flex>
+      </Flex>
+
+      {/* Mini */}
+      <Flex gap={2}>
+        <Typography variant="body3" color="main-500">Mini</Typography>
+        <Flex direction="row" align="center" gap={3}>
+          <Button size="mini">Label</Button>
+          <Button size="mini" leftIcon={<Mail />}>Label</Button>
+          <Button size="mini" rightIcon={<ArrowRight />}>Label</Button>
+          <Button size="mini" leftIcon={<Mail />} rightIcon={<ArrowRight />}>Label</Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const AllVariantsAndSizes: Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: () => (
+    <Flex style={{ padding: "32px", backgroundColor: "#ffffff", minHeight: "100vh", overflowX: "auto" }}>
+      {/* Header */}
+      <Flex style={{ borderBottom: "1px solid #e5e7eb", paddingBottom: "24px", marginBottom: "32px" }}>
+        <Typography variant="h3" color="main-950">Button</Typography>
+      </Flex>
+
+      {/* Main Content */}
+      <Flex gap={12} style={{ minWidth: "fit-content" }}>
+        {/* Default Roundness Section */}
+        <Flex gap={6}>
+          <Typography variant="subtitle1" color="main-700">Default Roundness</Typography>
+
+          {/* Variant Headers */}
+          <Flex direction="row">
+            <Flex style={{ width: "80px" }} />
+            <Flex direction="row" gap={0}>
+              {/* Primary */}
+              <Flex align="center" style={{ width: "532px" }}>
+                <Typography variant="body3" color="accent-600">Primary</Typography>
+                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
+                </Flex>
+              </Flex>
+              {/* Secondary */}
+              <Flex align="center" style={{ width: "532px" }}>
+                <Typography variant="body3" color="accent-600">Secondary</Typography>
+                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
+                </Flex>
+              </Flex>
+              {/* Outline */}
+              <Flex align="center" style={{ width: "532px" }}>
+                <Typography variant="body3" color="accent-600">Outline</Typography>
+                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
+                </Flex>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          {/* Regular Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Regular</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Primary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular" className="bg-accent-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="regular" disabled>Label</Button></Flex>
+              {/* Secondary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular" className="bg-main-200">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="regular" disabled>Label</Button></Flex>
+              {/* Outline */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular" className="bg-main-100">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="regular" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Large Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Large</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Primary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large" className="bg-accent-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="large" disabled>Label</Button></Flex>
+              {/* Secondary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large" className="bg-main-200">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="large" disabled>Label</Button></Flex>
+              {/* Outline */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large" className="bg-main-100">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="large" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Small Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Small</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Primary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small" className="bg-accent-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="small" disabled>Label</Button></Flex>
+              {/* Secondary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small" className="bg-main-200">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="small" disabled>Label</Button></Flex>
+              {/* Outline */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small" className="bg-main-100">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="small" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Mini Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Mini</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Primary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini" className="bg-accent-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="primary" size="mini" disabled>Label</Button></Flex>
+              {/* Secondary */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini" className="bg-main-200">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="secondary" size="mini" disabled>Label</Button></Flex>
+              {/* Outline */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini" className="bg-main-100">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="outline" size="mini" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Ghost, Destructive, Ghost Muted Section */}
+        <Flex gap={6}>
+          {/* Variant Headers */}
+          <Flex direction="row">
+            <Flex style={{ width: "80px" }} />
+            <Flex direction="row" gap={0}>
+              {/* Ghost */}
+              <Flex align="center" style={{ width: "532px" }}>
+                <Typography variant="body3" color="accent-600">Ghost</Typography>
+                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
+                </Flex>
+              </Flex>
+              {/* Destructive */}
+              <Flex align="center" style={{ width: "532px" }}>
+                <Typography variant="body3" color="error-600">Destructive</Typography>
+                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
+                </Flex>
+              </Flex>
+              {/* Ghost Muted */}
+              <Flex align="center" style={{ width: "532px" }}>
+                <Typography variant="body3" color="main-400">Ghost Muted</Typography>
+                <Flex direction="row" gap={0} style={{ marginTop: "8px" }}>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Default</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Hover & Active</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Focus</Typography></Flex>
+                  <Flex justify="center" style={{ width: "133px" }}><Typography variant="caption" color="main-400">Disabled</Typography></Flex>
+                </Flex>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          {/* Regular Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Regular</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Ghost */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular" className="bg-main-100 text-main-950">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="regular" disabled>Label</Button></Flex>
+              {/* Destructive */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular" className="bg-error-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="regular" disabled>Label</Button></Flex>
+              {/* Ghost Muted */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular" className="bg-main-100 text-main-600">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="regular" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Large Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Large</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Ghost */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large" className="bg-main-100 text-main-950">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="large" disabled>Label</Button></Flex>
+              {/* Destructive */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large" className="bg-error-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="large" disabled>Label</Button></Flex>
+              {/* Ghost Muted */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large" className="bg-main-100 text-main-600">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="large" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Small Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Small</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Ghost */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small" className="bg-main-100 text-main-950">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="small" disabled>Label</Button></Flex>
+              {/* Destructive */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small" className="bg-error-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="small" disabled>Label</Button></Flex>
+              {/* Ghost Muted */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small" className="bg-main-100 text-main-600">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="small" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Mini Row */}
+          <Flex direction="row" align="center">
+            <Flex style={{ width: "80px" }}>
+              <Typography variant="body3" color="main-500">Mini</Typography>
+            </Flex>
+            <Flex direction="row" gap={0}>
+              {/* Ghost */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini" className="bg-main-100 text-main-950">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost" size="mini" disabled>Label</Button></Flex>
+              {/* Destructive */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini" className="bg-error-700">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="destructive" size="mini" disabled>Label</Button></Flex>
+              {/* Ghost Muted */}
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini" className="bg-main-100 text-main-600">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini" className="shadow-[0_0_0_3px_#d4d4d4]">Label</Button></Flex>
+              <Flex justify="center" style={{ width: "133px" }}><Button variant="ghost-muted" size="mini" disabled>Label</Button></Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Examples Section */}
+        <Flex gap={6} style={{ marginTop: "24px", paddingTop: "24px", borderTop: "1px solid #e5e7eb" }}>
+          <Typography variant="subtitle1" color="main-700">Examples</Typography>
+
+          <Flex direction="row" gap={12}>
+            {/* Regular size examples */}
+            <Flex gap={4}>
+              <Typography variant="body2" color="main-600" className="font-medium">Regular Size</Typography>
+              <Flex gap={3}>
+                <Flex direction="row" gap={3}>
+                  <Button variant="primary" leftIcon={<Mail />}>Login with Email</Button>
+                  <Button variant="secondary" leftIcon={<Plus />}>Add Item</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="outline" leftIcon={<Search />}>Edit</Button>
+                  <Button variant="ghost" leftIcon={<Plus />}>Add</Button>
+                  <Button variant="destructive" leftIcon={<Trash2 />}>Delete</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="outline" leftIcon={<ChevronDown />}>Dropdown</Button>
+                  <Button variant="outline" leftIcon={<ChevronDown />}>Display</Button>
+                  <Button variant="outline" leftIcon={<ChevronDown />}>Display</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="outline" leftIcon={<ArrowRight />}>Previous</Button>
+                  <Button variant="ghost" rightIcon={<ArrowRight />}>Next</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="ghost" leftIcon={<Search />}>Search</Button>
+                  <Button variant="ghost" leftIcon={<Download />}>Bookmark</Button>
+                </Flex>
+              </Flex>
+            </Flex>
+
+            {/* Small size examples */}
+            <Flex gap={4}>
+              <Typography variant="body2" color="main-600" className="font-medium">Small Size</Typography>
+              <Flex gap={3}>
+                <Flex direction="row" gap={3}>
+                  <Button variant="primary" size="small" leftIcon={<Mail />}>Login with Email</Button>
+                  <Button variant="secondary" size="small" leftIcon={<Plus />}>Add Item</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="outline" size="small" leftIcon={<Search />}>Edit</Button>
+                  <Button variant="ghost" size="small" leftIcon={<Plus />}>Add</Button>
+                  <Button variant="destructive" size="small" leftIcon={<Trash2 />}>Delete</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="outline" size="small" leftIcon={<ChevronDown />}>Dropdown</Button>
+                  <Button variant="outline" size="small" leftIcon={<ChevronDown />}>Display</Button>
+                  <Button variant="outline" size="small" leftIcon={<ChevronDown />}>Display</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="outline" size="small" leftIcon={<ArrowRight />}>Previous</Button>
+                  <Button variant="ghost" size="small" rightIcon={<ArrowRight />}>Next</Button>
+                </Flex>
+                <Flex direction="row" gap={3}>
+                  <Button variant="ghost" size="small" leftIcon={<Search />}>Search</Button>
+                  <Button variant="ghost" size="small" leftIcon={<Download />}>Bookmark</Button>
+                </Flex>
+              </Flex>
+            </Flex>
+
+            {/* Loading states */}
+            <Flex gap={4}>
+              <Typography variant="body2" color="main-600" className="font-medium">1:1 Fit</Typography>
+              <Typography variant="caption" color="main-400">Note: You can set a minimum width to<br />make the 1:1 pill button, e.g. 2:1</Typography>
+              <Flex gap={3}>
+                <Button variant="primary" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
+                <Button variant="secondary" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
+                <Button variant="outline" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
+                <Button variant="ghost" roundness="round" style={{ width: "36px", height: "36px", padding: 0 }}><Plus /></Button>
+              </Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}