@arquimedes.co/eureka-forms 3.0.45-mui9 → 3.0.45-next-fix

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
+import React from 'react';
+import { styled, Dialog as MuiDialog } from '@mui/material';
 import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
 import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
 import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 import { format, isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
@@ -84,47 +85,22 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
         backgroundColor: theme.palette.primary.main + '1a',
     },
 }));
-const CustomRangePickerField = React.forwardRef(function CustomRangePickerField({ error, required, helperText, size = 'small', labelMargin = 5, fullWidth = true, inputRef, }, ref) {
-    const { value, fieldFormat, setOpen, disabled, readOnly, label } = usePickerContext();
-    const { displayValue, isInvalid } = useMemo(() => {
-        const [startDate, endDate] = value ?? [null, null];
-        if (!startDate)
-            return { displayValue: '', isInvalid: false };
-        if (!isValid(startDate))
-            return { displayValue: '', isInvalid: true };
-        if (endDate && !isValid(endDate))
-            return { displayValue: '', isInvalid: true };
-        try {
-            const fmt = fieldFormat ?? 'P';
-            const start = format(startDate, fmt);
-            const end = endDate ? format(endDate, fmt) : '';
-            return { displayValue: end ? `${start} – ${end}` : start, isInvalid: false };
-        }
-        catch {
-            return { displayValue: '', isInvalid: true };
-        }
-    }, [value, fieldFormat]);
+// eslint-disable-next-line react/display-name
+const CustomTextField = React.forwardRef((props, ref) => {
+    const pickerContext = usePickerContext();
     const handleClick = () => {
-        if (!disabled && !readOnly) {
-            setOpen((prev) => !prev);
+        if (!props.disabled && !props.readOnly) {
+            pickerContext.setOpen((prev) => !prev);
         }
     };
-    return (_jsx(StyledTextField, { ref: ref, value: displayValue, label: label, disabled: disabled, readOnly: readOnly, error: isInvalid || error, required: required, helperText: isInvalid ? 'Fecha inválida' : helperText, size: size, labelMargin: labelMargin, inputRef: inputRef, onClick: handleClick, fullWidth: fullWidth, placeholder: "", slotProps: {
-            input: {
-                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(CalendarIcon, { style: {
-                            fontSize: size === 'small' ? 18 : 20,
-                            opacity: disabled || readOnly ? 0.5 : 1,
-                        } }) })),
-                readOnly: true,
-            },
-        } }));
+    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: handleClick });
 });
 const formatDate = (date, showYear) => {
     if (!date || !isValid(date))
         return '';
     return format(date, showYear ? 'PP' : 'dd MMM');
 };
