@drawbridge/components 0.0.77 → 0.1.0

package/dist/chunk-PNM4PZ4L.mjs

@@ -1,387 +0,0 @@
-import {
-  wrapper_gradient_default
-} from "./chunk-PT7UR6AO.mjs";
-import {
-  input_select_default
-} from "./chunk-7GRIGQDC.mjs";
-import {
-  loader_default
-} from "./chunk-2ZYGRSSA.mjs";
-import {
-  input_group_default
-} from "./chunk-WUZE3BIA.mjs";
-import {
-  buttonStyle,
-  headerStyle,
-  inputStyle
-} from "./chunk-6F23WKP2.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, style }) => /* @__PURE__ */ jsx(
-  "img",
-  {
-    ...{
-      alt,
-      className,
-      src,
-      style
-    }
-  }
-);
-var Product = ({
-  action = null,
-  addToCart = true,
-  buttonFontSize,
-  disabled = false,
-  errors = {},
-  header,
-  ImageComponent = DefaultImage,
-  onAdd = () => {
-  },
-  onBuy = () => {
-  },
-  onVariantChange = () => {
-  },
-  product,
-  style = {},
-  variant
-}) => {
-  var _a, _b, _c;
-  const resolved = {
-    ...style,
-    background: {
-      ...style == null ? void 0 : style.background,
-      color: ((_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
-    },
-    text: {
-      ...style == null ? void 0 : style.text,
-      color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
-    }
-  };
-  const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
-  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) || available[0] || 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",
-        style: {
-          backgroundColor: resolved.background.color.rgb,
-          color: resolved.text.color.rgb
-        }
-      },
-      children: [
-        header,
-        images.length > 0 && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ...{
-              className: "flex items-center " + (images.length > 1 ? "pr-12" : ""),
-              style: {
-                height: "12rem"
-              }
-            },
-            children: [
-              images.length > 1 && /* @__PURE__ */ jsx(
-                wrapper_gradient_default,
-                {
-                  ...{
-                    classNameScroll: "flex flex-col w-12 h-48 space-y-3",
-                    color: resolved.background.color.rgb
-                  },
-                  children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      ...{
-                        // Active state is conveyed purely by a dimmed image (no border).
-                        className: "relative w-12 h-12 overflow-hidden shrink-0",
-                        onClick: () => {
-                          setActiveImage(key);
-                          emblaApi == null ? void 0 : emblaApi.scrollTo(key);
-                        },
-                        style: {
-                          borderRadius: imageRadius
-                        },
-                        type: "button"
-                      },
-                      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,
-                            // Always set opacity + transition so switching the active
-                            // thumbnail animates the fade in both directions.
-                            style: {
-                              opacity: activeImage === key ? 0.6 : 1,
-                              transition: "opacity 300ms ease"
-                            },
-                            unoptimized: true
-                          }
-                        }
-                      )
-                    },
-                    "thumbnail-" + key
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ...{
-                    // Dimensions are inline rather than Tailwind size utilities:
-                    // those sizes live only in this package's dist, and a consuming
-                    // app's Tailwind scan of node_modules can lag and drop them,
-                    // silently collapsing the carousel. Inline styles are immune.
-                    className: "overflow-hidden m-auto",
-                    ref: emblaRef,
-                    style: {
-                      borderRadius: imageRadius,
-                      width: "12rem",
-                      height: "12rem"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ...{
-                        className: "flex",
-                        style: {
-                          height: "100%"
-                        }
-                      },
-                      children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          ...{
-                            className: "min-w-0 relative bg-gray-100",
-                            style: {
-                              flex: "0 0 100%",
-                              height: "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: headerStyle(style)
-                  },
-                  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: resolved.background.color.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: resolved,
-                    value: variant || ""
-                  }
-                }
-              ),
-              style: resolved
-            }
-          }
-        ),
-        available.length > 0 && /* @__PURE__ */ jsx(
-          input_group_default,
-          {
-            ...{
-              error: errors == null ? void 0 : errors.root,
-              input: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  ...{
-                    className: addToCart ? "grid grid-cols-2 gap-5" : ""
-                  },
-                  children: [
-                    addToCart && /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        ...{
-                          className: "button justify-center border py-3 px-4 rounded",
-                          disabled: disabled || Boolean(action),
-                          onClick: onAdd,
-                          style: {
-                            ...inputStyle(resolved),
-                            borderRadius: buttonStyle(resolved).borderRadius,
-                            ...buttonFontSize && {
-                              fontSize: buttonFontSize
-                            }
-                          },
-                          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 py-3 px-4 rounded" + (addToCart ? "" : " w-full"),
-                          disabled: disabled || Boolean(action),
-                          onClick: onBuy,
-                          style: {
-                            ...buttonStyle(resolved),
-                            ...buttonFontSize && {
-                              fontSize: buttonFontSize
-                            }
-                          },
-                          type: "button"
-                        },
-                        children: action === "buy" ? /* @__PURE__ */ jsx(
-                          loader_default,
-                          {
-                            ...{
-                              className: "w-6 h-6 animate-spin"
-                            }
-                          }
-                        ) : "Buy now"
-                      }
-                    )
-                  ]
-                }
-              ),
-              style: resolved
-            }
-          }
-        )
-      ]
-    }
-  );
-};
-var product_default = Product;
-
-export {
-  product_default
-};

