@taiv/ui 1.14.1 → 2.0.0

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

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateTimePicker } from './DateTimePicker';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Dates/DateTimePicker',
+    component: DateTimePicker,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the date-time picker size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'Pick date and time'" },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Input label',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        required: {
+            control: { type: 'boolean' },
+            description: 'Required field',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Full width of container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showIcon: {
+            control: { type: 'boolean' },
+            description: 'Show calendar icon',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        withSeconds: {
+            control: { type: 'boolean' },
+            description: 'Allow picking seconds',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        clearable: {
+            control: { type: 'boolean' },
+            description: 'Show clear button when value is set',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        valueFormat: {
+            control: { type: 'text' },
+            description: 'Format used to display the selected value',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'DD/MM/YYYY HH:mm'" },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(value: Date | null) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: 'Pick date and time',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        showIcon: true,
+        withSeconds: false,
+        clearable: false,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '360px' }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                code: `<DateTimePicker
+  placeholder="Pick date and time"
+  value={selectedDateTime}
+  onChange={(value) => setSelectedDateTime(value)}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DateTimePicker, { size: "sm" }), _jsx(DateTimePicker, {}), _jsx(DateTimePicker, { size: "lg" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DateTimePicker, { label: "Normal" }), _jsx(DateTimePicker, { label: "Disabled", disabled: true }), _jsx(DateTimePicker, { label: "Required", required: true }), _jsx(DateTimePicker, { label: "With Description", description: "Pick both date and time" }), _jsx(DateTimePicker, { label: "With Error", error: "This field is required" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const WithAndWithoutIcon = {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DateTimePicker, { label: "With Icon", placeholder: "Pick date and time", showIcon: true }), _jsx(DateTimePicker, { label: "Without Icon", placeholder: "Pick date and time", showIcon: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const WithSeconds = {
+    render: () => (_jsx(DateTimePicker, { label: "Includes seconds", withSeconds: true, placeholder: "Pick date and time" })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const FullWidth = {
+    render: () => (_jsx("div", { style: { width: '400px' }, children: _jsx(DateTimePicker, { label: "Full Width DateTimePicker", placeholder: "Pick date and time", fullWidth: true }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DateTimePicker, { label: "Custom Styled", placeholder: "Pick date and time", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(DateTimePicker, { label: "Another Custom Style", placeholder: "Pick date and time", styles: {
+                    input: {
+                        backgroundColor: '#f8f9fa',
+                        borderColor: '#4CAF50',
+                        '&:focus': {
+                            borderColor: '#4CAF50',
+                            boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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

@@ -0,0 +1,19 @@
+import { TimeInputProps as MantineTimeInputProps } from '@mantine/dates';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from '../../Dropdowns/shared/sizes';
+export interface TimeInputProps extends Omit<MantineTimeInputProps, 'styles'> {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+    showIcon?: boolean;
+}
+/**
+ * A pure time-of-day input. Wraps Mantine's `TimeInput` (which uses a native
+ * `<input type='time'>`) so the user can't accidentally drift the date — use
+ * this any time only the time-of-day matters and a separate `<DatePicker>`
+ * owns the date. The displayed format (12h vs 24h) is determined by the
+ * browser's locale; the value is always `"HH:mm"` (24h) for consumers.
+ */
+export declare const TimeInput: ({ size, width, fullWidth, placeholder, showIcon, styles, ...props }: TimeInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TimeInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,IAAI,qBAAqB,EACxC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC;IAC3E,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;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,GAAI,qEAQvB,cAAc,4CAsDhB,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimeInput as MantineTimeInput, } 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';
+/**
+ * A pure time-of-day input. Wraps Mantine's `TimeInput` (which uses a native
+ * `<input type='time'>`) so the user can't accidentally drift the date — use
+ * this any time only the time-of-day matters and a separate `<DatePicker>`
+ * owns the date. The displayed format (12h vs 24h) is determined by the
+ * browser's locale; the value is always `"HH:mm"` (24h) for consumers.
+ */
+export const TimeInput = ({ size = 'md', width, fullWidth = false, placeholder = 'Pick a 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],
+        },
+        ...styles,
+    }))();
+    return (_jsx(MantineTimeInput, { icon: showIcon ? (_jsx("i", { className: 'far fa-clock', style: { fontSize: 14, marginLeft: spacing.xxs } })) : undefined, radius: 'lg', size: 'xl', classNames: {
+            root: classes.root,
+            input: classes.input,
+            label: classes.label,
+        }, placeholder: placeholder, ...props }));
+};

package/dist/components/Inputs/Dropdowns/FontSelect/FontSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/FontSelect/FontSelect.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,GAAI,wEAAyG,eAAe,4CAoD3I,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"FontSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/FontSelect/FontSelect.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,GAAI,wEAAyG,eAAe,4CA6D3I,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Inputs/Dropdowns/FontSelect/FontSelect.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Box } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { componentSizes } from '../shared/sizes';
 import { Select } from '../Select/Select';
+import { sortByName } from '../../../../utils/sort';
 import Fonts from './font-options';
 const FontSelect = ({ data, value, placeholder = 'Select a font', size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
     const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}px`;
+    // Alphabetise the font dropdown so it's scannable. The bundled list ships
+    // in upload order; consumer-provided lists tend to be just as arbitrary.
+    // `sortByName` falls back to `label` for Select-style options and returns a
+    // new array (non-mutating).
+    const fontOptions = useMemo(() => sortByName(data !== null && data !== void 0 ? data : Fonts.FONTS, 'asc'), [data]);
     const DropdownItem = ({ value, label, ...others }) => (_jsx(Box, { title: label, children: _jsx("div", { style: {
                 fontFamily: value,
                 fontSize: selectedSize.fontSize,
@@ -43,6 +50,6 @@ const FontSelect = ({ data, value, placeholder = 'Select a font', size = 'md', w
             ...styles,
         },
     };
-    return _jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: data || Fonts.FONTS, ...props });
+    return _jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: fontOptions, ...props });
 };
 export { FontSelect };

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,5 @@
-import { MultiSelectProps as MantineMultiSelectProps } from '@mantine/core';
-import { CSSObject } from '@mantine/styles';
+import { type MultiSelectProps as MantineMultiSelectProps } from '@mantine/core';
+import type { CSSObject } from '@mantine/styles';
 import { componentSizes } from '../shared/sizes';
 interface MultiSelectProps extends MantineMultiSelectProps {
     size?: keyof typeof componentSizes;

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,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,WAAW,GAAI,2DAA6F,gBAAgB,4CA0FxI,CAAC"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,IAAI,uBAAuB,EACjD,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAKjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,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,WAAW,GAAI,2DAOzB,gBAAgB,4CAuHlB,CAAC"}

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.js

@@ -1,95 +1,114 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MultiSelect as MantineMultiSelect } from '@mantine/core';
-import { neutral, primary } from '../../../../constants/colors';
+import { MultiSelect as MantineMultiSelect, } from '@mantine/core';
+import { neutral, primary, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder = 'Select options', styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.maxWidth}px`;
+    const computedWidth = fullWidth
+        ? '100%'
+        : width || `${selectedSize.maxWidth}px`;
     const style = {
-        input: {
-            height: 'auto',
-            minHeight: `${selectedSize.height}px`,
-            padding: selectedSize.inputPadding,
-            display: 'flex',
-            alignItems: 'center',
-            cursor: 'pointer',
+        defaultValueLabel: {
             ...fontBase,
-            fontSize: selectedSize.fontSize,
-            color: neutral[200],
-            border: `1px solid ${neutral[100]}`,
-            borderRadius: '8px',
-            backgroundColor: 'white',
-            transition: 'all 200ms ease-in-out',
+        },
+        defaultValueRemove: {
             '&:hover': {
-                backgroundColor: 'white',
+                backgroundColor: primary[25],
             },
+            alignItems: 'center',
+            backgroundColor: primary[25],
+            borderRadius: '50%',
+            color: primary[300],
+            display: 'flex',
+            justifyContent: 'center',
+            marginLeft: spacing.sm,
         },
         dropdown: {
             border: 'none',
             borderRadius: '8px',
             boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
         },
-        item: {
-            padding: selectedSize.dropdownPadding,
-            marginBottom: spacing.xs,
-            borderRadius: '8px',
+        // Match the error-label typography used by TextInput/TextArea/Select so
+        // validation messages read at the same scale across all inputs (Mantine's
+        // default sizes this much smaller).
+        error: {
             ...fontBase,
-            fontSize: selectedSize.fontSize,
-            color: neutral[200],
+            color: red[200],
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
+        },
+        input: {
+            alignItems: 'center',
+            cursor: 'pointer',
+            display: 'flex',
+            height: 'auto',
+            minHeight: `${selectedSize.height}px`,
+            padding: selectedSize.inputPadding,
+            ...fontBase,
+            '&:hover': {
+                backgroundColor: 'white',
+            },
             backgroundColor: 'white',
-            '&[data-selected]': {
-                backgroundColor: neutral[50],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            color: neutral[200],
+            fontSize: selectedSize.fontSize,
+            transition: 'all 200ms ease-in-out',
+            '&[data-invalid]': {
+                borderColor: red[200],
                 color: neutral[200],
-                '&:hover': {
-                    backgroundColor: neutral[50],
+                '& input::placeholder': {
+                    color: red[200],
                 },
             },
-            '&:hover': {
+        },
+        item: {
+            borderRadius: '8px',
+            marginBottom: spacing.xs,
+            padding: selectedSize.dropdownPadding,
+            ...fontBase,
+            // Mantine v6 highlights the keyboard-focused item with `data-hovered`,
+            // so we mirror the mouse `:hover` style there.
+            '&:hover, &[data-hovered]': {
                 backgroundColor: neutral[50],
             },
-            '&:not(:hover):not([data-selected])': {
+            '&:not(:hover):not([data-hovered]):not([data-selected])': {
                 backgroundColor: 'white',
             },
-        },
-        value: {
-            padding: selectedSize.valuePadding,
-            borderRadius: '25px',
-            ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 1.25px)`,
-            color: primary[300],
-            backgroundColor: primary[50],
-            '&:hover': {
-                backgroundColor: primary[50],
-            },
-        },
-        defaultValueRemove: {
-            marginLeft: spacing.sm,
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: primary[300],
-            backgroundColor: primary[25],
-            '&:hover': {
-                backgroundColor: primary[25],
+            '&[data-selected]': {
+                '&:hover, &[data-hovered]': {
+                    backgroundColor: neutral[50],
+                },
+                backgroundColor: neutral[50],
+                color: neutral[200],
             },
+            backgroundColor: 'white',
+            color: neutral[200],
+            fontSize: selectedSize.fontSize,
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
             color: neutral[200],
-        },
-        defaultValueLabel: {
-            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
         },
         searchInput: {
             ...fontBase,
-            fontSize: selectedSize.fontSize,
             color: neutral[200],
+            fontSize: selectedSize.fontSize,
+        },
+        value: {
+            borderRadius: '25px',
+            padding: selectedSize.valuePadding,
+            ...fontBase,
+            '&:hover': {
+                backgroundColor: primary[25],
+            },
+            backgroundColor: primary[25],
+            color: primary[300],
+            fontSize: `calc(${selectedSize.fontSize} - 1.25px)`,
         },
         ...styles,
     };
-    return _jsx(MantineMultiSelect, { placeholder: placeholder, size: size, w: computedWidth, styles: style, maxDropdownHeight: selectedSize.dropdownHeight, searchable: true, ...props });
+    return (_jsx(MantineMultiSelect, { maxDropdownHeight: selectedSize.dropdownHeight, placeholder: placeholder, searchable: true, size: size, styles: style, w: computedWidth, ...props }));
 };

package/dist/components/Inputs/Dropdowns/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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,MAAM,GAAI,2DAA+F,WAAW,4CAqEhI,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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,MAAM,GAAI,2DAA+F,WAAW,4CAuEhI,CAAC"}

package/dist/components/Inputs/Dropdowns/Select/Select.js

@@ -49,14 +49,16 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
             '&[data-selected]': {
                 backgroundColor: neutral[50],
                 color: neutral[200],
-                '&:hover': {
+                '&:hover, &[data-hovered]': {
                     backgroundColor: neutral[50],
                 },
             },
-            '&:hover': {
+            // Mantine v6 highlights the keyboard-focused item with `data-hovered`,
+            // so we mirror the mouse `:hover` style there.
+            '&:hover, &[data-hovered]': {
                 backgroundColor: neutral[50],
             },
-            '&:not(:hover):not([data-selected])': {
+            '&:not(:hover):not([data-hovered]):not([data-selected])': {
                 backgroundColor: 'white',
             },
         },

package/dist/components/Inputs/Dropzone/Dropzone.d.ts

@@ -0,0 +1,23 @@
+import { DropzoneProps as MantineDropzoneProps } from '@mantine/dropzone';
+import { CSSObject } from '@mantine/core';
+export interface DropzoneProps extends Omit<MantineDropzoneProps, 'styles'> {
+    styles?: Record<string, CSSObject>;
+}
+export declare const Dropzone: (({ styles, children, ...props }: DropzoneProps) => import("react/jsx-runtime").JSX.Element) & {
+    Accept: {
+        (props: import("@mantine/dropzone/lib/DropzoneStatus").DropzoneStatusProps): JSX.Element;
+        displayName: string;
+    };
+    Reject: {
+        (props: import("@mantine/dropzone/lib/DropzoneStatus").DropzoneStatusProps): JSX.Element;
+        displayName: string;
+    };
+    Idle: {
+        (props: import("@mantine/dropzone/lib/DropzoneStatus").DropzoneStatusProps): JSX.Element;
+        displayName: string;
+    };
+    FullScreen: typeof import("@mantine/dropzone/lib/DropzoneFullScreen").DropzoneFullScreen;
+};
+export { IMAGE_MIME_TYPE, PDF_MIME_TYPE, MS_WORD_MIME_TYPE, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MIME_TYPES, } from '@mantine/dropzone';
+export type { FileWithPath, FileRejection } from '@mantine/dropzone';
+//# sourceMappingURL=Dropzone.d.ts.map

package/dist/components/Inputs/Dropzone/Dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,aAAa,IAAI,oBAAoB,EACtC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK1C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAsCD,eAAO,MAAM,QAAQ,oCApCsC,aAAa;;;;;;;;;;;;;;CAyCtE,CAAC;AAIH,OAAO,EACL,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/Inputs/Dropzone/Dropzone.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropzone as MantineDropzone, } from '@mantine/dropzone';
+import { colors } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const DropzoneComponent = ({ styles, children, ...props }) => {
+    const style = {
+        root: {
+            ...fontBase,
+            backgroundColor: 'white',
+            border: `1px dashed ${colors.neutral[100]}`,
+            borderRadius: '8px',
+            color: colors.neutral[300],
+            cursor: 'pointer',
+            padding: spacing.xl,
+            transition: 'background-color 200ms ease, border-color 200ms ease',
+            '&:hover': {
+                backgroundColor: colors.neutral[25],
+                borderColor: colors.neutral[200],
+            },
+            '&[data-accept]': {
+                backgroundColor: colors.primary[25],
+                borderColor: colors.primary[200],
+                borderStyle: 'solid',
+            },
+            '&[data-reject]': {
+                backgroundColor: colors.error[25],
+                borderColor: colors.error[200],
+                borderStyle: 'solid',
+            },
+        },
+        ...styles,
+    };
+    return (_jsx(MantineDropzone, { styles: style, ...props, children: children }));
+};
+export const Dropzone = Object.assign(DropzoneComponent, {
+    Accept: MantineDropzone.Accept,
+    Reject: MantineDropzone.Reject,
+    Idle: MantineDropzone.Idle,
+    FullScreen: MantineDropzone.FullScreen,
+});
+// Re-export the MIME-type presets so consumers can do:
+//   import { Dropzone, IMAGE_MIME_TYPE } from '@taiv/ui';
+export { IMAGE_MIME_TYPE, PDF_MIME_TYPE, MS_WORD_MIME_TYPE, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MIME_TYPES, } from '@mantine/dropzone';

package/dist/components/Inputs/Dropzone/Dropzone.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Dropzone } from './Dropzone';
+declare const meta: Meta<typeof Dropzone>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ImagesOnly: Story;
+export declare const PdfsOnly: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const WithFileList: Story;
+//# sourceMappingURL=Dropzone.stories.d.ts.map

package/dist/components/Inputs/Dropzone/Dropzone.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropzone/Dropzone.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAkC,MAAM,YAAY,CAAC;AAQtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA6D/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsBnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAIF,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}