@arquimedes.co/eureka-forms 3.0.60 → 3.0.62-new-steps

package/dist/FormSteps/BookingStep/BookingStep.d.ts

@@ -0,0 +1,17 @@
+import { BookingStep } from '../../@Types/BookingFormStep';
+import { BookingSlot } from '../../@Types/BookingFormStep';
+import { StepProps } from '../Step';
+export interface BookingStepProps extends StepProps {
+    step: BookingStep;
+    /**
+     * Callback to fetch available slots for a given person + date.
+     * The form host wires this to their availability API.
+     * If omitted, the component shows an empty slot list.
+     */
+    fetchSlots?: (params: {
+        personId?: string;
+        date: string;
+    }) => Promise<BookingSlot[]>;
+}
+declare function BookingStepComponent(props: BookingStepProps): JSX.Element;
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/BookingStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialBookingStep from './MaterialBookingStep/MaterialBookingStep';
+import { useAppSelector } from '../../hooks';
+function BookingStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialBookingStep, { ...props });
+        }
+    }
+}
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -0,0 +1,7 @@
+import { BookingStepProps } from '../BookingStep';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ */
+declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
+export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ */
+function MaterialBookingStep({ step, editable, fetchSlots }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        '--booking-accent': formStyle.secondaryContrastColor,
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: null,
+        rules: { required: step.required ? 'Selecciona una cita' : undefined },
+    });
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: onChange, label: step.label, description: step.description, durationMinutes: step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: step.personSelectionMode, persons: step.persons, collectContact: step.collectContact, fetchSlots: fetchSlots, readOnly: isReadOnly, error: error?.message }) }));
+}
+export default MaterialBookingStep;

package/dist/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js

@@ -48,7 +48,7 @@ function makeStore(currentBreakPoint) {
                     ...defaultRootState,
                     widthStats: {
                         currentBreakPoint,
-                        isMobile: currentBreakPoint <= checkBoxStep.size,
+                        isMobile: currentBreakPoint <= 1,
                         isResponsive: true,
                     },
                 },
@@ -57,15 +57,15 @@ function makeStore(currentBreakPoint) {
         middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
     });
 }
-function Harness({ currentBreakPoint }) {
+function Harness({ currentBreakPoint, step = checkBoxStep, }) {
     const methods = useForm({ mode: 'onTouched' });
-    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: checkBoxStep, editable: true }) }) }) }) }) }) }));
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: { ...form, steps: { ...form.steps, [step.id]: step } }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: step, editable: true }) }) }) }) }) }) }));
 }
 function getLabelDiv() {
     // the leaf div holding only the label text (the wrapping column also matches by textContent)
     return screen.getByText((_, element) => element?.tagName === 'DIV' && element.children.length === 0 && element.textContent === `${LONG_LABEL}:`);
 }
-/** Makes every element report a 2-line-clamped overflow (jsdom has no layout). */
+/** Makes every element report a 1-line-clamped overflow (jsdom has no layout). */
 function mockLabelOverflow() {
     Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
         configurable: true,
@@ -76,7 +76,7 @@ function mockLabelOverflow() {
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
         configurable: true,
         get() {
-            return 48;
+            return 24;
         },
     });
 }
@@ -85,22 +85,30 @@ afterEach(() => {
     delete HTMLElement.prototype.scrollHeight;
     delete HTMLElement.prototype.clientHeight;
 });
