@snacky/ui 0.12.0 → 0.13.1

package/dist/index.d.cts

@@ -396,6 +396,32 @@ interface SectionProps {
  */
 declare function Section({ title, onAction, children, className }: SectionProps): react.JSX.Element;
 
+type ProductGroupLayout = 'horizontal' | 'banner' | 'grid';
+interface ProductGroupSectionProps {
+    title: string;
+    /**
+     * `horizontal`: one scrolling row of cards (Figma Section `Group-Products-Horizontal`).
+     * `banner`: the row laid over a full-bleed banner from x160, scrolling over it (`Group-Products-Banner`).
+     * `grid`: two columns (`Group-Products-vertical`).
+     */
+    layout: ProductGroupLayout;
+    /** The products, normally `ProductCard`s with `variant="list"`. */
+    children: ReactNode;
+    /** Shows the header chevron and, in the scrolling layouts, the trailing "See other products" card. */
+    onSeeMore?: () => void;
+    seeMoreLabel?: string;
+    /** Required for `layout="banner"`, normally a `SquareBanner`. It sits still behind the scrolling row. */
+    banner?: ReactNode;
+    className?: string;
+}
+/**
+ * Snacky Product Group Section: a titled group of product cards, the pattern
+ * behind three of Figma's Section variants (8 instances across Home and product
+ * detail). Section itself stays a generic shell; this packages the product
+ * layouts so they can be used by name instead of rebuilt by hand.
+ */
+declare function ProductGroupSection({ title, layout, children, onSeeMore, seeMoreLabel, banner, className, }: ProductGroupSectionProps): react.JSX.Element;
+
 type StepState = 'done' | 'pending' | 'cancelled';
 interface Step {
     label: string;
@@ -700,4 +726,4 @@ declare const SnackyIcons: {
     solid: typeof solid;
 };
 
-export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PageIndicator, type PageIndicatorProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };
+export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PageIndicator, type PageIndicatorProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, type ProductGroupLayout, ProductGroupSection, type ProductGroupSectionProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };

package/dist/index.d.ts

@@ -396,6 +396,32 @@ interface SectionProps {
  */
 declare function Section({ title, onAction, children, className }: SectionProps): react.JSX.Element;
 
+type ProductGroupLayout = 'horizontal' | 'banner' | 'grid';
+interface ProductGroupSectionProps {
+    title: string;
+    /**
+     * `horizontal`: one scrolling row of cards (Figma Section `Group-Products-Horizontal`).
+     * `banner`: the row laid over a full-bleed banner from x160, scrolling over it (`Group-Products-Banner`).
+     * `grid`: two columns (`Group-Products-vertical`).
+     */
+    layout: ProductGroupLayout;
+    /** The products, normally `ProductCard`s with `variant="list"`. */
+    children: ReactNode;
+    /** Shows the header chevron and, in the scrolling layouts, the trailing "See other products" card. */
+    onSeeMore?: () => void;
+    seeMoreLabel?: string;
+    /** Required for `layout="banner"`, normally a `SquareBanner`. It sits still behind the scrolling row. */
+    banner?: ReactNode;
+    className?: string;
+}
+/**
+ * Snacky Product Group Section: a titled group of product cards, the pattern
+ * behind three of Figma's Section variants (8 instances across Home and product
+ * detail). Section itself stays a generic shell; this packages the product
+ * layouts so they can be used by name instead of rebuilt by hand.
+ */
+declare function ProductGroupSection({ title, layout, children, onSeeMore, seeMoreLabel, banner, className, }: ProductGroupSectionProps): react.JSX.Element;
+
 type StepState = 'done' | 'pending' | 'cancelled';
 interface Step {
     label: string;
@@ -700,4 +726,4 @@ declare const SnackyIcons: {
     solid: typeof solid;
 };
 
-export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PageIndicator, type PageIndicatorProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };
+export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PageIndicator, type PageIndicatorProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, type ProductGroupLayout, ProductGroupSection, type ProductGroupSectionProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };

package/dist/index.js

@@ -1005,18 +1005,102 @@ function Section({ title, onAction, children, className }) {
   ] });
 }
 
