@taiv/ui 1.14.1 → 2.0.0

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, {}) })] })),
 };

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

@@ -1,4 +1,9 @@
 declare const componentSizes: {
+    xs: {
+        borderLength: number;
+        padding: string;
+        iconSize: number;
+    };
     sm: {
         borderLength: number;
         padding: string;
@@ -14,6 +19,16 @@ declare const componentSizes: {
         padding: string;
         iconSize: number;
     };
+    xl: {
+        borderLength: number;
+        padding: string;
+        iconSize: number;
+    };
+    '2xl': {
+        borderLength: number;
+        padding: string;
+        iconSize: number;
+    };
 };
 export { componentSizes };
 //# sourceMappingURL=sizes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/sizes.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/sizes.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,7 +1,10 @@
 import { spacing } from '../../../../constants/spacing';
 const componentSizes = {
+    xs: { borderLength: 24, padding: spacing.xxs, iconSize: 14 },
     sm: { borderLength: 28, padding: spacing.xs, iconSize: 16 },
     md: { borderLength: 36, padding: spacing.xs, iconSize: 20 },
     lg: { borderLength: 48, padding: spacing.xs, iconSize: 24 },
+    xl: { borderLength: 64, padding: spacing.sm, iconSize: 32 },
+    '2xl': { borderLength: 72, padding: spacing.sm, iconSize: 34 },
 };
 export { componentSizes };