@drawbridge/components 0.0.47 → 0.0.49

package/dist/advertisement.js

@@ -572,13 +572,14 @@ var loader_default = Loader;
 
 // components/product.js
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "img",
   {
     ...{
       alt,
       className,
-      src
+      src,
+      style
     }
   }
 );
@@ -701,14 +702,21 @@ var Product = ({
                     "button",
                     {
                       ...{
-                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border border-transparent",
+                        // Active state: a 2px border in the button (accent) color so
+                        // the selected thumbnail reads as uniquely selected. Only the
+                        // border color is set inline — never a full inputStyle, whose
+                        // borderRadius would override the `rounded` class and square
+                        // off the active thumb.
+                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border-2 border-transparent",
                         onClick: () => {
                           setActiveImage(key);
                           emblaApi == null ? void 0 : emblaApi.scrollTo(key);
                         },
                         type: "button",
                         ...activeImage === key && {
-                          style: inputStyle(resolved)
+                          style: {
+                            borderColor: buttonStyle(resolved).backgroundColor
+                          }
                         }
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -720,6 +728,11 @@ var Product = ({
                             fill: true,
                             sizes: "48px",
                             src: (0, import_cdn.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                            ...activeImage === key && {
+                              style: {
+                                opacity: 0.6
+                              }
+                            },
                             unoptimized: true
                           }
                         }

package/dist/advertisement.mjs

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

package/dist/{chunk-V3RUI64W.mjs → chunk-FFZY3FQL.mjs}

@@ -21,13 +21,14 @@ import useEmblaCarousel from "embla-carousel-react";
 import { cdnShopify } from "@drawbridge/shopify/cdn";
 import { formatCurrency } from "@drawbridge/drawbridge-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
+var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ jsx(
   "img",
   {
     ...{
       alt,
       className,
-      src
+      src,
+      style
     }
   }
 );
@@ -150,14 +151,21 @@ var Product = ({
                     "button",
                     {
                       ...{
-                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border border-transparent",
+                        // Active state: a 2px border in the button (accent) color so
+                        // the selected thumbnail reads as uniquely selected. Only the
+                        // border color is set inline — never a full inputStyle, whose
+                        // borderRadius would override the `rounded` class and square
+                        // off the active thumb.
+                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border-2 border-transparent",
                         onClick: () => {
                           setActiveImage(key);
                           emblaApi == null ? void 0 : emblaApi.scrollTo(key);
                         },
                         type: "button",
                         ...activeImage === key && {
-                          style: inputStyle(resolved)
+                          style: {
+                            borderColor: buttonStyle(resolved).backgroundColor
+                          }
                         }
                       },
                       children: /* @__PURE__ */ jsx(
@@ -169,6 +177,11 @@ var Product = ({
                             fill: true,
                             sizes: "48px",
                             src: cdnShopify(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                            ...activeImage === key && {
+                              style: {
+                                opacity: 0.6
+                              }
+                            },
                             unoptimized: true
                           }
                         }

package/dist/input-number.js

@@ -102,7 +102,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputNumber = ({
   className,
   inline = false,
-  layout = "split",
+  layout = "after",
   max,
   min,
   onChange,
@@ -111,7 +111,7 @@ var InputNumber = ({
   value,
   ...rest
 }) => {
-  const classes = [(inline ? "inline-flex" : "flex") + " items-center border border-inherit divide-x divide-inherit rounded-sm overflow-hidden"];
+  const classes = [(inline ? "inline-flex items-center border border-inherit rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
   if (className) {
     classes.push(className);
   }
@@ -193,10 +193,22 @@ var InputNumber = ({
         ...rest,
         max,
         min,
-        className: "min-w-0 text-inherit bg-transparent focus:outline-hidden focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + " " + (inline ? small ? "w-10" : "w-12" : "grow-1 w-0") + (layout === "split" ? " text-center" : ""),
+        // Focus reset uses the v3+v4-common outline utility, and the fill is
+        // 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,
+        // The bordered container is the single visible border; strip the
+        // native number-input border so it doesn't double up.
+        style: {
+          border: 0,
+          ...inline ? {} : {
+            flex: "1 1 0%",
+            minWidth: 0
+          }
+        },
         type: "number",
         value
       }

package/dist/input-number.mjs

@@ -14,7 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var InputNumber = ({
   className,
   inline = false,
-  layout = "split",
+  layout = "after",
   max,
   min,
   onChange,
@@ -23,7 +23,7 @@ var InputNumber = ({
   value,
   ...rest
 }) => {
-  const classes = [(inline ? "inline-flex" : "flex") + " items-center border border-inherit divide-x divide-inherit rounded-sm overflow-hidden"];
+  const classes = [(inline ? "inline-flex items-center border border-inherit rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
   if (className) {
     classes.push(className);
   }
@@ -105,10 +105,22 @@ var InputNumber = ({
         ...rest,
         max,
         min,
-        className: "min-w-0 text-inherit bg-transparent focus:outline-hidden focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + " " + (inline ? small ? "w-10" : "w-12" : "grow-1 w-0") + (layout === "split" ? " text-center" : ""),
+        // Focus reset uses the v3+v4-common outline utility, and the fill is
+        // 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,
+        // The bordered container is the single visible border; strip the
+        // native number-input border so it doesn't double up.
+        style: {
+          border: 0,
+          ...inline ? {} : {
+            flex: "1 1 0%",
+            minWidth: 0
+          }
+        },
         type: "number",
         value
       }

package/dist/product.js

@@ -569,13 +569,14 @@ var loader_default = Loader;
 
 // components/product.js
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "img",
   {
     ...{
       alt,
       className,
-      src
+      src,
+      style
     }
   }
 );
@@ -698,14 +699,21 @@ var Product = ({
                     "button",
                     {
                       ...{
-                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border border-transparent",
+                        // Active state: a 2px border in the button (accent) color so
+                        // the selected thumbnail reads as uniquely selected. Only the
+                        // border color is set inline — never a full inputStyle, whose
+                        // borderRadius would override the `rounded` class and square
+                        // off the active thumb.
+                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border-2 border-transparent",
                         onClick: () => {
                           setActiveImage(key);
                           emblaApi == null ? void 0 : emblaApi.scrollTo(key);
                         },
                         type: "button",
                         ...activeImage === key && {
-                          style: inputStyle(resolved)
+                          style: {
+                            borderColor: buttonStyle(resolved).backgroundColor
+                          }
                         }
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -717,6 +725,11 @@ var Product = ({
                             fill: true,
                             sizes: "48px",
                             src: (0, import_cdn.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                            ...activeImage === key && {
+                              style: {
+                                opacity: 0.6
+                              }
+                            },
                             unoptimized: true
                           }
                         }

package/dist/product.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   product_default
-} from "./chunk-V3RUI64W.mjs";
+} from "./chunk-FFZY3FQL.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.47",
+  "version": "0.0.49",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",