@snacky/ui 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -4,6 +4,67 @@ How `@snacky/ui` got to its current state. The README documents what the
 package *is*; this documents how it got there, including the mistakes, so the
 verification claims in the README can be taken at face value.
 
+## ProductGroupSection, and a mouse-draggable product row (0.13.0)
+
+`ProductGroupSection` is a titled group of list `ProductCard`s with
+`layout="horizontal" | "banner" | "grid"`. It packages three variants of Figma's
+Section set (`Group-Products-Horizontal`, `-Banner`, `-vertical`), which between
+them have 8 instances across the Home and product detail screens.
+
+The reason it exists is that `Section` is a shell: a title, an optional see-more
+chevron, and `children`. Those three variants were never props on it, so every
+use meant rebuilding the same things by hand, and a design agent working from the
+package had to improvise them: the trailing "See other products" card (which
+Figma also draws by hand, twice), a row that runs out to the screen's right edge,
+and for the banner variant, zero side padding plus a full-bleed banner with the
+row laid over it from x160. The component carries all of that:
+
+- `onSeeMore` shows the header chevron and, in the two scrolling layouts, the
+  trailing card (`seeMoreLabel` defaults to "See other products").
+- `banner` is required for `layout="banner"`, normally a `SquareBanner`. The row
+  spans the full width with its first card at x160, so scrolling carries the cards
+  over the banner while the banner stays put.
+- Rows scroll by touch and trackpad natively, and by mouse drag. The pointer is
+  captured only after a 4px move, so a tap on a card's cart button still lands.
+
+Heights match the Figma nodes: 372 horizontal, 396 banner, 1278 for a grid of
+eight cards. `Section` itself is unchanged; the order-screen Section variants have
+no instances in Figma and stay compositions inside it.
+
+compose-ui ships the same as `SnackyProductGroupSection` with
+`ProductGroupLayout.Horizontal | Banner | Grid` in `compose-v2.3.0`, where the
+banner is an image slot like the rest of the Banner family. `SnackySection`'s
+header is now a shared internal `SnackySectionHeader`; its public API is
+unchanged. Additive on both sides.
+
+## The solid address icon (0.12.0)
+
+`SnackyIcons.solid.address` is new: the filled map marker, added to Figma's
+`Icon-solid` set as `general/pin` (UIcons `fi-sr-marker`), 16x16, with its fill
+bound to `icon/icon-brand`. The solid set is 13 icons now.
+
+It ships as `address` rather than `pin` because a solid icon here takes the name
+of its outline twin, and this is the same marker shape as the existing
+`SnackyIcons.outline.address`. That is the rule the rest of the set already
+follows (Figma's `riwayat` is `history`, `Fav` is `heart`), and it means an
+active/inactive pair is always `outline.x` and `solid.x` with no lookup table.
+It is 16px where its outline twin is 24; `heart` has the same kind of mismatch
+(20 solid, 24 outline), and each icon still defaults to its own authored size.
+
+compose-ui ships the same icon as `SnackyIcons.Solid.Address` in
+`compose-v2.2.0`, plus one helper it was missing:
+`SnackyTypographyToken.toTextStyle(color, fontFamily)`. compose-ui's type tokens
+are raw values rather than `TextStyle`s (the package ships no font), and nothing
+turned one into the other, so every component built the style by hand and 58 of
+the docs site's Kotlin samples were broken or incomplete: 24 called a
+`toTextStyle()` that only existed as a helper the Foundations page told you to
+paste in yourself, and the rest used flat names like
+`SnackyTypography.smallRegular` that never existed at all. Those samples now use
+`SnackyTypography.Small.regular.toTextStyle()`. The React samples had the same
+flat-name problem (`typography.smallRegular`, 43 places) against an export that
+is nested (`typography.small.regular`), and are fixed the same way. Additive on
+both sides.
+
 ## PageIndicator, and a semantic role for indicator dots (0.11.0)
 
 `PageIndicator` is the dot row under a carousel: 8x8 dots, a 28x8 pill for the

package/README.md

@@ -121,7 +121,7 @@ placeholder artwork rather than a real icon prop. Apply your own
 
 ## What's here
 
-All 25 documented components, matching the real Figma-sourced spec values
+All 26 documented components, matching the real Figma-sourced spec values
 (padding, colors, radius, states - all sourced directly from the design
 tokens, not eyeballed):
 
@@ -130,11 +130,12 @@ OtpField, CopyField, ChatInput, AddressResult), Chips (ProductChip/FilterChip),
 RadioOption, Checkbox, Toggle, NavBar, TabRow, Header, PageIndicator, Banner
 family, Badge family,
 Callout, List (OrderListItem/NotificationListItem), Accordion, BottomSheet
