@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Info/Tooltips/Tooltip/Tooltip.d.ts

@@ -8,7 +8,11 @@ interface TooltipProps {
     className?: string;
     styles?: Record<string, CSSObject>;
     maxWidth?: string;
+    /** When true, the tooltip will not render. */
+    disabled?: boolean;
+    /** When true, the wrapper fills its parent width instead of shrinking to content. */
+    fullWidth?: boolean;
 }
-declare const Tooltip: ({ children, text, position, offset, className, styles, maxWidth }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, text, position, offset, className, styles, maxWidth, disabled, fullWidth }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Info/Tooltips/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,mEAAiF,YAAY,4CAgD7G,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,OAAO,GAAI,wFAAsG,YAAY,4CAmDlI,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Info/Tooltips/Tooltip/Tooltip.js

@@ -3,19 +3,21 @@ import { Tooltip as MantineTooltip, Box } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
 import { spacing } from '../../../../constants/spacing';
-const Tooltip = ({ children, text, position = 'top-start', offset, className, styles, maxWidth }) => {
+const Tooltip = ({ children, text, position = 'top-start', offset, className, styles, maxWidth, disabled, fullWidth }) => {
     const positionToTransition = {
         'top-end': 'slide-up',
         'bottom-end': 'slide-down',
         'top-start': 'slide-up',
         'bottom-start': 'slide-down',
     };
-    const wrapperStyle = {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 'fit-content',
-    };
+    const wrapperStyle = fullWidth
+        ? { display: 'block', width: '100%', minWidth: 0 }
+        : {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 'fit-content',
+        };
     const tooltipStyle = {
         tooltip: {
             ...fontBase,
@@ -31,6 +33,6 @@ const Tooltip = ({ children, text, position = 'top-start', offset, className, st
         },
         ...styles,
     };
-    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, withinPortal: true, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
+    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, withinPortal: true, disabled: disabled, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
 };
 export { Tooltip };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ButtonProps as MantineButtonProps } from '@mantine/core';
 import { componentSizes } from './sizes';
 import { componentVariants } from '../shared/variants';
@@ -8,6 +9,7 @@ export interface ButtonProps extends MantineButtonProps {
     fullWidth?: boolean;
     toggled?: boolean;
     shadow?: boolean;
+    subtle?: boolean;
 }
-export declare const Button: ({ onClick, size, variant, fullWidth, toggled, shadow, styles, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAkCtJ,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAe,iBAAiB,EAAkB,MAAM,oBAAoB,CAAC;AAGpF,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,uFAiEjB,CAAC"}

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

@@ -1,20 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { Button as MantineButton } from '@mantine/core';
 import { fontBase, fontWeight } from '../../../../constants/font';
 import { componentSizes } from './sizes';
-import { componentVariants } from '../shared/variants';
-export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, styles, ...props }) => {
+import { HOVER_MEDIA, componentVariants, subtleVariants } from '../shared/variants';
+import { neutral } from '../../../../constants/colors';
+export const Button = forwardRef(({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, subtle = false, styles, ...props }, ref) => {
     const selectedVariant = componentVariants[variant];
     const selectedSize = componentSizes[size];
     const getVariantStyles = () => {
         if (toggled) {
+            // Toggled hover override is gated behind HOVER_MEDIA so it doesn't
+            // contribute to sticky-hover on touch devices. `:hover` never fires
+            // on touch anyway, so no behavior change there — this just keeps the
+            // CSS cohesive.
             return {
                 ...selectedVariant,
                 ...selectedVariant['&:toggled'],
+                [HOVER_MEDIA]: {
+                    '&:hover': selectedVariant['&:toggled'],
+                },
             };
         }
         return selectedVariant;
     };
+    const getSubtleStyles = () => {
+        if (subtle) {
+            return {
+                ...subtleVariants[variant],
+                border: `1px solid ${neutral[50]}`,
+                background: 'white',
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        background: neutral[50],
+                        border: `1px solid ${neutral[50]}`,
+                    },
+                },
+                '&:active': {
+                    background: 'white',
+                },
+                '&:toggled': {
+                    background: neutral[50],
+                    border: `1px solid ${neutral[100]}`,
+                },
+            };
+        }
+    };
     const style = {
         root: {
             borderRadius: '8px',
@@ -26,12 +57,14 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             transition: 'background 0.1s ease-in-out',
             ...getVariantStyles(),
+            ...getSubtleStyles(),
         },
         label: {
             ...fontBase,
-            fontWeight: fontWeight['semibold'],
+            fontWeight: variant.startsWith('nav') ? fontWeight['regular'] : fontWeight['semibold'],
         },
         ...styles,
     };
-    return _jsx(MantineButton, { styles: style, size: size, onClick: onClick, ...props });
-};
+    return _jsx(MantineButton, { ref: ref, styles: style, size: size, onClick: onClick, ...props });
+});
+Button.displayName = 'Button';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyH7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAwI7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}

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"}