@lime-bundles/react 2.3.0 → 2.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/FixedBundle.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
 import {
   formatMoney,
   formatUnitPrice,
@@ -208,8 +208,340 @@ function useWidgetConfigVars(config) {
   );
 }
 
-// src/components/FixedBundle.tsx
+// src/hooks/useVariantSelection.ts
+import { useEffect as useEffect4, useMemo as useMemo2, useState as useState3, useCallback as useCallback3 } from "react";
+import { variants as variantsNs } from "@lime-bundles/core";
+var { findVariantByOptions, isOptionValueAvailable, toPickerVariant } = variantsNs;
+function defaultInitial(variants) {
+  return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+}
+function useVariantSelection({
+  variants,
+  optionNames,
+  initialVariant,
+  optionValuesByPosition
+}) {
+  const seed = useMemo2(
+    () => initialVariant ?? defaultInitial(variants),
+    [initialVariant, variants]
+  );
+  const [selectedValues, setSelectedValues] = useState3(
+    () => seed ? seed.selectedOptions.map((o) => o.value) : optionNames.map(() => "")
+  );
+  useEffect4(() => {
+    if (!seed) return;
+    setSelectedValues(seed.selectedOptions.map((o) => o.value));
+  }, [seed?.id]);
+  const pickerVariants = useMemo2(
+    () => variants.map((v) => toPickerVariant(v)),
+    [variants]
+  );
+  const selectedVariant = useMemo2(() => {
+    if (selectedValues.length !== optionNames.length) return null;
+    const match = findVariantByOptions(pickerVariants, selectedValues);
+    if (!match) return null;
+    return variants.find((v) => v.id === match.id) ?? null;
+  }, [pickerVariants, selectedValues, variants, optionNames.length]);
+  const setOptionValue = useCallback3(
+    (optionIndex, value) => {
+      setSelectedValues((prev) => {
+        const next = prev.slice();
+        next[optionIndex] = value;
+        return next;
+      });
+    },
+    []
+  );
+  const optionsByPosition = useMemo2(() => {
+    if (optionValuesByPosition) {
+      return optionValuesByPosition.map((values) => values.slice());
+    }
+    const out = optionNames.map(() => []);
+    for (const v of variants) {
+      v.selectedOptions.forEach((o, i) => {
+        if (i < out.length && !out[i].includes(o.value)) out[i].push(o.value);
+      });
+    }
+    return out;
+  }, [variants, optionNames, optionValuesByPosition]);
+  const optionsFor = useCallback3(
+    (optionIndex) => {
+      const values = optionsByPosition[optionIndex] ?? [];
+      return values.map((value) => ({
+        value,
+        disabled: !isOptionValueAvailable(
+          pickerVariants,
+          optionIndex,
+          value,
+          selectedValues
+        )
+      }));
+    },
+    [optionsByPosition, pickerVariants, selectedValues]
+  );
+  return {
+    selectedValues,
+    selectedVariant,
+    setOptionValue,
+    optionsFor
+  };
+}
+
+// src/components/VariantDropdown.tsx
+import {
+  useEffect as useEffect5,
+  useId,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+import { dropdown } from "@lime-bundles/core";
 import { jsx, jsxs } from "react/jsx-runtime";
+var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = dropdown;
+var ITEM_HEIGHT_PX = 32;
+var LIST_PAD_Y = 8;
+var MAX_VISIBLE_ITEMS = 8;
+function VariantDropdown({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  className
+}) {
+  const idBase = useId();
+  const triggerRef = useRef3(null);
+  const listboxRef = useRef3(null);
+  const typeAheadRef = useRef3(emptyTypeAheadState());
+  const [isOpen, setIsOpen] = useState4(false);
+  const [activeIndex, setActiveIndex] = useState4(-1);
+  const [position, setPosition] = useState4(null);
+  const selectedIndex = useMemo3(
+    () => options.findIndex((o) => o.value === value),
+    [options, value]
+  );
+  const optionsState = useMemo3(
+    () => options.map((o) => ({ disabled: !!o.disabled, label: o.label })),
+    [options]
+  );
+  const selectedLabel = selectedIndex >= 0 ? options[selectedIndex].label : "";
+  function open() {
+    if (isOpen) return;
+    setIsOpen(true);
+    setActiveIndex(
+      selectedIndex >= 0 && !optionsState[selectedIndex]?.disabled ? selectedIndex : optionsState.findIndex((o) => !o.disabled)
+    );
+  }
+  function close(restoreFocus) {
+    setIsOpen(false);
+    setActiveIndex(-1);
+    if (restoreFocus) triggerRef.current?.focus();
+  }
+  function commit(index) {
+    const opt = options[index];
+    if (!opt || opt.disabled) return;
+    if (opt.value !== value) onChange(opt.value);
+    close(true);
+  }
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const visibleCount = Math.min(options.length || 1, MAX_VISIBLE_ITEMS);
+    const desiredHeight = visibleCount * ITEM_HEIGHT_PX + LIST_PAD_Y;
+    setPosition(
+      computePosition({
+        trigger: {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          width: rect.width
+        },
+        viewportHeight: window.innerHeight,
+        desiredHeight
+      })
+    );
+  }, [isOpen, options.length]);
+  useEffect5(() => {
+    if (!isOpen) return;
+    const isInsideDropdown = (event) => {
+      const path = event.composedPath();
+      const trigger = triggerRef.current;
+      const listbox = listboxRef.current;
+      return trigger != null && path.includes(trigger) || listbox != null && path.includes(listbox);
+    };
+    const onPointerdown = (event) => {
+      if (isInsideDropdown(event)) return;
+      close(false);
+    };
+    const onScroll = (event) => {
+      if (isInsideDropdown(event)) return;
+      close(false);
+    };
+    const onResize = () => close(false);
+    document.addEventListener("pointerdown", onPointerdown, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerdown, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [isOpen]);
+  useEffect5(() => {
+    if (!isOpen || activeIndex < 0) return;
+    const listbox = listboxRef.current;
+    if (!listbox) return;
+    const li = listbox.querySelector(
+      `#${CSS.escape(`${idBase}-opt-${activeIndex}`)}`
+    );
+    if (!li) return;
+    const liTop = li.offsetTop;
+    const liBottom = liTop + li.offsetHeight;
+    const visTop = listbox.scrollTop;
+    const visBottom = visTop + listbox.clientHeight;
+    if (liTop < visTop) {
+      listbox.scrollTop = liTop;
+    } else if (liBottom > visBottom) {
+      listbox.scrollTop = liBottom - listbox.clientHeight;
+    }
+  }, [activeIndex, isOpen, idBase]);
+  function onKeyDown(event) {
+    const action = handleKey(
+      {
+        key: event.key,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey
+      },
+      { isOpen, activeIndex, selectedIndex, options: optionsState }
+    );
+    if (action.preventDefault) event.preventDefault();
+    switch (action.type) {
+      case "open":
+        open();
+        if (action.activeIndex >= 0) setActiveIndex(action.activeIndex);
+        return;
+      case "close":
+        close(action.restoreFocus);
+        return;
+      case "move-active":
+        setActiveIndex(action.activeIndex);
+        return;
+      case "commit":
+        commit(action.index);
+        return;
+      case "type-ahead": {
+        const result = pushTypeAheadChar(
+          typeAheadRef.current,
+          action.char,
+          Date.now(),
+          optionsState
+        );
+        typeAheadRef.current = result.newState;
+        if (result.matchedIndex !== null) {
+          if (!isOpen) open();
+          setActiveIndex(result.matchedIndex);
+        }
+        return;
+      }
+      case "passthrough":
+        return;
+    }
+  }
+  function onShellBlur(event) {
+    const next = event.relatedTarget;
+    if (next && event.currentTarget.contains(next)) return;
+    setTimeout(() => {
+      if (!isOpen) return;
+      const active = document.activeElement;
+      if (!triggerRef.current?.contains(active) && !listboxRef.current?.contains(active)) {
+        close(false);
+      }
+    }, 0);
+  }
+  const listboxId = `${idBase}-listbox`;
+  const activeDescendantId = activeIndex >= 0 ? `${idBase}-opt-${activeIndex}` : void 0;
+  const panelStyle = position ? { maxHeight: position.maxHeight } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `lb-dropdown${className ? ` ${className}` : ""}`,
+      "data-lb-dropdown": "",
+      onBlur: onShellBlur,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "lb-dropdown-trigger",
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": listboxId,
+            "aria-label": ariaLabel,
+            "aria-activedescendant": activeDescendantId,
+            onClick: (e) => {
+              e.preventDefault();
+              if (isOpen) close(false);
+              else open();
+            },
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "lb-dropdown-trigger-value", children: selectedLabel }),
+              /* @__PURE__ */ jsx("span", { className: "lb-dropdown-chevron", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ref: listboxRef,
+            id: listboxId,
+            className: "lb-dropdown-listbox",
+            role: "listbox",
+            "aria-label": ariaLabel,
+            hidden: !isOpen,
+            "data-placement": position?.placement,
+            style: panelStyle,
+            onMouseDown: (e) => e.preventDefault(),
+            children: options.map((opt, i) => (
+              // Keyboard activation lives on the trigger combobox via
+              // aria-activedescendant — the WAI-ARIA combobox pattern keeps
+              // focus on the button and tracks the active option by id, so
+              // the option <li> elements deliberately have no key handlers.
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+              /* @__PURE__ */ jsx(
+                "li",
+                {
+                  id: `${idBase}-opt-${i}`,
+                  className: `lb-dropdown-option${i === activeIndex ? " is-active" : ""}`,
+                  role: "option",
+                  "aria-selected": i === selectedIndex,
+                  "aria-disabled": opt.disabled || void 0,
+                  "data-value": opt.value,
+                  onClick: () => commit(i),
+                  onMouseMove: () => {
+                    if (!opt.disabled && i !== activeIndex) setActiveIndex(i);
+                  },
+                  children: opt.label
+                },
+                opt.value
+              )
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/FixedBundle.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -233,11 +565,21 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = useState3(false);
-  const [cartError, setCartError] = useState3(null);
+  const [addingToCart, setAddingToCart] = useState5(false);
+  const [cartError, setCartError] = useState5(null);
+  const [selectedVariants, setSelectedVariants] = useState5({});
+  const handleVariantChange = useCallback4(
+    (productId, variant) => {
+      setSelectedVariants((prev) => {
+        if (prev[productId] === variant) return prev;
+        return { ...prev, [productId]: variant };
+      });
+    },
+    []
+  );
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect4(() => {
+  useEffect6(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -250,10 +592,10 @@ function FixedBundle(props) {
       );
     }
   }, [result, onError]);
-  const handleAddToCart = useCallback3(async () => {
+  const handleAddToCart = useCallback4(async () => {
     if (!bundle) return;
     const bundleLines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
-      const variant = p.variants.nodes.find((v) => v.availableForSale);
+      const variant = selectedVariants[p.id] ?? p.variants.nodes.find((v) => v.availableForSale);
       return {
         productId: p.id,
         variant,
@@ -297,17 +639,17 @@ function FixedBundle(props) {
     } finally {
       setAddingToCart(false);
     }
-  }, [bundle, onAddToCart, onError, trackAddToCart]);
+  }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs2("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: (el) => {
@@ -318,38 +660,19 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx("h3", { className: "lb-bundle__title", children: bundle.title }),
-        bundle.discountLabel && /* @__PURE__ */ jsx("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ jsx("div", { className: "lb-bundle__products", children: bundle.products.map((product) => {
-          const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-          const priceText = variant ? formatMoney(variant.price.amount, currency) : formatMoney(
-            product.priceRange.minVariantPrice.amount,
-            currency
-          );
-          const unitPriceText = variant ? formatUnitPrice(
-            variant.unitPrice,
-            variant.unitPriceMeasurement,
-            currency
-          ) : null;
-          return /* @__PURE__ */ jsxs("div", { className: "lb-bundle__product", part: "product", children: [
-            product.featuredImage && /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: product.featuredImage.url,
-                alt: product.featuredImage.altText ?? product.title,
-                className: "lb-bundle__product-image",
-                loading: "lazy"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "lb-bundle__product-info", children: [
-              /* @__PURE__ */ jsx("p", { className: "lb-bundle__product-title", children: product.title }),
-              /* @__PURE__ */ jsx("p", { className: "lb-bundle__product-price", children: priceText }),
-              unitPriceText && /* @__PURE__ */ jsx("p", { className: "lb-bundle__product-unit-price", children: unitPriceText })
-            ] })
-          ] }, product.id);
-        }) }),
-        cartError && /* @__PURE__ */ jsx("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2("h3", { className: "lb-bundle__title", children: bundle.title }),
+        bundle.discountLabel && /* @__PURE__ */ jsx2("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
+        /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products", children: bundle.products.map((product) => /* @__PURE__ */ jsx2(
+          FixedProductRow,
+          {
+            product,
+            currency,
+            onVariantChange: handleVariantChange
+          },
+          product.id
+        )) }),
+        cartError && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx2(
           "button",
           {
             className: "lb-bundle__cta",
@@ -363,16 +686,72 @@ function FixedBundle(props) {
     }
   );
 }
