@taiv/ui 1.12.0 → 1.14.0

package/dist/components/Inputs/Sliders/shared/sizes.js

@@ -1,25 +1,25 @@
 import { inputFontSize } from '../../../../constants/font';
 export const componentSizes = {
     sm: {
-        width: 20,
-        trackHeight: 0.4,
-        thumbSize: 1,
+        width: 200,
+        trackHeight: 4,
+        thumbSize: 10,
         labelFontSize: inputFontSize['sm'],
         valueFontSize: inputFontSize['sm'],
         iconSize: 18,
     },
     md: {
-        width: 30,
-        trackHeight: 0.5,
-        thumbSize: 1.25,
+        width: 300,
+        trackHeight: 5,
+        thumbSize: 12.5,
         labelFontSize: inputFontSize['md'],
         valueFontSize: inputFontSize['md'],
         iconSize: 22,
     },
     lg: {
-        width: 40,
-        trackHeight: 0.6,
-        thumbSize: 1.5,
+        width: 400,
+        trackHeight: 6,
+        thumbSize: 15,
         labelFontSize: inputFontSize['lg'],
         valueFontSize: inputFontSize['lg'],
         iconSize: 26,

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,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;CACpC;AAED,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CA4D5I,CAAC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,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;CACpC;AAED,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CA4D5I,CAAC"}

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.js

@@ -2,13 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Autocomplete as MantineAutocomplete } from '@mantine/core';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
 export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}px`;
     const style = {
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
             padding: selectedSize.inputPadding,
             ...fontBase,
@@ -25,7 +26,7 @@ export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholde
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: neutral[200],
         },
         dropdown: {
@@ -35,7 +36,7 @@ export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholde
         },
         item: {
             padding: selectedSize.dropdownPadding,
-            marginBottom: '0.5rem',
+            marginBottom: spacing.xs,
             ...fontBase,
             fontSize: selectedSize.fontSize,
             color: neutral[200],

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.stories.js

@@ -127,7 +127,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Basic AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "With Placeholder", placeholder: "Search fruits...", data: basicOptions }), _jsx(AutoComplete, { label: "With Description", description: "Select your favorite fruit", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Basic AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "With Placeholder", placeholder: "Search fruits...", data: basicOptions }), _jsx(AutoComplete, { label: "With Description", description: "Select your favorite fruit", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -137,7 +137,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { size: "sm", label: "Small AutoComplete", data: basicOptions }), _jsx(AutoComplete, { size: "md", label: "Medium AutoComplete (Default)", data: basicOptions }), _jsx(AutoComplete, { size: "lg", label: "Large AutoComplete", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { size: "sm", label: "Small AutoComplete", data: basicOptions }), _jsx(AutoComplete, { size: "md", label: "Medium AutoComplete (Default)", data: basicOptions }), _jsx(AutoComplete, { size: "lg", label: "Large AutoComplete", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -148,7 +148,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Normal AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "Disabled AutoComplete", data: basicOptions, disabled: true }), _jsx(AutoComplete, { label: "Required AutoComplete", data: basicOptions, required: true }), _jsx(AutoComplete, { label: "AutoComplete with Description", description: "Please select an option", data: basicOptions }), _jsx(AutoComplete, { label: "AutoComplete with Error", error: "This field is required", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Normal AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "Disabled AutoComplete", data: basicOptions, disabled: true }), _jsx(AutoComplete, { label: "Required AutoComplete", data: basicOptions, required: true }), _jsx(AutoComplete, { label: "AutoComplete with Description", description: "Please select an option", data: basicOptions }), _jsx(AutoComplete, { label: "AutoComplete with Error", error: "This field is required", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -158,7 +158,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Country Search", data: countryOptions, placeholder: "Search countries..." }), _jsx(AutoComplete, { label: "Custom Width AutoComplete", width: "300px", data: basicOptions }), _jsx(AutoComplete, { label: "Large Dataset", data: Array.from({ length: 50 }, (_, i) => `Option ${i + 1}`), placeholder: "Search options..." })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Country Search", data: countryOptions, placeholder: "Search countries..." }), _jsx(AutoComplete, { label: "Custom Width AutoComplete", width: "300px", data: basicOptions }), _jsx(AutoComplete, { label: "Large Dataset", data: Array.from({ length: 50 }, (_, i) => `Option ${i + 1}`), placeholder: "Search options..." })] })),
     parameters: {
         docs: {
             source: {
@@ -182,7 +182,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Custom Styled AutoComplete", data: basicOptions, styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Custom Styled AutoComplete", data: basicOptions, styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.js

@@ -5,13 +5,13 @@ import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const hasError = !!props.error;
     const style = {
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
@@ -28,19 +28,19 @@ const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1,
             height: 'auto',
             margin: 'auto 0',
             gap: 0,
-            width: '4.8rem',
+            width: '48px',
             alignItems: 'center',
         },
         control: {
             color: hasError ? red[200] : neutral[200],
             border: 'none',
             background: 'transparent',
-            width: '2rem',
-            height: '1.2rem',
+            width: '20px',
+            height: '12px',
             flex: '0 0 auto',
             '& svg': {
-                width: '2rem',
-                height: '1.2rem',
+                width: '20px',
+                height: '12px',
             },
             '&:hover': {
                 cursor: 'pointer',
@@ -48,12 +48,12 @@ const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1,
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: neutral[200],
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200],
         },
         ...styles,

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.js

@@ -151,7 +151,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Basic Number Input" }), _jsx(NumberInput, { label: "With Placeholder", placeholder: "Enter a value" }), _jsx(NumberInput, { label: "With Description", description: "Enter a value between 0 and 100", min: 0, max: 100 })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Basic Number Input" }), _jsx(NumberInput, { label: "With Placeholder", placeholder: "Enter a value" }), _jsx(NumberInput, { label: "With Description", description: "Enter a value between 0 and 100", min: 0, max: 100 })] })),
     parameters: {
         docs: {
             source: {
@@ -161,7 +161,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { size: "sm", label: "Small Number Input", placeholder: "Small value" }), _jsx(NumberInput, { size: "md", label: "Medium Number Input (Default)", placeholder: "Medium value" }), _jsx(NumberInput, { size: "lg", label: "Large Number Input", placeholder: "Large value" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { size: "sm", label: "Small Number Input", placeholder: "Small value" }), _jsx(NumberInput, { size: "md", label: "Medium Number Input (Default)", placeholder: "Medium value" }), _jsx(NumberInput, { size: "lg", label: "Large Number Input", placeholder: "Large value" })] })),
     parameters: {
         docs: {
             source: {
@@ -172,7 +172,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Normal Number Input" }), _jsx(NumberInput, { label: "Disabled Number Input", disabled: true }), _jsx(NumberInput, { label: "Required Number Input", required: true }), _jsx(NumberInput, { label: "Number Input with Description", description: "Please enter a numeric value" }), _jsx(NumberInput, { label: "Number Input with Error", error: "Value is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Normal Number Input" }), _jsx(NumberInput, { label: "Disabled Number Input", disabled: true }), _jsx(NumberInput, { label: "Required Number Input", required: true }), _jsx(NumberInput, { label: "Number Input with Description", description: "Please enter a numeric value" }), _jsx(NumberInput, { label: "Number Input with Error", error: "Value is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -182,7 +182,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Step of 1", placeholder: "Integer values", step: 1 }), _jsx(NumberInput, { label: "Step of 0.5", placeholder: "Decimal values", step: 0.5, precision: 1 }), _jsx(NumberInput, { label: "With Min/Max", placeholder: "Between 0 and 10", min: 0, max: 10, step: 1 }), _jsx(NumberInput, { label: "Custom Width", placeholder: "Custom width", width: "300rem" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Step of 1", placeholder: "Integer values", step: 1 }), _jsx(NumberInput, { label: "Step of 0.5", placeholder: "Decimal values", step: 0.5, precision: 1 }), _jsx(NumberInput, { label: "With Min/Max", placeholder: "Between 0 and 10", min: 0, max: 10, step: 1 }), _jsx(NumberInput, { label: "Custom Width", placeholder: "Custom width", width: "3000px" })] })),
     parameters: {
         docs: {
             source: {
@@ -209,7 +209,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.js

@@ -11,16 +11,16 @@ const mantineSize = {
 };
 const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placeholder = 'Enter password', ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             '&[data-invalid]': {
                 borderColor: red[200],
                 '&::placeholder': {
@@ -31,19 +31,19 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
         label: {
             ...fontBase,
             color: neutral[200],
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200],
         },
         innerInput: {
             ...fontBase,
             color: neutral[200],
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             '&[data-invalid]': {
                 color: neutral[200],
                 '&::placeholder': {
@@ -53,7 +53,7 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
         },
         visibilityToggle: {
             color: neutral[200],
-            marginRight: '1.25rem',
+            marginRight: '12.5px',
             '&:hover': {
                 backgroundColor: 'transparent',
             },

package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.stories.js

@@ -138,7 +138,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "Basic Password Input" }), _jsx(PasswordInput, { label: "With Placeholder", placeholder: "Enter your password" }), _jsx(PasswordInput, { label: "With Description", description: "Password must be at least 8 characters" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "Basic Password Input" }), _jsx(PasswordInput, { label: "With Placeholder", placeholder: "Enter your password" }), _jsx(PasswordInput, { label: "With Description", description: "Password must be at least 8 characters" })] })),
     parameters: {
         docs: {
             source: {
@@ -148,7 +148,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { size: "sm", label: "Small Password", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "md", label: "Medium Password (Default)", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "lg", label: "Large Password", placeholder: "Enter password" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { size: "sm", label: "Small Password", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "md", label: "Medium Password (Default)", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "lg", label: "Large Password", placeholder: "Enter password" })] })),
     parameters: {
         docs: {
             source: {
@@ -159,7 +159,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "Normal Password Input" }), _jsx(PasswordInput, { label: "Disabled Password Input", disabled: true }), _jsx(PasswordInput, { label: "Required Password Input", required: true }), _jsx(PasswordInput, { label: "Password Input with Description", description: "Password must be at least 8 characters" }), _jsx(PasswordInput, { label: "Password Input with Error", error: "Password is too short" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "Normal Password Input" }), _jsx(PasswordInput, { label: "Disabled Password Input", disabled: true }), _jsx(PasswordInput, { label: "Required Password Input", required: true }), _jsx(PasswordInput, { label: "Password Input with Description", description: "Password must be at least 8 characters" }), _jsx(PasswordInput, { label: "Password Input with Error", error: "Password is too short" })] })),
     parameters: {
         docs: {
             source: {
@@ -169,7 +169,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "New Password", description: "Password must be at least 8 characters", placeholder: "Create a strong password" }), _jsx(PasswordInput, { label: "Confirm Password", placeholder: "Re-enter password", error: "Passwords do not match" }), _jsx(PasswordInput, { label: "Custom Width Password", width: "300px" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "New Password", description: "Password must be at least 8 characters", placeholder: "Create a strong password" }), _jsx(PasswordInput, { label: "Confirm Password", placeholder: "Re-enter password", error: "Passwords do not match" }), _jsx(PasswordInput, { label: "Custom Width Password", width: "300px" })] })),
     parameters: {
         docs: {
             source: {
@@ -193,7 +193,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "Custom Styled Password Input", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "Custom Styled Password Input", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.js

@@ -2,10 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput } from '../TextInput/TextInput';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
     const selectedSize = componentSizes[size || 'md'];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
             ...fontBase,
@@ -13,7 +14,7 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
             color: neutral[200],
             border: `1px solid ${neutral[100]}`,
             borderRadius: '8px',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             transition: 'all 200ms ease-in-out',
             '&[data-invalid]': {
                 borderColor: red[200],
@@ -25,6 +26,6 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
         },
         ...styles,
     };
-    return (_jsx(TextInput, { placeholder: "Search", width: computedWidth, styles: style, icon: _jsx("i", { className: "fas fa-search", style: { fontSize: 14, marginLeft: '0.25rem' } }), size: 'lg', fullWidth: fullWidth, ...props }));
+    return (_jsx(TextInput, { placeholder: "Search", width: computedWidth, styles: style, icon: _jsx("i", { className: "fas fa-search", style: { fontSize: 14, marginLeft: spacing.xxs } }), size: 'lg', fullWidth: fullWidth, ...props }));
 };
 export { SearchBar };

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.stories.js

@@ -113,7 +113,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { placeholder: "Search products..." }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { placeholder: "Search products..." }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
     parameters: {
         docs: {
             source: {
@@ -123,7 +123,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { size: "sm" }), _jsx(SearchBar, { size: "md" }), _jsx(SearchBar, { size: "lg" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { size: "sm" }), _jsx(SearchBar, { size: "md" }), _jsx(SearchBar, { size: "lg" })] })),
     parameters: {
         docs: {
             source: {
@@ -134,7 +134,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Normal Search Bar" }), _jsx(SearchBar, { label: "Disabled Search Bar", disabled: true }), _jsx(SearchBar, { label: "Required Search Bar", required: true }), _jsx(SearchBar, { label: "Search Bar with Description", description: "Enter your search terms" }), _jsx(SearchBar, { label: "Search Bar with Error", error: "Please enter a valid search term" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Normal Search Bar" }), _jsx(SearchBar, { label: "Disabled Search Bar", disabled: true }), _jsx(SearchBar, { label: "Required Search Bar", required: true }), _jsx(SearchBar, { label: "Search Bar with Description", description: "Enter your search terms" }), _jsx(SearchBar, { label: "Search Bar with Error", error: "Please enter a valid search term" })] })),
     parameters: {
         docs: {
             source: {
@@ -144,7 +144,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { width: 400, placeholder: "Search products..." }), _jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { width: 400, placeholder: "Search products..." }), _jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
     parameters: {
         docs: {
             source: {
@@ -166,7 +166,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Custom Styled Search Bar", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Custom Styled Search Bar", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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;CACpC,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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;CACpC,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextArea/TextArea.js

@@ -2,15 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Textarea as MantineTextarea } from '@mantine/core';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
-            minHeight: `${selectedSize.height}rem`,
+            minHeight: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0.75rem 1rem',
+            padding: `${spacing.sm} 10px`,
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
@@ -26,12 +27,12 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: neutral[200],
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200],
         },
         ...styles,

package/dist/components/Inputs/TextInputs/TextArea/TextArea.stories.js

@@ -139,7 +139,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Basic TextArea" }), _jsx(TextArea, { label: "With Placeholder", placeholder: "Enter your text here..." }), _jsx(TextArea, { label: "With Description", description: "This is a description" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Basic TextArea" }), _jsx(TextArea, { label: "With Placeholder", placeholder: "Enter your text here..." }), _jsx(TextArea, { label: "With Description", description: "This is a description" })] })),
     parameters: {
         docs: {
             source: {
@@ -149,7 +149,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { size: "sm", label: "Small TextArea", placeholder: "Small textarea" }), _jsx(TextArea, { size: "md", label: "Medium TextArea (Default)", placeholder: "Medium textarea" }), _jsx(TextArea, { size: "lg", label: "Large TextArea", placeholder: "Large textarea" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { size: "sm", label: "Small TextArea", placeholder: "Small textarea" }), _jsx(TextArea, { size: "md", label: "Medium TextArea (Default)", placeholder: "Medium textarea" }), _jsx(TextArea, { size: "lg", label: "Large TextArea", placeholder: "Large textarea" })] })),
     parameters: {
         docs: {
             source: {
@@ -160,7 +160,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Normal TextArea" }), _jsx(TextArea, { label: "Disabled TextArea", disabled: true }), _jsx(TextArea, { label: "Required TextArea", required: true }), _jsx(TextArea, { label: "TextArea with Description", description: "Please provide detailed information" }), _jsx(TextArea, { label: "TextArea with Error", error: "This field is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Normal TextArea" }), _jsx(TextArea, { label: "Disabled TextArea", disabled: true }), _jsx(TextArea, { label: "Required TextArea", required: true }), _jsx(TextArea, { label: "TextArea with Description", description: "Please provide detailed information" }), _jsx(TextArea, { label: "TextArea with Error", error: "This field is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -170,7 +170,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Auto-resize TextArea", autosize: true, placeholder: "This will grow as you type..." }), _jsx(TextArea, { label: "Fixed Rows", minRows: 3, maxRows: 6, placeholder: "Fixed height textarea" }), _jsx(TextArea, { label: "Custom Width TextArea", width: "400px", placeholder: "Custom width textarea" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Auto-resize TextArea", autosize: true, placeholder: "This will grow as you type..." }), _jsx(TextArea, { label: "Fixed Rows", minRows: 3, maxRows: 6, placeholder: "Fixed height textarea" }), _jsx(TextArea, { label: "Custom Width TextArea", width: "400px", placeholder: "Custom width textarea" })] })),
     parameters: {
         docs: {
             source: {
@@ -195,7 +195,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Custom Styled TextArea", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Custom Styled TextArea", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/TextInput/TextInput.js

@@ -5,12 +5,12 @@ import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
@@ -25,12 +25,12 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: neutral[200],
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200]
         },
         ...styles,

package/dist/components/Inputs/TextInputs/TextInput/TextInput.stories.js

@@ -126,7 +126,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Basic Text Input" }), _jsx(TextInput, { label: "With Placeholder", placeholder: "Enter your text here" }), _jsx(TextInput, { label: "With Description", description: "This is a description" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Basic Text Input" }), _jsx(TextInput, { label: "With Placeholder", placeholder: "Enter your text here" }), _jsx(TextInput, { label: "With Description", description: "This is a description" })] })),
     parameters: {
         docs: {
             source: {
@@ -136,7 +136,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { size: "sm", label: "Small Input", placeholder: "Small text input" }), _jsx(TextInput, { size: "md", label: "Medium Input (Default)", placeholder: "Medium text input" }), _jsx(TextInput, { size: "lg", label: "Large Input", placeholder: "Large text input" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { size: "sm", label: "Small Input", placeholder: "Small text input" }), _jsx(TextInput, { size: "md", label: "Medium Input (Default)", placeholder: "Medium text input" }), _jsx(TextInput, { size: "lg", label: "Large Input", placeholder: "Large text input" })] })),
     parameters: {
         docs: {
             source: {
@@ -147,7 +147,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Normal Text Input" }), _jsx(TextInput, { label: "Disabled Text Input", disabled: true }), _jsx(TextInput, { label: "Required Text Input", required: true }), _jsx(TextInput, { label: "Text Input with Description", description: "Please enter your information" }), _jsx(TextInput, { label: "Text Input with Error", error: "This field is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Normal Text Input" }), _jsx(TextInput, { label: "Disabled Text Input", disabled: true }), _jsx(TextInput, { label: "Required Text Input", required: true }), _jsx(TextInput, { label: "Text Input with Description", description: "Please enter your information" }), _jsx(TextInput, { label: "Text Input with Error", error: "This field is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -157,7 +157,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Email Address", description: "We'll never share your email", placeholder: "your@email.com", type: "email" }), _jsx(TextInput, { label: "Password", type: "password", placeholder: "Enter password", error: "Password must be at least 8 characters" }), _jsx(TextInput, { label: "Custom Width", placeholder: "Custom width input", width: "300px" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Email Address", description: "We'll never share your email", placeholder: "your@email.com", type: "email" }), _jsx(TextInput, { label: "Password", type: "password", placeholder: "Enter password", error: "Password must be at least 8 characters" }), _jsx(TextInput, { label: "Custom Width", placeholder: "Custom width input", width: "300px" })] })),
     parameters: {
         docs: {
             source: {
@@ -183,7 +183,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Custom Styled Text Input", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Custom Styled Text Input", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/shared/sizes.d.ts

@@ -1,27 +1,27 @@
 export declare const componentSizes: {
     readonly sm: {
-        readonly width: 20;
+        readonly width: 200;
         readonly minRows: 3;
         readonly maxRows: 6;
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly height: 3.2;
+        readonly height: 32;
     };
     readonly md: {
-        readonly width: 32.8;
+        readonly width: 328;
         readonly minRows: 4;
         readonly maxRows: 8;
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly height: 4;
+        readonly height: 40;
     };
     readonly lg: {
-        readonly width: 42;
+        readonly width: 420;
         readonly minRows: 6;
         readonly maxRows: 9;
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly height: 4.8;
+        readonly height: 48;
     };
 };
 //# sourceMappingURL=sizes.d.ts.map

package/dist/components/Inputs/TextInputs/shared/sizes.js

@@ -1,6 +1,6 @@
 import { inputFontSize } from '../../../../constants/font';
 export const componentSizes = {
-    sm: { height: 3.2, ...inputFontSize['sm'], width: 20, minRows: 3, maxRows: 6 },
-    md: { height: 4, ...inputFontSize['md'], width: 32.8, minRows: 4, maxRows: 8 },
-    lg: { height: 4.8, ...inputFontSize['lg'], width: 42, minRows: 6, maxRows: 9 },
+    sm: { height: 32, ...inputFontSize['sm'], width: 200, minRows: 3, maxRows: 6 },
+    md: { height: 40, ...inputFontSize['md'], width: 328, minRows: 4, maxRows: 8 },
+    lg: { height: 48, ...inputFontSize['lg'], width: 420, minRows: 6, maxRows: 9 },
 };