@geomak/ui 1.8.0 → 1.9.0

package/dist/index.cjs

@@ -2682,91 +2682,117 @@ function NumberInput({
   htmlFor,
   name,
   disabled,
-  layout,
+  layout = "horizontal",
   errorMessage,
   inputStyle,
   labelStyle,
   placeholder,
-  style = {},
+  style,
   min,
   max,
-  readOnly = false
+  readOnly = false,
+  precision
 }) {
+  const errorId = React9.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__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between pr-1 pl-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style,
-              className: `${disabled ? "bg-disabled" : "bg-white"} rounded-lg flex items-center pr-1 pl-2 w-max`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      onClick: onIncrement,
-                      className: "rotate-180 cursor-pointer transition-all duration-300 hover:bg-ice rounded-sm",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-3 w-3", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      onClick: onDecrement,
-                      className: "cursor-pointer transition-all duration-300 hover:bg-ice rounded-sm",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-3 w-3", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          style: labelStyle,
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-l border-border h-9", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
 function Password({