package/dist/chunk-PT7UR6AO.mjs

@@ -1,208 +0,0 @@
-// components/wrapper-gradient.js
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var WrapperGradientContext = createContext(null);
-var useWrapperGradient = () => useContext(WrapperGradientContext);
-var WrapperGradient = ({
-  children,
-  className,
-  classNameGradient,
-  classNameScroll,
-  color,
-  gradientTopOffset,
-  horizontal = false
-}) => {
-  const showX = horizontal === true || horizontal === "both";
-  const showY = horizontal === false || horizontal === "both";
-  const overflowClass = horizontal === "both" ? "overflow-scroll" : horizontal ? "overflow-x-scroll overflow-y-visible" : "overflow-y-scroll overflow-x-visible";
-  const overscrollClass = horizontal ? "overscroll-x-none" : "";
-  const themed = Boolean(color);
-  const gradientDefaults = "absolute z-[2] pointer-events-none transition-all duration-[100ms] ";
-  const classes = {
-    container: [
-      themed ? "relative" : "w-full relative",
-      ...className ? [className] : []
-    ],
-    inner: [
-      "w-full relative scroll-smooth hide-scrollbar",
-      overscrollClass,
-      overflowClass,
-      ...classNameScroll ? [classNameScroll] : []
-    ],
-    topGradient: [
-      gradientDefaults,
-      "w-full -top-[1px]",
-      ...themed ? [] : ["bg-gradient-to-b"],
-      ...classNameGradient ? [classNameGradient] : themed ? ["h-10"] : ["from-white to-transparent h-10"]
-    ],
-    bottomGradient: [
-      gradientDefaults,
-      "w-full -bottom-[1px]",
-      ...themed ? [] : ["bg-gradient-to-t"],
-      ...classNameGradient ? [classNameGradient] : themed ? ["h-10"] : ["from-white to-transparent h-10"]
-    ],
-    leftGradient: [
-      gradientDefaults,
-      "h-full top-0 left-0",
-      ...themed ? [] : ["bg-gradient-to-r"],
-      ...classNameGradient ? [classNameGradient] : themed ? ["w-4"] : ["from-white from-30% to-transparent w-4"]
-    ],
-    rightGradient: [
-      gradientDefaults,
-      "h-full top-0 right-0",
-      ...themed ? [] : ["bg-gradient-to-l"],
-      ...classNameGradient ? [classNameGradient] : themed ? ["w-4"] : ["from-white from-30% to-transparent w-4"]
-    ]
-  };
-  const gradients = {
-    top: "linear-gradient( to bottom, " + color + " 0%, transparent 100% )",
-    bottom: "linear-gradient( to top, " + color + " 0%, transparent 100% )",
-    left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
-    right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
-  };
-  const containerRef = useRef(null);
-  const [scroll, setScroll] = useState({
-    top: 0,
-    left: 0,
-    atBottom: true,
-    atRight: true
-  });
-  useEffect(
-    () => {
-      const container = containerRef.current;
-      const handleScroll = () => {
-        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = container;
-        setScroll({
-          top: scrollTop,
-          left: scrollLeft,
-          atBottom: scrollTop + clientHeight >= scrollHeight - 1,
-          atRight: scrollLeft + clientWidth >= scrollWidth - 1
-        });
-      };
-      const handleUpdate = () => {
-        const { scrollHeight, scrollWidth, clientHeight, clientWidth } = container;
-        if (scrollHeight <= clientHeight && scrollWidth <= clientWidth) {
-          setScroll({
-            top: 0,
-            left: 0,
-            atBottom: true,
-            atRight: true
-          });
-          return;
-        }
-        ;
-        handleScroll();
-      };
-      handleUpdate();
-      container.addEventListener("scroll", handleScroll);
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-            handleUpdate();
-            break;
-          }
-        }
-      });
-      observer.observe(container, {
-        childList: true,
-        subtree: true
-      });
-      const resizeObserver = new ResizeObserver(handleUpdate);
-      resizeObserver.observe(container);
-      return () => {
-        container.removeEventListener("scroll", handleScroll);
-        observer.disconnect();
-        resizeObserver.disconnect();
-      };
-    },
-    [horizontal]
-  );
-  const contextValue = useMemo(
-    () => ({
-      atBottom: scroll.atBottom,
-      atRight: scroll.atRight
-    }),
-    [scroll.atBottom, scroll.atRight]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...{
-        className: classes.container.join(" ")
-      },
-      children: /* @__PURE__ */ jsxs(WrapperGradientContext.Provider, { value: contextValue, children: [
-        showY && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className: classes.topGradient.join(" ") + (scroll.top > 5 ? " opacity-100 visible" : " opacity-0 invisible"),
-              style: {
-                ...themed && {
-                  backgroundImage: gradients.top
-                },
-                ...gradientTopOffset && {
-                  top: gradientTopOffset
-                }
-              }
-            }
-          }
-        ),
-        showX && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className: classes.leftGradient.join(" ") + (scroll.left > 5 ? " opacity-100 visible" : " opacity-0 invisible"),
-              style: {
-                ...themed && {
-                  backgroundImage: gradients.left
-                }
-              }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className: classes.inner.join(" "),
-              ref: containerRef
-            },
-            children
-          }
-        ),
-        showY && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className: classes.bottomGradient.join(" ") + (!scroll.atBottom ? " opacity-100 visible" : " opacity-0 invisible"),
-              style: {
-                ...themed && {
-                  backgroundImage: gradients.bottom
-                }
-              }
-            }
-          }
-        ),
-        showX && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className: classes.rightGradient.join(" ") + (!scroll.atRight ? " opacity-100 visible" : " opacity-0 invisible"),
-              style: {
-                ...themed && {
-                  backgroundImage: gradients.right
-                }
-              }
-            }
-          }
-        )
-      ] })
-    }
-  );
-};
-var wrapper_gradient_default = WrapperGradient;
-
-export {
-  useWrapperGradient,
-  wrapper_gradient_default
-};