-function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, inputRef, shortcuts, ...others }) {
+function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, ...others }) {
     const [startDate, endDate] = value ?? [null, null];
     const hasCompleteRange = Boolean(startDate) && Boolean(endDate);
     const showYear = startDate &&
@@ -135,16 +111,19 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
     const formattedStartDate = formatDate(startDate, Boolean(showYear));
     const formattedEndDate = formatDate(endDate, Boolean(showYear));
     const toolbarText = hasCompleteRange ? `${formattedStartDate} – ${formattedEndDate}` : '– –';
-    return (_jsx(StyledDateRangePicker, { ...others, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, slots: {
-            field: CustomRangePickerField,
+    return (_jsx(StyledDateRangePicker, { ...others, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, enableAccessibleFieldDOMStructure: false, slots: {
+            //TODO: create system for shortcuts customs or default (enums)
+            shortcuts: undefined,
+            field: SingleInputDateRangeField,
             day: StyledDay,
             dialog: StyledDialog,
             toolbar: StyledDateToolBar,
+            openPickerIcon: CalendarIcon,
+            textField: CustomTextField,
         }, slotProps: {
             actionBar: {
                 actions: ['clear', 'accept'],
             },
-            shortcuts: shortcuts ? { items: shortcuts } : undefined,
             layout: {
                 sx: {
                     backgroundColor: '#ffffff',
@@ -175,14 +154,18 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
                 hidden: false,
                 toolbarPlaceholder: toolbarText,
             },
-            field: {
+            textField: {
                 size,
                 error,
-                required: others.required,
+                disabled,
+                readOnly: !disabled && readOnly,
                 helperText,
                 labelMargin,
                 fullWidth: true,
-                inputRef,
+                placeholder: '',
+                InputProps: {
+                    readOnly: !disabled && readOnly,
+                },
             },
         } }));
 }

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.stories.d.ts

@@ -0,0 +1,36 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkDateRangePicker from './ErkDateRangePicker';
+declare const meta: {
+    component: typeof ErkDateRangePicker;
+    tags: string[];
+    args: {
+        readOnly: false;
+    };
+    parameters: {
+        dateRange: Date[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const Interactive: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const Menu: Story;
+export declare const WithSelectedRange: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const WithError: Story;
+export declare const Required: Story;
+export declare const SmallSize: Story;
+export declare const MediumSize: Story;
+export declare const CurrentMonth: Story;
+export declare const LastWeek: Story;
+export declare const NextMonth: Story;
+export declare const WithMinMaxDates: Story;
+export declare const YearRange: Story;
+export declare const QuarterRange: Story;
+export declare const EventDuration: Story;
+export declare const MultipleStates: Story;

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.stories.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErkDateRangePicker from './ErkDateRangePicker';
+import { useArgs } from 'storybook/internal/preview-api';
+import { useState } from 'react';
+const meta = {
+    component: ErkDateRangePicker,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+    parameters: {
+        dateRange: [new Date('2021-07-01'), new Date('2021-07-21')],
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        label: 'Seleccionar Rango',
+        value: [null, null],
+    },
+};
+export const Default = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Interactive = {
+    args: {
+        label: 'Rango Interactivo',
+        value: [null, null],
+        helperText: 'Seleccione un rango de fechas',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        const handleChange = (newValue) => {
+            setValue(newValue);
+            args.onChange?.(newValue);
+        };
+        return (_jsxs("div", { children: [_jsx(ErkDateRangePicker, { ...args, value: value, onChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', fontSize: '14px' }, children: [_jsx("strong", { children: "Valor seleccionado:" }), _jsxs("div", { children: ["Inicio: ", value[0]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] }), _jsxs("div", { children: ["Fin: ", value[1]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] })] })] }));
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDateRangePicker, { ...args, onChange: onValueChange });
+    },
+};
+export const Full = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Seleccione un rango de fechas',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Error = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Error: Rango de fechas inválido',
+        error: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const WithSelectedRange = {
+    args: {
+        label: 'Vacaciones',
+        value: [new Date('2024-12-20'), new Date('2025-01-05')],
+        helperText: 'Período de vacaciones',
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDateRangePicker, { ...args, onChange: onValueChange });
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        disabled: true,
+        helperText: 'Campo deshabilitado',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        readOnly: true,
+        helperText: 'Campo de solo lectura',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithError = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-21'), new Date('2021-07-01')],
+        helperText: 'La fecha de inicio debe ser anterior a la fecha de fin',
+        error: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Required = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Este campo es obligatorio',
+        required: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const SmallSize = {
+    args: {
+        label: 'Rango Pequeño',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        size: 'small',
+        helperText: 'Tamaño pequeño',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const MediumSize = {
+    args: {
+        label: 'Rango Mediano',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        size: 'medium',
+        helperText: 'Tamaño mediano',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const CurrentMonth = {
+    args: {
+        label: 'Mes Actual',
+        value: [new Date(2025, 10, 1), new Date(2025, 10, 30)],
+        helperText: 'Noviembre 2025',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const LastWeek = {
+    args: {
+        label: 'Última Semana',
+        value: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
+        helperText: 'Últimos 7 días',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const NextMonth = {
+    args: {
+        label: 'Próximo Mes',
+        value: [
+            new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
+            new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0),
+        ],
+        helperText: 'Planificación del próximo mes',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithMinMaxDates = {
+    args: {
+        label: 'Reserva de Hotel',
+        value: [null, null],
+        helperText: 'Seleccione fechas entre hoy y 3 meses',
+        minDate: new Date(),
+        maxDate: new Date(new Date().setMonth(new Date().getMonth() + 3)),
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const YearRange = {
+    args: {
+        label: 'Período Fiscal',
+        value: [new Date('2025-01-01'), new Date('2025-12-31')],
+        helperText: 'Año fiscal 2025',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const QuarterRange = {
+    args: {
+        label: 'Trimestre Q1 2025',
+        value: [new Date('2025-01-01'), new Date('2025-03-31')],
+        helperText: 'Primer trimestre del año',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const EventDuration = {
+    args: {
+        label: 'Duración del Evento',
+        value: [new Date('2025-06-15'), new Date('2025-06-18')],
+        helperText: 'Conferencia anual (4 días)',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
+    },
+};
+export const MultipleStates = {
+    render: function Component() {
+        const [range1, setRange1] = useState([null, null]);
+        const [range2, setRange2] = useState([new Date('2025-01-01'), new Date('2025-01-31')]);
+        const [range3, setRange3] = useState([null, null]);
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(ErkDateRangePicker, { label: "Fecha de Inicio del Proyecto", value: range1, onChange: setRange1, helperText: "Seleccione el per\u00EDodo del proyecto" }), _jsx(ErkDateRangePicker, { label: "Per\u00EDodo de Pruebas", value: range2, onChange: setRange2, helperText: "Enero 2025" }), _jsx(ErkDateRangePicker, { label: "Fecha de Entrega", value: range3, onChange: setRange3, error: range3[0] === null, helperText: range3[0] === null ? 'Este campo es obligatorio' : 'Fecha confirmada', required: true })] }));
+    },
+};

package/dist/Shared/ErkMenuItem.d.ts

@@ -1,2 +1,2 @@
-declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").MenuItemOwnProps> & Omit<import("@mui/material").ButtonBaseOwnProps, "type" | "children" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material").MenuItemOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "type" | "children" | "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children" | "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export default Styled;

package/dist/Shared/ErkSelect/ErkSelect.d.ts

@@ -6,12 +6,12 @@ export interface SelectorStyleProps {
 }
 export declare const StyledSelect: import("@emotion/styled").StyledComponent<(import("@mui/material").FilledSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").StandardSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").OutlinedSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>), {}, {}>;
 export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "required" | "size" | "color" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: React.ElementType | undefined;
+    component?: React.ElementType;
 } & {
     open: boolean;
 }, {}, {}>;
 export declare const StyledHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "required" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: React.ElementType | undefined;
+    component?: React.ElementType;
 }, {}, {}>;
 export type ErkSelectValue<Type extends string | number, Multiple, Clearable> = Multiple extends true ? Type[] : Clearable extends true ? Type | undefined : Type;
 export interface ErkSelectProps<Type extends string | number = string, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends Omit<MuiSelectProps, 'color' | 'onChange' | 'ref'>, SelectorStyleProps {

package/dist/Shared/ErkSelect/ErkSelect.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkSelect from './ErkSelect';
+declare const meta: {
+    component: typeof ErkSelect;
+    tags: string[];
+    args: {
+        readOnly: false;
+        MenuProps: {
+            disablePortal: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/ErkSelect/ErkSelect.stories.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErkSelect from './ErkSelect';
+import { MenuItem } from '@mui/material';
+import { useArgs } from 'storybook/internal/preview-api';
+const meta = {
+    component: ErkSelect,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+        MenuProps: {
+            disablePortal: false,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Label',
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsxs(ErkSelect, { ...args, onChange: onValueChange, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const Empty = {
+    args: {},
+    render: function Component(args) {
+        return _jsx(ErkSelect, { ...args });
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: 'option',
+    },
+    render: function Component({ inputRef, ...args }) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsx(ErkSelect, { ...args, onChange: onValueChange, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+    },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'option',
+        helperText: 'Helper text',
+    },
+    render: function Component({ inputRef, ...args }) {
+        return (_jsx(ErkSelect, { ...args, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkSmartSelect from './ErkSmartSelect';
+declare const meta: {
+    component: typeof ErkSmartSelect;
+    tags: string[];
+    args: {
+        searchable: false;
+        readOnly: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const Focused: Story;
+export declare const FocusedSearchable: Story;
+export declare const SearchableWithOptions: Story;
+export declare const SearchableWithSearchAndOptions: Story;
+export declare const Loading: Story;
+export declare const LoadingOpened: Story;
+export declare const SearchableLoadingOpened: Story;
+export declare const WithValueandLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;