@drawbridge/components 0.0.37 → 0.0.40

package/dist/advertisement.mjs

@@ -0,0 +1,95 @@
+"use client";
+import {
+  product_default
+} from "./chunk-HDOA3Y3U.mjs";
+import "./chunk-2ZYGRSSA.mjs";
+import "./chunk-XWELEL6Z.mjs";
+import {
+  card_advertisement_default
+} from "./chunk-TJNIR4PF.mjs";
+import "./chunk-7ZLMDYBR.mjs";
+import "./chunk-Q3UIVGPQ.mjs";
+import "./chunk-BD3TDNJE.mjs";
+import "./chunk-FYA7EAMR.mjs";
+import "./chunk-FJXG3REN.mjs";
+
+// components/advertisement.js
+import { jsx } from "react/jsx-runtime";
+var Advertisement = ({
+  action = null,
+  affiliate,
+  brand,
+  button,
+  campaign,
+  disabled = false,
+  errors,
+  file,
+  header,
+  id,
+  ImageComponent,
+  lead,
+  onAdd,
+  onBuy,
+  onClick = () => {
+  },
+  onVariantChange,
+  onVariantSelect = () => {
+  },
+  organization,
+  page,
+  preview = false,
+  product,
+  style = {},
+  title,
+  url,
+  variant,
+  VideoComponent
+}) => {
+  if (product) {
+    return /* @__PURE__ */ jsx(
+      product_default,
+      {
+        ...{
+          action,
+          disabled: preview || disabled,
+          errors,
+          header,
+          ImageComponent,
+          onAdd,
+          onBuy,
+          onVariantChange,
+          product,
+          style,
+          variant
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    card_advertisement_default,
+    {
+      ...{
+        advertisement: id,
+        affiliate,
+        asset: file,
+        brand: brand || { style },
+        button,
+        campaign,
+        ImageComponent,
+        lead,
+        onClick,
+        onVariantSelect,
+        organization,
+        page,
+        preview,
+        title,
+        url,
+        VideoComponent
+      }
+    }
+  );
+};
+var advertisement_default = Advertisement;
+export {
+  advertisement_default as default
+};

package/dist/card-advertisement.js

@@ -69,10 +69,23 @@ var CardAdvertisement = ({
   url,
   VideoComponent = DefaultVideo
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
   const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
   const hasVariants = variants.length > 0;
   const [selectedVariant, setSelectedVariant] = (0, import_react.useState)(variants[0] || null);
+  const [keyboard, setKeyboard] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const down = (e) => {
+      if (e.key === "Tab") setKeyboard(true);
+    };
+    const click = () => setKeyboard(false);
+    window.addEventListener("keydown", down);
+    window.addEventListener("mousedown", click);
+    return () => {
+      window.removeEventListener("keydown", down);
+      window.removeEventListener("mousedown", click);
+    };
+  }, []);
   const style = {
     background: {
       color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
@@ -100,7 +113,7 @@ var CardAdvertisement = ({
       "block w-full space-y-2 border border-gray rounded p-6"
     ],
     content: [
-      "flex flex-col items-center justify-between space-x-4 text-left text-sm rounded"
+      "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded"
     ]
   };
   const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
@@ -186,7 +199,8 @@ var CardAdvertisement = ({
               style: {
                 ...fonts == null ? void 0 : fonts.body,
                 color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
-                gap: "10px"
+                gap: "10px",
+                marginTop: "10px"
               }
             },
             children: [
@@ -213,7 +227,8 @@ var CardAdvertisement = ({
                       {
                         ...{
                           style: {
-                            fontSize: "14px"
+                            fontSize: "14px",
+                            marginBottom: "10px"
                           }
                         },
                         children: [
@@ -242,32 +257,90 @@ var CardAdvertisement = ({
                         ]
                       }
                     ),
-                    variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "select",
+                    variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
                       {
                         ...{
-                          className: "w-full text-xs border px-2 py-1 bg-transparent",
-                          onChange: (e) => {
-                            const variant = variants.find((v) => v.id === e.target.value);
-                            if (variant) setSelectedVariant(variant);
-                          },
-                          style: {
-                            borderColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb.replace(")", ", 0.3)"),
-                            borderRadius: ((_p = (_o = brand == null ? void 0 : brand.style) == null ? void 0 : _o.button) == null ? void 0 : _p.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
-                            color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
-                          },
-                          value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
+                          className: "relative w-full"
                         },
-                        children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "option",
-                          {
-                            ...{
-                              value: variant.id
-                            },
-                            children: variant.title
-                          },
-                          variant.id
-                        ))
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "select",
+                            {
+                              ...{
+                                className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1 focus-visible:!ring-blue-600" : "focus-visible:!outline-0 focus-visible:!ring-0"),
+                                onChange: (e) => {
+                                  const variant = variants.find((v) => v.id === e.target.value);
+                                  if (variant) setSelectedVariant(variant);
+                                },
+                                style: {
+                                  appearance: "none",
+                                  backgroundColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb,
+                                  backgroundImage: "none",
+                                  borderColor: (_p = (_o = style == null ? void 0 : style.text) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb,
+                                  borderRadius: ((_r = (_q = brand == null ? void 0 : brand.style) == null ? void 0 : _q.button) == null ? void 0 : _r.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
+                                  color: (_t = (_s = style == null ? void 0 : style.text) == null ? void 0 : _s.color) == null ? void 0 : _t.rgb,
+                                  WebkitAppearance: "none"
+                                },
+                                value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
+                              },
+                              children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "option",
+                                {
+                                  ...{
+                                    value: variant.id
+                                  },
+                                  children: variant.title
+                                },
+                                variant.id
+                              ))
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              ...{
+                                "aria-hidden": true,
+                                style: {
+                                  alignItems: "center",
+                                  bottom: 0,
+                                  display: "flex",
+                                  paddingRight: "0.625rem",
+                                  pointerEvents: "none",
+                                  position: "absolute",
+                                  right: 0,
+                                  top: 0
+                                }
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "svg",
+                                {
+                                  ...{
+                                    style: {
+                                      height: "1.25rem",
+                                      width: "1.25rem"
+                                    },
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: 1.5,
+                                    viewBox: "0 0 24 24",
+                                    xmlns: "http://www.w3.org/2000/svg"
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    "path",
+                                    {
+                                      ...{
+                                        d: "M19.5 8.25l-7.5 7.5-7.5-7.5",
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round"
+                                      }
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
+                        ]
                       }
                     )
                   ]
@@ -284,10 +357,10 @@ var CardAdvertisement = ({
                     } : preview ? () => {
                     } : onClick,
                     style: {
-                      backgroundColor: ((_v = (_u = (_t = (_s = brand == null ? void 0 : brand.style) == null ? void 0 : _s.button) == null ? void 0 : _t.background) == null ? void 0 : _u.color) == null ? void 0 : _v.hex) || ((_x = (_w = style == null ? void 0 : style.text) == null ? void 0 : _w.color) == null ? void 0 : _x.hex),
-                      borderColor: ((_B = (_A = (_z = (_y = brand == null ? void 0 : brand.style) == null ? void 0 : _y.button) == null ? void 0 : _z.background) == null ? void 0 : _A.color) == null ? void 0 : _B.hex) || ((_D = (_C = style == null ? void 0 : style.text) == null ? void 0 : _C.color) == null ? void 0 : _D.hex),
-                      borderRadius: ((_F = (_E = brand == null ? void 0 : brand.style) == null ? void 0 : _E.button) == null ? void 0 : _F.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
-                      color: ((_J = (_I = (_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.text) == null ? void 0 : _I.color) == null ? void 0 : _J.hex) || ((_L = (_K = style == null ? void 0 : style.background) == null ? void 0 : _K.color) == null ? void 0 : _L.hex)
+                      backgroundColor: ((_x = (_w = (_v = (_u = brand == null ? void 0 : brand.style) == null ? void 0 : _u.button) == null ? void 0 : _v.background) == null ? void 0 : _w.color) == null ? void 0 : _x.hex) || ((_z = (_y = style == null ? void 0 : style.text) == null ? void 0 : _y.color) == null ? void 0 : _z.hex),
+                      borderColor: ((_D = (_C = (_B = (_A = brand == null ? void 0 : brand.style) == null ? void 0 : _A.button) == null ? void 0 : _B.background) == null ? void 0 : _C.color) == null ? void 0 : _D.hex) || ((_F = (_E = style == null ? void 0 : style.text) == null ? void 0 : _E.color) == null ? void 0 : _F.hex),
+                      borderRadius: ((_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
+                      color: ((_L = (_K = (_J = (_I = brand == null ? void 0 : brand.style) == null ? void 0 : _I.button) == null ? void 0 : _J.text) == null ? void 0 : _K.color) == null ? void 0 : _L.hex) || ((_N = (_M = style == null ? void 0 : style.background) == null ? void 0 : _M.color) == null ? void 0 : _N.hex)
                     },
                     type: "button"
                   },

package/dist/card-advertisement.mjs

@@ -1,284 +1,6 @@
-// components/card-advertisement.js
-import { useState } from "react";
-import { cdnShopify } from "@drawbridge/shopify/cdn";
-import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
-import { formatCurrency } from "@drawbridge/drawbridge-utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
-  "img",
-  {
-    ...{
-      alt,
-      className,
-      src
-    }
-  }
-);
-var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ jsx(
-  "video",
-  {
-    ...{
-      className,
-      poster,
-      src: mp4 || hls
-    }
-  }
-);
-var CardAdvertisement = ({
-  advertisement,
-  affiliate,
-  asset,
-  brand = {},
-  button,
-  campaign,
-  fonts,
-  ImageComponent = DefaultImage,
-  lead,
-  onClick = () => {
-  },
-  onVariantSelect = () => {
-  },
-  organization,
-  page,
-  preview = false,
-  product,
-  title,
-  url,
-  VideoComponent = DefaultVideo
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
-  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
-  const hasVariants = variants.length > 0;
-  const [selectedVariant, setSelectedVariant] = useState(variants[0] || null);
-  const style = {
-    background: {
-      color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
-        hex: "#FFFFFF",
-        rgb: "rgb( 255, 255, 255 )"
-      }
-    },
-    text: {
-      color: ((_c = brand == null ? void 0 : brand.style) == null ? void 0 : _c.text) ? (_d = brand.style.text) == null ? void 0 : _d.color : {
-        hex: "#000000",
-        rgb: "rgb( 0, 0, 0 )"
-      }
-    }
-  };
-  const classes = {
-    asset: [
-      "block relative aspect-square rounded overflow-hidden"
-    ],
-    button: [
-      "card-advertisement-button",
-      "flex items-center justify-center py-3 px-4 w-full border"
-    ],
-    container: [
-      "card-advertisement",
-      "block w-full space-y-2 border border-gray rounded p-6"
-    ],
-    content: [
-      "flex flex-col items-center justify-between space-x-4 text-left text-sm rounded"
-    ]
-  };
-  const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
-  const productImageSrc = cdnShopify(productImage, "400x400", product == null ? void 0 : product.updatedAt);
-  if (!(asset == null ? void 0 : asset.sizes) && !productImageSrc) {
-    classes.asset.push("bg-gray-light");
-  }
-  ;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...{
-        className: classes.container.join(" "),
-        style: {
-          backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
-          color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            ...{
-              className: classes.asset.join(" ")
-            },
-            children: [
-              (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ jsx(
-                ImageComponent,
-                {
-                  ...{
-                    alt: asset == null ? void 0 : asset.filename,
-                    className: "w-full h-full object-cover",
-                    fill: true,
-                    priority: false,
-                    sizes: "100%",
-                    src: cdnSrc(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
-                  }
-                },
-                asset == null ? void 0 : asset.id
-              ),
-              !(asset == null ? void 0 : asset.sizes) && productImageSrc && /* @__PURE__ */ jsx(
-                ImageComponent,
-                {
-                  ...{
-                    alt: (product == null ? void 0 : product.title) || "Product",
-                    className: "w-full h-full object-cover",
-                    fill: true,
-                    priority: false,
-                    sizes: "100%",
-                    src: productImageSrc,
-                    unoptimized: true
-                  }
-                },
-                productImageSrc
-              ),
-              (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ...{
-                    className: "relative h-full w-full aspect-[9/16]"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    VideoComponent,
-                    {
-                      ...{
-                        className: "w-full h-full",
-                        hls: cdnSrc(asset, "hls", asset == null ? void 0 : asset.updatedAt),
-                        mp4: cdnSrc(asset, "original", asset == null ? void 0 : asset.updatedAt),
-                        poster: cdnSrc((_i = asset == null ? void 0 : asset.frames) == null ? void 0 : _i[asset == null ? void 0 : asset.poster], "500x500", asset == null ? void 0 : asset.updatedAt) || cdnSrc((_j = asset == null ? void 0 : asset.frames) == null ? void 0 : _j[asset == null ? void 0 : asset.poster], "1080x1920", asset == null ? void 0 : asset.updatedAt)
-                      }
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            ...{
-              className: classes.content.join(" "),
-              style: {
-                ...fonts == null ? void 0 : fonts.body,
-                color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
-                gap: "10px"
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  ...{
-                    className: "flex-1 min-w-0 space-y-2"
-                  },
-                  children: [
-                    title && /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        ...{
-                          style: {
-                            fontSize: "18px"
-                          }
-                        },
-                        children: title
-                      }
-                    ),
-                    (selectedVariant == null ? void 0 : selectedVariant.price) && (selectedVariant == null ? void 0 : selectedVariant.currency) && /* @__PURE__ */ jsxs(
-                      "p",
-                      {
-                        ...{
-                          style: {
-                            fontSize: "14px"
-                          }
-                        },
-                        children: [
-                          (selectedVariant == null ? void 0 : selectedVariant.sale) && selectedVariant.sale > selectedVariant.price && /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              ...{
-                                style: {
-                                  marginRight: "6px",
-                                  opacity: 0.5,
-                                  textDecoration: "line-through"
-                                }
-                              },
-                              children: formatCurrency({
-                                code: selectedVariant.currency,
-                                display: "parts",
-                                value: selectedVariant.sale
-                              })
-                            }
-                          ),
-                          formatCurrency({
-                            code: selectedVariant.currency,
-                            display: "parts",
-                            value: selectedVariant.price
-                          })
-                        ]
-                      }
-                    ),
-                    variants.length > 1 && /* @__PURE__ */ jsx(
-                      "select",
-                      {
-                        ...{
-                          className: "w-full text-xs border px-2 py-1 bg-transparent",
-                          onChange: (e) => {
-                            const variant = variants.find((v) => v.id === e.target.value);
-                            if (variant) setSelectedVariant(variant);
-                          },
-                          style: {
-                            borderColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb.replace(")", ", 0.3)"),
-                            borderRadius: ((_p = (_o = brand == null ? void 0 : brand.style) == null ? void 0 : _o.button) == null ? void 0 : _p.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
-                            color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
-                          },
-                          value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
-                        },
-                        children: variants.map((variant) => /* @__PURE__ */ jsx(
-                          "option",
-                          {
-                            ...{
-                              value: variant.id
-                            },
-                            children: variant.title
-                          },
-                          variant.id
-                        ))
-                      }
-                    )
-                  ]
-                }
-              ),
-              button && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  ...{
-                    className: classes.button.join(" "),
-                    disabled: !preview && !hasVariants && !url,
-                    onClick: hasVariants ? () => {
-                      if (!preview) onVariantSelect(selectedVariant);
-                    } : preview ? () => {
-                    } : onClick,
-                    style: {
-                      backgroundColor: ((_v = (_u = (_t = (_s = brand == null ? void 0 : brand.style) == null ? void 0 : _s.button) == null ? void 0 : _t.background) == null ? void 0 : _u.color) == null ? void 0 : _v.hex) || ((_x = (_w = style == null ? void 0 : style.text) == null ? void 0 : _w.color) == null ? void 0 : _x.hex),
-                      borderColor: ((_B = (_A = (_z = (_y = brand == null ? void 0 : brand.style) == null ? void 0 : _y.button) == null ? void 0 : _z.background) == null ? void 0 : _A.color) == null ? void 0 : _B.hex) || ((_D = (_C = style == null ? void 0 : style.text) == null ? void 0 : _C.color) == null ? void 0 : _D.hex),
-                      borderRadius: ((_F = (_E = brand == null ? void 0 : brand.style) == null ? void 0 : _E.button) == null ? void 0 : _F.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
-                      color: ((_J = (_I = (_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.text) == null ? void 0 : _I.color) == null ? void 0 : _J.hex) || ((_L = (_K = style == null ? void 0 : style.background) == null ? void 0 : _K.color) == null ? void 0 : _L.hex)
-                    },
-                    type: "button"
-                  },
-                  children: button
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-var card_advertisement_default = CardAdvertisement;
+import {
+  card_advertisement_default
+} from "./chunk-TJNIR4PF.mjs";
 export {
   card_advertisement_default as default
 };

package/dist/chunk-2ZYGRSSA.mjs

@@ -0,0 +1,45 @@
+// components/icons/loader.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var Loader = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "none",
+      strokeWidth: 0,
+      viewBox: "0 0 24 24",
+      className: ["animate-spin", className].filter(Boolean).join(" "),
+      ...props
+    },
+    children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          ...{
+            className: "opacity-25",
+            cx: 12,
+            cy: 12,
+            r: 10,
+            stroke: "currentColor",
+            strokeWidth: 4
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...{
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        }
+      )
+    ]
+  }
+);
+var loader_default = Loader;
+
+export {
+  loader_default
+};