-describe('CheckBoxStep label on collapsed (mobile) breakpoints', () => {
-    it('wraps the label (2-line clamp) instead of single-line truncating it when the step collapses to 100% width', () => {
+describe('CheckBoxStep long labels', () => {
+    it('clamps the label to 1 line with a toggle instead of a plain ellipsis when the step collapses to 100% width', () => {
         // breakpoint 1 <= size 2 → MaterialInputContainer renders the step at width: 100%
         render(_jsx(Harness, { currentBreakPoint: 1 }));
         const label = getLabelDiv();
         expect(label.className).toBe(styles.clampLbl);
-        expect(label.className).not.toBe(styles.overflowLbl);
-        // the fixed desktop pixel maxWidth must not constrain the collapsed label
+        // no fixed desktop pixel maxWidth constrains the label
         expect(label.style.maxWidth).toBe('');
     });
-    it('keeps the single-line ellipsis label on desktop widths (control)', () => {
+    it('also clamps (with "ver más") when the step keeps a fixed width on a phone where 2 columns fit', () => {
+        // regression: a size-1 checkbox at breakpoint 2 used to render a single-line ellipsis with
+        // no way to read the full label
+        mockLabelOverflow();
+        render(_jsx(Harness, { currentBreakPoint: 2, step: { ...checkBoxStep, size: 1 } }));
+        const label = getLabelDiv();
+        expect(label.className).toBe(styles.clampLbl);
+        expect(label.style.maxWidth).toBe('');
+        expect(screen.getByRole('button', { name: 'ver más' })).toBeInTheDocument();
+    });
+    it('clamps on desktop widths too, without a toggle while the label fits', () => {
         // breakpoint 4 > size 2 → the step keeps its fixed desktop width
         render(_jsx(Harness, { currentBreakPoint: 4 }));
         const label = getLabelDiv();
-        expect(label.className).toBe(styles.overflowLbl);
-        expect(label.style.maxWidth).not.toBe('');
+        expect(label.className).toBe(styles.clampLbl);
         expect(screen.queryByRole('button', { name: 'ver más' })).not.toBeInTheDocument();
     });
     it('shows no "ver más" toggle when the label fits in the clamp', () => {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -8,7 +8,6 @@ import { useAppSelector, selectWidthStats } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 function CheckBoxStep({ step, editable }) {
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: step.defaultValue ?? false,
@@ -20,15 +19,15 @@ function CheckBoxStep({ step, editable }) {
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const widthStats = useAppSelector(selectWidthStats);
-    const span = resolveStepSpan(step, widthStats, form.size);
-    // when the breakpoint collapses the step to width: 100% (see MaterialInputContainer),
-    // the fixed desktop pixel width no longer matches the real available space
-    const collapsed = widthStats.currentBreakPoint <= span;
+    // The label is clamped to 1 line with a "ver más" toggle at every width. A plain
+    // ellipsis was used while the step kept its fixed desktop pixel width, but that left long
+    // labels unreadable wherever the step is narrow (e.g. a size-1 checkbox on a phone where 2
+    // columns fit).
     const labelRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
     const [clamped, setClamped] = useState(false);
     useLayoutEffect(() => {
-        if (!collapsed || expanded)
+        if (expanded)
             return;
         const measure = () => {
             const label = labelRef.current;
@@ -38,7 +37,7 @@ function CheckBoxStep({ step, editable }) {
         measure();
         window.addEventListener('resize', measure);
         return () => window.removeEventListener('resize', measure);
-    }, [collapsed, expanded, step.label]);
+    }, [expanded, step.label, widthStats.currentBreakPoint]);
     const renderNested = () => {
         const steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
@@ -48,18 +47,12 @@ function CheckBoxStep({ step, editable }) {
     };
     const renderLabel = (colon = false) => {
         const label = `${step.label}${step.required ? ' *' : ''}${colon ? ':' : ''}`;
-        if (!collapsed) {
-            return (_jsx("div", { className: span === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
-                    maxWidth: calcStepWidth(span, form.size) - 45,
-                }, children: label }));
-        }
         return (_jsxs("div", { className: styles.labelColumn, children: [_jsx("div", { ref: labelRef, className: expanded ? styles.expandedLbl : styles.clampLbl, children: label }), (clamped || expanded) && (_jsx("button", { type: "button", className: styles.toggleLbl, style: { color: formStyle.primaryColor }, onClick: (event) => {
                         event.stopPropagation();
                         setExpanded(!expanded);
                     }, children: expanded ? 'ver menos' : 'ver más' }))] }));
     };
     return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, maxHeight: step.size < 4, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, style: {
-                                height: span < 4 && !collapsed ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
                             }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -3,17 +3,6 @@
     flex-direction: column;
     max-width: 100%;
 }
-.checkboxLbl,
-.overflowLbl {
-    font-size: 18px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-.overflowLbl {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
 .labelColumn {
     display: flex;
     flex-direction: column;
@@ -30,8 +19,8 @@
 .clampLbl {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
     overflow: hidden;
 }
 .toggleLbl {

package/dist/FormSteps/LocationStep/LocationStep.d.ts

@@ -0,0 +1,10 @@
+import { LocationStep } from '../../@Types/LocationFormStep';
+import { StepProps } from '../Step';
+export interface LocationStepProps extends StepProps {
+    /** The LocationStep to display */
+    step: LocationStep;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+}
+declare function LocationStepComponent(props: LocationStepProps): JSX.Element;
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/LocationStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialLocationStep from './MaterialLocationStep/MaterialLocationStep';
+import { useAppSelector } from '../../hooks';
+function LocationStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialLocationStep, { ...props });
+        }
+    }
+}
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts

@@ -0,0 +1,3 @@
+import { LocationStepProps } from '../LocationStep';
+declare function MaterialLocationStep({ step, editable }: LocationStepProps): JSX.Element;
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
+import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
+import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
+import styles from './MaterialLocationStep.module.css';
+function MaterialLocationStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'La ubicación es obligatoria' : undefined,
+            validate: (val) => {
+                if (!val)
+                    return step.required ? 'La ubicación es obligatoria' : true;
+                if (val.source === LocationInputMode.MANUAL) {
+                    // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
+                    const detail = val.addressDetail;
+                    const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
+                    if (step.required && isRequired('street') && !detail?.street)
+                        return 'Por favor completa la calle en el formulario manual.';
+                    if (step.required && isRequired('city') && !detail?.city)
+                        return 'Por favor completa la ciudad en el formulario manual.';
+                    if (step.required && isRequired('country') && !detail?.country)
+                        return 'Por favor completa el país en el formulario manual.';
+                    return true;
+                }
+                if (val.latitude === undefined || val.longitude === undefined) {
+                    return step.required ? 'Coordenadas geográficas no capturadas.' : true;
+                }
+                // Restricciones geográficas (radio / geofence).
+                return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
+            },
+        },
+    });
+    return (_jsxs("div", { className: styles.container, style: {
+            width: widthStyle,
+            '--eureka-outline': formStyle.outlineColor,
+            '--eureka-primary': formStyle.primaryColor,
+            '--eureka-text': formStyle.textColor,
+            '--eureka-error': formStyle.errorColor,
+            '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        }, children: [step.label && (_jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] })), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
+}
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css

@@ -0,0 +1,18 @@
+.container {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 5px 10px 0;
+    box-sizing: border-box;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--eureka-text, #333);
+}
+
+.required {
+    color: var(--eureka-error, #e53935);
+}

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts

@@ -0,0 +1,3 @@
+import { NumberStepProps } from '../NumberStep';
+declare function MaterialNumberStep({ step, editable }: NumberStepProps): JSX.Element;
+export default MaterialNumberStep;

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js

@@ -0,0 +1,170 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, useEffect } from 'react';
+import { NumberStepType, } from '../../../@Types/NumericFormSteps';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkNumberField from '../../../Shared/ErkNumberField/ErkNumberField';
+import ErkSelect from '../../../Shared/ErkSelect/ErkSelect';
+import ErkMenuItem from '../../../Shared/ErkMenuItem';
+import styles from './MaterialNumberStep.module.css';
+const DEFAULT_CURRENCIES = ['COP', 'USD', 'EUR', 'MXN', 'CLP', 'BRL'];
+const DEFAULT_UNITS = ['unidades', 'kg', 'g', 'm', 'cm', 'l', 'ml', 'hrs', 'mes', 'año'];
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function getNumericValue(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === 'number')
+        return value;
+    return value.value;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function MaterialNumberStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const isComposite = step.numberType === NumberStepType.MONEY ||
+        step.numberType === NumberStepType.MEASURE ||
+        step.numberType === NumberStepType.UNIT_PRICE;
+    // Narrowed views — only used after the corresponding numberType check
+    const asMoney = step;
+    const asMeasure = step;
+    const asUnitPrice = step;
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+            validate: (val) => {
+                if (!step.required && (val === null || val === undefined || val === ''))
+                    return true;
+                if (step.required && (val === null || val === undefined || val === ''))
+                    return 'Este campo es obligatorio';
+                const numVal = getNumericValue(val);
+                if (numVal === null)
+                    return 'Formato numérico inválido';
+                if (step.min !== undefined && numVal < step.min)
+                    return `El valor mínimo es ${step.min}`;
+                if (step.max !== undefined && numVal > step.max)
+                    return `El valor máximo es ${step.max}`;
+                return true;
+            },
+        },
+    });
+    // Currency/unit selectors
+    const [selectedCurrency, setSelectedCurrency] = useState(() => {
+        const v = value;
+        return v?.currency ?? asMoney.currency ?? asUnitPrice.currency ?? 'COP';
+    });
+    const [selectedUnit, setSelectedUnit] = useState(() => {
+        const v = value;
+        return v?.unit ?? asMeasure.unit ?? asUnitPrice.unit ?? 'unidades';
+    });
+    // Sync when value changes externally
+    useEffect(() => {
+        if (value && typeof value === 'object') {
+            if ('currency' in value && value.currency && value.currency !== selectedCurrency) {
+                void Promise.resolve().then(() => setSelectedCurrency(value.currency));
+            }
+            if ('unit' in value && value.unit && value.unit !== selectedUnit) {
+                void Promise.resolve().then(() => setSelectedUnit(value.unit));
+            }
+        }
+    }, [value, selectedCurrency, selectedUnit]);
+    // ---------------------------------------------------------------------------
+    // Handlers: wrap ErkNumberField's (number | null) into the step value shape
+    // ---------------------------------------------------------------------------
+    const handleNumberChange = (num) => {
+        if (num === null) {
+            onChange(null);
+            return;
+        }
+        if (step.numberType === NumberStepType.MONEY) {
+            onChange({ value: num, currency: selectedCurrency });
+        }
+        else if (step.numberType === NumberStepType.MEASURE) {
+            onChange({ value: num, unit: selectedUnit });
+        }
+        else if (step.numberType === NumberStepType.UNIT_PRICE) {
+            onChange({ value: num, currency: selectedCurrency, unit: selectedUnit });
+        }
+        else {
+            onChange(num);
+        }
+    };
+    const handleCurrencyChange = (curr) => {
+        const next = curr ?? 'USD';
+        setSelectedCurrency(next);
+        const num = getNumericValue(value);
+        if (num !== null) {
+            onChange(step.numberType === NumberStepType.UNIT_PRICE
+                ? { value: num, currency: next, unit: selectedUnit }
+                : { value: num, currency: next });
+        }
+    };
+    const handleUnitChange = (u) => {
+        const next = u ?? 'unidades';
+        setSelectedUnit(next);
+        const num = getNumericValue(value);
+        if (num !== null) {
+            onChange(step.numberType === NumberStepType.UNIT_PRICE
+                ? { value: num, currency: selectedCurrency, unit: next }
+                : { value: num, unit: next });
+        }
+    };
+    // ---------------------------------------------------------------------------
+    // Static suffix text shown inside ErkNumberField
+    // ---------------------------------------------------------------------------
+    const staticSuffix = () => {
+        if (step.numberType === NumberStepType.PERCENTAGE)
+            return '%';
+        if (step.numberType === NumberStepType.MONEY && !asMoney.allowCurrencyChange)
+            return asMoney.currency ?? 'USD';
+        if (step.numberType === NumberStepType.MEASURE && !asMeasure.allowUnitChange)
+            return asMeasure.unit ?? 'unidades';
+        // UNIT_PRICE renders its adornment fully inside the field only when neither part is editable.
+        if (step.numberType === NumberStepType.UNIT_PRICE &&
+            !asUnitPrice.allowCurrencyChange &&
+            !asUnitPrice.allowUnitChange)
+            return `${asUnitPrice.currency ?? 'USD'} / ${asUnitPrice.unit ?? 'unidades'}`;
+        if (!isComposite && step.suffix)
+            return step.suffix;
+        return undefined;
+    };
+    // ---------------------------------------------------------------------------
+    // Resolved selector lists
+    // ---------------------------------------------------------------------------
+    const currenciesList = step.numberType === NumberStepType.MONEY || step.numberType === NumberStepType.UNIT_PRICE
+        ? (step.availableCurrencies ?? DEFAULT_CURRENCIES)
+        : [];
+    const unitsList = step.numberType === NumberStepType.MEASURE || step.numberType === NumberStepType.UNIT_PRICE
+        ? (step.availableUnits ?? DEFAULT_UNITS)
+        : [];
+    const isMoneyDynamic = step.numberType === NumberStepType.MONEY && asMoney.allowCurrencyChange;
+    const isMeasureDynamic = step.numberType === NumberStepType.MEASURE && asMeasure.allowUnitChange;
+    // UNIT_PRICE has two independent toggles: currency and unit can each be fixed or selectable.
+    const isUnitPriceCurrencyDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowCurrencyChange;
+    const isUnitPriceUnitDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowUnitChange;
+    const isUnitPriceDynamic = isUnitPriceCurrencyDynamic || isUnitPriceUnitDynamic;
+    // ---------------------------------------------------------------------------
+    // Shared CSS vars
+    // ---------------------------------------------------------------------------
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    // ---------------------------------------------------------------------------
+    // Read-only view
+    // ---------------------------------------------------------------------------
+    return (_jsx("div", { className: styles.container, style: cssVars, children: _jsxs("div", { className: styles.inputRow, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkNumberField, { label: step.label, value: getNumericValue(value), onChange: handleNumberChange, error: !!error, errorBorder: true, required: step.required, helperText: error?.message ?? step.description ?? undefined, inputRef: ref, min: step.min, max: step.max, decimals: step.numberType === NumberStepType.INTEGER ? 0 : (step.decimals ?? 2), suffix: staticSuffix(), readOnly: isReadOnly, spinner: step.spinner, step: step.step, placeholder: step.placeholder }) }), isMoneyDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })), isMeasureDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })), isUnitPriceDynamic && (_jsxs(_Fragment, { children: [isUnitPriceCurrencyDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.currency ?? 'USD' })), _jsx("span", { className: styles.dividerSlash, children: "/" }), isUnitPriceUnitDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.unit ?? 'unidades' }))] }))] }) }));
+}
+export default MaterialNumberStep;

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.module.css