-(the shared Modal shell), Section (the shared content-block shell), Avatar,
+(the shared Modal shell), Section (the shared content-block shell),
+ProductGroupSection (titled product rows and grids), Avatar,
 Illustration, ProductImage, ProductCard.
 
 Plus the icon set, as `SnackyIcons.outline.*` and `SnackyIcons.solid.*` (42
-Outline, 12 Solid). Two things to know: they are **filled** shapes rather than
+Outline, 13 Solid). Two things to know: they are **filled** shapes rather than
 stroked paths, so there is no `strokeWidth` to set, and the set is **not
 uniform** - each icon is authored at 16, 20 or 24px and defaults to its own
 natural size, so pass `width`/`height` if you need them to match.

package/dist/index.cjs

@@ -49,6 +49,7 @@ __export(index_exports, {
   PointBalanceBanner: () => PointBalanceBanner,
   ProductCard: () => ProductCard,
   ProductChip: () => ProductChip,
+  ProductGroupSection: () => ProductGroupSection,
   ProductImage: () => ProductImage,
   RadioOption: () => RadioOption,
   SearchField: () => SearchField,
@@ -705,6 +706,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  address: () => address2,
   angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
@@ -736,6 +738,9 @@ var account2 = icon2(20, [
   ["M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z", "nonzero"],
   ["M10 11.6659C5.85977 11.6705 2.50461 15.0257 2.5 19.1659C2.5 19.6261 2.87309 19.9992 3.33332 19.9992H16.6666C17.1269 19.9992 17.5 19.6261 17.5 19.1659C17.4954 15.0257 14.1402 11.6705 10 11.6659Z", "nonzero"]
 ]);
+var address2 = icon2(16, [
+  ["M8.00001 0.0283203C6.23597 0.030261 4.54473 0.731837 3.2973 1.97914C2.04987 3.22644 1.34813 4.91762 1.34601 6.68165C1.34601 8.39499 2.67268 11.0763 5.28934 14.651C5.60085 15.0777 6.00871 15.4249 6.47974 15.6643C6.95077 15.9036 7.47166 16.0283 8.00001 16.0283C8.52836 16.0283 9.04924 15.9036 9.52027 15.6643C9.9913 15.4249 10.3992 15.0777 10.7107 14.651C13.3273 11.0763 14.654 8.39499 14.654 6.68165C14.6519 4.91762 13.9501 3.22644 12.7027 1.97914C11.4553 0.731837 9.76405 0.030261 8.00001 0.0283203V0.0283203ZM8.00001 9.33365C7.47259 9.33365 6.95702 9.17726 6.51849 8.88424C6.07996 8.59122 5.73816 8.17475 5.53633 7.68748C5.3345 7.20021 5.28169 6.66403 5.38458 6.14675C5.48747 5.62946 5.74145 5.15431 6.11439 4.78137C6.48733 4.40843 6.96248 4.15445 7.47977 4.05156C7.99705 3.94867 8.53323 4.00148 9.0205 4.20331C9.50777 4.40514 9.92424 4.74694 10.2173 5.18547C10.5103 5.624 10.6667 6.13957 10.6667 6.66699C10.6667 7.37423 10.3857 8.05251 9.88563 8.55261C9.38553 9.0527 8.70725 9.33365 8.00001 9.33365Z", "nonzero"]
+]);
 var angleSmallRight = icon2(24, [
   ["M15.75 9.525L11.164 4.939C10.8827 4.65774 10.5011 4.49978 10.1032 4.49988C9.70534 4.49997 9.32381 4.65811 9.04255 4.9395C8.76129 5.2209 8.60333 5.6025 8.60342 6.00036C8.60352 6.39822 8.76166 6.77974 9.04305 7.061L13.629 11.646C13.6756 11.6925 13.7125 11.7476 13.7378 11.8084C13.763 11.8691 13.7759 11.9342 13.7759 12C13.7759 12.0658 13.763 12.1309 13.7378 12.1916C13.7125 12.2524 13.6756 12.3076 13.629 12.354L9.04305 16.939C8.76166 17.2203 8.60352 17.6018 8.60342 17.9997C8.60333 18.3975 8.76129 18.7791 9.04255 19.0605C9.32381 19.3419 9.70534 19.5 10.1032 19.5001C10.5011 19.5002 10.8827 19.3423 11.164 19.061L15.75 14.475C16.4053 13.818 16.7732 12.9279 16.7732 12C16.7732 11.0721 16.4053 10.182 15.75 9.525Z", "nonzero"]
 ]);
@@ -1063,18 +1068,102 @@ function Section({ title, onAction, children, className }) {
   ] });
 }
 
