@taiv/ui 1.13.0 → 1.14.0

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

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SSOButton } from './SSOButton';
+import { Group } from '../../../Layout/Group/Group';
+import { Stack } from '../../../Layout/Stack/Stack';
+import { IconBrandApple, IconBrandGithub, IconBrandWindows } from '@tabler/icons-react';
+import { GoogleIcon } from '../../../../assets/icons';
+const meta = {
+    title: 'Components/Inputs/Buttons/SSOButton',
+    component: SSOButton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A sign-in button for third-party authentication providers. Use the `provider` shorthand for built-in providers, or pass `providerName` and `providerIcon` for any custom provider.',
+            },
+        },
+    },
+    argTypes: {
+        provider: {
+            control: { type: 'select' },
+            options: ['google'],
+            description: 'Shorthand — resolves the provider name and icon automatically',
+            table: {
+                type: { summary: "'google'" },
+            },
+        },
+        providerName: {
+            control: { type: 'text' },
+            description: 'Display name of the provider. Overrides provider lookup.',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        providerIcon: {
+            control: false,
+            description: 'Provider icon rendered to the left of the label. Overrides provider lookup.',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        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'" },
+            },
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'Custom label. Defaults to "Continue with {providerName}"',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Makes the button span the full width of its container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        loading: {
+            control: { type: 'boolean' },
+            description: 'Indicate loading state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler function',
+            table: {
+                type: { summary: '() => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        provider: 'google',
+        size: 'md',
+        disabled: false,
+        loading: false,
+        fullWidth: false,
+        onClick: () => { },
+    },
+};
+export const BuiltInProvider = {
+    render: () => (_jsx(Stack, { gap: "1.2rem", children: _jsx(SSOButton, { provider: "google" }) })),
+};
+export const CustomProviders = {
+    render: () => (_jsxs(Stack, { gap: "1.2rem", children: [_jsx(SSOButton, { providerName: "Apple", providerIcon: _jsx(IconBrandApple, { size: 18 }) }), _jsx(SSOButton, { providerName: "GitHub", providerIcon: _jsx(IconBrandGithub, { size: 18 }) }), _jsx(SSOButton, { providerName: "Microsoft", providerIcon: _jsx(IconBrandWindows, { size: 18 }) })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", align: "center", children: [_jsx(SSOButton, { provider: "google", size: "sm" }), _jsx(SSOButton, { provider: "google", size: "md" }), _jsx(SSOButton, { provider: "google", size: "lg" })] })),
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(SSOButton, { provider: "google" }), _jsx(SSOButton, { provider: "google", disabled: true }), _jsx(SSOButton, { provider: "google", loading: true })] })),
+};
+export const CustomLabels = {
+    render: () => (_jsxs(Stack, { gap: "1.2rem", children: [_jsx(SSOButton, { provider: "google", children: "Sign in with Google" }), _jsx(SSOButton, { providerName: "Apple", providerIcon: _jsx(IconBrandApple, { size: 18 }), children: "Sign in with Apple" })] })),
+};
+export const FullWidth = {
+    render: () => (_jsx("div", { style: { width: '360px' }, children: _jsxs(Stack, { gap: "1.2rem", children: [_jsx(SSOButton, { provider: "google", fullWidth: true }), _jsx(SSOButton, { providerName: "Apple", providerIcon: _jsx(IconBrandApple, { size: 18 }), fullWidth: true }), _jsx(SSOButton, { providerName: "GitHub", providerIcon: _jsx(IconBrandGithub, { size: 18 }), fullWidth: true })] }) })),
+};
+export const ProviderOverride = {
+    render: () => (_jsx(Stack, { gap: "1.2rem", children: _jsx(SSOButton, { provider: "google", providerIcon: _jsx(GoogleIcon, { size: 24 }), children: "Custom icon size override" }) })),
+};

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

@@ -1 +1 @@
-{"version":3,"file":"UnstyledButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/UnstyledButton/UnstyledButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAmCrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2D1B,CAAC"}
+{"version":3,"file":"UnstyledButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/UnstyledButton/UnstyledButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAmCrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2D1B,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { UnstyledButton } from './UnstyledButton';
+import { spacing } from '../../../../constants/spacing';
 const meta = {
     title: 'Components/Inputs/Buttons/UnstyledButton',
     component: UnstyledButton,
@@ -49,9 +50,9 @@ export const Default = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsx(UnstyledButton, { styles: {
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' }, children: [_jsx(UnstyledButton, { styles: {
                     root: {
-                        padding: '12px 24px',
+                        padding: `${spacing.md} ${spacing.xl}`,
                         borderRadius: '8px',
                         background: 'linear-gradient(45deg, #667eea, #764ba2)',
                         color: 'white',
@@ -69,7 +70,7 @@ export const CustomStyles = {
                     },
                 }, children: "Gradient Button" }), _jsx(UnstyledButton, { styles: {
                     root: {
-                        padding: '8px 16px',
+                        padding: `${spacing.sm} ${spacing.lg}`,
                         borderRadius: '20px',
                         background: 'transparent',
                         color: '#667eea',

package/dist/components/Inputs/Buttons/shared/variants.d.ts

@@ -25,10 +25,10 @@ export declare const componentVariants: {
                 readonly stroke: "white";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };
@@ -61,10 +61,10 @@ export declare const componentVariants: {
                 readonly stroke: "#6D6D6D";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };
@@ -96,10 +96,10 @@ export declare const componentVariants: {
                 readonly stroke: "white";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };
@@ -130,10 +130,10 @@ export declare const componentVariants: {
                 readonly stroke: "white";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };
@@ -164,10 +164,10 @@ export declare const componentVariants: {
                 readonly stroke: "white";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };
@@ -200,17 +200,17 @@ export declare const componentVariants: {
                 readonly stroke: "#6D6D6D";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };
     };
     readonly nav: {
         readonly background: "white";
-        readonly paddingLeft: "0.8rem";
+        readonly paddingLeft: string;
         readonly color: "#6D6D6D";
         readonly '& .mantine-Button-inner': {
             readonly justifyContent: "flex-start";
@@ -235,10 +235,10 @@ export declare const componentVariants: {
                 readonly stroke: "#6D6D6D";
             };
             readonly '&:before': {
-                readonly top: "-0.1rem";
-                readonly right: "-0.1rem";
-                readonly left: "-0.1rem";
-                readonly bottom: "-0.1rem";
+                readonly top: "-1px";
+                readonly right: "-1px";
+                readonly left: "-1px";
+                readonly bottom: "-1px";
                 readonly borderRadius: "8px";
             };
         };

package/dist/components/Inputs/Buttons/shared/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/variants.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLpB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/variants.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLpB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAC"}

package/dist/components/Inputs/Buttons/shared/variants.js

@@ -1,10 +1,11 @@
 import { primary, neutral, error, success, warning } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 // Overrides mantine due to rem difference
 const loading = {
-    top: '-0.1rem',
-    right: '-0.1rem',
-    left: '-0.1rem',
-    bottom: '-0.1rem',
+    top: '-1px',
+    right: '-1px',
+    left: '-1px',
+    bottom: '-1px',
     borderRadius: '8px',
 };
 const disabled = {
@@ -170,7 +171,7 @@ export const componentVariants = {
     },
     nav: {
         background: 'white',
-        paddingLeft: '0.8rem',
+        paddingLeft: spacing.sm,
         color: neutral[200],
         '& .mantine-Button-inner': {
             justifyContent: 'flex-start',

package/dist/components/Inputs/Controls/Checkbox/Checkbox.stories.js

@@ -100,7 +100,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Checkbox, { size: "sm", label: "Small Checkbox", checked: false }), _jsx(Checkbox, { size: "md", label: "Medium Checkbox (Default)", checked: true }), _jsx(Checkbox, { size: "lg", label: "Large Checkbox", checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Checkbox, { size: "sm", label: "Small Checkbox", checked: false }), _jsx(Checkbox, { size: "md", label: "Medium Checkbox (Default)", checked: true }), _jsx(Checkbox, { size: "lg", label: "Large Checkbox", checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -110,7 +110,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Checkbox, { label: "Normal Checkbox", checked: true }), _jsx(Checkbox, { label: "Disabled Checkbox", checked: false, disabled: true }), _jsx(Checkbox, { label: "Checkbox with Description", description: "This is a description that provides additional context", checked: false }), _jsx(Checkbox, { label: "Checkbox with Error", error: "This field is required", checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Checkbox, { label: "Normal Checkbox", checked: true }), _jsx(Checkbox, { label: "Disabled Checkbox", checked: false, disabled: true }), _jsx(Checkbox, { label: "Checkbox with Description", description: "This is a description that provides additional context", checked: false }), _jsx(Checkbox, { label: "Checkbox with Error", error: "This field is required", checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -120,7 +120,7 @@ export const States = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Checkbox, { label: "Custom Styled Checkbox", checked: true, styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Checkbox, { label: "Custom Styled Checkbox", checked: true, styles: {
                     input: {
                         '&:checked': {
                             backgroundColor: '#ff6b6b',

package/dist/components/Inputs/Controls/Radio/Radio.js

@@ -33,7 +33,7 @@ const Radio = ({ styles, ...props }) => {
             cursor: props.disabled ? 'default' : 'pointer',
             ...fontBase,
             fontSize: inputFontSize['md'].fontSize,
-            lineHeight: '2.25rem',
+            lineHeight: '22.5px',
             color: neutral[200],
         },
         ...styles,

package/dist/components/Inputs/Controls/Radio/Radio.stories.js

@@ -90,7 +90,7 @@ export const Default = {
     },
 };
 export const RadioGroup = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Radio, { label: "Option 1", value: "option1", checked: true }), _jsx(Radio, { label: "Option 2", value: "option2", checked: false }), _jsx(Radio, { label: "Option 3", value: "option3", checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Radio, { label: "Option 1", value: "option1", checked: true }), _jsx(Radio, { label: "Option 2", value: "option2", checked: false }), _jsx(Radio, { label: "Option 3", value: "option3", checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -100,7 +100,7 @@ export const RadioGroup = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Radio, { label: "Normal Radio", value: "normal", checked: true }), _jsx(Radio, { label: "Disabled Radio", value: "disabled", checked: false, disabled: true }), _jsx(Radio, { label: "Radio with Description", description: "This is a description that provides additional context", value: "description", checked: false }), _jsx(Radio, { label: "Radio with Error", error: "This field is required", value: "error", checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Radio, { label: "Normal Radio", value: "normal", checked: true }), _jsx(Radio, { label: "Disabled Radio", value: "disabled", checked: false, disabled: true }), _jsx(Radio, { label: "Radio with Description", description: "This is a description that provides additional context", value: "description", checked: false }), _jsx(Radio, { label: "Radio with Error", error: "This field is required", value: "error", checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -110,7 +110,7 @@ export const States = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Radio, { label: "Custom Styled Radio", value: "custom1", checked: true, styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Radio, { label: "Custom Styled Radio", value: "custom1", checked: true, styles: {
                     radio: {
                         '&:checked': {
                             backgroundColor: '#ff6b6b',

package/dist/components/Inputs/Controls/RadioList/RadioList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/RadioList/RadioList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,QAAA,MAAM,SAAS,GAAI,4CAAoD,cAAc,4CAkCpF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/RadioList/RadioList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,QAAA,MAAM,SAAS,GAAI,4CAAoD,cAAc,4CAkCpF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/Controls/RadioList/RadioList.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '../../../Layout/Stack/Stack';
 import { Radio } from '../Radio/Radio';
 import { neutral } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 import { Group } from '../../../Layout/Group/Group';
 const RadioList = ({ data, value, onChange, disabled = false, width }) => {
     const handleChange = (optionValue) => {
@@ -13,10 +14,10 @@ const RadioList = ({ data, value, onChange, disabled = false, width }) => {
             border: `1px solid ${neutral[100]}`,
             borderRadius: '16px',
             overflow: 'hidden',
-            padding: '0.2rem 0 0.2rem 0',
+            padding: `${spacing.xxs} 0 ${spacing.xxs} 0`,
             width,
         }, children: data.map((option, index) => (_jsxs(Group, { position: "apart", style: {
-                padding: '1rem 1.2rem 0.8rem 1.2rem',
+                padding: `10px ${spacing.md} ${spacing.sm} ${spacing.md}`,
                 borderBottom: index < data.length - 1 ? `1px solid ${neutral[100]}` : 'none',
                 backgroundColor: 'white',
             }, children: [_jsx(Radio, { value: option.value, label: option.label, checked: value === option.value, onChange: () => handleChange(option.value), disabled: disabled }), option.rightContent && option.rightContent] }, option.value))) }));

package/dist/components/Inputs/Controls/RadioList/RadioList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioList.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/RadioList/RadioList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4ChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgCnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAoBpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC"}
+{"version":3,"file":"RadioList.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/RadioList/RadioList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4ChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgCnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAoBpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC"}

package/dist/components/Inputs/Controls/RadioList/RadioList.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RadioList } from './RadioList';
+import { spacing } from '../../../../constants/spacing';
 const meta = {
     title: 'Components/Inputs/Controls/RadioList',
     component: RadioList,
@@ -117,7 +118,7 @@ export const WithIcons = {
     },
 };
 export const States = {
-    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Normal State" }), _jsx(RadioList, { data: basicOptions, value: "option2", width: "300px" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Disabled State" }), _jsx(RadioList, { data: basicOptions, value: "option1", disabled: true, width: "300px" })] })] })),
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: spacing.xs }, children: "Normal State" }), _jsx(RadioList, { data: basicOptions, value: "option2", width: "300px" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: spacing.xs }, children: "Disabled State" }), _jsx(RadioList, { data: basicOptions, value: "option1", disabled: true, width: "300px" })] })] })),
     parameters: {
         docs: {
             source: {
@@ -127,7 +128,7 @@ export const States = {
     },
 };
 export const CustomWidth = {
-    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Narrow Width (200px)" }), _jsx(RadioList, { data: basicOptions, value: "option1", width: "200px" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '0.5rem' }, children: "Wide Width (500px)" }), _jsx(RadioList, { data: optionsWithDescriptions, value: "pro", width: "500px" })] })] })),
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: spacing.xs }, children: "Narrow Width (200px)" }), _jsx(RadioList, { data: basicOptions, value: "option1", width: "200px" })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: spacing.xs }, children: "Wide Width (500px)" }), _jsx(RadioList, { data: optionsWithDescriptions, value: "pro", width: "500px" })] })] })),
     parameters: {
         docs: {
             source: {

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkHvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAWtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkHvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}