@snacky/ui 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -230,6 +230,29 @@ interface AlertBannerProps {
 /** Snacky Alert Banner - inline info/warning strip, optionally with a countdown. */
 declare function AlertBanner({ message, countdown, className }: AlertBannerProps): react.JSX.Element;
 
+interface PageIndicatorProps {
+    /** How many pages the carousel has. */
+    count: number;
+    /** Zero-based index of the page currently shown. */
+    activeIndex: number;
+    /**
+     * Announced to screen readers, defaulting to "Page 2 of 3". Pass your own
+     * when the pages are not pages (a step counter, an onboarding sequence).
+     */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Snacky Page Indicator - the dot row under a carousel. Figma draws the current
+ * page as a 28x8 pill and every other page as an 8x8 dot, 4 apart, and the Home
+ * hero carousel sits it 10 below the banner, centred.
+ *
+ * It reports position, it does not change it: the dots are decoration to a
+ * screen reader and the row carries the label instead. Make the carousel itself
+ * keyboard operable; do not wire clicks onto these.
+ */
+declare function PageIndicator({ count, activeIndex, ariaLabel, className }: PageIndicatorProps): react.JSX.Element;
+
 interface NotificationBadgeProps {
     count: number;
     max?: number;
@@ -676,4 +699,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, 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, 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

@@ -776,43 +776,64 @@ function AlertBanner({ message, countdown, className }) {
   ] });
 }
 
+// src/components/PageIndicator/PageIndicator.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function PageIndicator({ count, activeIndex, ariaLabel, className }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cx("snacky-page-indicator", className),
+      role: "status",
+      "aria-label": ariaLabel ?? `Page ${activeIndex + 1} of ${count}`,
+      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx21(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cx("snacky-page-indicator__dot", i === activeIndex && "snacky-page-indicator__dot--active")
+        },
+        i
+      ))
+    }
+  );
+}
+
 // src/components/Badge/Badge.tsx
-import { Fragment, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function NotificationBadge({ count, max = 99, children, className }) {
-  if (count <= 0) return /* @__PURE__ */ jsx21(Fragment, { children });
+  if (count <= 0) return /* @__PURE__ */ jsx22(Fragment, { children });
   return /* @__PURE__ */ jsxs14("span", { className: cx("snacky-badge-wrap", className), children: [
     children,
-    /* @__PURE__ */ jsx21("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
+    /* @__PURE__ */ jsx22("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
   ] });
 }
 function DiscountTag({ label, className }) {
-  return /* @__PURE__ */ jsx21("span", { className: cx("snacky-discount-tag", className), children: label });
+  return /* @__PURE__ */ jsx22("span", { className: cx("snacky-discount-tag", className), children: label });
 }
 function SoldOutBadge({ className }) {
-  return /* @__PURE__ */ jsx21("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
+  return /* @__PURE__ */ jsx22("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
 }
 function InfoBadge({ label, icon: icon3, className }) {
   return /* @__PURE__ */ jsxs14("span", { className: cx("snacky-info-badge", className), children: [
-    icon3 && /* @__PURE__ */ jsx21("span", { className: "snacky-info-badge__icon", children: icon3 }),
+    icon3 && /* @__PURE__ */ jsx22("span", { className: "snacky-info-badge__icon", children: icon3 }),
     label
   ] });
 }
 var VariantBadge = InfoBadge;
 
 // src/components/Callout/Callout.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function Callout({ message, timestamp, variant, statusIcon, className }) {
   return /* @__PURE__ */ jsxs15("div", { className: cx("snacky-callout", `snacky-callout--${variant}`, className), children: [
-    /* @__PURE__ */ jsx22("p", { className: "snacky-callout__message", children: message }),
+    /* @__PURE__ */ jsx23("p", { className: "snacky-callout__message", children: message }),
     /* @__PURE__ */ jsxs15("span", { className: "snacky-callout__meta", children: [
       timestamp,
-      statusIcon && variant !== "received" && /* @__PURE__ */ jsx22("span", { className: "snacky-callout__meta-icon", children: statusIcon })
+      statusIcon && variant !== "received" && /* @__PURE__ */ jsx23("span", { className: "snacky-callout__meta-icon", children: statusIcon })
     ] })
   ] });
 }
 
 // src/components/List/List.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var STATUS_LABEL = {
   waiting: "Waiting for Payment",
   process: "Order Processing",
@@ -850,31 +871,31 @@ function OrderListItem({
       onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
       children: [
         /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__top", children: [
-          /* @__PURE__ */ jsx23("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ jsx23("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
+          /* @__PURE__ */ jsx24("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ jsx24("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
           /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__info", children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "span",
               {
                 className: cx("snacky-order-item__status", status === "cancelled" && "snacky-order-item__status--cancelled"),
                 children: STATUS_LABEL[status]
               }
             ),
-            /* @__PURE__ */ jsx23("span", { className: "snacky-order-item__name", children: productName })
+            /* @__PURE__ */ jsx24("span", { className: "snacky-order-item__name", children: productName })
           ] })
         ] }),
         /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__details", children: [
-          /* @__PURE__ */ jsx23("span", { className: "snacky-order-item__count", children: itemsSummary }),
+          /* @__PURE__ */ jsx24("span", { className: "snacky-order-item__count", children: itemsSummary }),
           /* @__PURE__ */ jsxs16("span", { className: cx("snacky-order-item__total", isCod && "snacky-order-item__total--cod"), children: [
             "Order Total: ",
-            /* @__PURE__ */ jsx23("b", { children: total })
+            /* @__PURE__ */ jsx24("b", { children: total })
           ] }),
-          isCod && /* @__PURE__ */ jsx23("span", { className: "snacky-order-item__cod", children: "COD" })
+          isCod && /* @__PURE__ */ jsx24("span", { className: "snacky-order-item__cod", children: "COD" })
         ] }),
         status === "waiting" && paymentDeadline && /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__deadline", children: [
           "Pay before ",
           paymentDeadline
         ] }),