-// src/components/Stepper/Stepper.tsx
+// src/components/ProductGroupSection/ProductGroupSection.tsx
+var import_react12 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function ProductGroupSection({
+  title,
+  layout,
+  children,
+  onSeeMore,
+  seeMoreLabel = "See other products",
+  banner,
+  className
+}) {
+  const drag = useDragScroll();
+  const seeMore = onSeeMore && layout !== "grid" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-product-group__see-more", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(angleSmallRight, {}), onClick: onSeeMore, ariaLabel: seeMoreLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-product-group__see-more-label", children: seeMoreLabel })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    Section,
+    {
+      title,
+      onAction: onSeeMore,
+      className: cx("snacky-product-group", `snacky-product-group--${layout}`, className),
+      children: [
+        layout === "grid" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "snacky-product-group__grid", children }),
+        layout === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-product-group__row", ...drag, children: [
+          children,
+          seeMore
+        ] }),
+        layout === "banner" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-product-group__stage", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "snacky-product-group__banner", children: banner }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-product-group__row", ...drag, children: [
+            children,
+            seeMore
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function useDragScroll() {
+  const state = (0, import_react12.useRef)(null);
+  const justDragged = (0, import_react12.useRef)(false);
+  return {
+    onPointerDown(e) {
+      if (e.pointerType !== "mouse") return;
+      state.current = { x: e.clientX, left: e.currentTarget.scrollLeft, moved: false, id: e.pointerId };
+    },
+    onPointerMove(e) {
+      const d = state.current;
+      if (!d) return;
+      const dx = e.clientX - d.x;
+      if (!d.moved && Math.abs(dx) > 4) {
+        d.moved = true;
+        e.currentTarget.setPointerCapture(d.id);
+        e.currentTarget.classList.add("snacky-product-group__row--dragging");
+      }
+      if (d.moved) e.currentTarget.scrollLeft = d.left - dx;
+    },
+    onPointerUp(e) {
+      if (state.current?.moved) {
+        e.currentTarget.classList.remove("snacky-product-group__row--dragging");
+        justDragged.current = true;
+        setTimeout(() => {
+          justDragged.current = false;
+        }, 0);
+      }
+      state.current = null;
+    },
+    onPointerCancel() {
+      state.current = null;
+    },
+    onClickCapture(e) {
+      if (justDragged.current) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    },
+    onDragStart(e) {
+      e.preventDefault();
+    }
+  };
+}
+
+// src/components/Stepper/Stepper.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Stepper({ steps, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "li",
     {
       className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(close, { width: 12, height: 12 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "snacky-stepper__body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
-          step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(close, { width: 12, height: 12 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "snacky-stepper__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
+          step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
         ] })
       ]
     },
@@ -1083,7 +1172,7 @@ function Stepper({ steps, className }) {
 }
 
 // src/components/Calendar/Calendar.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
   "January",
@@ -1130,39 +1219,39 @@ function Calendar({
   const [lo, hi] = range ? [range[0], range[1]].sort((a, b) => a.getTime() - b.getTime()) : [null, null];
   const isEnd = (d) => single && sameDay(d, single) || lo && hi && (sameDay(d, lo) || sameDay(d, hi));
   const isInRange = (d) => lo && hi && d > lo && d < hi;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("snacky-calendar", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "snacky-calendar__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cx("snacky-calendar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav",
           onClick: onPrevMonth,
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(back, { width: 24, height: 24 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "snacky-calendar__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "snacky-calendar__label", children: [
         MONTHS[month.getMonth()],
         " ",
         month.getFullYear()
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav snacky-calendar__nav--next",
           onClick: onNextMonth,
           "aria-label": "Next month",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(back, { width: 24, height: 24 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "snacky-calendar__grid", children: [
-      WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-calendar__grid", children: [
+      WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
       days.map((d, i) => {
         const outside = d.getMonth() !== month.getMonth();
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
             type: "button",
@@ -1176,26 +1265,26 @@ function Calendar({
             disabled: outside,
             "aria-current": isEnd(d) ? "date" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
-              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__marker" })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
+              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-calendar__marker" })
             ]
           },
           i
         );
       })
     ] }),
-    onAction && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
+    onAction && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Avatar({ src, alt, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
 }
 
 // src/components/Illustration/Illustration.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var SIZE = {
   empty: { width: 268, height: 200 },
   createAccount: { width: 360, height: 240 },
@@ -1205,54 +1294,54 @@ var SIZE = {
 };
 function Illustration({ variant, src, alt, className }) {
   const { width, height } = SIZE[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
 }
 
 // src/components/ProductImage/ProductImage.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ProductImage({ src, alt, usage, sold = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
-    sold && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
+    sold && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
   ] });
 }
 
 // src/components/ProductCard/ProductCard.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ProductCard(props) {
   if (props.variant === "details") {
     const { productName: productName2, imageUrl: imageUrl2, price: price2, rating: rating2, originalPrice: originalPrice2, discountLabel: discountLabel2, ratingCount, favorited, onFavoriteClick, onShareClick, onChatClick, sold, ratingIcon: ratingIcon2, favoriteIcon, shareIcon, chatIcon, onClick: onClick2, className: className2 } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
-        sold && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SoldOutBadge, {}) })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
+        sold && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SoldOutBadge, {}) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__details-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
-          originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
-          discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscountTag, { label: discountLabel2 })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__details-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
+          originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
+          discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DiscountTag, { label: discountLabel2 })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(star, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "snacky-product-card__rating", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(star, { width: 16, height: 16 }) }),
             rating2,
             " (",
             ratingCount,
             ")"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
           ] })
         ] })
       ] })
     ] });
   }
   const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: cx("snacky-product-card", "snacky-product-card--list", className),
