@drawbridge/components 0.0.73 → 0.0.75

package/dist/advertisement.js

@@ -36,11 +36,14 @@ module.exports = __toCommonJS(advertisement_exports);
 var import_cdn2 = require("@drawbridge/drawbridge-utils/cdn");
 
 // components/product.js
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_cdn = require("@drawbridge/shopify/cdn");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 
+// components/input-group.js
+var import_react2 = require("react");
+
 // components/input-group-error.js
 var import_react = require("react");
 
@@ -150,12 +153,10 @@ var input_group_error_default = InputGroupError;
 
 // components/input-group.js
 var import_jsx_runtime3 = (
-  // A real <label> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
+  // A real <label> (not a bare <span>) so the field name is announced by
+  // screen readers, clicking the text focuses the control, and
+  // getByLabel()/role queries can find it. The association comes from
+  // `htmlFor`, never from the wrapping — see the note above the id.
   require("react/jsx-runtime")
 );
 var InputGroup = ({
@@ -167,6 +168,9 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
+  const generated = (0, import_react2.useId)();
+  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
+  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
   const classes = [
     "input-group"
   ];
@@ -191,7 +195,8 @@ var InputGroup = ({
           "label",
           {
             ...{
-              className: "space-y-2 block"
+              className: "space-y-2 block",
+              htmlFor: id
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -203,10 +208,10 @@ var InputGroup = ({
                   children: label
                 }
               ),
-              input
+              control
             ]
           }
-        ) : input,
+        ) : control,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           input_group_error_default,
           {
@@ -225,7 +230,7 @@ var InputGroup = ({
 var input_group_default = InputGroup;
 
 // components/input-select.js
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // components/icons/chevron-down.js
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -312,8 +317,8 @@ var InputSelect = ({
   value,
   ...rest
 }) => {
-  const [keyboard, setKeyboard] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const [keyboard, setKeyboard] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     const down = (e) => {
       if (e.key === "Tab") setKeyboard(true);
     };
@@ -391,9 +396,9 @@ var InputSelect = ({
 var input_select_default = InputSelect;
 
 // components/wrapper-gradient.js
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var WrapperGradientContext = (0, import_react3.createContext)(null);
+var WrapperGradientContext = (0, import_react4.createContext)(null);
 var WrapperGradient = ({
   children,
   className,
@@ -451,14 +456,14 @@ var WrapperGradient = ({
     left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
     right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
   };
-  const containerRef = (0, import_react3.useRef)(null);
-  const [scroll, setScroll] = (0, import_react3.useState)({
+  const containerRef = (0, import_react4.useRef)(null);
+  const [scroll, setScroll] = (0, import_react4.useState)({
     top: 0,
     left: 0,
     atBottom: true,
     atRight: true
   });
-  (0, import_react3.useEffect)(
+  (0, import_react4.useEffect)(
     () => {
       const container = containerRef.current;
       const handleScroll = () => {
@@ -508,7 +513,7 @@ var WrapperGradient = ({
     },
     [horizontal]
   );
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({
       atBottom: scroll.atBottom,
       atRight: scroll.atRight
@@ -679,14 +684,14 @@ var Product = ({
     }
   };
   const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
-  const available = (0, import_react4.useMemo)(
+  const available = (0, import_react5.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
   );
-  const [activeImage, setActiveImage] = (0, import_react4.useState)(0);
+  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
   const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
-  const images = (0, import_react4.useMemo)(
+  const images = (0, import_react5.useMemo)(
     () => {
       const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
       const result = [];
@@ -711,7 +716,7 @@ var Product = ({
     },
     [product]
   );
-  (0, import_react4.useEffect)(
+  (0, import_react5.useEffect)(
     () => {
       if (!emblaApi) return;
       const onSelect = () => {

package/dist/advertisement.mjs

@@ -1,12 +1,12 @@
 "use client";
 import {
   product_default
-} from "./chunk-W2NXIBPS.mjs";
+} from "./chunk-PURM4QR2.mjs";
 import "./chunk-PT7UR6AO.mjs";
 import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-IIP5OKPN.mjs";
+import "./chunk-MKBY26H7.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import {

package/dist/{chunk-IIP5OKPN.mjs → chunk-MKBY26H7.mjs}

@@ -3,6 +3,7 @@ import {
 } from "./chunk-OHJMWJAQ.mjs";
 
 // components/input-group.js
+import { cloneElement, isValidElement, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var InputGroup = ({
   className,
@@ -13,6 +14,9 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
+  const generated = useId();
+  const id = isValidElement(input) ? input.props.id || generated : generated;
+  const control = isValidElement(input) && !input.props.id ? cloneElement(input, { id }) : input;
   const classes = [
     "input-group"
   ];
@@ -34,17 +38,16 @@ var InputGroup = ({
       },
       children: [
         label ? (
-          // A real <label> wrapping the control (not a bare <span>) so the label
-          // is programmatically associated with the input — screen readers
-          // announce the field name, clicking the text focuses the input, and
-          // getByLabel()/role queries can find it. Wrapping gives the association
-          // implicitly, so it works for any control passed via `input` without
-          // having to thread an id through every input component.
+          // A real <label> (not a bare <span>) so the field name is announced by
+          // screen readers, clicking the text focuses the control, and
+          // getByLabel()/role queries can find it. The association comes from
+          // `htmlFor`, never from the wrapping — see the note above the id.
           /* @__PURE__ */ jsxs(
             "label",
             {
               ...{
-                className: "space-y-2 block"
+                className: "space-y-2 block",
+                htmlFor: id
               },
               children: [
                 /* @__PURE__ */ jsx(
@@ -56,11 +59,11 @@ var InputGroup = ({
                     children: label
                   }
                 ),
-                input
+                control
               ]
             }
           )
-        ) : input,
+        ) : control,
         /* @__PURE__ */ jsx(
           input_group_error_default,
           {

package/dist/{chunk-W2NXIBPS.mjs → chunk-PURM4QR2.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2ZYGRSSA.mjs";
 import {
   input_group_default
-} from "./chunk-IIP5OKPN.mjs";
+} from "./chunk-MKBY26H7.mjs";
 import {
   buttonStyle,
   headerStyle,

package/dist/input-group.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,6 +23,7 @@ __export(input_group_exports, {
   default: () => input_group_default
 });
 module.exports = __toCommonJS(input_group_exports);
+var import_react2 = require("react");
 
 // components/input-group-error.js
 var import_react = require("react");
@@ -132,12 +134,10 @@ var input_group_error_default = InputGroupError;
 
 // components/input-group.js
 var import_jsx_runtime3 = (
-  // A real <label> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
+  // A real <label> (not a bare <span>) so the field name is announced by
+  // screen readers, clicking the text focuses the control, and
+  // getByLabel()/role queries can find it. The association comes from
+  // `htmlFor`, never from the wrapping — see the note above the id.
   require("react/jsx-runtime")
 );
 var InputGroup = ({
@@ -149,6 +149,9 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
+  const generated = (0, import_react2.useId)();
+  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
+  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
   const classes = [
     "input-group"
   ];
@@ -173,7 +176,8 @@ var InputGroup = ({
           "label",
           {
             ...{
-              className: "space-y-2 block"
+              className: "space-y-2 block",
+              htmlFor: id
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -185,10 +189,10 @@ var InputGroup = ({
                   children: label
                 }
               ),
-              input
+              control
             ]
           }
-        ) : input,
+        ) : control,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           input_group_error_default,
           {

package/dist/input-group.mjs

@@ -1,6 +1,7 @@
+"use client";
 import {
   input_group_default
-} from "./chunk-IIP5OKPN.mjs";
+} from "./chunk-MKBY26H7.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 export {

package/dist/input-name.js

@@ -23,6 +23,9 @@ __export(input_name_exports, {
 });
 module.exports = __toCommonJS(input_name_exports);
 
+// components/input-group.js
+var import_react2 = require("react");
+
 // components/input-group-error.js
 var import_react = require("react");
 
@@ -132,12 +135,10 @@ var input_group_error_default = InputGroupError;
 
 // components/input-group.js
 var import_jsx_runtime3 = (
-  // A real <label> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
+  // A real <label> (not a bare <span>) so the field name is announced by
+  // screen readers, clicking the text focuses the control, and
+  // getByLabel()/role queries can find it. The association comes from
+  // `htmlFor`, never from the wrapping — see the note above the id.
   require("react/jsx-runtime")
 );
 var InputGroup = ({
@@ -149,6 +150,9 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
+  const generated = (0, import_react2.useId)();
+  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
+  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
   const classes = [
     "input-group"
   ];
@@ -173,7 +177,8 @@ var InputGroup = ({
           "label",
           {
             ...{
-              className: "space-y-2 block"
+              className: "space-y-2 block",
+              htmlFor: id
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -185,10 +190,10 @@ var InputGroup = ({
                   children: label
                 }
               ),
-              input
+              control
             ]
           }
-        ) : input,
+        ) : control,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           input_group_error_default,
           {

package/dist/input-name.mjs

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Y466XTIK.mjs";
 import {
   input_group_default
-} from "./chunk-IIP5OKPN.mjs";
+} from "./chunk-MKBY26H7.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-6F23WKP2.mjs";

package/dist/input-number.js

@@ -268,9 +268,19 @@ var InputNumber = ({
         // the utility could render zero-width. inputStyle supplies the color.
         style: {
           ...inputStyle(style),
-          ...inline && {
+          ...inline ? {
             borderStyle: "solid",
             borderWidth: 1
+          } : {
+            // The `p-0` above cannot be trusted to cancel `.input`'s padding.
+            // share defines `.input` UNLAYERED after `@import 'tailwindcss'`,
+            // and v4 emits every utility inside `@layer utilities` — unlayered
+            // rules beat layered ones at any specificity, so `.input`'s
+            // py-2/px-3 won and the stepper row rendered 60px tall with the
+            // buttons inset from the border. An inline style outranks both
+            // layers; app-web (v3, `.input` in @layer base, where `p-0`
+            // already wins) is unchanged.
+            padding: 0
           }
         }
       },

package/dist/input-number.mjs

@@ -178,9 +178,19 @@ var InputNumber = ({
         // the utility could render zero-width. inputStyle supplies the color.
         style: {
           ...inputStyle(style),
-          ...inline && {
+          ...inline ? {
             borderStyle: "solid",
             borderWidth: 1
+          } : {
+            // The `p-0` above cannot be trusted to cancel `.input`'s padding.
+            // share defines `.input` UNLAYERED after `@import 'tailwindcss'`,
+            // and v4 emits every utility inside `@layer utilities` — unlayered
+            // rules beat layered ones at any specificity, so `.input`'s
+            // py-2/px-3 won and the stepper row rendered 60px tall with the
+            // buttons inset from the border. An inline style outranks both
+            // layers; app-web (v3, `.input` in @layer base, where `p-0`
+            // already wins) is unchanged.
+            padding: 0
           }
         }
       },

package/dist/input-phone.js

@@ -96,7 +96,10 @@ var InputPhone = ({
   countries = [],
   onChange,
   style,
-  value = {}
+  value = {},
+  // Reaches the number field, not the country select. InputGroup names its
+  // control by id, and the number is the field the label means.
+  ...rest
 }) => {
   var _a, _b;
   const [country, setCountry] = (0, import_react.useState)((value == null ? void 0 : value.country) || (countries == null ? void 0 : countries[0]));
@@ -225,6 +228,7 @@ var InputPhone = ({
               import_input.default,
               {
                 ...{
+                  ...rest,
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
                   onChange: (val) => {

package/dist/input-phone.mjs

@@ -19,7 +19,10 @@ var InputPhone = ({
   countries = [],
   onChange,
   style,
-  value = {}
+  value = {},
+  // Reaches the number field, not the country select. InputGroup names its
+  // control by id, and the number is the field the label means.
+  ...rest
 }) => {
   var _a, _b;
   const [country, setCountry] = useState((value == null ? void 0 : value.country) || (countries == null ? void 0 : countries[0]));
@@ -148,6 +151,7 @@ var InputPhone = ({
               Input,
               {
                 ...{
+                  ...rest,
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
                   onChange: (val) => {

package/dist/product.js

@@ -33,11 +33,14 @@ __export(product_exports, {
   default: () => product_default
 });
 module.exports = __toCommonJS(product_exports);
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_cdn = require("@drawbridge/shopify/cdn");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 
+// components/input-group.js
+var import_react2 = require("react");
+
 // components/input-group-error.js
 var import_react = require("react");
 
@@ -147,12 +150,10 @@ var input_group_error_default = InputGroupError;
 
 // components/input-group.js
 var import_jsx_runtime3 = (
-  // A real <label> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
+  // A real <label> (not a bare <span>) so the field name is announced by
+  // screen readers, clicking the text focuses the control, and
+  // getByLabel()/role queries can find it. The association comes from
+  // `htmlFor`, never from the wrapping — see the note above the id.
   require("react/jsx-runtime")
 );
 var InputGroup = ({
@@ -164,6 +165,9 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
+  const generated = (0, import_react2.useId)();
+  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
+  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
   const classes = [
     "input-group"
   ];
@@ -188,7 +192,8 @@ var InputGroup = ({
           "label",
           {
             ...{
-              className: "space-y-2 block"
+              className: "space-y-2 block",
+              htmlFor: id
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -200,10 +205,10 @@ var InputGroup = ({
                   children: label
                 }
               ),
-              input
+              control
             ]
           }
-        ) : input,
+        ) : control,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           input_group_error_default,
           {
@@ -222,7 +227,7 @@ var InputGroup = ({
 var input_group_default = InputGroup;
 
 // components/input-select.js
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // components/icons/chevron-down.js
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -309,8 +314,8 @@ var InputSelect = ({
   value,
   ...rest
 }) => {
-  const [keyboard, setKeyboard] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const [keyboard, setKeyboard] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     const down = (e) => {
       if (e.key === "Tab") setKeyboard(true);
     };
@@ -388,9 +393,9 @@ var InputSelect = ({
 var input_select_default = InputSelect;
 
 // components/wrapper-gradient.js
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var WrapperGradientContext = (0, import_react3.createContext)(null);
+var WrapperGradientContext = (0, import_react4.createContext)(null);
 var WrapperGradient = ({
   children,
   className,
@@ -448,14 +453,14 @@ var WrapperGradient = ({
     left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
     right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
   };
-  const containerRef = (0, import_react3.useRef)(null);
-  const [scroll, setScroll] = (0, import_react3.useState)({
+  const containerRef = (0, import_react4.useRef)(null);
+  const [scroll, setScroll] = (0, import_react4.useState)({
     top: 0,
     left: 0,
     atBottom: true,
     atRight: true
   });
-  (0, import_react3.useEffect)(
+  (0, import_react4.useEffect)(
     () => {
       const container = containerRef.current;
       const handleScroll = () => {
@@ -505,7 +510,7 @@ var WrapperGradient = ({
     },
     [horizontal]
   );
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({
       atBottom: scroll.atBottom,
       atRight: scroll.atRight
@@ -676,14 +681,14 @@ var Product = ({
     }
   };
   const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
-  const available = (0, import_react4.useMemo)(
+  const available = (0, import_react5.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
   );
-  const [activeImage, setActiveImage] = (0, import_react4.useState)(0);
+  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
   const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
-  const images = (0, import_react4.useMemo)(
+  const images = (0, import_react5.useMemo)(
     () => {
       const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
       const result = [];
@@ -708,7 +713,7 @@ var Product = ({
     },
     [product]
   );
-  (0, import_react4.useEffect)(
+  (0, import_react5.useEffect)(
     () => {
       if (!emblaApi) return;
       const onSelect = () => {

package/dist/product.mjs

@@ -1,12 +1,12 @@
 "use client";
 import {
   product_default
-} from "./chunk-W2NXIBPS.mjs";
+} from "./chunk-PURM4QR2.mjs";
 import "./chunk-PT7UR6AO.mjs";
 import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-IIP5OKPN.mjs";
+import "./chunk-MKBY26H7.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-6F23WKP2.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -415,7 +415,7 @@
   "devDependencies": {
     "@types/react": "18.0.0",
     "tsup": "8.5.1",
-    "@drawbridge/drawbridge-agents": "0.1.40"
+    "@drawbridge/drawbridge-agents": "0.1.47"
   },
   "dependencies": {
     "embla-carousel-fade": "8.6.0",