@drawbridge/components 0.0.37 → 0.0.40

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
+};

package/dist/chunk-BD3TDNJE.mjs

@@ -0,0 +1,98 @@
+import {
+  chevron_down_default
+} from "./chunk-FYA7EAMR.mjs";
+import {
+  inputStyle
+} from "./chunk-FJXG3REN.mjs";
+
+// components/input-select.js
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputSelect = ({
+  onChange,
+  options = [],
+  style,
+  value,
+  ...rest
+}) => {
+  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);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ...{
+              ...rest,
+              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: ({ target }) => onChange(target == null ? void 0 : target.value),
+              style: inputStyle(style),
+              value
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "option",
+                {
+                  ...{
+                    disabled: true,
+                    "aria-label": "Select option",
+                    value: ""
+                  },
+                  children: "Select"
+                }
+              ),
+              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  ...{
+                    value: optValue ?? option
+                  },
+                  children: label ?? option
+                },
+                "input-select-option-" + key
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              "aria-hidden": true,
+              className: "h-full flex items-center absolute inset-y-0 right-0 pointer-events-none px-2.5"
+            },
+            children: /* @__PURE__ */ jsx(
+              chevron_down_default,
+              {
+                ...{
+                  className: "w-5 h-5 text-inherit"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var input_select_default = InputSelect;
+
+export {
+  input_select_default
+};

package/dist/chunk-FJXG3REN.mjs

@@ -0,0 +1,93 @@
+// components/styles.js
+var backgroundStyle = (style) => {
+  var _a, _b, _c, _d;
+  return {
+    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
+    color: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
+  };
+};
+var borderStyle = (style) => {
+  var _a, _b;
+  return {
+    borderColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
+  };
+};
+var buttonStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  return {
+    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || ((_e = (_d = style == null ? void 0 : style.text) == null ? void 0 : _d.color) == null ? void 0 : _e.rgb),
+    borderColor: ((_h = (_g = (_f = style == null ? void 0 : style.button) == null ? void 0 : _f.background) == null ? void 0 : _g.color) == null ? void 0 : _h.rgb) || ((_j = (_i = style == null ? void 0 : style.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb),
+    borderRadius: ((_k = style == null ? void 0 : style.button) == null ? void 0 : _k.radius) != null ? style.button.radius / 4 + "px" : void 0,
+    color: ((_n = (_m = (_l = style == null ? void 0 : style.button) == null ? void 0 : _l.text) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb) || ((_p = (_o = style == null ? void 0 : style.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb)
+  };
+};
+var closeStyle = (style) => {
+  var _a, _b, _c, _d;
+  return {
+    backgroundColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
+    color: (_d = (_c = style == null ? void 0 : style.background) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
+  };
+};
+var headerStyle = (style) => {
+  var _a, _b, _c;
+  return {
+    fontFamily: (_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family,
+    fontWeight: (_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight,
+    textTransform: (_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.transform
+  };
+};
+var inputStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  return {
+    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
+    borderColor: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb,
+    borderRadius: ((_e = style == null ? void 0 : style.input) == null ? void 0 : _e.radius) != null ? style.input.radius / 4 + "px" : void 0,
+    color: (_g = (_f = style == null ? void 0 : style.text) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
+  };
+};
+var inputCheckboxStyle = (style) => {
+  var _a;
+  return {
+    ...inputStyle(style),
+    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? Math.min(style.input.radius / 4, 6) + "px" : void 0
+  };
+};
+var inputNameStyle = (style) => inputStyle(style);
+var inputPhoneStyle = (style) => inputStyle(style);
+var menuStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f;
+  return {
+    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
+    borderColor: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb,
+    color: (_f = (_e = style == null ? void 0 : style.text) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb
+  };
+};
+var selectStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f;
+  return {
+    borderColor: (_c = (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) == null ? void 0 : _c.replace(")", ", 0.3)"),
+    borderRadius: ((_d = style == null ? void 0 : style.input) == null ? void 0 : _d.radius) != null ? style.input.radius / 4 + "px" : void 0,
+    color: (_f = (_e = style == null ? void 0 : style.text) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb
+  };
+};
+var textStyle = (style) => {
+  var _a, _b;
+  return {
+    color: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
+  };
+};
+
+export {
+  backgroundStyle,
+  borderStyle,
+  buttonStyle,
+  closeStyle,
+  headerStyle,
+  inputStyle,
+  inputCheckboxStyle,
+  inputNameStyle,
+  inputPhoneStyle,
+  menuStyle,
+  selectStyle,
+  textStyle
+};

package/dist/chunk-FYA7EAMR.mjs

@@ -0,0 +1,29 @@
+// components/icons/chevron-down.js
+import { jsx } from "react/jsx-runtime";
+var ChevronDown = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        ...{
+          d: "m19.5 8.25-7.5 7.5-7.5-7.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var chevron_down_default = ChevronDown;
+
+export {
+  chevron_down_default
+};

package/dist/chunk-GFDZ7ER6.mjs

@@ -0,0 +1,29 @@
+// components/icons/check.js
+import { jsx } from "react/jsx-runtime";
+var Check = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        ...{
+          d: "m4.5 12.75 6 6 9-13.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var check_default = Check;
+
+export {
+  check_default
+};

package/dist/chunk-HDOA3Y3U.mjs

@@ -0,0 +1,334 @@
+import {
+  loader_default
+} from "./chunk-2ZYGRSSA.mjs";
+import {
+  wrapper_gradient_default
+} from "./chunk-XWELEL6Z.mjs";
+import {
+  input_group_default
+} from "./chunk-7ZLMDYBR.mjs";
+import {
+  input_select_default
+} from "./chunk-BD3TDNJE.mjs";
+import {
+  buttonStyle,
+  inputStyle
+} from "./chunk-FJXG3REN.mjs";
+
+// components/product.js
+import { useEffect, useMemo, useState } from "react";
+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(
+  "img",
+  {
+    ...{
+      alt,
+      className,
+      src
+    }
+  }
+);
+var Product = ({
+  action = null,
+  disabled = false,
+  errors = {},
+  header,
+  ImageComponent = DefaultImage,
+  onAdd = () => {
+  },
+  onBuy = () => {
+  },
+  onVariantChange = () => {
+  },
+  product,
+  style = {},
+  variant
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const available = useMemo(
+    () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
+    [product]
+  );
+  const [activeImage, setActiveImage] = useState(0);
+  const [emblaRef, emblaApi] = useEmblaCarousel();
+  const selectedVariant = available.find((v) => v.id === variant) || null;
+  const images = useMemo(
+    () => {
+      const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
+      const result = [];
+      const seen = /* @__PURE__ */ new Set();
+      if (product == null ? void 0 : product.image) {
+        seen.add(product.image);
+        result.push({
+          src: product.image,
+          variant: null
+        });
+      }
+      for (const v of variants) {
+        if (v.image && !seen.has(v.image)) {
+          seen.add(v.image);
+          result.push({
+            src: v.image,
+            variant: v
+          });
+        }
+      }
+      return result;
+    },
+    [product]
+  );
+  useEffect(
+    () => {
+      if (!emblaApi) return;
+      const onSelect = () => {
+        const idx = emblaApi.selectedScrollSnap();
+        setActiveImage(idx);
+        const img = images[idx];
+        if (img == null ? void 0 : img.variant) onVariantChange(img.variant.id);
+      };
+      emblaApi.on("select", onSelect);
+      return () => emblaApi.off("select", onSelect);
+    },
+    [emblaApi, images, onVariantChange]
+  );
+  const handleVariant = (value) => {
+    onVariantChange(value);
+    const v = available.find((x) => x.id === value);
+    if (!(v == null ? void 0 : v.image)) return;
+    const idx = images.findIndex((img) => img.src === v.image);
+    if (idx >= 0) {
+      setActiveImage(idx);
+      emblaApi == null ? void 0 : emblaApi.scrollTo(idx);
+    }
+    ;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-6 pb-12"
+      },
+      children: [
+        header,
+        images.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "flex items-center h-48 " + (images.length > 1 && "pr-12")
+            },
+            children: [
+              images.length > 1 && /* @__PURE__ */ jsx(
+                wrapper_gradient_default,
+                {
+                  ...{
+                    classNameScroll: "flex flex-col w-12 h-48 space-y-3",
+                    color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
+                  },
+                  children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      ...{
+                        className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border border-transparent",
+                        onClick: () => {
+                          setActiveImage(key);
+                          emblaApi == null ? void 0 : emblaApi.scrollTo(key);
+                        },
+                        type: "button",
+                        ...activeImage === key && {
+                          style: inputStyle(style)
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        ImageComponent,
+                        {
+                          ...{
+                            alt: product.title + " thumbnail " + key,
+                            className: "object-cover",
+                            fill: true,
+                            sizes: "48px",
+                            src: cdnShopify(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
+                            unoptimized: true
+                          }
+                        }
+                      )
+                    },
+                    "thumbnail-" + key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    className: "aspect-square w-48 overflow-hidden rounded-3xl m-auto",
+                    ref: emblaRef
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...{
+                        className: "flex h-full"
+                      },
+                      children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: "min-w-0 flex-[0_0_100%] relative h-full bg-gray-100"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            ImageComponent,
+                            {
+                              ...{
+                                alt: product.title + " image " + key,
+                                className: "object-cover",
+                                fill: true,
+                                sizes: "192px",
+                                src: cdnShopify(src, "400x400", product == null ? void 0 : product.updatedAt) || src,
+                                unoptimized: true
+                              }
+                            }
+                          )
+                        },
+                        "image-" + key
+                      ))
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "text-center space-y-2"
+            },
+            children: [
+              (product == null ? void 0 : product.title) && /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  ...{
+                    className: "max-w-80 mx-auto",
+                    style: {
+                      fontFamily: ((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.family) || (style == null ? void 0 : style.fontFamily) || "Roboto Flex",
+                      fontWeight: ((_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.weight) || (style == null ? void 0 : style.fontWeight),
+                      textTransform: ((_e = style == null ? void 0 : style.heading) == null ? void 0 : _e.transform) || (style == null ? void 0 : style.textTransform)
+                    }
+                  },
+                  children: product == null ? void 0 : product.title
+                }
+              ),
+              !available.length ? /* @__PURE__ */ jsx("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ jsx("p", { children: formatCurrency({
+                code: selectedVariant.currency,
+                display: "parts",
+                value: selectedVariant.price
+              }) }),
+              (product == null ? void 0 : product.description) && /* @__PURE__ */ jsx(
+                wrapper_gradient_default,
+                {
+                  ...{
+                    classNameScroll: "max-h-[4.5em]",
+                    color: (_g = (_f = style == null ? void 0 : style.background) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
+                  },
+                  children: /* @__PURE__ */ jsx("p", { children: product.description })
+                }
+              )
+            ]
+          }
+        ),
+        available.length > 1 && /* @__PURE__ */ jsx(
+          input_group_default,
+          {
+            ...{
+              error: errors == null ? void 0 : errors.variant,
+              input: /* @__PURE__ */ jsx(
+                input_select_default,
+                {
+                  ...{
+                    disabled,
+                    onChange: handleVariant,
+                    options: available.map((v) => ({
+                      label: v.title,
+                      value: v.id
+                    })),
+                    style,
+                    value: variant || ""
+                  }
+                }
+              ),
+              style
+            }
+          }
+        ),
+        available.length > 0 && /* @__PURE__ */ jsx(
+          input_group_default,
+          {
+            ...{
+              error: errors == null ? void 0 : errors.root,
+              input: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: "grid grid-cols-2 gap-3"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        ...{
+                          className: "button justify-center border",
+                          disabled: disabled || Boolean(action),
+                          onClick: onAdd,
+                          style: inputStyle(style),
+                          type: "button"
+                        },
+                        children: action === "add" ? /* @__PURE__ */ jsx(
+                          loader_default,
+                          {
+                            ...{
+                              className: "w-6 h-6 animate-spin"
+                            }
+                          }
+                        ) : "Add to cart"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        ...{
+                          className: "button justify-center",
+                          disabled: disabled || Boolean(action),
+                          onClick: onBuy,
+                          style: buttonStyle(style),
+                          type: "button"
+                        },
+                        children: action === "buy" ? /* @__PURE__ */ jsx(
+                          loader_default,
+                          {
+                            ...{
+                              className: "w-6 h-6 animate-spin"
+                            }
+                          }
+                        ) : "Buy now"
+                      }
+                    )
+                  ]
+                }
+              ),
+              style
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var product_default = Product;
+
+export {
+  product_default
+};