-        action && /* @__PURE__ */ jsx23("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ jsx23(
+        action && /* @__PURE__ */ jsx24("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ jsx24(
           Button,
           {
             variant: "primary",
@@ -899,8 +920,8 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
       onClick,
       onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "snacky-notif-item__title", children: title }),
-        /* @__PURE__ */ jsx23("span", { className: "snacky-notif-item__message", children: message })
+        /* @__PURE__ */ jsx24("span", { className: "snacky-notif-item__title", children: title }),
+        /* @__PURE__ */ jsx24("span", { className: "snacky-notif-item__message", children: message })
       ]
     }
   );
@@ -908,7 +929,7 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
 
 // src/components/Accordion/Accordion.tsx
 import { useId as useId4, useState as useState2 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function Accordion({ title, leadingIcon, children, defaultOpen = false, className }) {
   const [open, setOpen] = useState2(defaultOpen);
   const panelId = useId4();
@@ -922,27 +943,27 @@ function Accordion({ title, leadingIcon, children, defaultOpen = false, classNam
         "aria-controls": panelId,
         onClick: () => setOpen((v) => !v),
         children: [
-          leadingIcon && /* @__PURE__ */ jsx24("span", { className: "snacky-accordion__icon", children: leadingIcon }),
-          /* @__PURE__ */ jsx24("span", { className: "snacky-accordion__title", children: title }),
-          /* @__PURE__ */ jsx24(
+          leadingIcon && /* @__PURE__ */ jsx25("span", { className: "snacky-accordion__icon", children: leadingIcon }),
+          /* @__PURE__ */ jsx25("span", { className: "snacky-accordion__title", children: title }),
+          /* @__PURE__ */ jsx25(
             "svg",
             {
               className: cx("snacky-accordion__chevron", open && "snacky-accordion__chevron--open"),
               viewBox: "0 0 20 20",
               fill: "none",
-              children: /* @__PURE__ */ jsx24("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              children: /* @__PURE__ */ jsx25("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx24("div", { id: panelId, className: "snacky-accordion__panel", children })
+    open && /* @__PURE__ */ jsx25("div", { id: panelId, className: "snacky-accordion__panel", children })
   ] });
 }
 
 // src/components/Modal/BottomSheet.tsx
 import { useEffect } from "react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function BottomSheet({ open, onDismiss, children, showHandle = false, className }) {
   useEffect(() => {
     if (!open) return;
@@ -953,7 +974,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onDismiss]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx25("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx26("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cx("snacky-sheet", className),
@@ -961,7 +982,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
       "aria-modal": "true",
       onClick: (e) => e.stopPropagation(),
       children: [
-        showHandle && /* @__PURE__ */ jsx25("div", { className: "snacky-sheet__handle" }),
+        showHandle && /* @__PURE__ */ jsx26("div", { className: "snacky-sheet__handle" }),
         children
       ]
     }
@@ -969,29 +990,29 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
 }
 
 // src/components/Section/Section.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function Section({ title, onAction, children, className }) {
   return /* @__PURE__ */ jsxs19("section", { className: cx("snacky-section", className), children: [
     /* @__PURE__ */ jsxs19("div", { className: "snacky-section__header", children: [
-      /* @__PURE__ */ jsx26("h3", { className: "snacky-section__title", children: title }),
-      onAction && /* @__PURE__ */ jsx26(IconButton, { size: "small", icon: /* @__PURE__ */ jsx26(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
+      /* @__PURE__ */ jsx27("h3", { className: "snacky-section__title", children: title }),
+      onAction && /* @__PURE__ */ jsx27(IconButton, { size: "small", icon: /* @__PURE__ */ jsx27(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
     ] }),
     children
   ] });
 }
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function Stepper({ steps, className }) {
-  return /* @__PURE__ */ jsx27("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx28("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs20(
     "li",
     {
       className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
       children: [
-        /* @__PURE__ */ jsx27("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ jsx27(close, { width: 12, height: 12 }) }),
+        /* @__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__ */ jsx27("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
-          step.timestamp && /* @__PURE__ */ jsx27("span", { className: "snacky-stepper__time", children: step.timestamp })
+          /* @__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 })
         ] })
       ]
     },
@@ -1000,7 +1021,7 @@ function Stepper({ steps, className }) {
 }
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
   "January",
@@ -1049,14 +1070,14 @@ function Calendar({
   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__ */ jsx28(
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav",
           onClick: onPrevMonth,
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx28(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ jsx29(back, { width: 24, height: 24 })
         }
       ),
       /* @__PURE__ */ jsxs21("span", { className: "snacky-calendar__label", children: [
@@ -1064,19 +1085,19 @@ function Calendar({
         " ",
         month.getFullYear()
       ] }),
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav snacky-calendar__nav--next",
           onClick: onNextMonth,
           "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx28(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ jsx29(back, { width: 24, height: 24 })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__grid", children: [
-      WEEKDAYS.map((d) => /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__weekday", children: d }, d)),
+      WEEKDAYS.map((d) => /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__weekday", children: d }, d)),
       days.map((d, i) => {
         const outside = d.getMonth() !== month.getMonth();
         return /* @__PURE__ */ jsxs21(
@@ -1093,26 +1114,26 @@ function Calendar({
             disabled: outside,
             "aria-current": isEnd(d) ? "date" : void 0,
             children: [
-              /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
-              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__marker" })
+              /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
+              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__marker" })
             ]
           },
           i
         );
       })
     ] }),
-    onAction && /* @__PURE__ */ jsx28(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
+    onAction && /* @__PURE__ */ jsx29(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Avatar({ src, alt, size = "md", className }) {
-  return /* @__PURE__ */ jsx29("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
+  return /* @__PURE__ */ jsx30("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
 }
 
 // src/components/Illustration/Illustration.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SIZE = {
   empty: { width: 268, height: 200 },
   createAccount: { width: 360, height: 240 },
@@ -1122,47 +1143,47 @@ var SIZE = {
 };
 function Illustration({ variant, src, alt, className }) {
   const { width, height } = SIZE[variant];
-  return /* @__PURE__ */ jsx30("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
+  return /* @__PURE__ */ jsx31("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
 }
 
 // src/components/ProductImage/ProductImage.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } 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__ */ jsx31("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
-    sold && /* @__PURE__ */ jsx31("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ jsx31("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
+    /* @__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" }) })
   ] });
 }
 
 // src/components/ProductCard/ProductCard.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } 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__ */ jsx32("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
-        /* @__PURE__ */ jsx32("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
-        sold && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ jsx32(SoldOutBadge, {}) })
+      /* @__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, {}) })
       ] }) }),
       /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__details-body", children: [
-        /* @__PURE__ */ jsx32("p", { className: "snacky-product-card__name", children: productName2 }),
+        /* @__PURE__ */ jsx33("p", { className: "snacky-product-card__name", children: productName2 }),
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__price", children: price2 }),
-          originalPrice2 && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
-          discountLabel2 && /* @__PURE__ */ jsx32(DiscountTag, { label: discountLabel2 })
+          /* @__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__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
           /* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx32(star, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx33(star, { width: 16, height: 16 }) }),
             rating2,
             " (",
             ratingCount,
             ")"
           ] }),
           /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
-            /* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ jsx32(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ jsx32(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
-            /* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ jsx32(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
-            /* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ jsx32(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
+            /* @__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" })
           ] })
         ] })
       ] })
@@ -1179,24 +1200,24 @@ function ProductCard(props) {
       onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
       children: [
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", children: [
-          /* @__PURE__ */ jsx32("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
-          discountLabel && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ jsx32(DiscountTag, { label: discountLabel }) })
+          /* @__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__ */ jsx32("p", { className: "snacky-product-card__name", children: productName }),
+        /* @__PURE__ */ jsx33("p", { className: "snacky-product-card__name", children: productName }),
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__price", children: price }),
-          originalPrice && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__original-price", children: originalPrice })
+          /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__price", children: price }),
+          originalPrice && /* @__PURE__ */ jsx33("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__ */ jsx32("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx32(star, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx33(star, { width: 16, height: 16 }) }),
             rating
           ] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             IconButton,
             {
               variant: "primary",
-              icon: cartIcon ?? /* @__PURE__ */ jsx32(cartAdd, { width: 16, height: 16 }),
+              icon: cartIcon ?? /* @__PURE__ */ jsx33(cartAdd, { width: 16, height: 16 }),
               onClick: (e) => {
                 e.stopPropagation();
                 onAddToCart();
@@ -1211,10 +1232,10 @@ function ProductCard(props) {
 }
 
 // src/components/ImagePlaceholder/ImagePlaceholder.tsx
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function ImagePlaceholder({ width, height, className }) {
   const iconSize = Math.round(Math.min(width, height) * 0.32);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cx("snacky-image-placeholder", className),
@@ -1233,9 +1254,9 @@ function ImagePlaceholder({ width, height, className }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ jsx33("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-            /* @__PURE__ */ jsx33("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
-            /* @__PURE__ */ jsx33("polyline", { points: "21 15 16 10 5 21" })
+            /* @__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" })
           ]
         }
       )
@@ -1268,6 +1289,7 @@ export {
   NotificationListItem,
   OrderListItem,
   OtpField,
+  PageIndicator,
   PointBalanceBanner,
   ProductCard,
   ProductChip,