@taiv/ui 1.14.1 → 2.0.0

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

@@ -1,40 +1,87 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Switch as MantineToggle } from '@mantine/core';
-import { neutral, primary } from '../../../../constants/colors';
+import { Switch as MantineToggle, } from '@mantine/core';
+import { error, neutral, primary } from '../../../../constants/colors';
 import { fontBase, fontSize } from '../../../../constants/font';
 // Size Presets
 const componentSizes = {
-    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'] },
+    md: {
+        height: 28,
+        iconSize: 12,
+        mantineSize: 'xl',
+        thumbScale: 1.3,
+        thumbTranslate: 10,
+        width: 48,
+        ...fontSize['md'],
+    },
+    sm: {
+        height: 18,
+        iconSize: 8,
+        mantineSize: 'md',
+        thumbScale: 1.3,
+        thumbTranslate: 2,
+        width: 24,
+        ...fontSize['sm'],
+    },
 };
-const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) => {
+// Variant Presets — shape mirrors Button.variant: each variant owns its
+// active color and (optionally) the icon rendered inside the thumb when checked.
+const componentVariants = {
+    error: {
+        activeColor: error[100],
+        getThumbIcon: (_iconSize) => null,
+    },
+    primary: {
+        activeColor: primary[200],
+        getThumbIcon: (_iconSize) => null,
+    },
+};
+const Toggle = ({ checked, onChange, styles, size = 'md', variant = 'primary', label, ...props }) => {
     const selectedSize = componentSizes[size];
+    const selectedVariant = componentVariants[variant];
+    const { activeColor, getThumbIcon } = selectedVariant;
+    const thumbIcon = getThumbIcon(selectedSize.iconSize);
     const style = {
         container: {
-            display: 'flex',
             alignItems: 'center',
+            display: 'flex',
             gap: '10px',
         },
-        track: {
-            width: `${selectedSize.width}px`,
-            height: `${selectedSize.height}px`,
-            transition: 'background-color 300ms ease-in-out',
-            cursor: 'pointer',
-            backgroundColor: checked ? primary[200] : neutral[50],
+        label: {
+            ...fontBase,
+            color: neutral[200],
+            fontSize: selectedSize.fontSize,
         },
         thumb: {
-            transform: `scale(${selectedSize.thumbScale}) translateX(${checked ? `-${selectedSize.thumbTranslate + selectedSize.thumbTranslate / 2}%` : `${selectedSize.thumbTranslate}%`})`,
-            boxShadow: checked ? '0 2px 2px rgba(0,0,0,0.2)' : 'none',
+            alignItems: 'center',
+            border: `1px solid ${neutral[50]}`,
+            boxShadow: 'none',
+            display: 'flex',
+            // When the hidden input is checked, the track is its sibling and the thumb is inside —
+            // use `input:checked + * &` to target the thumb; this matches Mantine's own selector specificity.
+            'input:checked + * &': {
+                border: `1px solid ${activeColor}`,
+                boxShadow: '0 2px 2px rgba(0,0,0,0.2)',
+                transform: `scale(${selectedSize.thumbScale}) translateX(-${selectedSize.thumbTranslate + selectedSize.thumbTranslate / 2}%)`,
+            },
+            justifyContent: 'center',
+            transform: `scale(${selectedSize.thumbScale}) translateX(${selectedSize.thumbTranslate}%)`,
             transition: 'all 300ms ease-in-out',
-            border: checked ? `1px solid ${primary[200]}` : `1px solid ${neutral[50]}`,
         },
-        label: {
-            ...fontBase,
-            fontSize: selectedSize.fontSize,
-            color: neutral[200],
+        track: {
+            backgroundColor: neutral[50],
+            borderColor: neutral[50],
+            cursor: 'pointer',
+            height: `${selectedSize.height}px`,
+            // Override Mantine's `input:checked + .mantine-…` rule by matching its specificity.
+            'input:checked + &': {
+                backgroundColor: activeColor,
+                borderColor: activeColor,
+            },
+            transition: 'background-color 300ms ease-in-out, border-color 300ms ease-in-out',
+            width: `${selectedSize.width}px`,
         },
         ...styles,
     };
-    return (_jsxs("div", { style: style.container, children: [_jsx(MantineToggle, { checked: checked, onChange: onChange, color: primary[200], size: selectedSize.mantineSize, styles: style, ...props }), label && _jsx("span", { style: style.label, children: label })] }));
+    return (_jsxs("div", { style: style.container, children: [_jsx(MantineToggle, { checked: checked, onChange: onChange, size: selectedSize.mantineSize, styles: style, thumbIcon: checked ? thumbIcon : null, ...props }), label && _jsx("span", { style: style.label, children: label })] }));
 };
 export { Toggle };

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Sizes: Story;
 export declare const States: Story;
+export declare const Variants: Story;
 export declare const WithoutLabel: Story;
 export declare const CustomStyles: Story;
 //# sourceMappingURL=Toggle.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA0F7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8C1B,CAAC"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8C1B,CAAC"}

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

@@ -1,22 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toggle } from './Toggle';
 import { Group } from '../../../Layout/Group/Group';
+import { Toggle } from './Toggle';
 const meta = {
-    title: 'Components/Inputs/Controls/Toggle',
-    component: Toggle,
-    parameters: {
-        layout: 'centered',
-    },
     argTypes: {
-        size: {
-            control: { type: 'select' },
-            options: ['sm', 'md'],
-            description: 'Controls the toggle size and label font size',
-            table: {
-                type: { summary: "'sm' | 'md'" },
-                defaultValue: { summary: "'md'" },
-            },
-        },
         checked: {
             control: { type: 'boolean' },
             description: 'Controlled checked state',
@@ -24,11 +10,13 @@ const meta = {
                 type: { summary: 'boolean' },
             },
         },
-        label: {
-            control: { type: 'text' },
-            description: 'Toggle label displayed next to the switch',
+        variant: {
+            control: { type: 'select' },
+            description: 'Visual variant. "error" swaps the active track to red and renders an X icon inside the thumb — use for destructive semantics (e.g. "on = blocked").',
+            options: ['primary', 'error'],
             table: {
-                type: { summary: 'string' },
+                defaultValue: { summary: "'primary'" },
+                type: { summary: "'primary' | 'error'" },
             },
         },
         description: {
@@ -38,6 +26,14 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
+            },
+        },
         error: {
             control: { type: 'text' },
             description: 'Displays error message after input',
@@ -45,37 +41,52 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
-        disabled: {
-            control: { type: 'boolean' },
-            description: 'Disabled state',
+        label: {
+            control: { type: 'text' },
+            description: 'Toggle label displayed next to the switch',
             table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
+                type: { summary: 'string' },
             },
         },
         labelPosition: {
             control: { type: 'select' },
-            options: ['left', 'right'],
             description: 'Position of label',
+            options: ['left', 'right'],
             table: {
-                type: { summary: '"left" | "right"' },
                 defaultValue: { summary: '"left"' },
+                type: { summary: '"left" | "right"' },
             },
         },
-        onLabel: {
+        offLabel: {
             control: { type: 'text' },
-            description: 'Inner label when Switch is in checked state',
+            description: 'Inner label when Switch is in unchecked state',
             table: {
                 type: { summary: 'ReactNode' },
             },
         },
-        offLabel: {
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
+            },
+        },
+        onLabel: {
             control: { type: 'text' },
-            description: 'Inner label when Switch is in unchecked state',
+            description: 'Inner label when Switch is in checked state',
             table: {
                 type: { summary: 'ReactNode' },
             },
         },
+        size: {
+            control: { type: 'select' },
+            description: 'Controls the toggle size and label font size',
+            options: ['sm', 'md'],
+            table: {
+                defaultValue: { summary: "'md'" },
+                type: { summary: "'sm' | 'md'" },
+            },
+        },
         styles: {
             control: { type: 'object' },
             description: 'Custom styles object',
@@ -83,38 +94,40 @@ const meta = {
                 type: { summary: 'Record<string, CSSObject>' },
             },
         },
-        onChange: {
-            action: 'changed',
-            description: 'Change handler function',
-            table: {
-                type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
-            },
-        },
     },
+    component: Toggle,
+    parameters: {
+        layout: 'centered',
+    },
+    title: 'Components/Inputs/Controls/Toggle',
 };
 export default meta;
 export const Default = {
     args: {
-        label: 'Enable notifications',
         checked: false,
-        size: 'md',
         disabled: false,
+        label: 'Enable notifications',
         labelPosition: 'left',
+        onChange: () => { },
+        size: 'md',
+        styles: undefined,
+        variant: 'primary',
+    },
+    render: function Render(args) {
+        return _jsx(Toggle, { ...args });
     },
+};
+export const Sizes = {
     parameters: {
         docs: {
             source: {
-                code: `<Toggle
-  label="Enable notifications"
-  checked={isEnabled}
-  onChange={(event) => setIsEnabled(event.currentTarget.checked)}
-/>`,
+                code: false,
             },
         },
     },
+    render: () => (_jsxs(Group, { gap: '20px', children: [_jsx(Toggle, { checked: true, label: 'Small Toggle', size: 'sm' }), _jsx(Toggle, { checked: false, label: 'Medium Toggle (Default)', size: 'md' })] })),
 };
-export const Sizes = {
-    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 })] })),
+export const States = {
     parameters: {
         docs: {
             source: {
@@ -122,19 +135,22 @@ export const Sizes = {
             },
         },
     },
+    render: () => (_jsxs(Group, { gap: '20px', children: [_jsx(Toggle, { checked: true, label: 'Normal Toggle' }), _jsx(Toggle, { checked: false, disabled: true, label: 'Disabled Toggle' }), _jsx(Toggle, { checked: true, description: 'This is a description that provides additional context', label: 'Toggle with Description' }), _jsx(Toggle, { checked: false, error: 'This field is required', label: 'Toggle with Error' })] })),
 };
-export const States = {
-    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 })] })),
+export const Variants = {
     parameters: {
         docs: {
+            description: {
+                story: 'Use `variant="error"` when the toggled-on state has destructive semantics (e.g. a category is blocked). The active track turns red and a tabler X icon renders inside the thumb while checked.',
+            },
             source: {
-                code: false,
+                code: `<Toggle label="Block this category" checked={isBlocked} variant="error" onChange={...} />`,
             },
         },
     },
+    render: () => (_jsxs(Group, { gap: '32px', children: [_jsx(Toggle, { checked: true, label: 'Primary (default)', variant: 'primary' }), _jsx(Toggle, { checked: true, label: 'Error \u2014 on means blocked', variant: 'error' }), _jsx(Toggle, { checked: false, label: 'Error \u2014 off state', variant: 'error' })] })),
 };
 export const WithoutLabel = {
-    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Toggle, { checked: true }), _jsx(Toggle, { checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -142,38 +158,39 @@ export const WithoutLabel = {
             },
         },
     },
