@arquimedes.co/eureka-forms 3.0.51-test → 3.0.52-new-steps

package/dist/Shared/ErkNumberField/ErkNumberField.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { FormControl, FormHelperText, InputAdornment, InputLabel, OutlinedInput, styled, useTheme, } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import AddIcon from '../../Icons/AddIcon';
+import RemoveIcon from '../../Icons/RemoveIcon';
+// ---------------------------------------------------------------------------
+// Styled FormControl shell — same conventions as ErkTextField / ErkSelect
+// ---------------------------------------------------------------------------
+const StyledFormControl = styled(FormControl)(({ theme, size }) => ({
+    '& .Erk-MuiOutlinedInput-root': {
+        borderRadius: 10,
+        backgroundColor: theme.palette.stepBackgroundColor.default,
+        minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
+        '&.Mui-focused .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 2,
+        },
+        // ErkNF-readOnly is set manually via className — Mui-readOnly is unreliable here
+        '&:hover:not(.ErkNF-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+        },
+        '&.ErkNF-readOnly.Mui-focused .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.outline.main,
+            borderWidth: 1,
+        },
+        '&.ErkNF-readOnly': {
+            cursor: 'default',
+            '& input': { cursor: 'default' },
+        },
+        '& .Erk-MuiOutlinedInput-notchedOutline': {
+            borderRadius: 10,
+            borderColor: theme.palette.outline.main,
+            '& legend': { fontSize: '0.75rem' },
+        },
+    },
+    '& .Erk-MuiOutlinedInput-root.Mui-error .Erk-MuiOutlinedInput-notchedOutline': {
+        borderColor: theme.palette.error.main,
+    },
+    '& .Erk-MuiOutlinedInput-root.Mui-error.Mui-focused .Erk-MuiOutlinedInput-notchedOutline': {
+        borderWidth: 2,
+    },
+    '& .Erk-MuiFormLabel-root': {
+        color: alpha(theme.palette.text.primary, 0.54),
+    },
+    '& label.Mui-focused': { color: theme.palette.primary.main },
+    '& label.Mui-error': { color: theme.palette.error.main },
+    '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
+        fontSize: '1rem',
+        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
+    },
+    '& .Erk-MuiFormHelperText-root': {
+        color: theme.palette.helperText.primary,
+        minHeight: 20,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& .Erk-MuiFormHelperText-root.Mui-error': { color: theme.palette.error.main },
+    '& input': {
+        fontSize: '1rem',
+        padding: '6px 12px',
+        lineHeight: size === 'small' ? '1.188em' : '1.75em',
+        height: size === 'small' ? '1.188em' : '1.75em',
+        color: theme.palette.text.primary,
+        MozAppearance: 'textfield',
+        '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            WebkitAppearance: 'none',
+            margin: 0,
+        },
+    },
+}));
+// ---------------------------------------------------------------------------
+// SSR label-shrink hint — muiName='Input' lets FormControl know an input
+// exists so it can compute the initial shrink state before hydration.
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SSRInitialFilled(_props) {
+    return null;
+}
+SSRInitialFilled.muiName = 'Input';
+function SpinnerBtn({ children, style, ...rest }) {
+    const theme = useTheme();
+    const [hovered, setHovered] = React.useState(false);
+    const [active, setActive] = React.useState(false);
+    return (_jsx("button", { type: "button", tabIndex: -1, ...rest, onMouseEnter: (e) => {
+            setHovered(true);
+            rest.onMouseEnter?.(e);
+        }, onMouseLeave: (e) => {
+            setHovered(false);
+            setActive(false);
+            rest.onMouseLeave?.(e);
+        }, onMouseDown: (e) => {
+            setActive(true);
+            rest.onMouseDown?.(e);
+        }, onMouseUp: (e) => {
+            setActive(false);
+            rest.onMouseUp?.(e);
+        }, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 22,
+            height: 22,
+            minWidth: 22,
+            padding: 0,
+            border: 'none',
+            borderRadius: 4,
+            background: active
+                ? alpha(theme.palette.primary.main, 0.16)
+                : hovered
+                    ? alpha(theme.palette.primary.main, 0.08)
+                    : 'transparent',
+            cursor: rest.disabled ? 'default' : 'pointer',
+            color: hovered && !rest.disabled ? theme.palette.primary.main : alpha(theme.palette.text.primary, 0.6),
+            flexShrink: 0,
+            transition: 'color 0.15s, background-color 0.15s',
+            opacity: rest.disabled ? 0.35 : 1,
+            pointerEvents: rest.disabled ? 'none' : undefined,
+            ...style,
+        }, children: children }));
+}
+// ---------------------------------------------------------------------------
+// Implementation
+// ---------------------------------------------------------------------------
+function CustomErkNumberField({ value, onChange, label, min, max, step = 1, decimals, required, error, errorBorder, helperText, disabled, readOnly, placeholder, size = 'small', fullWidth = true, suffix, spinner = true, inputRef, }) {
+    const theme = useTheme();
+    const id = React.useId();
+    // Rounds to max decimals on spinner click / arrow key / wheel scrub.
+    // Typing restriction is handled separately inside slotProps.input.onChange.
+    const handleValueChange = (num) => {
+        if (num === null || decimals === undefined) {
+            onChange?.(num);
+            return;
+        }
+        const factor = Math.pow(10, decimals);
+        onChange?.(Math.round(num * factor) / factor);
+    };
+    return (_jsxs(BaseNumberField.Root, { value: value ?? null, onValueChange: handleValueChange, min: min, max: max, step: step, format: decimals !== undefined ? { minimumFractionDigits: 0, maximumFractionDigits: decimals } : undefined, disabled: disabled, readOnly: readOnly, ref: inputRef, render: (rootProps, rootState) => (_jsx(StyledFormControl, { ref: rootProps.ref, size: size, disabled: rootState.disabled, required: required, error: error && !!errorBorder, variant: "outlined", fullWidth: fullWidth, children: rootProps.children })), children: [_jsx(SSRInitialFilled, { value: value ?? undefined }), label && (_jsx(InputLabel, { htmlFor: id, size: size === 'small' ? 'small' : undefined, disabled: disabled, children: label })), _jsx(BaseNumberField.Input, { id: id, render: (inputProps, inputState) => {
+                    return (_jsx(OutlinedInput, { label: label, className: readOnly ? 'ErkNF-readOnly' : undefined, inputRef: inputProps.ref, value: inputState.inputValue, onBlur: inputProps.onBlur, onChange: inputProps.onChange, onKeyUp: inputProps.onKeyUp, onKeyDown: inputProps.onKeyDown, onFocus: inputProps.onFocus, placeholder: placeholder, slotProps: {
+                            input: {
+                                ...inputProps, // Base UI handlers + ref + aria attrs
+                            },
+                        }, endAdornment: suffix || spinner ? (_jsxs(InputAdornment, { position: "end", sx: { gap: '2px', mr: '2px', alignItems: 'center' }, children: [suffix && (_jsx("span", { style: {
+                                        fontSize: 13,
+                                        fontWeight: 600,
+                                        color: theme.palette.primary.main,
+                                        userSelect: 'none',
+                                        whiteSpace: 'nowrap',
+                                        marginRight: spinner ? 2 : 4,
+                                    }, children: suffix })), spinner && (_jsxs(_Fragment, { children: [_jsx(BaseNumberField.Decrement, { render: (decProps) => {
+                                                const { disabled: baseDisabled, ...restDec } = decProps;
+                                                return (_jsx(SpinnerBtn, { ...restDec, disabled: !!readOnly || !!baseDisabled, children: _jsx(RemoveIcon, { size: 14 }) }));
+                                            } }), _jsx(BaseNumberField.Increment, { render: (incProps) => {
+                                                const { disabled: baseDisabled, ...restInc } = incProps;
+                                                return (_jsx(SpinnerBtn, { ...restInc, disabled: !!readOnly || !!baseDisabled, children: _jsx(AddIcon, { size: 14 }) }));
+                                            } })] }))] })) : undefined, sx: { pr: suffix || spinner ? 0 : undefined } }));
+                } }), helperText && _jsx(FormHelperText, { error: error && !!errorBorder, children: helperText })] }));
+}
+/**
+ * Pure number input built on Base UI NumberField + MUI styling.
+ * No form-step system dependency.
+ * Class wrapper for react-hook-form ref compatibility.
+ */
+class ErkNumberField extends React.Component {
+    render() {
+        return _jsx(CustomErkNumberField, { ...this.props });
+    }
+}
+export default ErkNumberField;

