@drawbridge/components 0.0.50 → 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-3" : ""
+                    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-5W23JUIM.mjs";
+} from "./chunk-L5X6LHYZ.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-XWELEL6Z.mjs";
 import "./chunk-3SAKIKZP.mjs";

package/dist/{chunk-5W23JUIM.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-3" : ""
+                    className: addToCart ? "grid grid-cols-2 gap-5" : ""
                   },
                   children: [
                     addToCart && /* @__PURE__ */ jsx(

package/dist/input-number.js

@@ -107,15 +107,44 @@ var InputNumber = ({
   min,
   onChange,
   small,
+  step = 1,
   style,
   value,
   ...rest
 }) => {
-  const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
+  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);
   }
   ;
+  const dividerBorder = "1px solid " + inputStyle(style).borderColor;
   const increment = (0, import_react.useCallback)(
     () => {
       const newValue = Number(value || 0) + 1;
@@ -139,7 +168,10 @@ var InputNumber = ({
         "aria-label": "decrement",
         type: "button",
         onClick: decrement,
-        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
+        // split: decrement is leftmost, so its divider is on the right (before
+        // the input); after: it follows the input, so the divider is on its left.
+        style: layout === "split" ? { borderRight: dividerBorder } : { borderLeft: dividerBorder }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "span",
@@ -166,7 +198,9 @@ var InputNumber = ({
         "aria-label": "increment",
         type: "button",
         onClick: increment,
-        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
+        // increment is always rightmost, so its divider is always on its left.
+        style: { borderLeft: dividerBorder }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "span",
@@ -197,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: {
@@ -209,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,15 +19,44 @@ var InputNumber = ({
   min,
   onChange,
   small,
+  step = 1,
   style,
   value,
   ...rest
 }) => {
-  const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
+  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);
   }
   ;
+  const dividerBorder = "1px solid " + inputStyle(style).borderColor;
   const increment = useCallback(
     () => {
       const newValue = Number(value || 0) + 1;
@@ -51,7 +80,10 @@ var InputNumber = ({
         "aria-label": "decrement",
         type: "button",
         onClick: decrement,
-        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
+        // split: decrement is leftmost, so its divider is on the right (before
+        // the input); after: it follows the input, so the divider is on its left.
+        style: layout === "split" ? { borderRight: dividerBorder } : { borderLeft: dividerBorder }
       },
       children: /* @__PURE__ */ jsx(
         "span",
@@ -78,7 +110,9 @@ var InputNumber = ({
         "aria-label": "increment",
         type: "button",
         onClick: increment,
-        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
+        // increment is always rightmost, so its divider is always on its left.
+        style: { borderLeft: dividerBorder }
       },
       children: /* @__PURE__ */ jsx(
         "span",
@@ -109,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: {
@@ -121,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-3" : ""
+                    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-5W23JUIM.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.50",
+  "version": "0.0.52",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",