@drawbridge/components 0.0.46 → 0.0.48

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
     }
   }
 );
@@ -672,7 +673,7 @@ var Product = ({
     "div",
     {
       ...{
-        className: "space-y-6 pb-12",
+        className: "space-y-6",
         style: {
           backgroundColor: resolved.background.color.rgb,
           color: resolved.text.color.rgb
@@ -684,7 +685,10 @@ var Product = ({
           "div",
           {
             ...{
-              className: "flex items-center h-48 " + (images.length > 1 && "pr-12")
+              className: "flex items-center " + (images.length > 1 ? "pr-12" : ""),
+              style: {
+                height: "12rem"
+              }
             },
             children: [
               images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -698,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)(
@@ -717,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
                           }
                         }
@@ -730,20 +746,35 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
-                    ref: emblaRef
+                    // Dimensions are inline rather than Tailwind size utilities:
+                    // those sizes live only in this package's dist, and a consuming
+                    // app's Tailwind scan of node_modules can lag and drop them,
+                    // silently collapsing the carousel. Inline styles are immune.
+                    className: "overflow-hidden rounded-3xl m-auto",
+                    ref: emblaRef,
+                    style: {
+                      width: "12rem",
+                      height: "12rem"
+                    }
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       ...{
-                        className: "flex h-full"
+                        className: "flex",
+                        style: {
+                          height: "100%"
+                        }
                       },
                       children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           ...{
-                            className: "min-w-0 flex-[0_0_100%] relative h-full bg-gray-100"
+                            className: "min-w-0 relative bg-gray-100",
+                            style: {
+                              flex: "0 0 100%",
+                              height: "100%"
+                            }
                           },
                           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             ImageComponent,

package/dist/advertisement.mjs

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

package/dist/{chunk-X7CR4JVY.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
     }
   }
 );
@@ -121,7 +122,7 @@ var Product = ({
     "div",
     {
       ...{
-        className: "space-y-6 pb-12",
+        className: "space-y-6",
         style: {
           backgroundColor: resolved.background.color.rgb,
           color: resolved.text.color.rgb
@@ -133,7 +134,10 @@ var Product = ({
           "div",
           {
             ...{
-              className: "flex items-center h-48 " + (images.length > 1 && "pr-12")
+              className: "flex items-center " + (images.length > 1 ? "pr-12" : ""),
+              style: {
+                height: "12rem"
+              }
             },
             children: [
               images.length > 1 && /* @__PURE__ */ jsx(
@@ -147,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(
@@ -166,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
                           }
                         }
@@ -179,20 +195,35 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
-                    ref: emblaRef
+                    // Dimensions are inline rather than Tailwind size utilities:
+                    // those sizes live only in this package's dist, and a consuming
+                    // app's Tailwind scan of node_modules can lag and drop them,
+                    // silently collapsing the carousel. Inline styles are immune.
+                    className: "overflow-hidden rounded-3xl m-auto",
+                    ref: emblaRef,
+                    style: {
+                      width: "12rem",
+                      height: "12rem"
+                    }
                   },
                   children: /* @__PURE__ */ jsx(
                     "div",
                     {
                       ...{
-                        className: "flex h-full"
+                        className: "flex",
+                        style: {
+                          height: "100%"
+                        }
                       },
                       children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
                         "div",
                         {
                           ...{
-                            className: "min-w-0 flex-[0_0_100%] relative h-full bg-gray-100"
+                            className: "min-w-0 relative bg-gray-100",
+                            style: {
+                              flex: "0 0 100%",
+                              height: "100%"
+                            }
                           },
                           children: /* @__PURE__ */ jsx(
                             ImageComponent,

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,17 @@ 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,
+        style: inline ? void 0 : {
+          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,17 @@ 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,
+        style: inline ? void 0 : {
+          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
     }
   }
 );
@@ -669,7 +670,7 @@ var Product = ({
     "div",
     {
       ...{
-        className: "space-y-6 pb-12",
+        className: "space-y-6",
         style: {
           backgroundColor: resolved.background.color.rgb,
           color: resolved.text.color.rgb
@@ -681,7 +682,10 @@ var Product = ({
           "div",
           {
             ...{
-              className: "flex items-center h-48 " + (images.length > 1 && "pr-12")
+              className: "flex items-center " + (images.length > 1 ? "pr-12" : ""),
+              style: {
+                height: "12rem"
+              }
             },
             children: [
               images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -695,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)(
@@ -714,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
                           }
                         }
@@ -727,20 +743,35 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
-                    ref: emblaRef
+                    // Dimensions are inline rather than Tailwind size utilities:
+                    // those sizes live only in this package's dist, and a consuming
+                    // app's Tailwind scan of node_modules can lag and drop them,
+                    // silently collapsing the carousel. Inline styles are immune.
+                    className: "overflow-hidden rounded-3xl m-auto",
+                    ref: emblaRef,
+                    style: {
+                      width: "12rem",
+                      height: "12rem"
+                    }
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       ...{
-                        className: "flex h-full"
+                        className: "flex",
+                        style: {
+                          height: "100%"
+                        }
                       },
                       children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           ...{
-                            className: "min-w-0 flex-[0_0_100%] relative h-full bg-gray-100"
+                            className: "min-w-0 relative bg-gray-100",
+                            style: {
+                              flex: "0 0 100%",
+                              height: "100%"
+                            }
                           },
                           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             ImageComponent,

package/dist/product.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   product_default
-} from "./chunk-X7CR4JVY.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.46",
+  "version": "0.0.48",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",