+    render: () => (_jsxs(Group, { gap: '20px', children: [_jsx(Toggle, { checked: true }), _jsx(Toggle, { checked: false })] })),
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Toggle, { label: "Custom Styled Toggle", checked: true, styles: {
-                    track: {
-                        backgroundColor: '#ff6b6b',
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+    render: () => (_jsxs(Group, { gap: '20px', children: [_jsx(Toggle, { checked: true, label: 'Custom Styled Toggle', styles: {
+                    label: {
+                        color: '#495057',
+                        fontWeight: 600,
                     },
                     thumb: {
                         backgroundColor: '#ffffff',
                         border: '2px solid #dee2e6',
                     },
-                    label: {
-                        fontWeight: 600,
-                        color: '#495057',
-                    },
-                } }), _jsx(Toggle, { label: "Another Custom Style", checked: false, styles: {
                     track: {
-                        backgroundColor: '#4CAF50',
+                        backgroundColor: '#ff6b6b',
+                    },
+                } }), _jsx(Toggle, { checked: false, label: 'Another Custom Style', styles: {
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
                     },
                     thumb: {
                         backgroundColor: '#ffffff',
                         border: '2px solid #2E7D32',
                     },
-                    label: {
-                        color: '#4CAF50',
-                        fontSize: '16px',
+                    track: {
+                        backgroundColor: '#4CAF50',
                     },
                 } })] })),
-    parameters: {
-        docs: {
-            source: {
-                code: false,
-            },
-        },
-    },
 };

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;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"}
+{"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,4CAgGpB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput as MantineDatePickerInput } from '@mantine/dates';
 import { createStyles } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, primary, white } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
@@ -45,18 +45,34 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
             '& .mantine-Day-day[data-selected="true"]': {
                 fontFamily: 'Poppins, sans-serif',
                 borderRadius: '50%',
+                backgroundColor: primary[200],
+                color: white,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: primary[300],
+                    color: white,
+                },
+                '&:focus-visible': {
+                    outline: `2px solid ${primary[200]}`,
+                    outlineOffset: 2,
+                },
             },
             '& .mantine-Day-day[data-in-range="true"]': {
                 fontFamily: 'Poppins, sans-serif',
                 borderRadius: '50%',
+                backgroundColor: primary[25],
+                '&:hover': {
+                    backgroundColor: primary[50],
+                },
             },
-            '& .mantine-Day-day[data-first-in-range="true"]': {
-                fontFamily: 'Poppins, sans-serif',
-                borderRadius: '50%',
-            },
-            '& .mantine-Day-day[data-last-in-range="true"]': {
+            '& .mantine-Day-day[data-first-in-range="true"], & .mantine-Day-day[data-last-in-range="true"]': {
                 fontFamily: 'Poppins, sans-serif',
                 borderRadius: '50%',
+                backgroundColor: primary[200],
+                color: white,
+                '&:hover': {
+                    backgroundColor: primary[300],
+                },
             },
             '& .mantine-WeekdaysRow-weekday': {
                 textAlign: 'center',
@@ -71,5 +87,5 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
             placeholder: classes.placeholder,
             label: classes.label,
             calendar: classes.calendar,
-        }, placeholder: placeholder, popoverProps: { radius: 'lg' }, ...props }));
+        }, placeholder: placeholder, popoverProps: { radius: 'lg' }, firstDayOfWeek: 0, ...props }));
 };