package/dist/chunk-Q3UIVGPQ.mjs

@@ -1,29 +0,0 @@
-// components/icons/warning.js
-import { jsx } from "react/jsx-runtime";
-var Warning = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ...{
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        ...{
-          d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var warning_default = Warning;
-
-export {
-  warning_default
-};

package/dist/chunk-S6X5EEMX.mjs

@@ -1,18 +0,0 @@
-// components/icons/linkedin.js
-import { jsx } from "react/jsx-runtime";
-var LinkedIn = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ...{
-      fill: "currentColor",
-      viewBox: "0 0 16 16",
-      ...props
-    },
-    children: /* @__PURE__ */ jsx("path", { d: "M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" })
-  }
-);
-var linkedin_default = LinkedIn;
-
-export {
-  linkedin_default
-};

package/dist/chunk-T5QQBFM3.mjs

@@ -1,29 +0,0 @@
-// components/icons/minus.js
-import { jsx } from "react/jsx-runtime";
-var Minus = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ...{
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        ...{
-          d: "M5 12h14",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var minus_default = Minus;
-
-export {
-  minus_default
-};

package/dist/chunk-TOR3Z64G.mjs

@@ -1,18 +0,0 @@
-// components/icons/tiktok.js
-import { jsx } from "react/jsx-runtime";
-var TikTok = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ...{
-      fill: "currentColor",
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ jsx("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" })
-  }
-);
-var tiktok_default = TikTok;
-
-export {
-  tiktok_default
-};