@drawbridge/components 0.0.51 → 0.0.53

package/dist/input-name.js

@@ -23,7 +23,7 @@ __export(input_name_exports, {
 });
 module.exports = __toCommonJS(input_name_exports);
 
-// components/input-group.js
+// components/input-group-error.js
 var import_react = require("react");
 
 // components/icons/warning.js
@@ -52,8 +52,86 @@ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 );
 var warning_default = Warning;
 
-// components/input-group.js
+// components/input-group-error.js
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputGroupError = ({
+  className,
+  error,
+  label,
+  message,
+  style = {}
+}) => {
+  var _a, _b, _c, _d;
+  if (!(error || message)) {
+    return null;
+  }
+  const classes = [
+    "flex items-center justify-start space-x-2 py-1 rounded text-sm"
+  ];
+  if (error) {
+    classes.push("px-1.5");
+  }
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "p",
+    {
+      ...{
+        className: classes.join(" "),
+        ...error && {
+          style: {
+            backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
+            color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
+          }
+        }
+      },
+      children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            warning_default,
+            {
+              ...{
+                className: "w-4 h-4",
+                "aria-hidden": true
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "span",
+            {
+              ...{
+                className: "text-[0px] opacity-0 w-0 h-0 absolute"
+              },
+              children: [
+                label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+                  label,
+                  ": "
+                ] }) : null,
+                error
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            ...{
+              ...error && {
+                "aria-hidden": true
+              }
+            },
+            children: error || message
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_error_default = InputGroupError;
+
+// components/input-group.js
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputGroup = ({
   className,
   error,
@@ -63,7 +141,6 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
-  var _a, _b, _c, _d;
   const classes = [
     "input-group"
   ];
@@ -73,7 +150,7 @@ var InputGroup = ({
   if (error) {
     classes.push("error");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ...{
@@ -84,14 +161,14 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
             ...{
               className: "space-y-2"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "span",
                 {
                   ...{
@@ -104,55 +181,15 @@ var InputGroup = ({
             ]
           }
         ) : input,
-        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "p",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          input_group_error_default,
           {
             ...{
-              className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
-              ...error && {
-                style: {
-                  backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
-                  color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
-                }
-              }
-            },
-            children: [
-              error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  warning_default,
-                  {
-                    ...{
-                      className: "w-4 h-4",
-                      "aria-hidden": true
-                    }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "span",
-                  {
-                    ...{
-                      className: "text-[0px] opacity-0 w-0 h-0 absolute"
-                    },
-                    children: [
-                      label,
-                      ": ",
-                      error
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "span",
-                {
-                  ...{
-                    ...error && {
-                      "aria-hidden": true
-                    }
-                  },
-                  children: error || message
-                }
-              )
-            ]
+              error,
+              label,
+              message,
+              style
+            }
           }
         )
       ]
@@ -183,7 +220,7 @@ var inputStyle = (style) => {
 };
 
 // components/input-text.js
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputText = ({
   className,
   max,
@@ -197,7 +234,7 @@ var InputText = ({
     classes.push(className);
   }
   ;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
       ...{
@@ -213,7 +250,7 @@ var InputText = ({
 var input_text_default = InputText;
 
 // components/input-name.js
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputName = ({
   error,
   onChange,
@@ -223,12 +260,12 @@ var InputName = ({
 }) => {
   var _a, _b, _c;
   const inputs = {
-    first: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    first: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       input_group_default,
       {
         ...{
           error: (_a = error == null ? void 0 : error.first) == null ? void 0 : _a.message,
-          input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             input_text_default,
             {
               ...{
@@ -247,12 +284,12 @@ var InputName = ({
         }
       }
     ),
-    last: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    last: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       input_group_default,
       {
         ...{
           error: (_b = error == null ? void 0 : error.last) == null ? void 0 : _b.message,
-          input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             input_text_default,
             {
               ...{
@@ -271,12 +308,12 @@ var InputName = ({
         }
       }
     ),
-    name: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    name: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       input_group_default,
       {
         ...{
           error: (_c = error == null ? void 0 : error.name) == null ? void 0 : _c.message,
-          input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             input_text_default,
             {
               ...{
@@ -295,13 +332,13 @@ var InputName = ({
       }
     )
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ...{
         className: "flex flex-col space-y-4"
       },
-      children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           ...{

package/dist/input-name.mjs

@@ -3,7 +3,8 @@ import {
 } from "./chunk-B6Y2SNRW.mjs";
 import {
   input_group_default
-} from "./chunk-3SAKIKZP.mjs";
+} from "./chunk-DNK33H3K.mjs";
+import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-FJ7PKMAC.mjs";
 

package/dist/input-number.js

@@ -107,10 +107,38 @@ var InputNumber = ({
   min,
   onChange,
   small,
+  step = 1,
   style,
   value,
   ...rest
 }) => {
+  const decimal = !Number.isInteger(step);
+  const [draft, setDraft] = (0, import_react.useState)(
+    value === "" || value === null || value === void 0 ? "" : String(value)
+  );
+  (0, import_react.useEffect)(
+    () => {
+      const next = value === "" || value === null || value === void 0 ? "" : value;
+      if (Number(draft || 0) !== Number(next || 0)) {
+        setDraft(next === "" ? "" : String(next));
+      }
+      ;
+    },
+    // Intentionally excludes `draft`: this effect only reacts to external
+    // value changes, not to our own in-flight edits.
+    [value]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const handleChange = (0, import_react.useCallback)(
+    ({ target }) => {
+      const pattern = decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+      if (!pattern.test(target.value)) return;
+      setDraft(target.value);
+      const numeric = target.value === "" ? 0 : Number(target.value);
+      if (!Number.isNaN(numeric)) onChange(numeric);
+    },
+    [decimal, onChange]
+  );
   const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " overflow-hidden"];
   if (className) {
     classes.push(className);
@@ -203,9 +231,11 @@ var InputNumber = ({
         // an inline flex grow rather than a version-specific grow utility, so
         // this works in BOTH consumers (app-web is Tailwind v3, share is v4).
         className: "text-inherit bg-transparent focus:outline-none focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + (inline ? small ? " w-10" : " w-12" : "") + (layout === "split" ? " text-center" : ""),
-        inputMode: "numeric",
-        onChange: ({ target }) => onChange(Number(target.value)),
-        step: 1,
+        // `type="text"` (not "number") so in-progress decimal strings survive
+        // each render; inputMode still surfaces the numeric/decimal keypad on
+        // mobile and handleChange enforces the numeric character set.
+        inputMode: decimal ? "decimal" : "numeric",
+        onChange: handleChange,
         // The bordered container is the single visible border; strip the
         // native number-input border so it doesn't double up.
         style: {
@@ -215,8 +245,8 @@ var InputNumber = ({
             minWidth: 0
           }
         },
-        type: "number",
-        value
+        type: "text",
+        value: draft
       }
     }
   );

package/dist/input-number.mjs

@@ -9,7 +9,7 @@ import {
 } from "./chunk-FJ7PKMAC.mjs";
 
 // components/input-number.js
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var InputNumber = ({
   className,
@@ -19,10 +19,38 @@ var InputNumber = ({
   min,
   onChange,
   small,
+  step = 1,
   style,
   value,
   ...rest
 }) => {
+  const decimal = !Number.isInteger(step);
+  const [draft, setDraft] = useState(
+    value === "" || value === null || value === void 0 ? "" : String(value)
+  );
+  useEffect(
+    () => {
+      const next = value === "" || value === null || value === void 0 ? "" : value;
+      if (Number(draft || 0) !== Number(next || 0)) {
+        setDraft(next === "" ? "" : String(next));
+      }
+      ;
+    },
+    // Intentionally excludes `draft`: this effect only reacts to external
+    // value changes, not to our own in-flight edits.
+    [value]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const handleChange = useCallback(
+    ({ target }) => {
+      const pattern = decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+      if (!pattern.test(target.value)) return;
+      setDraft(target.value);
+      const numeric = target.value === "" ? 0 : Number(target.value);
+      if (!Number.isNaN(numeric)) onChange(numeric);
+    },
+    [decimal, onChange]
+  );
   const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " overflow-hidden"];
   if (className) {
     classes.push(className);
@@ -115,9 +143,11 @@ var InputNumber = ({
         // an inline flex grow rather than a version-specific grow utility, so
         // this works in BOTH consumers (app-web is Tailwind v3, share is v4).
         className: "text-inherit bg-transparent focus:outline-none focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + (inline ? small ? " w-10" : " w-12" : "") + (layout === "split" ? " text-center" : ""),
-        inputMode: "numeric",
-        onChange: ({ target }) => onChange(Number(target.value)),
-        step: 1,
+        // `type="text"` (not "number") so in-progress decimal strings survive
+        // each render; inputMode still surfaces the numeric/decimal keypad on
+        // mobile and handleChange enforces the numeric character set.
+        inputMode: decimal ? "decimal" : "numeric",
+        onChange: handleChange,
         // The bordered container is the single visible border; strip the
         // native number-input border so it doesn't double up.
         style: {
@@ -127,8 +157,8 @@ var InputNumber = ({
             minWidth: 0
           }
         },
-        type: "number",
-        value
+        type: "text",
+        value: draft
       }
     }
   );