@drawbridge/components 0.0.39 → 0.0.42

package/dist/advertisement.mjs

@@ -0,0 +1,98 @@
+"use client";
+import {
+  product_default
+} from "./chunk-GUSVATKJ.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,
+  fonts,
+  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,
+          addToCart: false,
+          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,
+        fonts,
+        ImageComponent,
+        lead,
+        onClick,
+        onVariantSelect,
+        organization,
+        page,
+        preview,
+        title,
+        url,
+        VideoComponent
+      }
+    }
+  );
+};
+var advertisement_default = Advertisement;
+export {
+  advertisement_default as default
+};

package/dist/card-advertisement.mjs

@@ -1,357 +1,6 @@
-// components/card-advertisement.js
-import { useEffect, 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, _M, _N;
-  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 [keyboard, setKeyboard] = useState(false);
-  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 : {
-        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 gap-x-4 text-center 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",
-                marginTop: "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",
-                            marginBottom: "10px"
-                          }
-                        },
-                        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__ */ jsxs(
-                      "div",
-                      {
-                        ...{
-                          className: "relative w-full"
-                        },
-                        children: [
-                          /* @__PURE__ */ 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__ */ jsx(
-                                "option",
-                                {
-                                  ...{
-                                    value: variant.id
-                                  },
-                                  children: variant.title
-                                },
-                                variant.id
-                              ))
-                            }
-                          ),
-                          /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                                    "path",
-                                    {
-                                      ...{
-                                        d: "M19.5 8.25l-7.5 7.5-7.5-7.5",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round"
-                                      }
-                                    }
-                                  )
-                                }
-                              )
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              button && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  ...{
-                    className: classes.button.join(" "),
-                    disabled: !preview && !hasVariants && !url,
-                    onClick: hasVariants ? () => {
-                      if (!preview) onVariantSelect(selectedVariant);
-                    } : preview ? () => {
-                    } : onClick,
-                    style: {
-                      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"
-                  },
-                  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
+};

package/dist/chunk-7ZLMDYBR.mjs

@@ -0,0 +1,113 @@
+import {
+  warning_default
+} from "./chunk-Q3UIVGPQ.mjs";
+
+// components/input-group.js
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputGroup = ({
+  className,
+  error,
+  input,
+  label,
+  message,
+  style = {}
+}) => {
+  var _a, _b, _c, _d;
+  const classes = [
+    "input-group"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  if (error) {
+    classes.push("error");
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        "aria-live": "polite"
+      },
+      children: [
+        label ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "space-y-2"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    className: "block"
+                  },
+                  children: label
+                }
+              ),
+              input
+            ]
+          }
+        ) : input,
+        (error || message) && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            ...{
+              className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
+              ...error && Object.keys(style).length > 0 && {
+                style: {
+                  backgroundColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb.replace(")", ",.1)"),
+                  color: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
+                }
+              }
+            },
+            children: [
+              error && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  warning_default,
+                  {
+                    ...{
+                      className: "w-4 h-4",
+                      "aria-hidden": true
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    ...{
+                      className: "text-[0px] opacity-0 w-0 h-0 absolute"
+                    },
+                    children: [
+                      label,
+                      ": ",
+                      error
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    ...error && {
+                      "aria-hidden": true
+                    }
+                  },
+                  children: error || message
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_default = InputGroup;
+
+export {
+  input_group_default
+};