@a2v2ai/uikit 0.0.38 → 0.0.39

package/IconButton/IconButton.stories.tsx

@@ -1,566 +0,0 @@
-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 gap={8}>
-      {/* Icon Button Grid - matching Figma layout */}
-      <Flex gap={4}>
-        <Typography variant="h4" className="text-white">Icon Button</Typography>
-
-        {/* Header row with variant labels */}
-        <Flex direction="row" gap={0}>
-          {/* Spacer for row labels */}
-          <div className="w-20" />
-
-          {/* Primary */}
-          <Flex align="center" className="w-40">
-            <Typography variant="body2" className="text-neutral-400 mb-2">Primary</Typography>
-            <Flex direction="row" 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 align="center" className="w-40">
-            <Typography variant="body2" className="text-neutral-400 mb-2">Secondary</Typography>
-            <Flex direction="row" 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 align="center" className="w-40">
-            <Typography variant="body2" className="text-neutral-400 mb-2">Outline</Typography>
-            <Flex direction="row" 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 align="center" className="w-40">
-            <Typography variant="body2" className="text-neutral-400 mb-2">Ghost</Typography>
-            <Flex direction="row" 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 gap={2}>
-          <Typography variant="body2" className="text-neutral-500 mb-1">Default</Typography>
-
-          {/* Regular Row */}
-          <Flex direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Regular</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Large</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Small</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Mini</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 gap={2} className="mt-4">
-          <Typography variant="body2" className="text-neutral-500 mb-1">Round</Typography>
-
-          {/* Regular Row */}
-          <Flex direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Regular</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Large</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Small</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 direction="row" gap={0} align="center">
-            <Typography variant="caption" className="text-neutral-500 w-20">Mini</Typography>
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 gap={4}>
-        <Typography variant="h4" className="text-white">Examples</Typography>
-
-        <Flex direction="row" gap={16}>
-          {/* Sizes Column */}
-          <Flex gap={4}>
-            <Typography variant="body2" className="text-neutral-400">Sizes</Typography>
-            {/* Regular row */}
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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 gap={4}>
-            <Typography variant="body2" className="text-neutral-400">Round</Typography>
-            {/* Regular row */}
-            <Flex direction="row" 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 direction="row" 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 direction="row" 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 direction="row" 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

@@ -1,95 +0,0 @@
-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-accent-600 text-white hover:bg-accent-700",
-        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 }