@instockng/storefront-ui 1.0.74 → 1.0.76

package/dist/components/ProductAddOns.d.ts

@@ -13,9 +13,11 @@ export interface ProductAddOnsProps {
     onToggle?: (product: AddOnProduct, isSelected: boolean) => void;
     /** Manual selection list (list of product IDs) */
     selectedProductIds?: string[];
+    /** Callback when product card is clicked (for navigation) */
+    onProductClick?: (product: AddOnProduct) => void;
     className?: string;
     title?: string;
     limit?: number;
 }
-export declare function ProductAddOns({ slug, products: manualProducts, onToggle: manualOnToggle, selectedProductIds: manualSelectedIds, className, title, limit, }: ProductAddOnsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductAddOns({ slug, products: manualProducts, onToggle: manualOnToggle, selectedProductIds: manualSelectedIds, onProductClick, className, title, limit, }: ProductAddOnsProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ProductAddOns.d.ts.map

package/dist/components/ProductAddOns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductAddOns.d.ts","sourceRoot":"","sources":["../../src/components/ProductAddOns.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IAC/B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,QAAQ,EAAE,cAAc,EACxB,QAAQ,EAAE,cAAc,EACxB,kBAAkB,EAAE,iBAAiB,EACrC,SAAS,EACT,KAAyB,EACzB,KAAS,GACZ,EAAE,kBAAkB,kDAyMpB"}
+{"version":3,"file":"ProductAddOns.d.ts","sourceRoot":"","sources":["../../src/components/ProductAddOns.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IAC/B,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,QAAQ,EAAE,cAAc,EACxB,QAAQ,EAAE,cAAc,EACxB,kBAAkB,EAAE,iBAAiB,EACrC,cAAc,EACd,SAAS,EACT,KAAyB,EACzB,KAAS,GACZ,EAAE,kBAAkB,kDA2PpB"}

package/dist/components/RecommendedProducts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendedProducts.d.ts","sourceRoot":"","sources":["../../src/components/RecommendedProducts.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,wBAAwB;IACvC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,kDA8J1B"}
+{"version":3,"file":"RecommendedProducts.d.ts","sourceRoot":"","sources":["../../src/components/RecommendedProducts.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,wBAAwB;IACvC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,kDAsM1B"}

package/dist/components/VariantPickerModal.d.ts

@@ -0,0 +1,28 @@
+export interface Variant {
+    id: string;
+    name?: string | null;
+    price: number;
+    sku: string;
+    thumbnailUrl?: string | null;
+}
+export interface VariantPickerProduct {
+    id: string;
+    name: string;
+    slug: string;
+    thumbnailUrl?: string | null;
+    variants: Variant[];
+}
+export interface VariantPickerModalProps {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Product to select variant for */
+    product: VariantPickerProduct | null;
+    /** Callback when variant is selected and confirmed */
+    onConfirm: (product: VariantPickerProduct, variant: Variant) => void;
+    /** Whether add operation is in progress */
+    isLoading?: boolean;
+}
+export declare function VariantPickerModal({ isOpen, onClose, product, onConfirm, isLoading, }: VariantPickerModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=VariantPickerModal.d.ts.map

package/dist/components/VariantPickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantPickerModal.d.ts","sourceRoot":"","sources":["../../src/components/VariantPickerModal.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,OAAO,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,uBAAuB;IACpC,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACrC,sDAAsD;IACtD,SAAS,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrE,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,SAAiB,GACpB,EAAE,uBAAuB,kDAuGzB"}

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { ProductAddOns } from './components/ProductAddOns';
 export type { ProductAddOnsProps, AddOnProduct } from './components/ProductAddOns';
 export { RecommendedProducts } from './components/RecommendedProducts';
 export type { RecommendedProductsProps } from './components/RecommendedProducts';
+export { VariantPickerModal } from './components/VariantPickerModal';
+export type { VariantPickerModalProps, VariantPickerProduct, Variant } from './components/VariantPickerModal';
 export { CartItem } from './components/CartItem';
 export type { CartItemProps } from './components/CartItem';
 export { ShoppingCart } from './components/ShoppingCart';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAG9E,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAChF,YAAY,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG1F,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAGtF,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7G,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI7F,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAG9E,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAChF,YAAY,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG1F,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAGtF,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE9G,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7G,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI7F,cAAc,uBAAuB,CAAC"}

package/dist/index.mjs

@@ -6,121 +6,123 @@ import { TikTokPixelProvider as s, useTikTokPixel as c } from "./index5.mjs";
 import { usePageTracking as x } from "./index6.mjs";
 import { OrderConfirmation as P } from "./index7.mjs";
 import { ProductCard as A } from "./index8.mjs";
-import { ProductGrid as G } from "./index9.mjs";
-import { ProductAddOns as k } from "./index10.mjs";
+import { ProductGrid as v } from "./index9.mjs";
+import { ProductAddOns as R } from "./index10.mjs";
 import { RecommendedProducts as D } from "./index11.mjs";
-import { CartItem as g } from "./index12.mjs";
-import { ShoppingCart as B } from "./index13.mjs";
-import { DiscountCodeInput as S } from "./index14.mjs";
-import { Checkout as M } from "./index15.mjs";
-import { Button as U } from "./index16.mjs";
-import { Card as b, CardContent as q, CardDescription as z, CardFooter as K, CardHeader as $, CardTitle as j } from "./index17.mjs";
-import { Badge as E } from "./index18.mjs";
-import { Modal as L } from "./index19.mjs";
-import { FormInput as Q } from "./index20.mjs";
-import { FormSelect as W } from "./index21.mjs";
-import { cn as Y, formatCurrency as _, formatDate as ee, formatDateTime as re, getStatusColor as te } from "./index22.mjs";
-import { ApiClientProvider as me, useApiClientContext as ae } from "./index23.mjs";
-import { useApiConfig as de } from "./index24.mjs";
-import { getApiClient as ue, initializeApiClient as ne, resetApiClient as fe } from "./index25.mjs";
-import { authHeaders as ce, createAdminRpcClients as Ce, createRpcClients as xe } from "./index26.mjs";
-import { fetchProductAddons as Pe, fetchProductBySlug as he, fetchProductRecommendations as Ae, fetchProductsByBrand as ve } from "./index27.mjs";
-import { addCartItem as Re, applyDiscount as ke, checkoutCart as ye, createCart as De, fetchCart as Ie, fetchCartRecommendations as ge, initiateCheckout as Oe, removeCartItem as Be, removeDiscount as Te, updateCart as Se, updateCartItem as Fe } from "./index28.mjs";
-import { confirmOrder as He, fetchOrder as Ue, fetchOrderRecommendations as Ze } from "./index29.mjs";
-import { fetchDeliveryZones as qe } from "./index30.mjs";
-import { fetchBrandBySlug as Ke } from "./index31.mjs";
-import { queryKeys as je } from "./index32.mjs";
-import * as e from "./index33.mjs";
-import * as r from "./index34.mjs";
-import { useAddCartItem as Ee, useApplyDiscount as Je, useCheckoutCart as Le, useCreateCart as Ne, useGetCart as Qe, useGetCartRecommendations as Ve, useInitiateCheckout as We, useRemoveCartItem as Xe, useRemoveDiscount as Ye, useUpdateCart as _e, useUpdateCartItem as er } from "./index35.mjs";
-import { useGetBrand as tr } from "./index36.mjs";
-import { useGetProduct as mr, useGetProductAddOns as ar, useGetProductRecommendations as ir, useGetProducts as dr } from "./index37.mjs";
-import { useConfirmOrder as ur, useGetOrder as nr, useGetOrderRecommendations as fr } from "./index38.mjs";
-import { useGetDeliveryZones as cr } from "./index39.mjs";
+import { VariantPickerModal as g } from "./index12.mjs";
+import { CartItem as B } from "./index13.mjs";
+import { ShoppingCart as S } from "./index14.mjs";
+import { DiscountCodeInput as F } from "./index15.mjs";
+import { Checkout as U } from "./index16.mjs";
+import { Button as b } from "./index17.mjs";
+import { Card as z, CardContent as K, CardDescription as V, CardFooter as $, CardHeader as j, CardTitle as w } from "./index18.mjs";
+import { Badge as J } from "./index19.mjs";
+import { Modal as N } from "./index20.mjs";
+import { FormInput as W } from "./index21.mjs";
+import { FormSelect as Y } from "./index22.mjs";
+import { cn as ee, formatCurrency as re, formatDate as te, formatDateTime as oe, getStatusColor as me } from "./index23.mjs";
+import { ApiClientProvider as ie, useApiClientContext as de } from "./index24.mjs";
+import { useApiConfig as ue } from "./index25.mjs";
+import { getApiClient as fe, initializeApiClient as se, resetApiClient as ce } from "./index26.mjs";
+import { authHeaders as xe, createAdminRpcClients as le, createRpcClients as Pe } from "./index27.mjs";
+import { fetchProductAddons as Ae, fetchProductBySlug as ke, fetchProductRecommendations as ve, fetchProductsByBrand as Ge } from "./index28.mjs";
+import { addCartItem as ye, applyDiscount as De, checkoutCart as Ie, createCart as ge, fetchCart as Oe, fetchCartRecommendations as Be, initiateCheckout as Te, removeCartItem as Se, removeDiscount as Me, updateCart as Fe, updateCartItem as He } from "./index29.mjs";
+import { confirmOrder as Ze, fetchOrder as be, fetchOrderRecommendations as qe } from "./index30.mjs";
+import { fetchDeliveryZones as Ke } from "./index31.mjs";
+import { fetchBrandBySlug as $e } from "./index32.mjs";
+import { queryKeys as we } from "./index33.mjs";
+import * as e from "./index34.mjs";
+import * as r from "./index35.mjs";
+import { useAddCartItem as Je, useApplyDiscount as Le, useCheckoutCart as Ne, useCreateCart as Qe, useGetCart as We, useGetCartRecommendations as Xe, useInitiateCheckout as Ye, useRemoveCartItem as _e, useRemoveDiscount as er, useUpdateCart as rr, useUpdateCartItem as tr } from "./index36.mjs";
+import { useGetBrand as mr } from "./index37.mjs";
+import { useGetProduct as ir, useGetProductAddOns as dr, useGetProductRecommendations as pr, useGetProducts as ur } from "./index38.mjs";
+import { useConfirmOrder as fr, useGetOrder as sr, useGetOrderRecommendations as cr } from "./index39.mjs";
+import { useGetDeliveryZones as xr } from "./index40.mjs";
 export {
-  me as ApiClientProvider,
-  E as Badge,
-  U as Button,
-  b as Card,
-  q as CardContent,
-  z as CardDescription,
-  K as CardFooter,
-  $ as CardHeader,
-  j as CardTitle,
-  g as CartItem,
+  ie as ApiClientProvider,
+  J as Badge,
+  b as Button,
+  z as Card,
+  K as CardContent,
+  V as CardDescription,
+  $ as CardFooter,
+  j as CardHeader,
+  w as CardTitle,
+  B as CartItem,
   i as CartProvider,
-  M as Checkout,
-  S as DiscountCodeInput,
-  Q as FormInput,
-  W as FormSelect,
+  U as Checkout,
+  F as DiscountCodeInput,
+  W as FormInput,
+  Y as FormSelect,
   u as MetaPixelProvider,
-  L as Modal,
+  N as Modal,
   P as OrderConfirmation,
-  k as ProductAddOns,
+  R as ProductAddOns,
   A as ProductCard,
-  G as ProductGrid,
+  v as ProductGrid,
   D as RecommendedProducts,
-  B as ShoppingCart,
+  S as ShoppingCart,
   m as StorefrontProvider,
   s as TikTokPixelProvider,
-  Re as addCartItem,
+  g as VariantPickerModal,
+  ye as addCartItem,
   r as adminApi,
-  ke as applyDiscount,
-  ce as authHeaders,
-  ye as checkoutCart,
-  Y as cn,
-  He as confirmOrder,
-  Ce as createAdminRpcClients,
-  De as createCart,
-  xe as createRpcClients,
-  Ke as fetchBrandBySlug,
-  Ie as fetchCart,
-  ge as fetchCartRecommendations,
-  qe as fetchDeliveryZones,
-  Ue as fetchOrder,
-  Ze as fetchOrderRecommendations,
-  Pe as fetchProductAddons,
-  he as fetchProductBySlug,
-  Ae as fetchProductRecommendations,
-  ve as fetchProductsByBrand,
-  _ as formatCurrency,
-  ee as formatDate,
-  re as formatDateTime,
-  ue as getApiClient,
-  te as getStatusColor,
-  ne as initializeApiClient,
-  Oe as initiateCheckout,
+  De as applyDiscount,
+  xe as authHeaders,
+  Ie as checkoutCart,
+  ee as cn,
+  Ze as confirmOrder,
+  le as createAdminRpcClients,
+  ge as createCart,
+  Pe as createRpcClients,
+  $e as fetchBrandBySlug,
+  Oe as fetchCart,
+  Be as fetchCartRecommendations,
+  Ke as fetchDeliveryZones,
+  be as fetchOrder,
+  qe as fetchOrderRecommendations,
+  Ae as fetchProductAddons,
+  ke as fetchProductBySlug,
+  ve as fetchProductRecommendations,
+  Ge as fetchProductsByBrand,
+  re as formatCurrency,
+  te as formatDate,
+  oe as formatDateTime,
+  fe as getApiClient,
+  me as getStatusColor,
+  se as initializeApiClient,
+  Te as initiateCheckout,
   e as publicApi,
-  je as queryKeys,
-  Be as removeCartItem,
-  Te as removeDiscount,
-  fe as resetApiClient,
-  Se as updateCart,
-  Fe as updateCartItem,
-  Ee as useAddCartItem,
-  ae as useApiClientContext,
-  de as useApiConfig,
-  Je as useApplyDiscount,
+  we as queryKeys,
+  Se as removeCartItem,
+  Me as removeDiscount,
+  ce as resetApiClient,
+  Fe as updateCart,
+  He as updateCartItem,
+  Je as useAddCartItem,
+  de as useApiClientContext,
+  ue as useApiConfig,
+  Le as useApplyDiscount,
   d as useCart,
-  Le as useCheckoutCart,
-  ur as useConfirmOrder,
-  Ne as useCreateCart,
-  tr as useGetBrand,
-  Qe as useGetCart,
-  Ve as useGetCartRecommendations,
-  cr as useGetDeliveryZones,
-  nr as useGetOrder,
-  fr as useGetOrderRecommendations,
-  mr as useGetProduct,
-  ar as useGetProductAddOns,
-  ir as useGetProductRecommendations,
-  dr as useGetProducts,
-  We as useInitiateCheckout,
+  Ne as useCheckoutCart,
+  fr as useConfirmOrder,
+  Qe as useCreateCart,
+  mr as useGetBrand,
+  We as useGetCart,
+  Xe as useGetCartRecommendations,
+  xr as useGetDeliveryZones,
+  sr as useGetOrder,
+  cr as useGetOrderRecommendations,
+  ir as useGetProduct,
+  dr as useGetProductAddOns,
+  pr as useGetProductRecommendations,
+  ur as useGetProducts,
+  Ye as useInitiateCheckout,
   n as useMetaPixel,
   x as usePageTracking,
-  Xe as useRemoveCartItem,
-  Ye as useRemoveDiscount,
+  _e as useRemoveCartItem,
+  er as useRemoveDiscount,
   c as useTikTokPixel,
-  _e as useUpdateCart,
-  er as useUpdateCartItem
+  rr as useUpdateCart,
+  tr as useUpdateCartItem
 };

package/dist/index10.mjs

@@ -1,37 +1,42 @@
 'use client';
-import { jsxs as n, jsx as t, Fragment as B } from "react/jsx-runtime";
-import { useRef as M, useState as E } from "react";
-import { ChevronLeft as F, ChevronRight as L } from "lucide-react";
-import { Switch as O } from "./index43.mjs";
-import { Badge as R } from "./index18.mjs";
-import { cn as u, formatCurrency as v } from "./index22.mjs";
-import "./index23.mjs";
+import { jsxs as a, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { useState as f, useRef as V } from "react";
+import { ChevronLeft as U, ChevronRight as z } from "lucide-react";
+import { Switch as G } from "./index44.mjs";
+import { Badge as T } from "./index19.mjs";
+import { cn as P, formatCurrency as k } from "./index23.mjs";
+import { VariantPickerModal as _ } from "./index12.mjs";
+import "./index24.mjs";
 import "@tanstack/react-query";
-import { useGetProductAddOns as U } from "./index37.mjs";
-import { useCart as z } from "./index3.mjs";
-function Y({
-  slug: d,
-  products: m,
-  onToggle: h,
-  selectedProductIds: N,
-  className: f,
-  title: b = "Popular add-ons",
-  limit: y = 6
+import { useGetProductAddOns as $ } from "./index38.mjs";
+import { useCart as q } from "./index3.mjs";
+function le({
+  slug: g,
+  products: x,
+  onToggle: u,
+  selectedProductIds: A,
+  onProductClick: H,
+  className: p,
+  title: j = "Popular add-ons",
+  limit: D = 6
 }) {
-  const { cart: i, addItem: w, removeItem: C } = z(), { data: P, isLoading: x } = U(d || "", y, {
-    enabled: !!d && !m
-  }), c = m || P || [], k = N || c.filter((e) => i == null ? void 0 : i.items.some((l) => {
-    var r;
-    return l.variant.id === ((r = e.variants[0]) == null ? void 0 : r.id);
-  })).map((e) => e.id), A = async (e, l) => {
-    if (h) {
-      h(e, l);
+  const { cart: s, addItem: v, removeItem: I } = q(), { data: M, isLoading: N } = $(g || "", D, {
+    enabled: !!g && !x
+  }), c = x || M || [], W = A || c.filter((e) => s == null ? void 0 : s.items.some(
+    (n) => e.variants.some((r) => r.id === n.variant.id)
+  )).map((e) => e.id), [y, m] = f(null), [B, b] = f(!1), F = async (e, n) => {
+    if (u) {
+      u(e, n);
+      return;
+    }
+    if (n && e.variants.length > 1) {
+      m(e);
       return;
     }
     const r = e.variants[0];
     if (r)
-      if (l)
-        await w(
+      if (n)
+        await v(
           e.slug,
           e.name,
           r.price,
@@ -39,120 +44,156 @@ function Y({
           1
         );
       else {
-        const a = i == null ? void 0 : i.items.find((s) => s.variant.id === r.id);
-        a && await C(a.id);
+        const l = s == null ? void 0 : s.items.find(
+          (i) => e.variants.some((d) => d.id === i.variant.id)
+        );
+        l && await I(l.id);
       }
-  }, o = M(null), [j, D] = E(0), I = () => {
+  }, S = async (e, n) => {
+    b(!0);
+    try {
+      await v(
+        e.slug,
+        e.name,
+        n.price,
+        n.sku,
+        1
+      ), m(null);
+    } finally {
+      b(!1);
+    }
+  }, o = V(null), [L, O] = f(0), E = () => {
     if (o.current) {
-      const { scrollLeft: e, scrollWidth: l, clientWidth: r } = o.current, a = e / (l - r);
-      D(a || 0);
+      const { scrollLeft: e, scrollWidth: n, clientWidth: r } = o.current, l = e / (n - r);
+      O(l || 0);
     }
-  }, g = (e) => {
+  }, w = (e) => {
     if (o.current) {
-      const { clientWidth: l } = o.current, r = l * 0.9;
+      const { clientWidth: n } = o.current, r = n * 0.9;
       o.current.scrollBy({
         left: e === "left" ? -r : r,
         behavior: "smooth"
       });
     }
   };
-  return (!c || c.length === 0) && !x ? null : x ? /* @__PURE__ */ n("div", { className: u("w-full py-8 space-y-4 animate-pulse", f), style: { maxWidth: "calc(100vw - calc(var(--spacing) * 7))" }, children: [
+  return (!c || c.length === 0) && !N ? null : N ? /* @__PURE__ */ a("div", { className: P("w-full py-8 space-y-4 animate-pulse", p), style: { maxWidth: "calc(100vw - calc(var(--spacing) * 7))" }, children: [
     /* @__PURE__ */ t("div", { className: "h-4 w-32 bg-gray-200 rounded px-1 mb-6" }),
-    /* @__PURE__ */ n("div", { className: "flex gap-4 overflow-x-hidden", children: [
+    /* @__PURE__ */ a("div", { className: "flex gap-4 overflow-x-hidden", children: [
       /* @__PURE__ */ t("div", { className: "min-w-[90%] h-[90px] bg-gray-100 rounded-[2rem]" }),
       /* @__PURE__ */ t("div", { className: "min-w-[90%] h-[90px] bg-gray-100 rounded-[2rem]" })
     ] })
-  ] }) : /* @__PURE__ */ n("div", { className: f, children: [
-    /* @__PURE__ */ t("div", { className: "px-1 mb-3", children: /* @__PURE__ */ t("h3", { className: "text-lg font-bold tracking-tight text-gray-900", children: b }) }),
-    /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ t(
-      "div",
-      {
-        ref: o,
-        onScroll: I,
-        className: "flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-1",
-        style: { scrollbarWidth: "none", msOverflowStyle: "none", maxWidth: "calc(100vw - calc(var(--spacing) * 7))" },
-        children: c.map((e) => {
-          const l = k.includes(e.id), r = e.variants[0], a = (r == null ? void 0 : r.price) || 0, s = e.compareAtPrice || r.compareAtPrice, p = s && s > a, S = p ? Math.round((s - a) / s * 100) : 0;
-          return /* @__PURE__ */ n(
+  ] }) : /* @__PURE__ */ a(C, { children: [
+    /* @__PURE__ */ a("div", { className: p, children: [
+      /* @__PURE__ */ t("div", { className: "px-1 mb-3", children: /* @__PURE__ */ t("h3", { className: "text-lg font-bold tracking-tight text-gray-900", children: j }) }),
+      /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ t(
+        "div",
+        {
+          ref: o,
+          onScroll: E,
+          className: "flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-1",
+          style: { scrollbarWidth: "none", msOverflowStyle: "none", maxWidth: "calc(100vw - calc(var(--spacing) * 7))" },
+          children: c.map((e) => {
+            const n = W.includes(e.id), r = e.variants[0], l = (r == null ? void 0 : r.price) || 0, i = e.compareAtPrice || r.compareAtPrice, d = i && i > l, R = d ? Math.round((i - l) / i * 100) : 0;
+            return /* @__PURE__ */ a(
+              "div",
+              {
+                className: "relative flex min-w-[90%] md:min-w-[420px] snap-start items-center gap-4 rounded-xl bg-[#EBEBEB] p-3 transition-all",
+                children: [
+                  /* @__PURE__ */ a(
+                    "a",
+                    {
+                      href: `/product/${e.slug}`,
+                      className: "flex flex-1 items-center gap-4 min-w-0",
+                      children: [
+                        /* @__PURE__ */ t("div", { className: "h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl bg-white/40 flex items-center justify-center", children: e.thumbnailUrl ? /* @__PURE__ */ t(
+                          "img",
+                          {
+                            src: e.thumbnailUrl,
+                            alt: e.name,
+                            className: "h-full w-full object-cover",
+                            loading: "lazy"
+                          }
+                        ) : /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center text-[10px] text-gray-400", children: "No Img" }) }),
+                        /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col justify-center min-w-0", children: [
+                          /* @__PURE__ */ t("h4", { className: "text-md font-bold text-[#333] truncate pr-2", title: e.name, children: e.name }),
+                          e.addonDescription && /* @__PURE__ */ t("p", { className: "text-[11px] text-gray-500 line-clamp-3 italic mb-1", children: e.addonDescription }),
+                          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mt-1", children: [
+                            /* @__PURE__ */ t("span", { className: "text-md font-bold text-[#333]", children: k(l) }),
+                            d && /* @__PURE__ */ a(C, { children: [
+                              /* @__PURE__ */ t("span", { className: "text-sm text-[#DC143C] line-through", children: k(i) }),
+                              /* @__PURE__ */ a(T, { className: "bg-[#DC143C]/10 hover:bg-[#DC143C]/20 text-[#DC143C] border-none text-[10px] font-bold px-2 py-0.5 rounded-lg uppercase tracking-tight", children: [
+                                R,
+                                "% OFF"
+                              ] })
+                            ] })
+                          ] })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "pl-2", onClick: (h) => h.stopPropagation(), children: /* @__PURE__ */ t(
+                    G,
+                    {
+                      checked: n,
+                      onCheckedChange: (h) => F(e, h),
+                      className: "scale-125"
+                    }
+                  ) })
+                ]
+              },
+              e.id
+            );
+          })
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2 mt-2", children: [
+        /* @__PURE__ */ t("div", { className: "flex gap-1.5 focus:outline-none", children: Array.from({ length: Math.min(c.length, 6) }).map((e, n) => {
+          const r = Math.round(L * (Math.min(c.length, 6) - 1)) === n;
+          return /* @__PURE__ */ t(
             "div",
             {
-              className: "relative flex min-w-[90%] md:min-w-[420px] snap-start items-center gap-4 rounded-xl bg-[#EBEBEB] p-3 transition-all",
-              children: [
-                /* @__PURE__ */ t("div", { className: "h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl bg-white/40 flex items-center justify-center", children: e.thumbnailUrl ? /* @__PURE__ */ t(
-                  "img",
-                  {
-                    src: e.thumbnailUrl,
-                    alt: e.name,
-                    className: "h-full w-full object-cover",
-                    loading: "lazy"
-                  }
-                ) : /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center text-[10px] text-gray-400", children: "No Img" }) }),
-                /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col justify-center min-w-0", children: [
-                  /* @__PURE__ */ t("h4", { className: "text-md font-bold text-[#333] truncate pr-2", title: e.name, children: e.name }),
-                  e.addonDescription && /* @__PURE__ */ t("p", { className: "text-[11px] text-gray-500 line-clamp-3 italic mb-1", children: e.addonDescription }),
-                  /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mt-1", children: [
-                    /* @__PURE__ */ t("span", { className: "text-md font-bold text-[#333]", children: v(a) }),
-                    p && /* @__PURE__ */ n(B, { children: [
-                      /* @__PURE__ */ t("span", { className: "text-sm text-[#DC143C] line-through", children: v(s) }),
-                      /* @__PURE__ */ n(R, { className: "bg-[#DC143C]/10 hover:bg-[#DC143C]/20 text-[#DC143C] border-none text-[10px] font-bold px-2 py-0.5 rounded-lg uppercase tracking-tight", children: [
-                        S,
-                        "% OFF"
-                      ] })
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ t("div", { className: "pl-2", children: /* @__PURE__ */ t(
-                  O,
-                  {
-                    checked: l,
-                    onCheckedChange: (W) => A(e, W),
-                    className: "scale-125"
-                  }
-                ) })
-              ]
+              className: P(
+                "h-2 w-2 rounded-full transition-all duration-300",
+                r ? "bg-gray-600 scale-110" : "bg-gray-300"
+              )
             },
-            e.id
+            n
           );
-        })
-      }
-    ) }),
-    /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 mt-2", children: [
-      /* @__PURE__ */ t("div", { className: "flex gap-1.5 focus:outline-none", children: Array.from({ length: Math.min(c.length, 6) }).map((e, l) => {
-        const r = Math.round(j * (Math.min(c.length, 6) - 1)) === l;
-        return /* @__PURE__ */ t(
-          "div",
-          {
-            className: u(
-              "h-2 w-2 rounded-full transition-all duration-300",
-              r ? "bg-gray-600 scale-110" : "bg-gray-300"
-            )
-          },
-          l
-        );
-      }) }),
-      /* @__PURE__ */ n("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ t(
-          "button",
-          {
-            onClick: () => g("left"),
-            className: "text-gray-400 hover:text-gray-900 transition-colors",
-            "aria-label": "Previous",
-            children: /* @__PURE__ */ t(F, { className: "h-6 w-6 stroke-[2.5px]" })
-          }
-        ),
-        /* @__PURE__ */ t(
-          "button",
-          {
-            onClick: () => g("right"),
-            className: "text-gray-400 hover:text-gray-900 transition-colors",
-            "aria-label": "Next",
-            children: /* @__PURE__ */ t(L, { className: "h-6 w-6 stroke-[2.5px]" })
-          }
-        )
+        }) }),
+        /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => w("left"),
+              className: "text-gray-400 hover:text-gray-900 transition-colors",
+              "aria-label": "Previous",
+              children: /* @__PURE__ */ t(U, { className: "h-6 w-6 stroke-[2.5px]" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => w("right"),
+              className: "text-gray-400 hover:text-gray-900 transition-colors",
+              "aria-label": "Next",
+              children: /* @__PURE__ */ t(z, { className: "h-6 w-6 stroke-[2.5px]" })
+            }
+          )
+        ] })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ t(
+      _,
+      {
+        isOpen: !!y,
+        onClose: () => m(null),
+        product: y,
+        onConfirm: S,
+        isLoading: B
+      }
+    )
   ] });
 }
 export {
-  Y as ProductAddOns
+  le as ProductAddOns
 };