package/dist/components/Inputs/Dates/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,12 @@
+import { DateTimePickerProps as MantineDateTimePickerProps } from '@mantine/dates';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from '../../Dropdowns/shared/sizes';
+export interface DateTimePickerProps extends Omit<MantineDateTimePickerProps, 'styles'> {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+    showIcon?: boolean;
+}
+export declare const DateTimePicker: ({ size, width, fullWidth, placeholder, showIcon, styles, ...props }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateTimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,mBAAmB,IAAI,0BAA0B,EAClD,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,QAAQ,CAAC;IACrF,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,cAAc,GAAI,qEAQ5B,mBAAmB,4CA4FrB,CAAC"}

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateTimePicker as MantineDateTimePicker, } from '@mantine/dates';
+import { createStyles } from '@mantine/core';
+import { neutral, primary, white } from '../../../../constants/colors';
+import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
+import { componentSizes } from '../../Dropdowns/shared/sizes';
+export const DateTimePicker = ({ size = 'md', width, fullWidth = false, placeholder = 'Pick date and time', showIcon = true, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const { classes } = createStyles(() => ({
+        root: {
+            width: fullWidth ? '100%' : width || `${selectedSize.minWidth * 1.2}px`,
+        },
+        input: {
+            height: `${selectedSize.height}px`,
+            paddingRight: selectedSize.inputPadding,
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[300],
+            borderRadius: '8px',
+            border: `1px solid ${neutral[100]}`,
+            transition: 'all 200ms ease-in-out',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+        placeholder: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
+            color: neutral[200],
+        },
+        calendar: {
+            '& .mantine-UnstyledButton-root': {
+                borderRadius: '8px',
+                fontFamily: 'Poppins, sans-serif',
+            },
+            '& .mantine-Day-day': {
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-selected="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+                backgroundColor: primary[200],
+                color: white,
+                boxShadow: 'none',
+                '&:hover': {
+                    backgroundColor: primary[300],
+                    color: white,
+                },
+                '&:focus-visible': {
+                    outline: `2px solid ${primary[200]}`,
+                    outlineOffset: 2,
+                },
+            },
+            '& .mantine-WeekdaysRow-weekday': {
+                textAlign: 'center',
+                fontFamily: 'Poppins, sans-serif',
+            },
+        },
+        timeWrapper: {
+            '& input': {
+                ...fontBase,
+                fontSize: selectedSize.fontSize,
+                color: neutral[300],
+                borderRadius: '8px',
+                border: `1px solid ${neutral[100]}`,
+            },
+            '& .mantine-ActionIcon-root': {
+                borderRadius: '8px',
+            },
+        },
+        ...styles,
+    }))();
+    return (_jsx(MantineDateTimePicker, { 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,
+            label: classes.label,
+            calendar: classes.calendar,
+            timeWrapper: classes.timeWrapper,
+        }, placeholder: placeholder, popoverProps: { radius: 'lg' }, firstDayOfWeek: 0, ...props }));
+};

package/dist/components/Inputs/Dates/DateTimePicker/DateTimePicker.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DateTimePicker } from './DateTimePicker';
+declare const meta: Meta<typeof DateTimePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const WithAndWithoutIcon: Story;
+export declare const WithSeconds: Story;
+export declare const FullWidth: Story;
+export declare const CustomStyles: Story;
+//# sourceMappingURL=DateTimePicker.stories.d.ts.map

package/dist/components/Inputs/Dates/DateTimePicker/DateTimePicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DateTimePicker/DateTimePicker.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,CA2HrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+C1B,CAAC"}