package/dist/constants/FormStepTypes.d.ts

@@ -21,7 +21,11 @@ export declare enum FormStepTypes {
     COLLAPSIBLE = "COLLAPSIBLE",
     MAPPER = "MAPPER",
     ENTITYVALUEPICKER = "ENTITYVALUEPICKER",
-    API_SELECTOR = "API_SELECTOR"
+    API_SELECTOR = "API_SELECTOR",
+    LOCATION = "LOCATION",
+    NUMBER = "NUMBER",
+    CALENDAR = "CALENDAR",
+    BOOKING = "BOOKING"
 }
 export declare enum OptionTypes {
     DEFAULT = "DEFAULT",

package/dist/constants/FormStepTypes.js

@@ -25,6 +25,10 @@ export var FormStepTypes;
     FormStepTypes["MAPPER"] = "MAPPER";
     FormStepTypes["ENTITYVALUEPICKER"] = "ENTITYVALUEPICKER";
     FormStepTypes["API_SELECTOR"] = "API_SELECTOR";
+    FormStepTypes["LOCATION"] = "LOCATION";
+    FormStepTypes["NUMBER"] = "NUMBER";
+    FormStepTypes["CALENDAR"] = "CALENDAR";
+    FormStepTypes["BOOKING"] = "BOOKING";
 })(FormStepTypes || (FormStepTypes = {}));
 export var OptionTypes;
 (function (OptionTypes) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.51-test",
+  "version":"3.0.52-new-steps",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -16,6 +16,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@base-ui/react": "^1.6.0",
     "@reduxjs/toolkit": "2.11.2",
     "axios": "1.16.0",
     "date-fns": "4.1.0",