@taiv/ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from './Toggle';
+import { Group } from '../../../Layout/Group/Group';
+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',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Toggle label displayed next to the switch',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description, displayed after label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Displays error message after input',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        labelPosition: {
+            control: { type: 'select' },
+            options: ['left', 'right'],
+            description: 'Position of label',
+            table: {
+                type: { summary: '"left" | "right"' },
+                defaultValue: { summary: '"left"' },
+            },
+        },
+        onLabel: {
+            control: { type: 'text' },
+            description: 'Inner label when Switch is in checked state',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        offLabel: {
+            control: { type: 'text' },
+            description: 'Inner label when Switch is in unchecked state',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Enable notifications',
+        checked: false,
+        size: 'md',
+        disabled: false,
+        labelPosition: 'left',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<Toggle
+  label="Enable notifications"
+  checked={isEnabled}
+  onChange={(event) => setIsEnabled(event.currentTarget.checked)}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { size: "sm", label: "Small Toggle", checked: true }), _jsx(Toggle, { size: "md", label: "Medium Toggle (Default)", checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { label: "Normal Toggle", checked: true }), _jsx(Toggle, { label: "Disabled Toggle", checked: false, disabled: true }), _jsx(Toggle, { label: "Toggle with Description", description: "This is a description that provides additional context", checked: true }), _jsx(Toggle, { label: "Toggle with Error", error: "This field is required", checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const WithoutLabel = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { checked: true }), _jsx(Toggle, { checked: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { label: "Custom Styled Toggle", checked: true, styles: {
+                    track: {
+                        backgroundColor: '#ff6b6b',
+                    },
+                    thumb: {
+                        backgroundColor: '#ffffff',
+                        border: '2px solid #dee2e6',
+                    },
+                    label: {
+                        fontWeight: 600,
+                        color: '#495057',
+                    },
+                } }), _jsx(Toggle, { label: "Another Custom Style", checked: false, styles: {
+                    track: {
+                        backgroundColor: '#4CAF50',
+                    },
+                    thumb: {
+                        backgroundColor: '#ffffff',
+                        border: '2px solid #2E7D32',
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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

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

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

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

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

@@ -0,0 +1,74 @@
+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 { fontBase } from '../../../../constants/font';
+import { componentSizes } from '../../Dropdowns/shared/sizes';
+export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder = 'Pick Date', showIcon = true, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const { classes } = createStyles(() => ({
+        root: {
+            width: fullWidth ? '100%' : width || (props.type === 'range' ? `${selectedSize.minWidth * 1.2}rem` : `${selectedSize.minWidth}rem`), // Range inputs are slightly wider than regular inputs
+        },
+        input: {
+            height: `${selectedSize.height}rem`,
+            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} - 0.1rem)`,
+            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%',
+            },
+            '& .mantine-Day-day[data-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-first-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-last-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-WeekdaysRow-weekday': {
+                textAlign: 'center',
+                fontFamily: 'Poppins, sans-serif',
+            },
+        },
+        ...styles,
+    }))();
+    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: '0.25rem' } }) : undefined, radius: "lg", size: "xl", classNames: {
+            root: classes.root,
+            input: classes.input,
+            placeholder: classes.placeholder,
+            label: classes.label,
+            calendar: classes.calendar,
+        }, placeholder: placeholder, popoverProps: { radius: 'lg' }, ...props }));
+};

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from './DatePicker';
+declare const meta: Meta<typeof DatePicker>;
+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 FullWidth: Story;
+export declare const CustomStyles: Story;
+//# sourceMappingURL=DatePicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAmGjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA2BrB,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,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+C1B,CAAC"}

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

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DatePicker } from './DatePicker';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Dates/DatePicker',
+    component: DatePicker,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the date 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 a date'" },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Date picker 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' },
+            },
+        },
+        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',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        showIcon: true,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '220px' }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                code: `<DatePicker
+  placeholder="Pick Date"
+  value={selectedDate}
+  onChange={(value) => setSelectedDate(value)}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { size: "sm" }), _jsx(DatePicker, {}), _jsx(DatePicker, { size: "lg" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { label: "Normal DatePicker" }), _jsx(DatePicker, { label: "Disabled DatePicker", disabled: true }), _jsx(DatePicker, { label: "Required DatePicker", required: true }), _jsx(DatePicker, { label: "DatePicker with Description", description: "Please select your preferred date" }), _jsx(DatePicker, { label: "DatePicker with Error", error: "This field is required" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const WithAndWithoutIcon = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { label: "With Icon", placeholder: "Select date", showIcon: true }), _jsx(DatePicker, { label: "Without Icon", placeholder: "Select date", showIcon: false })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const FullWidth = {
+    render: () => (_jsx("div", { style: { width: '400px' }, children: _jsx(DatePicker, { label: "Full Width DatePicker", placeholder: "Select date", fullWidth: true }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { label: "Custom Styled DatePicker", placeholder: "Select date", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(DatePicker, { label: "Another Custom Style", placeholder: "Select date", 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/Dropdowns/CascadingSelect/CascadingSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SelectProps } from '../Select/Select';
+import { SelectOption } from '../../../../utils/select';
+export type CascadingSelectItemProps = {
+    option: SelectOption;
+    icon?: React.ReactNode;
+    children?: CascadingSelectItemProps[];
+};
+export interface CascadingSelectProps extends Omit<SelectProps, 'value' | 'data'> {
+    data?: CascadingSelectItemProps[];
+    value?: string | null;
+    width?: string | number;
+    fullWidth?: boolean;
+}
+declare const CascadingSelect: ({ data, value, placeholder, size, width, fullWidth, styles, ...props }: CascadingSelectProps) => import("react/jsx-runtime").JSX.Element;
+export { CascadingSelect };
+//# sourceMappingURL=CascadingSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/E,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAClC,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,eAAe,GAAI,wEAAiH,oBAAoB,4CA+E7J,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group } from '@mantine/core';
+import { neutral } from '../../../../constants/colors';
+import { componentSizes } from '../shared/sizes';
+import { Select } from '../Select/Select';
+import { Text } from '../../../Typography/Text';
+import { fontBase } from '../../../../constants/font';
+const CascadingSelect = ({ data = [], value, placeholder = 'Select an option', size = 'md', width, fullWidth = false, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    // Flatten the hierarchy into a flat array with depth information
+    const flattenHierarchy = (items, depth = 0) => {
+        const result = [];
+        items.forEach((item) => {
+            result.push({ ...item.option, depth, icon: item.icon });
+            if (item.children && item.children.length > 0) {
+                result.push(...flattenHierarchy(item.children, depth + 1));
+            }
+        });
+        return result;
+    };
+    const flattenedData = flattenHierarchy(data);
+    const DropdownItem = ({ value, label, icon, depth, ...others }) => {
+        const indentLevel = depth * 0.8;
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: selectedSize.dropdownPadding,
+                borderRadius: '8px',
+                transition: 'background-color 200ms ease-in-out',
+                cursor: 'pointer',
+            }, ...others, children: _jsxs(Group, { spacing: "0.5rem", sx: { marginLeft: `${indentLevel}rem` }, children: [icon && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: neutral[200], fontSize: selectedSize.fontSize }, children: icon }), _jsx(Text, { style: { ...fontBase, color: neutral[200], fontSize: selectedSize.fontSize }, children: label })] }) }));
+    };
+    const style = {
+        input: {
+            color: neutral[300],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            transition: 'all 200ms ease-in-out',
+            height: `${selectedSize.height}rem`,
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            padding: selectedSize.inputPadding,
+        },
+        item: {
+            color: neutral[200],
+            borderRadius: '8px',
+            transition: 'background-color 200ms ease-in-out',
+            padding: 0,
+            fontSize: selectedSize.fontSize,
+            marginBottom: '0.2rem',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+            },
+            '&[data-hovered]': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+            '&[data-selected]:hover': {
+                backgroundColor: neutral[50],
+            },
+            ...styles,
+        },
+    };
+    return _jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: flattenedData, ...props });
+};
+export { CascadingSelect };

package/dist/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.stories.d.ts

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

package/dist/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingSelect.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CA2GtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgFnC,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiD1B,CAAC"}