@geomak/ui 1.8.0 → 1.9.0

package/dist/index.d.cts

@@ -1457,11 +1457,14 @@ interface TextInputProps {
 declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
+    /** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
     step?: number;
-    value?: any;
+    /** Current value. `undefined` renders an empty field; a number renders that value. */
+    value?: number | '';
+    /** Fires with the next number. Empty input resolves to `undefined`. */
     onChange?: (e: {
         target: {
-            value: number;
+            value: number | undefined;
             id?: string;
             name?: string;
         };
@@ -1470,8 +1473,8 @@ interface NumberInputProps {
     htmlFor?: string;
     name?: string;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     inputStyle?: React$1.CSSProperties;
     labelStyle?: React$1.CSSProperties;
@@ -1480,12 +1483,42 @@ interface NumberInputProps {
     min?: number;
     max?: number;
     readOnly?: boolean;
-    [key: string]: any;
+    /** Optional precision for floating-point steps (number of decimal places to round to). */
+    precision?: number;
 }
 /**
- * Number input with increment / decrement controls.
+ * Numeric input with keyboard-accessible increment / decrement buttons.
+ *
+ * **What's improved over the previous version**
+ * - Step buttons are real `<button>` elements with `aria-label`, focus rings,
+ *   and proper keyboard activation (Enter / Space). The previous version used
+ *   `<span onClick>` which keyboard-only users could not reach.
+ * - Floating-point drift on decimal steps (`0.1 + 0.2 = 0.30000000000000004`)
+ *   is rounded out via a `precision` prop or auto-inferred from the step.
+ * - Empty input resolves to `undefined` instead of `NaN` — works with form
+ *   libraries (RHF, Formik) that treat empty as "no value".
+ * - The decrement chevron actually points down (the previous SVG was the up
+ *   chevron rotated, with the up chevron itself wrongly using the same path).
+ * - Width is a prop, not hardcoded `w-60`. Default is `w-full` so the input
+ *   flows with its parent.
+ *
+ * @example
+ * ```tsx
+ * const [qty, setQty] = useState<number | undefined>(1)
+ * <NumberInput
+ *   label="Quantity"
+ *   value={qty ?? ''}
+ *   onChange={({ target }) => setQty(target.value)}
+ *   min={0} max={99}
+ * />
+ * ```
+ *
+ * @example Decimal step
+ * ```tsx
+ * <NumberInput label="Tonnage" step={0.25} precision={2} />
+ * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
     value?: string;

package/dist/index.d.ts

@@ -1457,11 +1457,14 @@ interface TextInputProps {
 declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
+    /** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
     step?: number;
-    value?: any;
+    /** Current value. `undefined` renders an empty field; a number renders that value. */
+    value?: number | '';
+    /** Fires with the next number. Empty input resolves to `undefined`. */
     onChange?: (e: {
         target: {
-            value: number;
+            value: number | undefined;
             id?: string;
             name?: string;
         };
@@ -1470,8 +1473,8 @@ interface NumberInputProps {
     htmlFor?: string;
     name?: string;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     inputStyle?: React$1.CSSProperties;
     labelStyle?: React$1.CSSProperties;
@@ -1480,12 +1483,42 @@ interface NumberInputProps {
     min?: number;
     max?: number;
     readOnly?: boolean;
-    [key: string]: any;
+    /** Optional precision for floating-point steps (number of decimal places to round to). */
+    precision?: number;
 }
 /**
- * Number input with increment / decrement controls.
+ * Numeric input with keyboard-accessible increment / decrement buttons.
+ *
+ * **What's improved over the previous version**
+ * - Step buttons are real `<button>` elements with `aria-label`, focus rings,
+ *   and proper keyboard activation (Enter / Space). The previous version used
+ *   `<span onClick>` which keyboard-only users could not reach.
+ * - Floating-point drift on decimal steps (`0.1 + 0.2 = 0.30000000000000004`)
+ *   is rounded out via a `precision` prop or auto-inferred from the step.
+ * - Empty input resolves to `undefined` instead of `NaN` — works with form
+ *   libraries (RHF, Formik) that treat empty as "no value".
+ * - The decrement chevron actually points down (the previous SVG was the up
+ *   chevron rotated, with the up chevron itself wrongly using the same path).
+ * - Width is a prop, not hardcoded `w-60`. Default is `w-full` so the input
+ *   flows with its parent.
+ *
+ * @example
+ * ```tsx
+ * const [qty, setQty] = useState<number | undefined>(1)
+ * <NumberInput
+ *   label="Quantity"
+ *   value={qty ?? ''}
+ *   onChange={({ target }) => setQty(target.value)}
+ *   min={0} max={99}
+ * />
+ * ```
+ *
+ * @example Decimal step
+ * ```tsx
+ * <NumberInput label="Tonnage" step={0.25} precision={2} />
+ * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
     value?: string;

package/dist/index.js

@@ -2650,91 +2650,117 @@ function NumberInput({
   htmlFor,
   name,
   disabled,
-  layout,
+  layout = "horizontal",
   errorMessage,
   inputStyle,
   labelStyle,
   placeholder,
-  style = {},
+  style,
   min,
   max,
-  readOnly = false
+  readOnly = false,
+  precision
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
+  const round = (n) => {
+    if (inferredPrecision === 0) return n;
+    const factor = 10 ** inferredPrecision;
+    return Math.round(n * factor) / factor;
+  };
+  const numeric = typeof value === "number" ? value : 0;
   const onIncrement = () => {
-    let newValue = value ? parseFloat(value) + step : 0 + step;
-    if (max !== void 0 && newValue > max) return;
-    onChange?.({ target: { value: newValue, id: htmlFor, name } });
+    if (disabled || readOnly) return;
+    const next = round(numeric + step);
+    if (max !== void 0 && next > max) return;
+    onChange?.({ target: { value: next, id: htmlFor, name } });
   };
   const onDecrement = () => {
-    let newValue = value ? parseFloat(value) - step : 0 - step;
-    if (min !== void 0 && newValue < min) return;
-    onChange?.({ target: { value: newValue, id: htmlFor, name } });
+    if (disabled || readOnly) return;
+    const next = round(numeric - step);
+    if (min !== void 0 && next < min) return;
+    onChange?.({ target: { value: next, id: htmlFor, name } });
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between pr-1 pl-1", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              className: "text-md font-bold ml-1 w-60 select-none text-prussian-blue dark:text-white",
-              style: labelStyle,
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style,
-              className: `${disabled ? "bg-disabled" : "bg-white"} rounded-lg flex items-center pr-1 pl-2 w-max`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    min,
-                    max,
-                    autoComplete: "off",
-                    disabled,
-                    name,
-                    id: htmlFor,
-                    step,
-                    value,
-                    onChange,
-                    type: "number",
-                    className: "focus:outline-0 focus-visible:outline-0 h-9 w-60 text-prussian-blue disabled:bg-disabled disabled:cursor-not-allowed transition-all",
-                    style: inputStyle ?? {},
-                    placeholder: placeholder ?? "",
-                    readOnly
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      onClick: onIncrement,
-                      className: "rotate-180 cursor-pointer transition-all duration-300 hover:bg-ice rounded-sm",
-                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      onClick: onDecrement,
-                      className: "cursor-pointer transition-all duration-300 hover:bg-ice rounded-sm",
-                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-3 w-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error min-h-0", children: errorMessage })
+  const handleInputChange = (e) => {
+    const raw = e.target.value;
+    if (raw === "") {
+      onChange?.({ target: { value: void 0, id: htmlFor, name } });
+      return;
+    }
+    const parsed = Number(raw);
+    if (Number.isNaN(parsed)) return;
+    onChange?.({ target: { value: round(parsed), id: htmlFor, name } });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          style: labelStyle,
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style,
+          className: `flex items-center rounded-lg border ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:ring-2 focus-within:ring-accent transition-colors`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                min,
+                max,
+                autoComplete: "off",
+                disabled,
+                name,
+                id: htmlFor,
+                step,
+                value: value ?? "",
+                onChange: handleInputChange,
+                type: "number",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                className: "bg-transparent focus:outline-none h-9 w-full px-3 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                style: inputStyle ?? {},
+                placeholder: placeholder ?? "",
+                readOnly
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-border h-9", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  onClick: onIncrement,
+                  disabled: disabled || readOnly || max !== void 0 && numeric >= max,
+                  "aria-label": "Increase value",
+                  className: "flex-1 px-1.5 flex items-center justify-center hover:bg-surface-raised disabled:opacity-30 disabled:cursor-not-allowed transition-colors focus:outline-none focus-visible:bg-surface-raised",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  onClick: onDecrement,
+                  disabled: disabled || readOnly || min !== void 0 && numeric <= min,
+                  "aria-label": "Decrease value",
+                  className: "flex-1 px-1.5 flex items-center justify-center hover:bg-surface-raised disabled:opacity-30 disabled:cursor-not-allowed transition-colors focus:outline-none focus-visible:bg-surface-raised border-t border-border",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
 function Password({