@taiv/ui 1.15.0 → 2.0.0

package/dist/components/Inputs/Buttons/Button/Button.stories.js

@@ -1,39 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconDeviceFloppy, IconEdit, IconPlus, IconTrash, } from '@tabler/icons-react';
 import { useState } from 'react';
-import { Button } from './Button';
-import { Group } from '../../../Layout/Group/Group';
-import { IconPlus, IconEdit, IconTrash, IconDeviceFloppy } from '@tabler/icons-react';
 import { spacing } from '../../../../constants/spacing';
+import { Group } from '../../../Layout/Group/Group';
+import { Button } from './Button';
 const meta = {
-    title: 'Components/Inputs/Buttons/Button',
-    component: Button,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe Button component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
-            },
-        },
-    },
     argTypes: {
-        size: {
-            control: { type: 'select' },
-            options: ['sm', 'md', 'lg'],
-            description: "Controls the button's height, padding, and font size",
-            table: {
-                type: { summary: "'sm' | 'md' | 'lg'" },
-                defaultValue: { summary: "'md'" },
-            },
-        },
-        variant: {
-            control: { type: 'select' },
-            options: ['primary', 'secondary', 'cancel', 'success', 'warning', 'text', 'nav'],
-            description: "Defines the button's visual style and color scheme",
-            table: {
-                type: { summary: "'primary' | 'secondary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav'" },
-                defaultValue: { summary: "'primary'" },
-            },
-        },
         children: {
             control: { type: 'text' },
             description: 'Button label or content',
@@ -41,112 +13,166 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
+            },
+        },
         fullWidth: {
             control: { type: 'boolean' },
             description: 'Makes the button span the full width of its container. Useful for modals, forms, etc. with a proper Grid layout',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
             },
         },
         leftIcon: {
             control: { type: 'select' },
-            options: ['Plus', 'Edit', 'Trash', 'Save'],
+            description: 'Adds icon before button label - you can import any icon',
             mapping: {
-                Plus: _jsx(IconPlus, { size: 16 }),
                 Edit: _jsx(IconEdit, { size: 16 }),
-                Trash: _jsx(IconTrash, { size: 16 }),
+                Plus: _jsx(IconPlus, { size: 16 }),
                 Save: _jsx(IconDeviceFloppy, { size: 16 }),
+                Trash: _jsx(IconTrash, { size: 16 }),
             },
-            description: 'Adds icon before button label - you can import any icon',
+            options: ['Plus', 'Edit', 'Trash', 'Save'],
             table: {
                 type: { summary: 'ReactNode' },
             },
         },
+        loading: {
+            control: { type: 'boolean' },
+            description: 'Indicate loading state',
+            table: {
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
+            },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler function',
+            table: {
+                type: { summary: '() => void' },
+            },
+        },
         rightIcon: {
             control: { type: 'select' },
-            options: ['Plus', 'Edit', 'Trash', 'Save'],
+            description: 'Adds icon after button label - you can import any icon',
             mapping: {
-                Plus: _jsx(IconPlus, { size: 16 }),
                 Edit: _jsx(IconEdit, { size: 16 }),
-                Trash: _jsx(IconTrash, { size: 16 }),
+                Plus: _jsx(IconPlus, { size: 16 }),
                 Save: _jsx(IconDeviceFloppy, { size: 16 }),
+                Trash: _jsx(IconTrash, { size: 16 }),
             },
-            description: 'Adds icon after button label - you can import any icon',
+            options: ['Plus', 'Edit', 'Trash', 'Save'],
             table: {
                 type: { summary: 'ReactNode' },
             },
         },
-        styles: {
-            control: { type: 'object' },
-            description: 'Custom styles object',
-            table: {
-                type: { summary: 'MantineStylesObject' },
-            },
-        },
-        disabled: {
+        shadow: {
             control: { type: 'boolean' },
-            description: 'Disabled state',
+            description: 'Adds shadow to the button',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
             },
         },
-        loading: {
-            control: { type: 'boolean' },
-            description: 'Indicate loading state',
+        size: {
+            control: { type: 'select' },
+            description: "Controls the button's height, padding, and font size",
+            options: ['sm', 'md', 'lg'],
             table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
+                defaultValue: { summary: "'md'" },
+                type: { summary: "'sm' | 'md' | 'lg'" },
             },
         },
