@a2v2ai/uikit 0.0.1 → 0.0.3

package/IconButton/IconButton.stories.tsx

@@ -0,0 +1,566 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Plus, Pencil, Filter, MoreVertical, MoreHorizontal, Trash2 } from "../icons"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { IconButton } from "./IconButton"
+
+const meta: Meta<typeof IconButton> = {
+  title: "Components/IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost"],
+      description: "The visual 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",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story
+export const Default: Story = {
+  args: {
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+// Variants
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton variant="primary" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    icon: <Pencil />,
+    "aria-label": "Edit",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton variant="secondary" icon={<Pencil />} aria-label="Edit" />`,
+      },
+    },
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    icon: <Filter />,
+    "aria-label": "Filter",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton variant="outline" icon={<Filter />} aria-label="Filter" />`,
+      },
+    },
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    icon: <MoreVertical />,
+    "aria-label": "More options",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton variant="ghost" icon={<MoreVertical />} aria-label="More options" />`,
+      },
+    },
+  },
+}
+
+// Sizes
+export const SizeLarge: Story = {
+  args: {
+    size: "large",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton size="large" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+export const SizeRegular: Story = {
+  args: {
+    size: "regular",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton size="regular" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+export const SizeSmall: Story = {
+  args: {
+    size: "small",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton size="small" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+export const SizeMini: Story = {
+  args: {
+    size: "mini",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton size="mini" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+// Roundness
+export const RoundDefault: Story = {
+  args: {
+    roundness: "default",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton roundness="default" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+export const RoundFull: Story = {
+  args: {
+    roundness: "round",
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton roundness="round" icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+// Disabled
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    icon: <Plus />,
+    "aria-label": "Add item",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<IconButton disabled icon={<Plus />} aria-label="Add item" />`,
+      },
+    },
+  },
+}
+
+// All Variants showcase - matching Figma grid layout
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      {/* Icon Button Grid - matching Figma layout */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4" className="text-white">Icon Button</Typography>
+
+        {/* Header row with variant labels */}
+        <Flex gap={0}>
+          {/* Spacer for row labels */}
+          <div className="w-20" />
+
+          {/* Primary */}
+          <Flex direction="column" align="center" className="w-40">
+            <Typography variant="body2" className="text-neutral-400 mb-2">Primary</Typography>
+            <Flex gap={2}>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Default</Typography>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Disabled</Typography>
+            </Flex>
+          </Flex>
+
+          {/* Secondary */}
+          <Flex direction="column" align="center" className="w-40">
+            <Typography variant="body2" className="text-neutral-400 mb-2">Secondary</Typography>
+            <Flex gap={2}>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Default</Typography>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Disabled</Typography>
+            </Flex>
+          </Flex>
+
+          {/* Outline */}
+          <Flex direction="column" align="center" className="w-40">
+            <Typography variant="body2" className="text-neutral-400 mb-2">Outline</Typography>
+            <Flex gap={2}>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Default</Typography>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Disabled</Typography>
+            </Flex>
+          </Flex>
+
+          {/* Ghost */}
+          <Flex direction="column" align="center" className="w-40">
+            <Typography variant="body2" className="text-neutral-400 mb-2">Ghost</Typography>
+            <Flex gap={2}>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Default</Typography>
+              <Typography variant="caption" className="text-neutral-500 w-10 text-center">Disabled</Typography>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Default Roundness Section */}
+        <Flex direction="column" gap={2}>
+          <Typography variant="body2" className="text-neutral-500 mb-1">Default</Typography>
+
+          {/* Regular Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Regular</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" size="regular" icon={<Plus />} aria-label="Primary Regular" />
+              <IconButton variant="primary" size="regular" icon={<Plus />} aria-label="Primary Regular Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" size="regular" icon={<Plus />} aria-label="Secondary Regular" />
+              <IconButton variant="secondary" size="regular" icon={<Plus />} aria-label="Secondary Regular Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" size="regular" icon={<Plus />} aria-label="Outline Regular" />
+              <IconButton variant="outline" size="regular" icon={<Plus />} aria-label="Outline Regular Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" size="regular" icon={<Plus />} aria-label="Ghost Regular" />
+              <IconButton variant="ghost" size="regular" icon={<Plus />} aria-label="Ghost Regular Disabled" disabled />
+            </Flex>
+          </Flex>
+
+          {/* Large Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Large</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" size="large" icon={<Plus />} aria-label="Primary Large" />
+              <IconButton variant="primary" size="large" icon={<Plus />} aria-label="Primary Large Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" size="large" icon={<Plus />} aria-label="Secondary Large" />
+              <IconButton variant="secondary" size="large" icon={<Plus />} aria-label="Secondary Large Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" size="large" icon={<Plus />} aria-label="Outline Large" />
+              <IconButton variant="outline" size="large" icon={<Plus />} aria-label="Outline Large Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" size="large" icon={<Plus />} aria-label="Ghost Large" />
+              <IconButton variant="ghost" size="large" icon={<Plus />} aria-label="Ghost Large Disabled" disabled />
+            </Flex>
+          </Flex>
+
+          {/* Small Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Small</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" size="small" icon={<Plus />} aria-label="Primary Small" />
+              <IconButton variant="primary" size="small" icon={<Plus />} aria-label="Primary Small Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" size="small" icon={<Plus />} aria-label="Secondary Small" />
+              <IconButton variant="secondary" size="small" icon={<Plus />} aria-label="Secondary Small Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" size="small" icon={<Plus />} aria-label="Outline Small" />
+              <IconButton variant="outline" size="small" icon={<Plus />} aria-label="Outline Small Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" size="small" icon={<Plus />} aria-label="Ghost Small" />
+              <IconButton variant="ghost" size="small" icon={<Plus />} aria-label="Ghost Small Disabled" disabled />
+            </Flex>
+          </Flex>
+
+          {/* Mini Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Mini</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" size="mini" icon={<Plus />} aria-label="Primary Mini" />
+              <IconButton variant="primary" size="mini" icon={<Plus />} aria-label="Primary Mini Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" size="mini" icon={<Plus />} aria-label="Secondary Mini" />
+              <IconButton variant="secondary" size="mini" icon={<Plus />} aria-label="Secondary Mini Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" size="mini" icon={<Plus />} aria-label="Outline Mini" />
+              <IconButton variant="outline" size="mini" icon={<Plus />} aria-label="Outline Mini Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" size="mini" icon={<Plus />} aria-label="Ghost Mini" />
+              <IconButton variant="ghost" size="mini" icon={<Plus />} aria-label="Ghost Mini Disabled" disabled />
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Round Section */}
+        <Flex direction="column" gap={2} className="mt-4">
+          <Typography variant="body2" className="text-neutral-500 mb-1">Round</Typography>
+
+          {/* Regular Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Regular</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" roundness="round" size="regular" icon={<Plus />} aria-label="Primary Regular Round" />
+              <IconButton variant="primary" roundness="round" size="regular" icon={<Plus />} aria-label="Primary Regular Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" roundness="round" size="regular" icon={<Plus />} aria-label="Secondary Regular Round" />
+              <IconButton variant="secondary" roundness="round" size="regular" icon={<Plus />} aria-label="Secondary Regular Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" roundness="round" size="regular" icon={<Plus />} aria-label="Outline Regular Round" />
+              <IconButton variant="outline" roundness="round" size="regular" icon={<Plus />} aria-label="Outline Regular Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" roundness="round" size="regular" icon={<Plus />} aria-label="Ghost Regular Round" />
+              <IconButton variant="ghost" roundness="round" size="regular" icon={<Plus />} aria-label="Ghost Regular Round Disabled" disabled />
+            </Flex>
+          </Flex>
+
+          {/* Large Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Large</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" roundness="round" size="large" icon={<Plus />} aria-label="Primary Large Round" />
+              <IconButton variant="primary" roundness="round" size="large" icon={<Plus />} aria-label="Primary Large Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" roundness="round" size="large" icon={<Plus />} aria-label="Secondary Large Round" />
+              <IconButton variant="secondary" roundness="round" size="large" icon={<Plus />} aria-label="Secondary Large Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" roundness="round" size="large" icon={<Plus />} aria-label="Outline Large Round" />
+              <IconButton variant="outline" roundness="round" size="large" icon={<Plus />} aria-label="Outline Large Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" roundness="round" size="large" icon={<Plus />} aria-label="Ghost Large Round" />
+              <IconButton variant="ghost" roundness="round" size="large" icon={<Plus />} aria-label="Ghost Large Round Disabled" disabled />
+            </Flex>
+          </Flex>
+
+          {/* Small Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Small</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" roundness="round" size="small" icon={<Plus />} aria-label="Primary Small Round" />
+              <IconButton variant="primary" roundness="round" size="small" icon={<Plus />} aria-label="Primary Small Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" roundness="round" size="small" icon={<Plus />} aria-label="Secondary Small Round" />
+              <IconButton variant="secondary" roundness="round" size="small" icon={<Plus />} aria-label="Secondary Small Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" roundness="round" size="small" icon={<Plus />} aria-label="Outline Small Round" />
+              <IconButton variant="outline" roundness="round" size="small" icon={<Plus />} aria-label="Outline Small Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" roundness="round" size="small" icon={<Plus />} aria-label="Ghost Small Round" />
+              <IconButton variant="ghost" roundness="round" size="small" icon={<Plus />} aria-label="Ghost Small Round Disabled" disabled />
+            </Flex>
+          </Flex>
+
+          {/* Mini Row */}
+          <Flex gap={0} align="center">
+            <Typography variant="caption" className="text-neutral-500 w-20">Mini</Typography>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="primary" roundness="round" size="mini" icon={<Plus />} aria-label="Primary Mini Round" />
+              <IconButton variant="primary" roundness="round" size="mini" icon={<Plus />} aria-label="Primary Mini Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="secondary" roundness="round" size="mini" icon={<Plus />} aria-label="Secondary Mini Round" />
+              <IconButton variant="secondary" roundness="round" size="mini" icon={<Plus />} aria-label="Secondary Mini Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="outline" roundness="round" size="mini" icon={<Plus />} aria-label="Outline Mini Round" />
+              <IconButton variant="outline" roundness="round" size="mini" icon={<Plus />} aria-label="Outline Mini Round Disabled" disabled />
+            </Flex>
+            <Flex gap={2} className="w-40" justify="center">
+              <IconButton variant="ghost" roundness="round" size="mini" icon={<Plus />} aria-label="Ghost Mini Round" />
+              <IconButton variant="ghost" roundness="round" size="mini" icon={<Plus />} aria-label="Ghost Mini Round Disabled" disabled />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Examples Section - matching Figma "Sizes" and "Round" */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4" className="text-white">Examples</Typography>
+
+        <Flex gap={16}>
+          {/* Sizes Column */}
+          <Flex direction="column" gap={4}>
+            <Typography variant="body2" className="text-neutral-400">Sizes</Typography>
+            {/* Regular row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" size="regular" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" size="regular" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" size="regular" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" size="regular" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" size="regular" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" size="regular" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+            {/* Large row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" size="large" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" size="large" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" size="large" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" size="large" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" size="large" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" size="large" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+            {/* Small row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" size="small" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" size="small" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" size="small" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" size="small" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" size="small" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" size="small" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+            {/* Mini row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" size="mini" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" size="mini" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" size="mini" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" size="mini" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" size="mini" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" size="mini" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+          </Flex>
+
+          {/* Round Column */}
+          <Flex direction="column" gap={4}>
+            <Typography variant="body2" className="text-neutral-400">Round</Typography>
+            {/* Regular row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" roundness="round" size="regular" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" roundness="round" size="regular" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" roundness="round" size="regular" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" roundness="round" size="regular" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" roundness="round" size="regular" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" roundness="round" size="regular" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+            {/* Large row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" roundness="round" size="large" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" roundness="round" size="large" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" roundness="round" size="large" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" roundness="round" size="large" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" roundness="round" size="large" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" roundness="round" size="large" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+            {/* Small row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" roundness="round" size="small" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" roundness="round" size="small" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" roundness="round" size="small" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" roundness="round" size="small" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" roundness="round" size="small" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" roundness="round" size="small" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+            {/* Mini row */}
+            <Flex gap={3} align="center">
+              <IconButton variant="primary" roundness="round" size="mini" icon={<Plus />} aria-label="Add" />
+              <IconButton variant="secondary" roundness="round" size="mini" icon={<Pencil />} aria-label="Edit" />
+              <IconButton variant="outline" roundness="round" size="mini" icon={<Filter />} aria-label="Filter" />
+              <IconButton variant="ghost" roundness="round" size="mini" icon={<MoreVertical />} aria-label="More" />
+              <IconButton variant="ghost" roundness="round" size="mini" icon={<MoreHorizontal />} aria-label="More" />
+              <IconButton variant="outline" roundness="round" size="mini" icon={<Trash2 />} aria-label="Delete" className="text-red-500 border-red-500 hover:bg-red-50" />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `// Primary variants
+<IconButton variant="primary" icon={<Plus />} aria-label="Add" />
+<IconButton variant="primary" size="large" icon={<Plus />} aria-label="Add" />
+<IconButton variant="primary" roundness="round" icon={<Plus />} aria-label="Add" />
+
+// Secondary variants
+<IconButton variant="secondary" icon={<Pencil />} aria-label="Edit" />
+
+// Outline variants
+<IconButton variant="outline" icon={<Filter />} aria-label="Filter" />
+
+// Ghost variants
+<IconButton variant="ghost" icon={<MoreVertical />} aria-label="More" />
+
+// Disabled
+<IconButton disabled icon={<Plus />} aria-label="Add" />`,
+      },
+    },
+  },
+}