@@ -0,0 +1,96 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.inputRow {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+}
+
+.selectWrapper {
+    width: 100px;
+    min-width: 90px;
+}
+
+.dividerSlash {
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--eureka-text, #333);
+    opacity: 0.6;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+.suffixText {
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--eureka-primary, #1976d2);
+    padding: 0 4px;
+    user-select: none;
+}
+
+/* Read-Only Styles */
+.readOnlyContainer {
+    width: 100%;
+    margin-bottom: 8px;
+}
+
+.readOnlyCard {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border: 1px solid var(--eureka-outline, #e0e0e0);
+    border-radius: 12px;
+    background-color: var(--eureka-bg, #ffffff);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition:
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
+}
+
+.readOnlyCard:hover {
+    border-color: var(--eureka-primary, #1976d2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.readOnlyDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+}
+
+.readOnlyLabel {
+    font-size: 11px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--eureka-text, #333) !important;
+    opacity: 0.6;
+    font-weight: 600 !important;
+}
+
+.readOnlyValue {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: var(--eureka-primary, #1976d2) !important;
+}
+
+.readOnlyDesc {
+    font-size: 12px !important;
+    color: var(--eureka-text, #333) !important;
+    opacity: 0.5;
+    margin-top: 2px !important;
+}

package/dist/FormSteps/NumberStep/NumberStep.d.ts

@@ -0,0 +1,10 @@
+import { NumberStep } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface NumberStepProps extends StepProps {
+    /** The NumberStep to display */
+    step: NumberStep;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+}
+declare function NumberStepComponent(props: NumberStepProps): JSX.Element;
+export default NumberStepComponent;

package/dist/FormSteps/NumberStep/NumberStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialNumberStep from './MaterialNumberStep/MaterialNumberStep';
+import { useAppSelector } from '../../hooks';
+function NumberStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialNumberStep, { ...props });
+        }
+    }
+}
+export default NumberStepComponent;