@@ -1261,25 +1350,25 @@ function ProductCard(props) {
       onClick,
       onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
-          discountLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscountTag, { label: discountLabel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
+          discountLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DiscountTag, { label: discountLabel }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "snacky-product-card__name", children: productName }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__price", children: price }),
-          originalPrice && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "snacky-product-card__name", children: productName }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__price", children: price }),
+          originalPrice && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(star, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "snacky-product-card__rating", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(star, { width: 16, height: 16 }) }),
             rating
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             IconButton,
             {
               variant: "primary",
-              icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(cartAdd, { width: 16, height: 16 }),
+              icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(cartAdd, { width: 16, height: 16 }),
               onClick: (e) => {
                 e.stopPropagation();
                 onAddToCart();
@@ -1294,17 +1383,17 @@ function ProductCard(props) {
 }
 
 // src/components/ImagePlaceholder/ImagePlaceholder.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ImagePlaceholder({ width, height, className }) {
   const iconSize = Math.round(Math.min(width, height) * 0.32);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: cx("snacky-image-placeholder", className),
       style: { width, height },
       role: "img",
       "aria-label": "No image",
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "svg",
         {
           width: iconSize,
@@ -1316,9 +1405,9 @@ function ImagePlaceholder({ width, height, className }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "21 15 16 10 5 21" })
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("polyline", { points: "21 15 16 10 5 21" })
           ]
         }
       )
@@ -1356,6 +1445,7 @@ function ImagePlaceholder({ width, height, className }) {
   PointBalanceBanner,
   ProductCard,
   ProductChip,
+  ProductGroupSection,
   ProductImage,
   RadioOption,
   SearchField,