-// src/components/Stepper/Stepper.tsx
+// src/components/ProductGroupSection/ProductGroupSection.tsx
+import { useRef as useRef2 } from "react";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+function ProductGroupSection({
+  title,
+  layout,
+  children,
+  onSeeMore,
+  seeMoreLabel = "See other products",
+  banner,
+  className
+}) {
+  const drag = useDragScroll();
+  const seeMore = onSeeMore && layout !== "grid" && /* @__PURE__ */ jsxs20("div", { className: "snacky-product-group__see-more", children: [
+    /* @__PURE__ */ jsx28(IconButton, { size: "small", icon: /* @__PURE__ */ jsx28(angleSmallRight, {}), onClick: onSeeMore, ariaLabel: seeMoreLabel }),
+    /* @__PURE__ */ jsx28("span", { className: "snacky-product-group__see-more-label", children: seeMoreLabel })
+  ] });
+  return /* @__PURE__ */ jsxs20(
+    Section,
+    {
+      title,
+      onAction: onSeeMore,
+      className: cx("snacky-product-group", `snacky-product-group--${layout}`, className),
+      children: [
+        layout === "grid" && /* @__PURE__ */ jsx28("div", { className: "snacky-product-group__grid", children }),
+        layout === "horizontal" && /* @__PURE__ */ jsxs20("div", { className: "snacky-product-group__row", ...drag, children: [
+          children,
+          seeMore
+        ] }),
+        layout === "banner" && /* @__PURE__ */ jsxs20("div", { className: "snacky-product-group__stage", children: [
+          /* @__PURE__ */ jsx28("div", { className: "snacky-product-group__banner", children: banner }),
+          /* @__PURE__ */ jsxs20("div", { className: "snacky-product-group__row", ...drag, children: [
+            children,
+            seeMore
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function useDragScroll() {
+  const state = useRef2(null);
+  const justDragged = useRef2(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
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 function Stepper({ steps, className }) {
-  return /* @__PURE__ */ jsx28("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx29("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs21(
     "li",
     {
       className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
       children: [
-        /* @__PURE__ */ jsx28("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ jsx28(close, { width: 12, height: 12 }) }),
-        /* @__PURE__ */ jsxs20("span", { className: "snacky-stepper__body", children: [
-          /* @__PURE__ */ jsx28("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
-          step.timestamp && /* @__PURE__ */ jsx28("span", { className: "snacky-stepper__time", children: step.timestamp })
+        /* @__PURE__ */ jsx29("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ jsx29(close, { width: 12, height: 12 }) }),
+        /* @__PURE__ */ jsxs21("span", { className: "snacky-stepper__body", children: [
+          /* @__PURE__ */ jsx29("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
+          step.timestamp && /* @__PURE__ */ jsx29("span", { className: "snacky-stepper__time", children: step.timestamp })
         ] })
       ]
     },
@@ -1025,7 +1109,7 @@ function Stepper({ steps, className }) {
 }
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
   "January",
@@ -1072,39 +1156,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__ */ jsxs21("div", { className: cx("snacky-calendar", className), children: [
-    /* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__header", children: [
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs22("div", { className: cx("snacky-calendar", className), children: [
+    /* @__PURE__ */ jsxs22("div", { className: "snacky-calendar__header", children: [
+      /* @__PURE__ */ jsx30(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav",
           onClick: onPrevMonth,
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx29(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ jsx30(back, { width: 24, height: 24 })
         }
       ),
-      /* @__PURE__ */ jsxs21("span", { className: "snacky-calendar__label", children: [
+      /* @__PURE__ */ jsxs22("span", { className: "snacky-calendar__label", children: [
         MONTHS[month.getMonth()],
         " ",
         month.getFullYear()
       ] }),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav snacky-calendar__nav--next",
           onClick: onNextMonth,
           "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx29(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ jsx30(back, { width: 24, height: 24 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__grid", children: [
-      WEEKDAYS.map((d) => /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__weekday", children: d }, d)),
+    /* @__PURE__ */ jsxs22("div", { className: "snacky-calendar__grid", children: [
+      WEEKDAYS.map((d) => /* @__PURE__ */ jsx30("span", { className: "snacky-calendar__weekday", children: d }, d)),
       days.map((d, i) => {
         const outside = d.getMonth() !== month.getMonth();
-        return /* @__PURE__ */ jsxs21(
+        return /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
@@ -1118,26 +1202,26 @@ function Calendar({
             disabled: outside,
             "aria-current": isEnd(d) ? "date" : void 0,
             children: [
-              /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
-              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__marker" })
+              /* @__PURE__ */ jsx30("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
+              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx30("span", { className: "snacky-calendar__marker" })
             ]
           },
           i
         );
       })
     ] }),
-    onAction && /* @__PURE__ */ jsx29(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
+    onAction && /* @__PURE__ */ jsx30(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Avatar({ src, alt, size = "md", className }) {
-  return /* @__PURE__ */ jsx30("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
+  return /* @__PURE__ */ jsx31("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
 }
 
 // src/components/Illustration/Illustration.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SIZE = {
   empty: { width: 268, height: 200 },
   createAccount: { width: 360, height: 240 },
@@ -1147,54 +1231,54 @@ var SIZE = {
 };
 function Illustration({ variant, src, alt, className }) {
   const { width, height } = SIZE[variant];
-  return /* @__PURE__ */ jsx31("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
+  return /* @__PURE__ */ jsx32("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
 }
 
 // src/components/ProductImage/ProductImage.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function ProductImage({ src, alt, usage, sold = false, className }) {
-  return /* @__PURE__ */ jsxs22("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
-    /* @__PURE__ */ jsx32("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
-    sold && /* @__PURE__ */ jsx32("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ jsx32("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
+  return /* @__PURE__ */ jsxs23("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
+    /* @__PURE__ */ jsx33("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
+    sold && /* @__PURE__ */ jsx33("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ jsx33("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
   ] });
 }
 
 // src/components/ProductCard/ProductCard.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "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__ */ jsxs23("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
-      /* @__PURE__ */ jsx33("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
-        /* @__PURE__ */ jsx33("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
-        sold && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ jsx33(SoldOutBadge, {}) })
+    return /* @__PURE__ */ jsxs24("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
+      /* @__PURE__ */ jsx34("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
+        /* @__PURE__ */ jsx34("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
+        sold && /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ jsx34(SoldOutBadge, {}) })
       ] }) }),
-      /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__details-body", children: [
-        /* @__PURE__ */ jsx33("p", { className: "snacky-product-card__name", children: productName2 }),
-        /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__price", children: price2 }),
-          originalPrice2 && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
-          discountLabel2 && /* @__PURE__ */ jsx33(DiscountTag, { label: discountLabel2 })
+      /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__details-body", children: [
+        /* @__PURE__ */ jsx34("p", { className: "snacky-product-card__name", children: productName2 }),
+        /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__price", children: price2 }),
+          originalPrice2 && /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
+          discountLabel2 && /* @__PURE__ */ jsx34(DiscountTag, { label: discountLabel2 })
         ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
-          /* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx33(star, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ jsxs24("span", { className: "snacky-product-card__rating", children: [
+            /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx34(star, { width: 16, height: 16 }) }),
             rating2,
             " (",
             ratingCount,
             ")"
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
-            /* @__PURE__ */ jsx33(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ jsx33(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ jsx33(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
-            /* @__PURE__ */ jsx33(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ jsx33(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
-            /* @__PURE__ */ jsx33(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ jsx33(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
+          /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
+            /* @__PURE__ */ jsx34(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ jsx34(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ jsx34(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
+            /* @__PURE__ */ jsx34(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ jsx34(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
+            /* @__PURE__ */ jsx34(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ jsx34(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__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: cx("snacky-product-card", "snacky-product-card--list", className),
@@ -1203,25 +1287,25 @@ function ProductCard(props) {
       onClick,
       onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", children: [
-          /* @__PURE__ */ jsx33("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
-          discountLabel && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ jsx33(DiscountTag, { label: discountLabel }) })
+        /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__image-wrap", children: [
+          /* @__PURE__ */ jsx34("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
+          discountLabel && /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ jsx34(DiscountTag, { label: discountLabel }) })
         ] }),
-        /* @__PURE__ */ jsx33("p", { className: "snacky-product-card__name", children: productName }),
-        /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__price", children: price }),
-          originalPrice && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__original-price", children: originalPrice })
+        /* @__PURE__ */ jsx34("p", { className: "snacky-product-card__name", children: productName }),
+        /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__price", children: price }),
+          originalPrice && /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__original-price", children: originalPrice })
         ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
-          /* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx33(star, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ jsxs24("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ jsxs24("span", { className: "snacky-product-card__rating", children: [
+            /* @__PURE__ */ jsx34("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx34(star, { width: 16, height: 16 }) }),
             rating
           ] }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             IconButton,
             {
               variant: "primary",
-              icon: cartIcon ?? /* @__PURE__ */ jsx33(cartAdd, { width: 16, height: 16 }),
+              icon: cartIcon ?? /* @__PURE__ */ jsx34(cartAdd, { width: 16, height: 16 }),
               onClick: (e) => {
                 e.stopPropagation();
                 onAddToCart();
@@ -1236,17 +1320,17 @@ function ProductCard(props) {
 }
 
 // src/components/ImagePlaceholder/ImagePlaceholder.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function ImagePlaceholder({ width, height, className }) {
   const iconSize = Math.round(Math.min(width, height) * 0.32);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cx("snacky-image-placeholder", className),
       style: { width, height },
       role: "img",
       "aria-label": "No image",
-      children: /* @__PURE__ */ jsxs24(
+      children: /* @__PURE__ */ jsxs25(
         "svg",
         {
           width: iconSize,
@@ -1258,9 +1342,9 @@ function ImagePlaceholder({ width, height, className }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ jsx34("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-            /* @__PURE__ */ jsx34("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
-            /* @__PURE__ */ jsx34("polyline", { points: "21 15 16 10 5 21" })
+            /* @__PURE__ */ jsx35("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ jsx35("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+            /* @__PURE__ */ jsx35("polyline", { points: "21 15 16 10 5 21" })
           ]
         }
       )
@@ -1297,6 +1381,7 @@ export {
   PointBalanceBanner,
   ProductCard,
   ProductChip,
+  ProductGroupSection,
   ProductImage,
   RadioOption,
   SearchField,