@taiv/ui 1.12.0 → 1.14.0

package/dist/components/Info/Notifications/Notifications.stories.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { NotificationProvider } from './NotificationProvider/NotificationProvider';
+import { Group } from '../../Layout/Group/Group';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { useNotifications } from '../../../hooks/useNotifications';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Hooks/Notifications',
+    tags: ['!dev'],
+    component: NotificationProvider,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['success', 'error', 'warning', 'info', 'copy'],
+            description: 'Visual style and icon of the notification',
+            table: {
+                type: { summary: "'success' | 'error' | 'warning' | 'info' | 'copy'" },
+                defaultValue: { summary: "'info'" },
+            },
+        },
+        message: {
+            control: { type: 'text' },
+            description: 'Notification body text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        title: {
+            control: { type: 'text' },
+            description: 'Optional title override (defaults to variant title)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        id: {
+            control: { type: 'text' },
+            description: 'Optional unique ID for tracking or hiding',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const DefaultDemo = (args) => {
+    const { show } = useNotifications();
+    return (_jsx(Button, { onClick: () => show({
+            variant: args.variant,
+            message: args.message,
+            title: args.title || undefined,
+            id: args.id || undefined,
+        }), children: "Show Notification" }));
+};
+export const Default = {
+    args: {
+        variant: 'info',
+        message: 'Operation completed successfully!',
+        title: undefined,
+        id: undefined,
+    },
+    render: (args) => _jsx(DefaultDemo, { ...args }),
+};
+const VariantsDemo = () => {
+    const { show } = useNotifications();
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', message: 'Operation completed successfully!' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error', message: 'Something went wrong!' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', message: 'Please review your input' }), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info', message: 'Here is some useful information' }), children: "Info" }), _jsx(Button, { variant: "secondary", onClick: () => show({ variant: 'copy', message: 'Copied to clipboard!' }), children: "Copy" })] }));
+};
+export const Variants = {
+    render: () => _jsx(VariantsDemo, {}),
+};
+const GenericErrorDemo = () => {
+    const { showError } = useNotifications();
+    return _jsx(Button, { variant: "cancel", onClick: showError, children: "Show Generic Error" });
+};
+export const GenericError = {
+    render: () => _jsx(GenericErrorDemo, {}),
+};
+const AsyncDemo = () => {
+    const { show, showLoading, showError, hide } = useNotifications();
+    const [isLoadingSuccess, setIsLoadingSuccess] = useState(false);
+    const [isLoadingFailure, setIsLoadingFailure] = useState(false);
+    const handleSuccess = () => {
+        setIsLoadingSuccess(true);
+        const id = showLoading({ message: 'Processing your request...' });
+        setTimeout(() => {
+            hide(id);
+            show({ variant: 'success', message: 'Operation completed!' });
+            setIsLoadingSuccess(false);
+        }, 3000);
+    };
+    const handleFailure = () => {
+        setIsLoadingFailure(true);
+        const id = showLoading({ message: 'Processing your request...' });
+        setTimeout(() => {
+            hide(id);
+            showError();
+            setIsLoadingFailure(false);
+        }, 3000);
+    };
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: "success", onClick: handleSuccess, loading: isLoadingSuccess, children: isLoadingSuccess ? 'Processing...' : 'Async Success' }), _jsx(Button, { variant: "cancel", onClick: handleFailure, loading: isLoadingFailure, children: isLoadingFailure ? 'Processing...' : 'Async Failure' })] }));
+};
+export const AsyncNotifications = {
+    render: () => _jsx(AsyncDemo, {}),
+};

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

@@ -1 +1 @@
-{"version":3,"file":"FormulaTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/FormulaTooltip/FormulaTooltip.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,oCAAoC,mBAAmB,4CAgB9E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"FormulaTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/FormulaTooltip/FormulaTooltip.tsx"],"names":[],"mappings":"AASA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,oCAAoC,mBAAmB,4CAgB9E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -4,8 +4,9 @@ import { Text } from '../../../Typography/Text/Text';
 import { Formula } from '../../../Typography/Formula/Formula';
 import { Stack } from '../../../Layout/Stack/Stack';
 import { blue } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 import { Center } from '../../../Layout/Center/Center';
 const FormulaTooltip = ({ title, description, expression }) => {
-    return (_jsx(Box, { p: "0.8rem", children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.8rem", sx: { maxWidth: '500px' }, children: [_jsx(Text, { weight: "semibold", children: title }), _jsx(Text, { variant: "label", children: description })] }), _jsx("div", { style: { padding: '1.6rem 2.4rem', borderRadius: '16px', backgroundColor: blue[25], width: '100%' }, children: _jsx(Center, { children: _jsx(Formula, { expression: expression, color: blue[300] }) }) })] }) }));
+    return (_jsx(Box, { p: "8px", children: _jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Stack, { gap: spacing.sm, sx: { maxWidth: '500px' }, children: [_jsx(Text, { weight: "semibold", children: title }), _jsx(Text, { variant: "label", children: description })] }), _jsx("div", { style: { padding: `${spacing.lg} ${spacing.xl}`, borderRadius: '16px', backgroundColor: blue[25], width: '100%' }, children: _jsx(Center, { children: _jsx(Formula, { expression: expression, color: blue[300] }) }) })] }) }));
 };
 export { FormulaTooltip };

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