+function FixedProductRow({ product, currency, onVariantChange }) {
+  const variants = product.variants.nodes;
+  const optionNames = useMemo4(() => {
+    const first = variants[0];
+    return first ? first.selectedOptions.map((o) => o.name) : [];
+  }, [variants]);
+  const showPicker = variants.length > 1 && optionNames.length > 0;
+  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({
+    variants,
+    optionNames
+  });
+  useEffect6(() => {
+    onVariantChange(product.id, selectedVariant ?? null);
+  }, [selectedVariant, product.id, onVariantChange]);
+  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0];
+  const priceText = displayVariant ? formatMoney(displayVariant.price.amount, currency) : formatMoney(product.priceRange.minVariantPrice.amount, currency);
+  const unitPriceText = displayVariant ? formatUnitPrice(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  ) : null;
+  const thumbImage = displayVariant?.image ?? product.featuredImage;
+  return /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product", part: "product", children: [
+    thumbImage && /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: thumbImage.url,
+        alt: thumbImage.altText ?? product.title,
+        className: "lb-bundle__product-image",
+        loading: "lazy"
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
+      /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-price", children: priceText }),
+      unitPriceText && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+      showPicker && /* @__PURE__ */ jsx2("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+        const dropdownOptions = optionsFor(optionIndex).map((o) => ({
+          value: o.value,
+          label: o.value,
+          disabled: o.disabled
+        }));
+        return /* @__PURE__ */ jsx2(
+          VariantDropdown,
+          {
+            options: dropdownOptions,
+            value: selectedValues[optionIndex] ?? null,
+            onChange: (v) => setOptionValue(optionIndex, v),
+            ariaLabel: optionName
+          },
+          optionName
+        );
+      }) })
+    ] })
+  ] });
+}
 
 // src/components/MixMatchBundle.tsx
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo5, useState as useState6 } from "react";
 import {
   formatMoney as formatMoney2,
   formatUnitPrice as formatUnitPrice2,
   validateQuantity,
   resolveBundleQty as resolveBundleQty2
 } from "@lime-bundles/core";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function MixMatchBundle(props) {
   const {
     shopDomain,
@@ -396,14 +775,14 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = useState4(
+  const [selections, setSelections] = useState6(
     /* @__PURE__ */ new Map()
   );
-  const [addingToCart, setAddingToCart] = useState4(false);
-  const [cartError, setCartError] = useState4(null);
+  const [addingToCart, setAddingToCart] = useState6(false);
+  const [cartError, setCartError] = useState6(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect5(() => {
+  useEffect7(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -421,7 +800,7 @@ function MixMatchBundle(props) {
     0
   );
   const validation = bundle ? validateQuantity(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = useCallback4(
+  const toggleProduct = useCallback5(
     (productId, variant) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -441,7 +820,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const updateQuantity = useCallback4(
+  const updateQuantity = useCallback5(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -456,7 +835,7 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const handleAddToCart = useCallback4(async () => {
+  const handleAddToCart = useCallback5(async () => {
     if (!bundle || !validation.valid) return;
     const lines = Array.from(selections.values()).map((s) => ({
       merchandiseId: s.variantId,
@@ -501,15 +880,15 @@ function MixMatchBundle(props) {
     totalQuantity
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs2("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: (el) => {
@@ -520,83 +899,23 @@ function MixMatchBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx2("h3", { className: "lb-bundle__title", children: bundle.title }),
-        bundle.discountLabel && /* @__PURE__ */ jsx2("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ jsx2("p", { className: "lb-bundle__instructions", children: bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : bundle.maxQuantity ? `Select up to ${bundle.maxQuantity} items` : "Select your items" }),
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => {
-          const defaultVariant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-          if (!defaultVariant) return null;
-          const key = `${product.id}:${defaultVariant.id}`;
-          const selected = selections.get(key);
-          return /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              className: `lb-bundle__product lb-bundle__product--selectable ${selected ? "lb-bundle__product--selected" : ""}`,
-              children: [
-                product.featuredImage && /* @__PURE__ */ jsx2(
-                  "img",
-                  {
-                    src: product.featuredImage.url,
-                    alt: product.featuredImage.altText ?? product.title,
-                    className: "lb-bundle__product-image",
-                    loading: "lazy"
-                  }
-                ),
-                /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product-info", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
-                  /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-price", children: formatMoney2(defaultVariant.price.amount, currency) }),
-                  (() => {
-                    const unitPriceText = formatUnitPrice2(
-                      defaultVariant.unitPrice,
-                      defaultVariant.unitPriceMeasurement,
-                      currency
-                    );
-                    return unitPriceText ? /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }) : null;
-                  })()
-                ] }),
-                /* @__PURE__ */ jsx2("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__quantity-control", children: [
-                  /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      "aria-label": `Decrease ${product.title}`,
-                      onClick: () => updateQuantity(
-                        product.id,
-                        defaultVariant.id,
-                        selected.quantity - 1
-                      ),
-                      children: "\u2212"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2("span", { children: selected.quantity }),
-                  /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      "aria-label": `Increase ${product.title}`,
-                      onClick: () => updateQuantity(
-                        product.id,
-                        defaultVariant.id,
-                        selected.quantity + 1
-                      ),
-                      children: "+"
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    className: "lb-bundle__select-btn",
-                    onClick: () => toggleProduct(product.id, defaultVariant),
-                    disabled: !defaultVariant.availableForSale,
-                    children: defaultVariant.availableForSale ? "Select" : "Sold out"
-                  }
-                ) })
-              ]
-            },
-            product.id
-          );
-        }) }),
-        validation.message && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
-        cartError && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3("h3", { className: "lb-bundle__title", children: bundle.title }),
+        bundle.discountLabel && /* @__PURE__ */ jsx3("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
+        /* @__PURE__ */ jsx3("p", { className: "lb-bundle__instructions", children: bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : bundle.maxQuantity ? `Select up to ${bundle.maxQuantity} items` : "Select your items" }),
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
+          MixMatchProductRow,
+          {
+            product,
+            currency,
+            selections,
+            onToggle: toggleProduct,
+            onUpdateQuantity: updateQuantity
+          },
+          product.id
+        )) }),
+        validation.message && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
+        cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx3(
           "button",
           {
             className: "lb-bundle__cta",
@@ -610,16 +929,115 @@ function MixMatchBundle(props) {
     }
   );
 }
+function MixMatchProductRow({
+  product,
+  currency,
+  selections,
+  onToggle,
+  onUpdateQuantity
+}) {
+  const variants = product.variants.nodes;
+  const optionNames = useMemo5(() => {
+    const first = variants[0];
+    return first ? first.selectedOptions.map((o) => o.name) : [];
+  }, [variants]);
+  const showPicker = variants.length > 1 && optionNames.length > 0;
+  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
+  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+  if (!displayVariant) return null;
+  const key = `${product.id}:${displayVariant.id}`;
+  const selected = selections.get(key);
+  const thumbImage = displayVariant.image ?? product.featuredImage;
+  const unitPriceText = formatUnitPrice2(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  );
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `lb-bundle__product lb-bundle__product--selectable ${selected ? "lb-bundle__product--selected" : ""}`,
+      children: [
+        thumbImage && /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: thumbImage.url,
+            alt: thumbImage.altText ?? product.title,
+            className: "lb-bundle__product-image",
+            loading: "lazy"
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
+          /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-price", children: formatMoney2(displayVariant.price.amount, currency) }),
+          unitPriceText && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+          showPicker && !selected && /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            const dropdownOptions = optionsFor(optionIndex).map((o) => ({
+              value: o.value,
+              label: o.value,
+              disabled: o.disabled
+            }));
+            return /* @__PURE__ */ jsx3(
+              VariantDropdown,
+              {
+                options: dropdownOptions,
+                value: selectedValues[optionIndex] ?? null,
+                onChange: (v) => setOptionValue(optionIndex, v),
+                ariaLabel: optionName
+              },
+              optionName
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-control", children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              "aria-label": `Decrease ${product.title}`,
+              onClick: () => onUpdateQuantity(
+                product.id,
+                displayVariant.id,
+                selected.quantity - 1
+              ),
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ jsx3("span", { children: selected.quantity }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              "aria-label": `Increase ${product.title}`,
+              onClick: () => onUpdateQuantity(
+                product.id,
+                displayVariant.id,
+                selected.quantity + 1
+              ),
+              children: "+"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "lb-bundle__select-btn",
+            onClick: () => onToggle(product.id, displayVariant),
+            disabled: !displayVariant.availableForSale,
+            children: displayVariant.availableForSale ? "Select" : "Sold out"
+          }
+        ) })
+      ]
+    }
+  );
+}
 
 // src/components/VolumeBundle.tsx
-import { useCallback as useCallback5, useEffect as useEffect6, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo6, useState as useState7 } from "react";
 import {
   formatMoney as formatMoney3,
   formatUnitPrice as formatUnitPrice3,
   calculateTierSavings,
   getActiveTier
 } from "@lime-bundles/core";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -643,12 +1061,12 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = useState5(1);
-  const [addingToCart, setAddingToCart] = useState5(false);
-  const [cartError, setCartError] = useState5(null);
+  const [quantity, setQuantity] = useState7(1);
+  const [addingToCart, setAddingToCart] = useState7(false);
+  const [cartError, setCartError] = useState7(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect6(() => {
+  useEffect8(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -662,18 +1080,35 @@ function VolumeBundle(props) {
     }
   }, [result, onError]);
   const product = bundle?.products[0];
-  const basePrice = product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
+  const variants = useMemo6(() => product?.variants.nodes ?? [], [product]);
+  const optionNames = useMemo6(() => {
+    const first = variants[0];
+    return first ? first.selectedOptions.map((o) => o.name) : [];
+  }, [variants]);
+  const showPicker = variants.length > 1 && optionNames.length > 0;
+  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
+  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0];
+  const basePrice = displayVariant ? parseFloat(displayVariant.price.amount) : product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  const tierSavings = bundle ? calculateTierSavings(
-    bundle.volumeTiers,
-    basePrice,
-    quantity,
-    bundle.discountConfig.discountType
-  ) : [];
+  const thumbImage = displayVariant?.image ?? product?.featuredImage ?? null;
+  const unitPriceText = displayVariant ? formatUnitPrice3(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  ) : null;
+  const tierSavings = useMemo6(
+    () => bundle ? calculateTierSavings(
+      bundle.volumeTiers,
+      basePrice,
+      quantity,
+      bundle.discountConfig.discountType
+    ) : [],
+    [bundle, basePrice, quantity]
+  );
   const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
-  const handleAddToCart = useCallback5(async () => {
+  const handleAddToCart = useCallback6(async () => {
     if (!bundle || !product) return;
-    const variant = product.variants.nodes.find((v) => v.availableForSale);
+    const variant = selectedVariant ?? product.variants.nodes.find((v) => v.availableForSale);
     if (!variant) return;
     const lines = [
       {
@@ -710,18 +1145,20 @@ function VolumeBundle(props) {
     basePrice,
     onAddToCart,
     onError,
-    trackAddToCart
+    trackAddToCart,
+    selectedVariant,
+    tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ jsxs4("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: (el) => {
@@ -732,55 +1169,64 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx3("h3", { className: "lb-bundle__title", children: bundle.title }),
-        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product lb-bundle__product--volume", children: [
-          product.featuredImage && /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("h3", { className: "lb-bundle__title", children: bundle.title }),
+        /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__product lb-bundle__product--volume", children: [
+          thumbImage && /* @__PURE__ */ jsx4(
             "img",
             {
-              src: product.featuredImage.url,
-              alt: product.featuredImage.altText ?? product.title,
+              src: thumbImage.url,
+              alt: thumbImage.altText ?? product.title,
               className: "lb-bundle__product-image",
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ jsxs3("p", { className: "lb-bundle__product-price", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ jsx4("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ jsxs4("p", { className: "lb-bundle__product-price", children: [
               formatMoney3(basePrice, currency),
               " each"
             ] }),
-            (() => {
-              const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-              const unitPriceText = variant ? formatUnitPrice3(
-                variant.unitPrice,
-                variant.unitPriceMeasurement,
-                currency
-              ) : null;
-              return unitPriceText ? /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }) : null;
-            })()
+            unitPriceText && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ jsx4("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+              const dropdownOptions = optionsFor(optionIndex).map((o) => ({
+                value: o.value,
+                label: o.value,
+                disabled: o.disabled
+              }));
+              return /* @__PURE__ */ jsx4(
+                VariantDropdown,
+                {
+                  options: dropdownOptions,
+                  value: selectedValues[optionIndex] ?? null,
+                  onChange: (v) => setOptionValue(optionIndex, v),
+                  ariaLabel: optionName
+                },
+                optionName
+              );
+            }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             className: "lb-bundle__tiers",
             role: "table",
             "aria-label": "Volume discounts",
-            children: tierSavings.map((ts) => /* @__PURE__ */ jsxs3(
+            children: tierSavings.map((ts) => /* @__PURE__ */ jsxs4(
               "div",
               {
                 className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
                 role: "row",
                 children: [
-                  /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
                     ts.tier.minQuantity,
                     "+ items"
                   ] }),
-                  /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-price", role: "cell", children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "lb-bundle__tier-price", role: "cell", children: [
                     formatMoney3(ts.unitPrice, currency),
                     " each"
                   ] }),
-                  /* @__PURE__ */ jsxs3("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
                     "Save ",
                     ts.savingsPercent.toFixed(0),
                     "%"
@@ -791,10 +1237,10 @@ function VolumeBundle(props) {
             ))
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -802,7 +1248,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -816,7 +1262,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -826,8 +1272,8 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx3(
+        cartError && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx4(
           "button",
           {
             className: "lb-bundle__cta",
@@ -843,7 +1289,7 @@ function VolumeBundle(props) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-import { useState as useState6, useEffect as useEffect7 } from "react";
+import { useState as useState8, useEffect as useEffect9 } from "react";
 import {
   fetchBundlesForProduct,
   injectCustomCss as injectCustomCss2
@@ -854,10 +1300,10 @@ var INITIAL_STATE2 = {
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = useState6(
+  const [state, setState] = useState8(
     INITIAL_STATE2
   );
-  useEffect7(() => {
+  useEffect9(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
     fetchBundlesForProduct({
@@ -943,6 +1389,7 @@ export {
   MixMatchBundle,
   SHOP_CUSTOM_CSS_QUERY2 as SHOP_CUSTOM_CSS_QUERY,
   StorefrontApiError,
+  VariantDropdown,
   VolumeBundle,
   WIDGET_CONFIG_DEFAULTS,
   applyABVariantB,
@@ -978,6 +1425,7 @@ export {
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
+  useVariantSelection,
   useWidgetConfigVars,
   validateQuantity2 as validateQuantity
 };