@snacky/ui 0.11.0 → 0.13.0

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;
@@ -585,7 +611,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 declare const account$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
-declare const address: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const back: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -627,7 +653,6 @@ declare const trash: ({ width, height, color, ...rest }: IconProps) => react.JSX
 declare const truck$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const unsent: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
-declare const outline_address: typeof address;
 declare const outline_back: typeof back;
 declare const outline_calendar: typeof calendar;
 declare const outline_camera: typeof camera;
@@ -661,10 +686,11 @@ declare const outline_smartphone: typeof smartphone;
 declare const outline_trash: typeof trash;
 declare const outline_unsent: typeof unsent;
 declare namespace outline {
-  export { account$1 as account, outline_address as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, outline_creditCard as creditCard, outline_document as document, outline_edit as edit, outline_eye as eye, outline_eyeOff as eyeOff, heart$1 as heart, outline_help as help, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
+  export { account$1 as account, address$1 as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, outline_creditCard as creditCard, outline_document as document, outline_edit as edit, outline_eye as eye, outline_eyeOff as eyeOff, heart$1 as heart, outline_help as help, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
 }
 
 declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const angleSmallRight: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -678,6 +704,7 @@ declare const star: ({ width, height, color, ...rest }: IconProps) => react.JSX.
 declare const truck: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
 declare const solid_account: typeof account;
+declare const solid_address: typeof address;
 declare const solid_angleSmallRight: typeof angleSmallRight;
 declare const solid_balance: typeof balance;
 declare const solid_bell: typeof bell;
@@ -690,7 +717,7 @@ declare const solid_points: typeof points;
 declare const solid_star: typeof star;
 declare const solid_truck: typeof truck;
 declare namespace solid {
-  export { solid_account as account, solid_angleSmallRight as angleSmallRight, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
+  export { solid_account as account, solid_address as address, solid_angleSmallRight as angleSmallRight, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
 }
 
 /** Matches the `<SnackyIcons.outline.home />` / `<SnackyIcons.solid.home />` namespace used throughout the design system's documented code samples. */
@@ -699,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;
@@ -585,7 +611,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 declare const account$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
-declare const address: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const back: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -627,7 +653,6 @@ declare const trash: ({ width, height, color, ...rest }: IconProps) => react.JSX
 declare const truck$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const unsent: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
-declare const outline_address: typeof address;
 declare const outline_back: typeof back;
 declare const outline_calendar: typeof calendar;
 declare const outline_camera: typeof camera;
@@ -661,10 +686,11 @@ declare const outline_smartphone: typeof smartphone;
 declare const outline_trash: typeof trash;
 declare const outline_unsent: typeof unsent;
 declare namespace outline {
-  export { account$1 as account, outline_address as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, outline_creditCard as creditCard, outline_document as document, outline_edit as edit, outline_eye as eye, outline_eyeOff as eyeOff, heart$1 as heart, outline_help as help, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
+  export { account$1 as account, address$1 as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, outline_creditCard as creditCard, outline_document as document, outline_edit as edit, outline_eye as eye, outline_eyeOff as eyeOff, heart$1 as heart, outline_help as help, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
 }
 
 declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const angleSmallRight: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -678,6 +704,7 @@ declare const star: ({ width, height, color, ...rest }: IconProps) => react.JSX.
 declare const truck: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
 declare const solid_account: typeof account;
+declare const solid_address: typeof address;
 declare const solid_angleSmallRight: typeof angleSmallRight;
 declare const solid_balance: typeof balance;
 declare const solid_bell: typeof bell;
@@ -690,7 +717,7 @@ declare const solid_points: typeof points;
 declare const solid_star: typeof star;
 declare const solid_truck: typeof truck;
 declare namespace solid {
-  export { solid_account as account, solid_angleSmallRight as angleSmallRight, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
+  export { solid_account as account, solid_address as address, solid_angleSmallRight as angleSmallRight, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
 }
 
 /** Matches the `<SnackyIcons.outline.home />` / `<SnackyIcons.solid.home />` namespace used throughout the design system's documented code samples. */
@@ -699,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

@@ -643,6 +643,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  address: () => address2,
   angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
@@ -674,6 +675,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"]
 ]);
@@ -1001,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 })
         ] })
       ]
     },
@@ -1021,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",
@@ -1068,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",
@@ -1114,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 },
@@ -1143,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),
@@ -1199,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();
@@ -1232,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,
@@ -1254,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" })
           ]
         }
       )
@@ -1293,6 +1381,7 @@ export {
   PointBalanceBanner,
   ProductCard,
   ProductChip,
+  ProductGroupSection,
   ProductImage,
   RadioOption,
   SearchField,