@@ -26,10 +26,10 @@ declare const componentVariants: {
     };
 };
 declare const componentSizes: {
-    readonly sm: "1.2rem";
-    readonly md: "1.6rem";
-    readonly lg: "2rem";
-    readonly xl: "2.4rem";
+    readonly sm: "12px";
+    readonly md: "16px";
+    readonly lg: "20px";
+    readonly xl: "24px";
 };
 declare const InfoTooltip: ({ text, content, position, size, offset, className, styles, maxWidth, variant }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { InfoTooltip };

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

@@ -16,10 +16,10 @@ const componentVariants = {
     },
 };
 const componentSizes = {
-    sm: '1.2rem',
-    md: '1.6rem',
-    lg: '2rem',
-    xl: '2.4rem',
+    sm: '12px',
+    md: '16px',
+    lg: '20px',
+    xl: '24px',
 };
 const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offset, className, styles, maxWidth, variant = 'info' }) => {
     const style = {

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;AAI5C,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;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,mEAAiF,YAAY,4CAgD7G,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 positionToTransition = {
         'top-end': 'slide-up',
@@ -24,7 +25,7 @@ const Tooltip = ({ children, text, position = 'top-start', offset, className, st
             borderRadius: '8px',
             textWrap: 'wrap',
             maxWidth: maxWidth || '375px',
-            padding: '0.75rem 1.125rem',
+            padding: `${spacing.sm} 11.25px`,
             ...fontSize['sm'],
             height: 'fit-content',
         },

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

@@ -19,9 +19,9 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
         root: {
             borderRadius: '8px',
             width: fullWidth ? '100%' : 'fit-content',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             padding: selectedSize.padding,
-            minWidth: `${selectedSize.minWidth}rem`,
+            minWidth: `${selectedSize.minWidth}px`,
             fontSize: selectedSize.fontSize,
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             transition: 'background 0.1s ease-in-out',

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

@@ -7,5 +7,6 @@ export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const States: Story;
+export declare const TogglingButtons: Story;
 export declare const CustomStyles: Story;
 //# sourceMappingURL=Button.stories.d.ts.map

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;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAmG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,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;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"}

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

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
 const meta = {
     title: 'Components/Inputs/Buttons/Button',
     component: Button,
@@ -47,15 +50,29 @@ const meta = {
             },
         },
         leftIcon: {
-            control: { type: 'text' },
-            description: 'Adds icon before button label',
+            control: { type: 'select' },
+            options: ['Plus', 'Edit', 'Trash', 'Save'],
+            mapping: {
+                Plus: _jsx(IconPlus, { size: 16 }),
+                Edit: _jsx(IconEdit, { size: 16 }),
+                Trash: _jsx(IconTrash, { size: 16 }),
+                Save: _jsx(IconDeviceFloppy, { size: 16 }),
+            },
+            description: 'Adds icon before button label - you can import any icon',
             table: {
                 type: { summary: 'ReactNode' },
             },
         },
         rightIcon: {
-            control: { type: 'text' },
-            description: 'Adds icon after button label',
+            control: { type: 'select' },
+            options: ['Plus', 'Edit', 'Trash', 'Save'],
+            mapping: {
+                Plus: _jsx(IconPlus, { size: 16 }),
+                Edit: _jsx(IconEdit, { size: 16 }),
+                Trash: _jsx(IconTrash, { size: 16 }),
+                Save: _jsx(IconDeviceFloppy, { size: 16 }),
+            },
+            description: 'Adds icon after button label - you can import any icon',
             table: {
                 type: { summary: 'ReactNode' },
             },
@@ -90,6 +107,14 @@ const meta = {
                 type: { summary: '() => void' },
             },
         },
+        toggled: {
+            control: { type: 'boolean' },
+            description: 'Toggles the button state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            }
+        },
         shadow: {
             control: { type: 'boolean' },
             description: 'Adds shadow to the button',
@@ -110,42 +135,41 @@ export const Default = {
         loading: false,
         fullWidth: false,
         shadow: false,
+        toggled: false,
         leftIcon: undefined,
         rightIcon: undefined,
-        styles: {},
+        styles: undefined,
         onClick: () => { },
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", 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: "cancel", children: "Cancel" }), _jsx(Button, { variant: "success", children: "Success" }), _jsx(Button, { variant: "warning", children: "Warning" }), _jsx(Button, { variant: "text", children: "Text" })] })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", 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: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" }), _jsx(Button, { shadow: true, children: "Shadow" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
+};
+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' }) }));
+    },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { styles: {
-                    root: {
-                        borderRadius: '20px',
-                        background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
-                        '&:hover': {
-                            background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
-                        },
-                    },
-                }, children: "Gradient Button" }), _jsx(Button, { styles: {
-                    root: {
-                        borderRadius: '0px',
-                        background: 'black',
-                        color: 'white',
-                        border: '2px solid white',
-                        '&:hover': {
-                            background: 'white',
-                            color: 'black',
-                        },
-                    },
-                }, children: "Custom Border" })] })),
+    args: {
+        children: 'Custom Button',
+        styles: {
+            root: {
+                borderRadius: '20px',
+                background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+                '&:hover': {
+                    background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+                },
+            },
+        },
+    },
     parameters: {
         docs: {
             source: {
@@ -160,24 +184,7 @@ export const CustomStyles = {
     },
   }}
 >
-  Gradient Button
-</Button>
-
-<Button
-  styles={{
-    root: {
-      borderRadius: '0px',
-      background: 'black',
-      color: 'white',
-      border: '2px solid white',
-      '&:hover': {
-        background: 'white',
-        color: 'black',
-      },
-    },
-  }}
->
-  Custom Border
+  Custom Button
 </Button>`,
             },
         },

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

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

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

@@ -1,7 +1,8 @@
 import { fontSize } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 const componentSizes = {
-    sm: { height: 3, ...fontSize['sm'], padding: '0.8rem 1.8rem', minWidth: 6.8 },
-    md: { height: 4, ...fontSize['md'], padding: '0.8rem 2.4rem', minWidth: 11.2 },
-    lg: { height: 4.8, ...fontSize['lg'], padding: '0.8rem 4rem', minWidth: 15.2 },
+    sm: { height: 30, ...fontSize['sm'], padding: `${spacing.sm} 18px`, minWidth: 68 },
+    md: { height: 40, ...fontSize['md'], padding: `${spacing.sm} ${spacing.xl}`, minWidth: 112 },
+    lg: { height: 48, ...fontSize['lg'], padding: `${spacing.sm} 40px`, minWidth: 152 },
 };
 export { componentSizes };

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

@@ -38,9 +38,9 @@ export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled
     const style = {
         root: {
             borderRadius: '8px',
-            height: `${selectedSize.borderLength}rem`,
+            height: `${selectedSize.borderLength}px`,
             padding: selectedSize.padding,
-            width: `${selectedSize.borderLength}rem`,
+            width: `${selectedSize.borderLength}px`,
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             ...getVariantStyles(),
             ...getSubtleStyles(),

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;AAI1C,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;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"}

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

@@ -2,6 +2,7 @@ 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 { spacing } from '../../../../constants/spacing';
 const meta = {
     title: 'Components/Inputs/Buttons/IconButton',
     component: IconButton,
@@ -103,22 +104,22 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", 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: "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: "1.6rem", 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, { 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, {}) })] })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", 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, { 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, {}) })] })),
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", 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, {}) })] })),
+    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: "1.6rem", 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, { 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, {}) })] })),
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { styles: {
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(IconButton, { styles: {
                     root: {
                         borderRadius: '20px',
                         background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',

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":"AAAA,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;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,6 +1,7 @@
+import { spacing } from '../../../../constants/spacing';
 const componentSizes = {
-    sm: { borderLength: 2.8, padding: '0.4rem', iconSize: 16 },
-    md: { borderLength: 3.6, padding: '0.4rem', iconSize: 20 },
-    lg: { borderLength: 4.8, padding: '0.4rem', iconSize: 24 },
+    sm: { borderLength: 28, padding: spacing.xs, iconSize: 16 },
+    md: { borderLength: 36, padding: spacing.xs, iconSize: 20 },
+    lg: { borderLength: 48, padding: spacing.xs, iconSize: 24 },
 };
 export { componentSizes };

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ButtonProps as MantineButtonProps } from '@mantine/core';
+import { componentSizes } from '../Button/sizes';
+type OmittedProps = 'variant' | 'leftIcon' | 'rightIcon';
+declare const providers: {
+    readonly google: {
+        readonly name: "Google";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export type SSOProvider = keyof typeof providers;
+interface SSOButtonBase extends Omit<MantineButtonProps, OmittedProps> {
+    onClick?: () => void;
+    size?: keyof typeof componentSizes;
+    fullWidth?: boolean;
+}
+type WithProvider = SSOButtonBase & {
+    /** Shorthand — resolves the provider's name and icon automatically */
+    provider: SSOProvider;
+    /** Override the resolved provider name */
+    providerName?: string;
+    /** Override the resolved provider icon */
+    providerIcon?: React.ReactNode;
+};
+type WithCustomProvider = SSOButtonBase & {
+    provider?: never;
+    /** Display name of the provider (e.g. "Google", "Apple") */
+    providerName: string;
+    /** Provider icon rendered to the left of the label */
+    providerIcon: React.ReactNode;
+};
+export type SSOButtonProps = WithProvider | WithCustomProvider;
+export declare const SSOButton: ({ provider, providerName, providerIcon, onClick, size, fullWidth, styles, children, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SSOButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SSOButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/SSOButton/SSOButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzD,QAAA,MAAM,SAAS;;;;;CAEL,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,SAAS,CAAC;AAEjD,UAAU,aAAc,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,KAAK,YAAY,GAAG,aAAa,GAAG;IAClC,sEAAsE;IACtE,QAAQ,EAAE,WAAW,CAAC;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,kBAAkB,GAAG,aAAa,GAAG;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,4DAA4D;IAC5D,YAAY,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,kBAAkB,CAAC;AAE/D,eAAO,MAAM,SAAS,GAAI,gGAUvB,cAAc,4CAwChB,CAAC"}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MantineButton } from '@mantine/core';
+import { fontBase, fontWeight } from '../../../../constants/font';
+import { componentSizes } from '../Button/sizes';
+import { componentVariants } from '../shared/variants';
+import { GoogleIcon } from '../../../../assets/icons';
+const providers = {
+    google: { name: 'Google', icon: _jsx(GoogleIcon, { size: 18 }) },
+};
+export const SSOButton = ({ provider, providerName, providerIcon, onClick, size = 'md', fullWidth = false, styles, children, ...props }) => {
+    const resolved = provider ? providers[provider] : undefined;
+    const name = providerName !== null && providerName !== void 0 ? providerName : resolved === null || resolved === void 0 ? void 0 : resolved.name;
+    const icon = providerIcon !== null && providerIcon !== void 0 ? providerIcon : resolved === null || resolved === void 0 ? void 0 : resolved.icon;
+    const selectedVariant = componentVariants['secondary'];
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            borderRadius: '8px',
+            width: fullWidth ? '100%' : 'fit-content',
+            height: `${selectedSize.height}rem`,
+            padding: selectedSize.padding,
+            minWidth: `${selectedSize.minWidth}rem`,
+            fontSize: selectedSize.fontSize,
+            transition: 'background 0.1s ease-in-out',
+            ...selectedVariant,
+        },
+        label: {
+            ...fontBase,
+            fontWeight: fontWeight['semibold'],
+        },
+        leftIcon: {
+            marginRight: '1rem',
+        },
+        ...styles,
+    };
+    return (_jsx(MantineButton, { styles: style, size: size, onClick: onClick, leftIcon: icon, ...props, children: children !== null && children !== void 0 ? children : (name ? `Continue with ${name}` : undefined) }));
+};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SSOButton } from './SSOButton';
+declare const meta: Meta<typeof SSOButton>;
+export default meta;
+type Story = StoryObj<typeof SSOButton>;
+export declare const Default: Story;
+export declare const BuiltInProvider: Story;
+export declare const CustomProviders: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const CustomLabels: Story;
+export declare const FullWidth: Story;
+export declare const ProviderOverride: Story;
+//# sourceMappingURL=SSOButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SSOButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/SSOButton/SSOButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAmFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC"}