-        onClick: {
-            action: 'clicked',
-            description: 'Click handler function',
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
             table: {
-                type: { summary: '() => void' },
+                type: { summary: 'MantineStylesObject' },
             },
         },
         toggled: {
             control: { type: 'boolean' },
             description: 'Toggles the button state',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
-            }
+                type: { summary: 'boolean' },
+            },
         },
-        shadow: {
-            control: { type: 'boolean' },
-            description: 'Adds shadow to the button',
+        variant: {
+            control: { type: 'select' },
+            description: "Defines the button's visual style and color scheme. `ghost` is the variant for buttons placed on a deliberately-dark surface (e.g. a `SelectionToolbar` pill) — see the *On Dark Surface* story.",
+            options: [
+                'primary',
+                'secondary',
+                'tertiary',
+                'cancel',
+                'success',
+                'warning',
+                'text',
+                'nav',
+                'ghost',
+            ],
             table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            }
-        }
+                defaultValue: { summary: "'primary'" },
+                type: {
+                    summary: "'primary' | 'secondary' | 'tertiary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav' | 'ghost'",
+                },
+            },
+        },
     },
+    component: Button,
+    parameters: {
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe Button component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Inputs/Buttons/Button',
 };
 export default meta;
 export const Default = {
     args: {
         children: 'Button',
-        size: 'md',
-        variant: 'primary',
         disabled: false,
-        loading: false,
         fullWidth: false,
-        shadow: false,
-        toggled: false,
         leftIcon: undefined,
+        loading: false,
+        onClick: () => { },
         rightIcon: undefined,
+        shadow: false,
+        size: 'md',
         styles: undefined,
-        onClick: () => { },
+        toggled: false,
+        variant: 'primary',
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "cancel", children: "Cancel" }), _jsx(Button, { variant: "success", children: "Success" }), _jsx(Button, { variant: "warning", children: "Warning" }), _jsx(Button, { variant: "text", children: "Text" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { variant: 'primary', children: "Primary" }), _jsx(Button, { variant: 'secondary', children: "Secondary" }), _jsx(Button, { variant: 'tertiary', children: "Tertiary" }), _jsx(Button, { variant: 'cancel', children: "Cancel" }), _jsx(Button, { variant: 'success', children: "Success" }), _jsx(Button, { variant: 'warning', children: "Warning" }), _jsx(Button, { variant: 'text', children: "Text" })] })),
+};
+export const OnDarkSurface = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use `variant="ghost"` for buttons on deliberately-dark surfaces (e.g. inside a dark `SelectionToolbar`). Brand-saturated variants (`success`, `cancel`, `primary`, `warning`) keep their usual styling — saturated colors read fine on either surface.',
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: {
+            backgroundColor: '#0F172A',
+            borderRadius: '999px',
+            padding: '12px 16px',
+        }, children: _jsxs(Group, { gap: spacing.sm, children: [_jsx(Button, { variant: 'ghost', children: "Add to playlist" }), _jsx(Button, { leftIcon: _jsx(IconPlus, { size: 16 }), variant: 'ghost', children: "Create playlist" }), _jsx(Button, { variant: 'success', children: "Add to Shuffle" }), _jsx(Button, { leftIcon: _jsx(IconTrash, { size: 16 }), variant: 'cancel', children: "Delete" })] }) })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { size: 'sm', children: "Small" }), _jsx(Button, { size: 'md', children: "Medium" }), _jsx(Button, { size: 'lg', children: "Large" })] })),
 };
 export const States = {
     render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
@@ -154,7 +180,7 @@ export const States = {
 export const TogglingButtons = {
     render: () => {
         const [toggled, setToggled] = useState(false);
-        return (_jsx(Group, { gap: spacing.lg, children: _jsx(Button, { toggled: toggled, onClick: () => setToggled(!toggled), children: toggled ? 'On' : 'Off' }) }));
+        return (_jsx(Group, { gap: spacing.lg, children: _jsx(Button, { onClick: () => setToggled(!toggled), toggled: toggled, children: toggled ? 'On' : 'Off' }) }));
     },
 };
 export const CustomStyles = {
@@ -162,11 +188,11 @@ export const CustomStyles = {
         children: 'Custom Button',
         styles: {
             root: {
-                borderRadius: '20px',
-                background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
                 '&:hover': {
                     background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
                 },
+                background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+                borderRadius: '20px',
             },
         },
     },

package/dist/components/Inputs/Buttons/IconButton/IconButton.d.ts

@@ -2,16 +2,21 @@ import { ReactElement } from 'react';
 import { ButtonProps as MantineButtonProps } from '@mantine/core';
 import { componentSizes } from './sizes';
 import { componentVariants as baseVariants } from '../shared/variants';
-export interface IconButtonProps extends Omit<MantineButtonProps, 'leftIcon' | 'rightIcon'> {
+export interface IconButtonProps extends Omit<MantineButtonProps, 'leftIcon' | 'rightIcon' | 'radius'> {
     onClick?: () => void;
     size?: keyof typeof componentSizes;
     variant?: keyof typeof baseVariants;
     toggled?: boolean;
     shadow?: boolean;
     subtle?: boolean;
+    /**
+     * Border radius. Defaults to `'8px'` (rounded square). Pass `'50%'` for a
+     * perfect circle (used by `FAB`). Accepts any CSS length.
+     */
+    radius?: number | string;
     children?: ReactElement<{
         size?: number;
     }>;
 }
-export declare const IconButton: ({ onClick, size, variant, toggled, shadow, subtle, styles, children, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/Inputs/Buttons/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAGvF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,iFAA4H,eAAe,4CA8DrK,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAc,MAAM,OAAO,CAAC;AACjD,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAe,iBAAiB,IAAI,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAGpG,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;IACpG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,+GAqFrB,CAAC"}

package/dist/components/Inputs/Buttons/IconButton/IconButton.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { Button as MantineButton } from '@mantine/core';
 import { componentSizes } from './sizes';
-import { componentVariants as baseVariants, subtleVariants } from '../shared/variants';
+import { HOVER_MEDIA, componentVariants as baseVariants, subtleVariants } from '../shared/variants';
 import { neutral } from '../../../../constants/colors';
-export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, styles, children, ...props }) => {
+export const IconButton = forwardRef(({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, radius = '8px', styles, children, ...props }, ref) => {
     const selectedVariant = baseVariants[variant];
     const selectedSize = componentSizes[size];
     const getVariantStyles = () => {
@@ -21,9 +22,11 @@ export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled
                 ...subtleVariants[variant],
                 border: `1px solid ${neutral[50]}`,
                 background: 'white',
-                '&:hover': {
-                    background: neutral[50],
-                    border: `1px solid ${neutral[50]}`,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        background: neutral[50],
+                        border: `1px solid ${neutral[50]}`,
+                    },
                 },
                 '&:active': {
                     background: 'white',
@@ -37,16 +40,37 @@ export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled
     };
     const style = {
         root: {
-            borderRadius: '8px',
+            // Variant colors / borders / interaction states come first.
+            ...getVariantStyles(),
+            ...getSubtleStyles(),
+            // IconButton's geometry contract (square button, centered icon) must
+            // win over variant styles. Variants like `text` set `height: 'auto'`
+            // and `padding: '0'` (correct for inline text Buttons, wrong for icon
+            // buttons), and `nav` sets `paddingLeft` + `inner.justifyContent:
+            // flex-start` (correct for left-aligned menu items, wrong for an
+            // icon-only square). Keep these overrides last so any variant works.
+            borderRadius: typeof radius === 'number' ? `${radius}px` : radius,
+            boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             height: `${selectedSize.borderLength}px`,
+            minWidth: 'unset',
             padding: selectedSize.padding,
             width: `${selectedSize.borderLength}px`,
-            boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
-            ...getVariantStyles(),
-            ...getSubtleStyles(),
+            '& .mantine-Button-inner': {
+                justifyContent: 'center',
+            },
+            // Mantine v6's Button styles only know about xs–xl; '2xl' falls back to
+            // default sizing, which leaves Tabler icons at their 24px default inside
+            // our 80px container. Explicitly size the SVG so iconSize is honored.
+            ...(size === '2xl' && {
+                '& svg': {
+                    height: `${selectedSize.iconSize}px`,
+                    width: `${selectedSize.iconSize}px`,
+                },
+            }),
         },
         ...styles,
     };
-    const Button = (_jsx(MantineButton, { styles: style, size: size, onClick: onClick, loaderPosition: "center", loaderProps: { size: selectedSize.iconSize }, ...props, children: props.loading ? _jsx(_Fragment, {}) : children }));
+    const Button = (_jsx(MantineButton, { ref: ref, styles: style, size: size, onClick: onClick, loaderPosition: "center", loaderProps: { size: selectedSize.iconSize }, ...props, children: props.loading ? _jsx(_Fragment, {}) : children }));
     return Button;
-};
+});
+IconButton.displayName = 'IconButton';

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Subtle: Story;
+export declare const OnDarkSurface: Story;
 export declare const Sizes: Story;
 export declare const States: Story;
 export declare const SubtleStates: Story;

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsB5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsGjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KA0BpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiC3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.js

@@ -1,67 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton } from './IconButton';
-import { Icon12Hours, Icon24Hours, Icon360View, IconAdjustments, IconAlertCircle, IconArrowLeft, IconArrowRight, IconArrowsMaximize, IconCaretDown, IconCheck, IconClock, IconClock2, IconHistory, IconLoader2 } from '@tabler/icons-react';
-import { Group } from '../../../Layout/Group/Group';
+import { Icon12Hours, Icon24Hours, Icon360View, IconAdjustments, IconAlertCircle, IconArrowLeft, IconArrowRight, IconArrowsMaximize, IconCaretDown, IconCheck, IconClock, IconClock2, IconDots, IconHistory, IconLoader2, IconPlayerPlay, IconTrash, } from '@tabler/icons-react';
 import { spacing } from '../../../../constants/spacing';
+import { Group } from '../../../Layout/Group/Group';
+import { IconButton } from './IconButton';
 const meta = {
-    title: 'Components/Inputs/Buttons/IconButton',
-    component: IconButton,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe IconButton component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
-            },
-        },
-    },
     argTypes: {
-        size: {
-            control: { type: 'select' },
-            options: ['sm', 'md', 'lg'],
-            description: "Controls the button's height and padding. These values are square sizes.",
-            table: {
-                type: { summary: "'sm' | 'md' | 'lg'" },
-                defaultValue: { summary: "'md'" },
-            },
-        },
-        variant: {
-            control: { type: 'select' },
-            options: ['primary', 'secondary', 'cancel', 'success', 'warning', 'text', 'nav'],
-            description: "Defines the button's visual style and color scheme",
-            table: {
-                type: { summary: "'primary' | 'secondary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav'" },
-                defaultValue: { summary: "'primary'" },
-            },
-        },
         children: {
             control: { type: 'object' },
             description: 'Icon to be displayed in the button',
             table: {
-                type: { summary: 'ReactNode' },
                 defaultValue: { summary: '<IconHistory />' },
-            },
-        },
-        styles: {
-            control: { type: 'object' },
-            description: 'Custom styles object',
-            table: {
-                type: { summary: 'MantineStylesObject' },
+                type: { summary: 'ReactNode' },
             },
         },
         disabled: {
             control: { type: 'boolean' },
             description: 'Disabled state',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
             },
         },
         loading: {
             control: { type: 'boolean' },
             description: 'Indicate loading state',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
             },
         },
         onClick: {
@@ -75,70 +40,111 @@ const meta = {
             control: { type: 'boolean' },
             description: 'Adds shadow to the button',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
-            }
+                type: { summary: 'boolean' },
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            description: "Controls the button's height and padding. These values are square sizes.",
+            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+            table: {
+                defaultValue: { summary: "'md'" },
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'MantineStylesObject' },
+            },
         },
         subtle: {
             control: { type: 'boolean' },
             description: 'Colors the icon instead of the background and reverses the color based on the variant',
             table: {
-                type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' },
-            }
-        }
+                type: { summary: 'boolean' },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            description: "Defines the button's visual style and color scheme. `ghost` is the variant for icon buttons placed on a deliberately-dark surface — see the *On Dark Surface* story.",
+            options: [
+                'primary',
+                'secondary',
+                'tertiary',
+                'cancel',
+                'success',
+                'warning',
+                'text',
+                'nav',
+                'ghost',
+            ],
+            table: {
+                defaultValue: { summary: "'primary'" },
+                type: {
+                    summary: "'primary' | 'secondary' | 'tertiary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav' | 'ghost'",
+                },
+            },
+        },
     },
