@drawbridge/components 0.0.51 → 0.0.52

package/dist/advertisement.js

@@ -824,15 +824,7 @@ var Product = ({
                     classNameScroll: "max-h-[4.5em]",
                     color: resolved.background.color.rgb
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "p",
-                    {
-                      ...{
-                        className: "text-sm"
-                      },
-                      children: product.description
-                    }
-                  )
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: product.description })
                 }
               )
             ]
@@ -871,7 +863,7 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: addToCart ? "grid grid-cols-2 gap-4" : ""
+                    className: addToCart ? "grid grid-cols-2 gap-5" : ""
                   },
                   children: [
                     addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(

package/dist/advertisement.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   product_default
-} from "./chunk-NFF5ANXM.mjs";
+} from "./chunk-L5X6LHYZ.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-XWELEL6Z.mjs";
 import "./chunk-3SAKIKZP.mjs";

package/dist/{chunk-NFF5ANXM.mjs → chunk-L5X6LHYZ.mjs}

@@ -273,15 +273,7 @@ var Product = ({
                     classNameScroll: "max-h-[4.5em]",
                     color: resolved.background.color.rgb
                   },
-                  children: /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      ...{
-                        className: "text-sm"
-                      },
-                      children: product.description
-                    }
-                  )
+                  children: /* @__PURE__ */ jsx("p", { children: product.description })
                 }
               )
             ]
@@ -320,7 +312,7 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: addToCart ? "grid grid-cols-2 gap-4" : ""
+                    className: addToCart ? "grid grid-cols-2 gap-5" : ""
                   },
                   children: [
                     addToCart && /* @__PURE__ */ jsx(

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
       }
     }
   );

package/dist/product.js

@@ -821,15 +821,7 @@ var Product = ({
                     classNameScroll: "max-h-[4.5em]",
                     color: resolved.background.color.rgb
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "p",
-                    {
-                      ...{
-                        className: "text-sm"
-                      },
-                      children: product.description
-                    }
-                  )
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: product.description })
                 }
               )
             ]
@@ -868,7 +860,7 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: addToCart ? "grid grid-cols-2 gap-4" : ""
+                    className: addToCart ? "grid grid-cols-2 gap-5" : ""
                   },
                   children: [
                     addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(

package/dist/product.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   product_default
-} from "./chunk-NFF5ANXM.mjs";
+} from "./chunk-L5X6LHYZ.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-XWELEL6Z.mjs";
 import "./chunk-3SAKIKZP.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",