package/IconButton/IconButton.tsx

@@ -0,0 +1,95 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type IconButtonVariant = "primary" | "secondary" | "outline" | "ghost"
+type IconButtonSize = "mini" | "small" | "regular" | "large"
+type IconButtonRoundness = "default" | "round"
+
+const iconButtonVariants = cva(
+  "inline-flex items-center justify-center shrink-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-main-950 text-main-50 hover:bg-main-800",
+        secondary: "bg-main-100 text-main-950 hover:bg-main-200",
+        outline:
+          "border border-main-300 bg-transparent text-main-950 hover:bg-main-100",
+        ghost: "bg-transparent text-main-600 hover:bg-main-100 hover:text-main-950",
+      },
+      size: {
+        mini: "size-6 [&_svg]:size-3",
+        small: "size-8 [&_svg]:size-4",
+        regular: "size-9 [&_svg]:size-4",
+        large: "size-10 [&_svg]:size-5",
+      },
+      roundness: {
+        default: "rounded-lg",
+        round: "rounded-full",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "mini",
+        roundness: "default",
+        className: "rounded-md",
+      },
+      {
+        size: "small",
+        roundness: "default",
+        className: "rounded-md",
+      },
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "regular",
+      roundness: "default",
+    },
+  }
+)
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: IconButtonVariant
+  size?: IconButtonSize
+  roundness?: IconButtonRoundness
+  /** Use the Slot component to render a different element */
+  asChild?: boolean
+  /** The icon to render inside the button */
+  icon?: React.ReactNode
+  /** Accessible label for screen readers */
+  "aria-label": string
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      roundness,
+      asChild = false,
+      icon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(iconButtonVariants({ variant, size, roundness, className }))}
+        ref={ref}
+        {...props}
+      >
+        {icon || children}
+      </Comp>
+    )
+  }
+)
+IconButton.displayName = "IconButton"
+
+export { IconButton, iconButtonVariants }
+export type { IconButtonVariant, IconButtonSize, IconButtonRoundness }