+    component: IconButton,
+    parameters: {
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe IconButton component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Inputs/Buttons/IconButton',
 };
 export default meta;
 export const Default = {
     args: {
         children: _jsx(IconHistory, {}),
-        size: 'md',
-        variant: 'primary',
         disabled: false,
         loading: false,
+        onClick: () => { },
         shadow: false,
-        subtle: false,
+        size: 'md',
         styles: {},
-        onClick: () => { },
+        subtle: false,
+        variant: 'primary',
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { variant: "primary", children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", children: _jsx(IconClock2, {}) })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { variant: 'primary', children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: 'secondary', children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: 'tertiary', children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { variant: 'cancel', children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: 'success', children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: 'warning', children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: 'text', children: _jsx(IconClock2, {}) })] })),
 };
 export const Subtle = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { variant: "primary", subtle: true, children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", subtle: true, children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", subtle: true, children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", subtle: true, children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", subtle: true, children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", subtle: true, children: _jsx(IconClock2, {}) })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { subtle: true, variant: 'primary', children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { subtle: true, variant: 'secondary', children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { subtle: true, variant: 'tertiary', children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { subtle: true, variant: 'cancel', children: _jsx(IconClock, {}) }), _jsx(IconButton, { subtle: true, variant: 'success', children: _jsx(IconCheck, {}) }), _jsx(IconButton, { subtle: true, variant: 'warning', children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { subtle: true, variant: 'text', children: _jsx(IconClock2, {}) })] })),
+};
+export const OnDarkSurface = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use `variant="ghost"` for icon buttons on deliberately-dark surfaces. Brand-saturated variants (`success`, `cancel`, `primary`, `warning`) keep their usual styling — saturated colors read fine on either surface.',
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: {
+            backgroundColor: '#0F172A',
+            borderRadius: '999px',
+            padding: '12px 16px',
+        }, children: _jsxs(Group, { gap: spacing.sm, children: [_jsx(IconButton, { variant: 'ghost', children: _jsx(IconPlayerPlay, {}) }), _jsx(IconButton, { variant: 'ghost', children: _jsx(IconDots, {}) }), _jsx(IconButton, { variant: 'success', children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: 'cancel', children: _jsx(IconTrash, {}) })] }) })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { size: "sm", children: _jsx(Icon360View, {}) }), _jsx(IconButton, { size: "md", children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { size: "lg", children: _jsx(IconArrowsMaximize, {}) })] })),
+    render: () => (_jsxs(Group, { align: 'center', gap: spacing.lg, children: [_jsx(IconButton, { size: 'xs', children: _jsx(Icon360View, {}) }), _jsx(IconButton, { size: 'sm', children: _jsx(Icon360View, {}) }), _jsx(IconButton, { size: 'md', children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { size: 'lg', children: _jsx(IconArrowsMaximize, {}) }), _jsx(IconButton, { size: 'xl', children: _jsx(IconArrowsMaximize, {}) }), _jsx(IconButton, { size: '2xl', children: _jsx(IconArrowsMaximize, {}) })] })),
 };
 export const States = {
     render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { disabled: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { loading: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { shadow: true, children: _jsx(IconArrowLeft, {}) })] })),
 };
 export const SubtleStates = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { subtle: true, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { subtle: true, disabled: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { subtle: true, loading: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { subtle: true, shadow: true, children: _jsx(IconArrowLeft, {}) })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { subtle: true, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { disabled: true, subtle: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { loading: true, subtle: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { shadow: true, subtle: true, children: _jsx(IconArrowLeft, {}) })] })),
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { styles: {
-                    root: {
-                        borderRadius: '20px',
-                        background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
-                        '&:hover': {
-                            background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
-                        },
-                    },
-                }, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { styles: {
-                    root: {
-                        borderRadius: '0px',
-                        background: 'black',
-                        color: 'white',
-                        border: '2px solid white',
-                        '&:hover': {
-                            background: 'white',
-                            color: 'black',
-                        },
-                    },
-                }, children: _jsx(IconArrowRight, {}) })] })),
     parameters: {
         docs: {
             source: {
@@ -175,4 +181,24 @@ export const CustomStyles = {
             },
         },
     },
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { styles: {
+                    root: {
+                        '&:hover': {
+                            background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+                        },
+                        background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+                        borderRadius: '20px',
+                    },
+                }, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { styles: {
+                    root: {
+                        '&:hover': {
+                            background: 'white',
+                            color: 'black',
+                        },
+                        background: 'black',
+                        border: '2px solid white',
+                        borderRadius: '0px',
+                        color: 'white',
+                    },
+                }, children: _jsx(IconArrowRight, {}) })] })),
 };