@taiv/ui 1.12.0 → 1.14.0

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

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { SegmentedControl } from './SegmentedControl';
 import { Group } from '../../../Layout/Group/Group';
 import { Stack } from '../../../Layout/Stack/Stack';
+import { spacing } from '../../../../constants/spacing';
 const sampleData = [
     { label: 'React', value: 'react' },
     { label: 'Angular', value: 'ng' },
@@ -157,7 +158,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsx(SegmentedControl, { size: "sm", data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { size: "md", data: sampleData, value: "ng", onChange: () => { } }), _jsx(SegmentedControl, { size: "lg", data: sampleData, value: "vue", onChange: () => { } })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.lg, children: [_jsx(SegmentedControl, { size: "sm", data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { size: "md", data: sampleData, value: "ng", onChange: () => { } }), _jsx(SegmentedControl, { size: "lg", data: sampleData, value: "vue", onChange: () => { } })] })),
     parameters: {
         docs: {
             source: {
@@ -177,7 +178,7 @@ export const StringData = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Stack, { gap: "1.6rem", style: { minWidth: '28rem' }, children: [_jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, disabled: true }), _jsx(SegmentedControl, { data: [
+    render: () => (_jsxs(Stack, { gap: spacing.lg, style: { minWidth: '280px' }, children: [_jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, disabled: true }), _jsx(SegmentedControl, { data: [
                     { value: 'preview', label: 'Preview', disabled: true },
                     { value: 'code', label: 'Code' },
                     { value: 'export', label: 'Export' },
@@ -191,7 +192,7 @@ export const States = {
     },
 };
 export const FullWidth = {
-    render: () => (_jsx("div", { style: { width: '36rem', maxWidth: '100%' }, children: _jsx(SegmentedControl, { fullWidth: true, data: sampleData, value: "react", onChange: () => { } }) })),
+    render: () => (_jsx("div", { style: { width: '360px', maxWidth: '100%' }, children: _jsx(SegmentedControl, { fullWidth: true, data: sampleData, value: "react", onChange: () => { } }) })),
     parameters: {
         docs: {
             source: {
@@ -201,7 +202,7 @@ export const FullWidth = {
     },
 };
 export const Orientation = {
-    render: () => (_jsxs(Group, { gap: "3rem", align: "flex-start", children: [_jsx(SegmentedControl, { data: sampleData, value: "ng", onChange: () => { }, orientation: "horizontal" }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, orientation: "vertical" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.xxl, align: "flex-start", children: [_jsx(SegmentedControl, { data: sampleData, value: "ng", onChange: () => { }, orientation: "horizontal" }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, orientation: "vertical" })] })),
     parameters: {
         docs: {
             source: {
@@ -211,7 +212,7 @@ export const Orientation = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsx(Group, { gap: "2rem", children: _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, styles: {
+    render: () => (_jsx(Group, { gap: "20px", children: _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, styles: {
                 root: {
                     backgroundColor: '#f0f4f8',
                 },

package/dist/components/Inputs/Controls/Toggle/Toggle.d.ts

@@ -3,8 +3,8 @@ declare const componentSizes: {
     readonly sm: {
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly width: 2.4;
-        readonly height: 1.8;
+        readonly width: 24;
+        readonly height: 18;
         readonly mantineSize: "md";
         readonly thumbScale: 1.3;
         readonly thumbTranslate: 2;
@@ -12,8 +12,8 @@ declare const componentSizes: {
     readonly md: {
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly width: 4.8;
-        readonly height: 2.8;
+        readonly width: 48;
+        readonly height: 28;
         readonly mantineSize: "xl";
         readonly thumbScale: 1.3;
         readonly thumbTranslate: 10;

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

@@ -4,8 +4,8 @@ import { neutral, primary } from '../../../../constants/colors';
 import { fontBase, fontSize } from '../../../../constants/font';
 // Size Presets
 const componentSizes = {
-    sm: { width: 2.4, height: 1.8, mantineSize: 'md', thumbScale: 1.3, thumbTranslate: 2, ...fontSize['sm'] },
-    md: { width: 4.8, height: 2.8, mantineSize: 'xl', thumbScale: 1.3, thumbTranslate: 10, ...fontSize['md'] },
+    sm: { width: 24, height: 18, mantineSize: 'md', thumbScale: 1.3, thumbTranslate: 2, ...fontSize['sm'] },
+    md: { width: 48, height: 28, mantineSize: 'xl', thumbScale: 1.3, thumbTranslate: 10, ...fontSize['md'] },
 };
 const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) => {
     const selectedSize = componentSizes[size];
@@ -13,11 +13,11 @@ const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) =>
         container: {
             display: 'flex',
             alignItems: 'center',
-            gap: '1rem',
+            gap: '10px',
         },
         track: {
-            width: `${selectedSize.width}rem`,
-            height: `${selectedSize.height}rem`,
+            width: `${selectedSize.width}px`,
+            height: `${selectedSize.height}px`,
             transition: 'background-color 300ms ease-in-out',
             cursor: 'pointer',
             backgroundColor: checked ? primary[200] : neutral[50],

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

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

package/dist/components/Inputs/Dates/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6C,oBAAoB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAEhI,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAE,SAAQ,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAC7I,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,EAAE,qEAQhF,eAAe,CAAC,CAAC,CAAC,4CA+EpB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6C,oBAAoB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAEhI,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAE,SAAQ,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAC7I,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,EAAE,qEAQhF,eAAe,CAAC,CAAC,CAAC,4CA+EpB,CAAC"}

package/dist/components/Inputs/Dates/DatePicker/DatePicker.js

@@ -3,15 +3,16 @@ import { DatePickerInput as MantineDatePickerInput } from '@mantine/dates';
 import { createStyles } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
 export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder = 'Pick Date', showIcon = true, styles, ...props }) => {
     const selectedSize = componentSizes[size];
     const { classes } = createStyles(() => ({
         root: {
-            width: fullWidth ? '100%' : width || (props.type === 'range' ? `${selectedSize.minWidth * 1.2}rem` : `${selectedSize.minWidth}rem`), // Range inputs are slightly wider than regular inputs
+            width: fullWidth ? '100%' : width || (props.type === 'range' ? `${selectedSize.minWidth * 1.2}px` : `${selectedSize.minWidth}px`), // Range inputs are slightly wider than regular inputs
         },
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             paddingRight: selectedSize.inputPadding,
             ...fontBase,
             fontSize: selectedSize.fontSize,
@@ -30,7 +31,7 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
             color: neutral[200],
         },
         calendar: {
@@ -64,7 +65,7 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
         },
         ...styles,
     }))();
-    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: '0.25rem' } }) : undefined, radius: "lg", size: "xl", classNames: {
+    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: spacing.xxs } }) : undefined, radius: "lg", size: "xl", classNames: {
             root: classes.root,
             input: classes.input,
             placeholder: classes.placeholder,