@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/products/components/ProductFilters.d.ts

@@ -48,6 +48,9 @@ export declare const PRODUCT_SELLER_SORT_OPTIONS: readonly [{
 export declare const PRODUCT_PUBLIC_SORT_OPTIONS: readonly [{
     readonly value: "-createdAt";
     readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
 }, {
     readonly value: "-price";
     readonly label: "Price: High to Low";
@@ -56,7 +59,10 @@ export declare const PRODUCT_PUBLIC_SORT_OPTIONS: readonly [{
     readonly label: "Price: Low to High";
 }, {
     readonly value: "title";
-    readonly label: "Title A-Z";
+    readonly label: "Title A–Z";
+}, {
+    readonly value: "-title";
+    readonly label: "Title Z–A";
 }, {
     readonly value: "-views";
     readonly label: "Most Viewed";
@@ -68,23 +74,18 @@ export declare function getProductSortOptions(variant: ProductFilterVariant): Re
 }>;
 export interface ProductFiltersProps {
     table: UrlTable;
-    /** Pass category options loaded from the API */
     categoryOptions?: FacetOption[];
-    /** Pass brand options loaded from the API */
     brandOptions?: FacetOption[];
-    /** Pass seller name options */
+    /** Store options (formerly sellerOptions) */
+    storeOptions?: FacetOption[];
+    /** @deprecated use storeOptions */
     sellerOptions?: FacetOption[];
-    /** Override defaults with dynamic tag options */
     tagOptions?: FacetOption[];
-    /** Show status filter (admin / seller only) */
     showStatus?: boolean;
-    /** Preferred variant contract (overrides showStatus defaults). */
     variant?: ProductFilterVariant;
     statusOptions?: FacetOption[];
-    /**
-     * Currency prefix shown in price range labels (e.g. "₹", "$", "€").
-     * Injected by the consumer app — never hard-coded in appkit.
-     */
     currencyPrefix?: string;
+    /** Show free-shipping toggle */
+    showShipping?: boolean;
 }
-export declare function ProductFilters({ table, categoryOptions, brandOptions, sellerOptions, tagOptions, showStatus, variant, statusOptions, currencyPrefix, }: ProductFiltersProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductFilters({ table, categoryOptions, brandOptions, storeOptions, sellerOptions, tagOptions, showStatus, variant, statusOptions, currencyPrefix, showShipping, }: ProductFiltersProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/ProductFilters.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
+import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const PRODUCT_FILTER_KEYS = {
     admin: [
@@ -51,9 +52,11 @@ export const PRODUCT_SELLER_SORT_OPTIONS = [
 ];
 export const PRODUCT_PUBLIC_SORT_OPTIONS = [
     { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
     { value: "-price", label: "Price: High to Low" },
     { value: "price", label: "Price: Low to High" },
-    { value: "title", label: "Title A-Z" },
+    { value: "title", label: "Title A–Z" },
+    { value: "-title", label: "Title Z–A" },
     { value: "-views", label: "Most Viewed" },
 ];
 export function getProductFilterKeys(variant) {
@@ -71,7 +74,8 @@ export function getProductSortOptions(variant) {
             return PRODUCT_PUBLIC_SORT_OPTIONS;
     }
 }
-export function ProductFilters({ table, categoryOptions = [], brandOptions = [], sellerOptions = [], tagOptions = [], showStatus = false, variant, statusOptions, currencyPrefix = "", }) {
+export function ProductFilters({ table, categoryOptions = [], brandOptions = [], storeOptions = [], sellerOptions, tagOptions = [], showStatus = false, variant, statusOptions, currencyPrefix = "", showShipping = true, }) {
+    const resolvedStoreOptions = storeOptions.length > 0 ? storeOptions : (sellerOptions ?? []);
     const t = useTranslations("filters");
     const conditionOptions = [
         { value: "new", label: t("conditionNew") },
@@ -88,7 +92,7 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
         ? table.get("category").split("|").filter(Boolean)
         : [];
     const selectedBrands = table.get("brand") ? [table.get("brand")] : [];
-    const selectedSellers = table.get("seller") ? [table.get("seller")] : [];
+    const selectedSellers = table.get("storeId") ? [table.get("storeId")] : [];
     const selectedConditions = table.get("condition")
         ? table.get("condition").split("|").filter(Boolean)
         : [];
@@ -100,5 +104,5 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
         : [];
     const resolvedVariant = variant ?? (showStatus ? "admin" : "public");
     const shouldShowStatus = resolvedVariant !== "public" || showStatus;
-    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: categoryOptions.length > 6, defaultCollapsed: true })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: true }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: true }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, defaultCollapsed: true })), sellerOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("seller"), options: sellerOptions, selected: selectedSellers, onChange: (vals) => table.set("seller", vals[0] ?? ""), searchable: sellerOptions.length > 6, defaultCollapsed: true })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 6, defaultCollapsed: true })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: true }))] }));
+    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: false }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 4, defaultCollapsed: brandOptions.length > 6 })), resolvedStoreOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("store"), options: resolvedStoreOptions, selected: selectedSellers, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: resolvedStoreOptions.length > 4, defaultCollapsed: resolvedStoreOptions.length > 6 })), showShipping && (_jsx(SwitchFilter, { title: t("shipping"), label: t("freeShippingOnly"), checked: table.get("freeShipping") === "true", onChange: (v) => table.set("freeShipping", v ? "true" : ""), defaultCollapsed: false })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 4, defaultCollapsed: tagOptions.length > 6 })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false }))] }));
 }

package/dist/features/products/components/ProductForm.d.ts

@@ -17,6 +17,18 @@ interface StoreAddressSelectorRenderArgs {
     onChange: (value: string) => void;
     disabled: boolean;
 }
+export interface BrandSelectorRenderArgs {
+    label: string;
+    /** Current brand name (single mode) */
+    value: string;
+    /** Current brand names (mixed mode) */
+    values: string[];
+    /** Whether selector is in multi-select mode */
+    multi: boolean;
+    onValueChange: (value: string) => void;
+    onValuesChange: (values: string[]) => void;
+    disabled: boolean;
+}
 export interface ProductFormProps {
     product: ProductFormValue;
     onChange: (updated: ProductFormValue) => void;
@@ -33,6 +45,12 @@ export interface ProductFormProps {
     }) => React.ReactNode;
     /** Render app-specific category selector. */
     renderCategorySelector?: (args: CategorySelectorRenderArgs) => React.ReactNode;
+    /**
+     * Render app-specific brand selector (select existing or create new).
+     * Receives `multi=true` when brandMode is "mixed".
+     * If omitted, falls back to a plain text input.
+     */
+    renderBrandSelector?: (args: BrandSelectorRenderArgs) => React.ReactNode;
     /** Render app-specific pickup-address selector. */
     renderStoreAddressSelector?: (args: StoreAddressSelectorRenderArgs) => React.ReactNode;
     /**
@@ -43,5 +61,5 @@ export interface ProductFormProps {
     /** Currency prefix for numeric money inputs (e.g. "₹", "$", "€"). */
     currencyPrefix?: string;
 }
-export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/products/components/ProductForm.js

@@ -14,7 +14,7 @@ export const PRODUCT_STATUS_OPTIONS = [
     { value: "discontinued", label: "Discontinued" },
     { value: "sold", label: "Sold" },
 ];
-export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", }) {
+export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", }) {
     const t = useTranslations("adminProducts");
     const { upload } = useMediaUpload();
     const galleryIndexRef = useRef(0);
@@ -32,7 +32,7 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
             index: galleryIndexRef.current,
             name: product.title || "product",
             category: product.category || "uncategorized",
-            store: product.sellerName || "store",
+            store: product.storeName || "store",
         });
     };
     const handleVideoUpload = async (file) => {
@@ -41,7 +41,7 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
             index: 1,
             name: product.title || "product",
             category: product.category || "uncategorized",
-            store: product.sellerName || "store",
+            store: product.storeName || "store",
         });
     };
     return (_jsxs(Stack, { children: [_jsx(FormField, { name: "title", label: t("formTitle"), type: "text", value: product.title || "", onChange: (value) => update({ title: value }), disabled: isReadonly, placeholder: "Enter product title" }), renderDescriptionEditor ? (_jsx(_Fragment, { children: renderDescriptionEditor({
@@ -54,12 +54,30 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                             value: product.category || "",
                             onChange: (value) => update({ category: value }),
                             disabled: isReadonly,
-                        }) })) : (_jsx(FormField, { name: "category", label: t("formCategory"), type: "text", value: product.category || "", onChange: (value) => update({ category: value }), disabled: isReadonly })), _jsx(FormField, { name: "subcategory", label: t("formSubcategory"), type: "text", value: product.subcategory || "", onChange: (value) => update({ subcategory: value }), disabled: isReadonly, placeholder: "e.g. Smartphones" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" }), _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
+                        }) })) : (_jsx(FormField, { name: "category", label: t("formCategory"), type: "text", value: product.category || "", onChange: (value) => update({ category: value }), disabled: isReadonly })), _jsx(FormField, { name: "subcategory", label: t("formSubcategory"), type: "text", value: product.subcategory || "", onChange: (value) => update({ subcategory: value }), disabled: isReadonly, placeholder: "e.g. Smartphones" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: t("formBrand") }), _jsx("div", { className: "flex gap-3 flex-wrap", children: ["single", "unbranded", "mixed"].map((mode) => (_jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "radio", name: "brandMode", value: mode, checked: (product.brandMode ?? "single") === mode, onChange: () => {
+                                        if (mode === "unbranded") {
+                                            update({ brandMode: "unbranded", brand: undefined, brands: [] });
+                                        }
+                                        else if (mode === "mixed") {
+                                            update({ brandMode: "mixed", brand: undefined });
+                                        }
+                                        else {
+                                            update({ brandMode: "single", brands: [] });
+                                        }
+                                    }, disabled: isReadonly, className: "accent-primary" }), mode === "single" ? "Single Brand" : mode === "unbranded" ? "Unbranded" : "Mixed Brands"] }, mode))) }), (product.brandMode === "unbranded") && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Unbranded items won't appear in brand-filtered results." })), (product.brandMode === "mixed") && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Mixed-brand items won't appear in single-brand filters. Select all applicable brands." })), (product.brandMode ?? "single") !== "unbranded" && (_jsx(_Fragment, { children: renderBrandSelector ? (renderBrandSelector({
+                            label: product.brandMode === "mixed" ? "Brands" : t("formBrand"),
+                            value: product.brand || "",
+                            values: product.brands || [],
+                            multi: product.brandMode === "mixed",
+                            onValueChange: (value) => update({ brand: value }),
+                            onValuesChange: (values) => update({ brands: values }),
+                            disabled: isReadonly,
+                        })) : product.brandMode === "mixed" ? (_jsx(FormField, { name: "brands", label: "Brands (comma-separated)", type: "text", value: (product.brands || []).join(", "), onChange: (value) => update({ brands: value.split(",").map((b) => b.trim()).filter(Boolean) }), disabled: isReadonly, placeholder: "e.g. Nike, Adidas, Puma" })) : (_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" })) }))] }), _jsxs(FormGroup, { columns: 2, children: [_jsx("div", {}), " ", _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
                     type: "product-image",
                     index: 1,
                     name: product.title || "product",
                     category: product.category || "uncategorized",
-                    store: product.sellerName || "store",
+                    store: product.storeName || "store",
                 }), onChange: (url) => update({ mainImage: url }), label: t("formMainImage"), helperText: "Recommended: 800x800px (1:1)" })), isReadonly && product.mainImage && (_jsx(FormField, { name: "mainImage", label: t("formMainImage"), type: "text", value: product.mainImage, onChange: () => { }, disabled: true })), !isReadonly && (_jsx(MediaUploadList, { label: t("formGalleryImages"), value: galleryImages, onChange: (fields) => update({ images: fields.map((f) => f.url) }), onUpload: handleGalleryUpload, accept: "image/*", maxItems: 5, maxSizeMB: 10, helperText: t("formGalleryImagesHelper"), onAbort: onMediaAbort })), !isReadonly && (_jsx(MediaUploadField, { label: t("formVideo"), value: product.video?.url || "", onChange: (url) => update({
                     video: url
                         ? {
@@ -117,5 +135,5 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                     value: product.pickupAddressId || "",
                     onChange: (value) => update({ pickupAddressId: value }),
                     disabled: isReadonly,
-                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.sellerName && (_jsx(FormField, { name: "sellerName", label: t("formSeller"), type: "text", value: product.sellerName, onChange: () => { }, disabled: true }))] }));
+                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
 }

package/dist/features/products/components/ProductGrid.d.ts

@@ -9,12 +9,20 @@ interface ProductCardProps<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onAddToWishlist?: (productId: string) => void;
     isWishlisted?: boolean;
+    onAddToCart?: (product: T) => void;
+    onBuyNow?: (product: T) => void;
     className?: string;
+    /** Bulk selection */
+    selectionMode?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string) => void;
 }
-export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className, selectionMode, isSelected, onSelect, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface ProductCardContext<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onWishlistToggle?: (productId: string) => void;
+    onAddToCart?: (product: T) => void;
+    onBuyNow?: (product: T) => void;
     isWishlisted: boolean;
 }
 interface ProductGridProps<T extends ProductItem = ProductItem> {
@@ -36,6 +44,8 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
     /** When provided, each card is wrapped in a Link using this href generator. */
     getProductHref?: (product: T) => string;
     onWishlistToggle?: (productId: string) => void;
+    onAddToCart?: (product: T) => void;
+    onBuyNow?: (product: T) => void;
     wishlistedIds?: Set<string>;
     /** Text shown when the list is empty and no `emptySlot` is provided. */
     emptyLabel?: string;
@@ -68,6 +78,10 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
      * @default "card"
      */
     view?: ViewMode;
+    /** Bulk selection */
+    selectionMode?: boolean;
+    selectedIds?: Set<string>;
+    onToggleSelect?: (id: string) => void;
 }
-export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, selectionMode, selectedIds, onToggleSelect, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/products/components/ProductGrid.js

@@ -1,31 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
-import { Button, Div, Grid, RichText, Row, Span, Text } from "../../../ui";
+import { Button, Div, Grid, Row, Span, Text } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { formatCurrency } from "../../../utils/number.formatter";
-import { getDefaultCurrency, getDefaultCurrencySymbol } from "../../../core/baseline-resolver";
-import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { safeDisplayName } from "../../../security";
-export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, className = "", }) {
+import { useLongPress } from "../../../react/hooks/useLongPress";
+export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", selectionMode = false, isSelected = false, onSelect, }) {
     const discount = product.originalPrice && product.originalPrice > product.price
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
         : null;
-    const cardBody = (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick && !href ? 0 : undefined, onKeyDown: onClick && !href
-            ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
-            : undefined, onClick: onClick && !href ? () => onClick(product) : undefined, className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${onClick || href ? "cursor-pointer" : ""} ${className}`, children: [_jsxs(Div, { className: "relative aspect-square overflow-hidden bg-neutral-100 dark:bg-slate-800", children: [product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "h-full w-full bg-neutral-200 dark:bg-slate-700" })), discount && (_jsxs(Span, { className: "absolute left-2 top-2 rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white", children: ["-", discount, "%"] })), product.isAuction && (_jsx(Span, { className: "absolute right-2 top-2 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-bold text-white", children: "Auction" })), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+    const isAuction = product.isAuction || product.listingType === "auction";
+    const isPreOrder = product.isPreOrder || product.listingType === "pre-order";
+    const typeBadge = isAuction
+        ? { label: "Auction", cls: "bg-amber-500 text-white" }
+        : isPreOrder
+            ? { label: "Pre-Order", cls: "bg-violet-600 text-white" }
+            : null;
+    const longPress = useLongPress(() => onSelect?.(product.id));
+    const handleCardClick = selectionMode
+        ? (e) => { e.preventDefault(); e.stopPropagation(); onSelect?.(product.id); }
+        : onClick && !href ? () => onClick(product) : undefined;
+    const cardBody = (_jsxs(Div, { role: selectionMode ? "checkbox" : onClick ? "button" : undefined, "aria-checked": selectionMode ? isSelected : undefined, tabIndex: selectionMode || (onClick && !href) ? 0 : undefined, onKeyDown: selectionMode
+            ? (e) => (e.key === "Enter" || e.key === " ") && onSelect?.(product.id)
+            : onClick && !href
+                ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
+                : undefined, onClick: handleCardClick, ...(!selectionMode ? longPress : {}), className: [
+            "group relative flex h-full flex-col overflow-hidden",
+            "rounded-2xl border bg-white",
+            "shadow-sm transition-all duration-200",
+            isSelected
+                ? "border-primary ring-2 ring-primary/30 shadow-md"
+                : "border-zinc-200/80 hover:shadow-lg hover:border-primary/30 hover:-translate-y-0.5",
+            "dark:bg-slate-900",
+            isSelected ? "dark:border-primary dark:ring-primary/30" : "dark:border-slate-700/60",
+            selectionMode || onClick || href ? "cursor-pointer" : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsxs(Div, { className: "relative overflow-hidden bg-zinc-100 dark:bg-slate-800 aspect-square", children: [product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", className: "transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Div, { className: "h-full w-full flex items-center justify-center bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700", children: _jsx(Span, { className: "text-4xl opacity-30", children: "\uD83D\uDECD\uFE0F" }) })), _jsxs(Div, { className: "absolute left-2 top-2 flex flex-col gap-1", children: [onSelect && (_jsx(Div, { onClick: (e) => { e.preventDefault(); e.stopPropagation(); onSelect(product.id); }, "aria-label": isSelected ? "Deselect" : "Select", className: [
+                                    "flex h-6 w-6 items-center justify-center rounded-md border-2 shadow-sm transition-all duration-150 cursor-pointer",
+                                    isSelected
+                                        ? "bg-primary border-primary text-white opacity-100"
+                                        : "bg-white/90 dark:bg-slate-800/90 border-zinc-300 dark:border-slate-500",
+                                    selectionMode || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+                                ].join(" "), children: isSelected && (_jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 6l3 3 5-5" }) })) })), !selectionMode && !isSelected && (_jsxs(_Fragment, { children: [discount && (_jsxs(Span, { className: "rounded-full bg-rose-500 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm", children: ["-", discount, "%"] })), typeBadge && (_jsx(Span, { className: `rounded-full px-2 py-0.5 text-[10px] font-bold shadow-sm ${typeBadge.cls}`, children: typeBadge.label }))] }))] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                             e.stopPropagation();
+                            e.preventDefault();
                             onAddToWishlist(product.id);
-                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 dark:bg-slate-800/90 text-neutral-600 dark:text-zinc-300 shadow transition hover:bg-white dark:hover:bg-slate-700 hover:text-red-500", children: isWishlisted ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col border-t border-zinc-200/80 bg-zinc-50 p-3 dark:border-slate-700/80 dark:bg-slate-900", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-950 dark:text-white`, children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-600 dark:text-zinc-400` })), product.sellerName && (_jsx(Text, { className: "mt-0.5 text-xs text-zinc-600 dark:text-zinc-400", children: safeDisplayName(product.sellerName, "Seller") })), _jsxs(Div, { className: "mt-2 flex items-baseline gap-2", children: [_jsx(Span, { className: "font-semibold text-zinc-950 dark:text-white", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && (_jsx(Span, { className: "text-xs text-zinc-500 line-through dark:text-zinc-400", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1", children: [_jsx(Span, { className: "text-xs text-yellow-500", children: "\u2605" }), _jsxs(Span, { className: "text-xs text-neutral-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] }))] })] }));
-    if (href) {
+                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: [
+                            "absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full shadow-sm",
+                            "transition-all duration-150",
+                            isWishlisted
+                                ? "bg-rose-500 text-white hover:bg-rose-600"
+                                : "bg-white/90 dark:bg-slate-800/90 text-zinc-500 dark:text-zinc-400 hover:text-rose-500 hover:bg-white dark:hover:bg-slate-800",
+                        ].join(" "), children: _jsx("svg", { className: "h-4 w-4", fill: isWishlisted ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" }) }) }))] }), _jsxs(Div, { className: "flex flex-1 flex-col p-3 pt-2.5", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-900 dark:text-white leading-snug`, children: product.title }), (product.categoryName || product.brand) && (_jsxs(Row, { className: "mt-1 gap-1 flex-wrap", children: [product.categoryName && (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[90px]", children: product.categoryName })), product.brand && (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[80px]", children: product.brand }))] })), (() => {
+                        const seller = safeDisplayName(product.storeName, "");
+                        return seller ? (_jsxs(Text, { className: "mt-0.5 text-[11px] text-zinc-400 dark:text-zinc-500 truncate", children: ["by ", seller] })) : null;
+                    })(), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1 items-center", children: [_jsx(Span, { className: "text-[11px] text-amber-400", children: "\u2605" }), _jsxs(Span, { className: "text-[11px] text-zinc-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto pt-2", children: [_jsxs(Row, { className: "items-baseline gap-2", children: [_jsx(Span, { className: "text-base font-bold text-primary dark:text-primary-400", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && product.originalPrice > product.price && (_jsx(Span, { className: "text-xs text-zinc-400 line-through dark:text-zinc-500", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), (onAddToCart || onBuyNow) && (_jsxs(Div, { className: "mt-2 grid gap-1.5", style: { gridTemplateColumns: onBuyNow && onAddToCart ? "1fr 1fr" : "1fr" }, children: [onBuyNow && (_jsxs(Button, { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            onBuyNow(product);
+                                        }, className: "flex items-center justify-center gap-1 rounded-xl bg-primary py-2 text-xs font-semibold text-white hover:bg-primary/90 active:scale-[0.97] transition-all duration-150 btn-glow", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2.5, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Buy Now"] })), onAddToCart && (_jsxs(Button, { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            onAddToCart(product);
+                                        }, className: "flex items-center justify-center gap-1 rounded-xl border-2 border-primary/30 py-2 text-xs font-semibold text-primary hover:bg-primary/5 hover:border-primary/50 active:scale-[0.97] transition-all duration-150 dark:text-primary-400 dark:border-primary-400/30 dark:hover:bg-primary/10", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L5 3H3m4 10v7a1 1 0 001 1h8a1 1 0 001-1v-7M9 21h6" }) }), "Cart"] }))] }))] })] })] }));
+    if (href && !selectionMode) {
         return (_jsx(Link, { href: href, className: "block h-full", children: cardBody }));
     }
     return cardBody;
 }
 // --- Grid class maps ---------------------------------------------------------
 const GRID_CLASSES = {
-    card: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4",
+    card: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6",
 };
 function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
     const discount = product.originalPrice && product.originalPrice > product.price
@@ -35,18 +86,25 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
     return (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
             : undefined, onClick: onClick ? () => onClick(product) : undefined, className: [
-            "flex items-center gap-3 p-3 rounded-lg",
-            "border-b border-zinc-100 dark:border-zinc-800 last:border-0",
+            "flex items-center gap-3 p-2 sm:p-3",
             "hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-colors",
             onClick ? "cursor-pointer" : "",
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { className: "flex-shrink-0 w-[72px] h-[72px] rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "w-full h-full bg-center bg-cover", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200 dark:bg-zinc-700" })) }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate text-sm font-medium text-neutral-900 dark:text-zinc-100", children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp1} text-xs text-neutral-500 dark:text-zinc-400` }))] }), product.categoryName && (_jsx(Span, { className: "hidden sm:block w-[110px] text-xs text-neutral-400 dark:text-zinc-500 truncate", children: product.categoryName })), product.rating !== undefined && (_jsxs(Span, { className: "hidden sm:flex w-[72px] items-center gap-0.5 text-xs text-neutral-500", children: [_jsx(Span, { className: "text-yellow-500", children: "\u2605" }), product.rating.toFixed(1)] })), _jsxs(Div, { className: "w-[80px] text-right flex-shrink-0", children: [_jsxs(Span, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: [getDefaultCurrencySymbol(), product.price.toLocaleString()] }), discount && (_jsxs(Span, { className: "block text-[10px] text-neutral-400 dark:text-zinc-500", children: ["-", discount, "%"] }))] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+            .join(" "), children: [_jsx(Div, { className: "flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200 dark:bg-zinc-700" })) }), _jsxs(Div, { className: "flex flex-1 flex-col min-w-0 gap-0.5", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900 dark:text-zinc-100`, children: product.title }), (product.categoryName || product.brand) && (_jsx(Span, { className: "text-[11px] text-zinc-400 dark:text-zinc-500 truncate", children: [product.categoryName, product.brand].filter(Boolean).join(" · ") })), _jsxs(Div, { className: "flex items-center gap-2 flex-wrap mt-0.5", children: [_jsx(Span, { className: "text-sm font-semibold text-primary", children: formatCurrency(product.price, getDefaultCurrency()) }), discount && (_jsxs(Span, { className: "text-[10px] font-bold text-rose-500", children: ["-", discount, "%"] })), product.rating !== undefined && (_jsxs(Span, { className: "text-[11px] text-zinc-400 dark:text-zinc-500 flex items-center gap-0.5", children: [_jsx(Span, { className: "text-amber-400", children: "\u2605" }), product.rating.toFixed(1)] }))] })] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                     e.stopPropagation();
                     onAddToWishlist(product.id);
-                }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "flex-shrink-0 w-[36px] h-[36px] flex items-center justify-center rounded-lg text-neutral-400 hover:text-red-500 transition-colors", children: isWishlisted ? "♥" : "♡" }))] }));
+                }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: `flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-full text-base leading-none ${isWishlisted ? "text-rose-500" : "text-zinc-300 dark:text-zinc-600 hover:text-rose-400"}`, children: isWishlisted ? "♥" : "♡" }))] }));
+}
+function safeHref(href) {
+    if (!href)
+        return undefined;
+    // drop any href that would navigate to a literal "/undefined" segment
+    if (href.includes("/undefined") || href.includes("/null"))
+        return undefined;
+    return href;
 }
-export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", }) {
+export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", selectionMode = false, selectedIds, onToggleSelect, }) {
     const isEmpty = products.length === 0;
     // Slot resolution: explicit props win over `slots` object
     const resolvedHeader = headerSlot ??
@@ -73,12 +131,14 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                     const ctx = {
                         onClick: onProductClick,
                         onWishlistToggle,
+                        onAddToCart,
+                        onBuyNow,
                         isWishlisted: wishlistedIds?.has(p.id) ?? false,
                     };
                     const cardRenderer = renderCard ?? slots?.renderCard;
                     return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                             ? renderCard(p, ctx)
-                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
+                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect }, p.id));
                 }) }));
         }
         const gridClass = GRID_CLASSES.card;
@@ -86,12 +146,14 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                 const ctx = {
                     onClick: onProductClick,
                     onWishlistToggle,
+                    onAddToCart,
+                    onBuyNow,
                     isWishlisted: wishlistedIds?.has(p.id) ?? false,
                 };
                 const cardRenderer = renderCard ?? slots?.renderCard;
                 return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                         ? renderCard(p, ctx)
-                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
+                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect }, p.id));
             }) }));
     };
     return (_jsxs(Div, { children: [resolvedHeader, isEmpty

package/dist/features/products/components/ProductTabsShell.d.ts

@@ -1,18 +1,10 @@
 import React from "react";
 export interface ProductTabsShellProps {
-    /** Pre-rendered description content (server RSC node) */
     descriptionContent?: React.ReactNode;
-    /** Pre-rendered specifications content (server RSC node) */
     specsContent?: React.ReactNode;
-    /** Pre-rendered reviews content (server RSC node) */
+    ingredientsContent?: React.ReactNode;
+    howToUseContent?: React.ReactNode;
     reviewsContent?: React.ReactNode;
     className?: string;
 }
-/**
- * RSC-safe tab shell for product detail pages.
- *
- * Accepts pre-rendered ReactNode children instead of render functions so the
- * component can be used inside a server component tree. (Functions cannot cross
- * the RSC serialisation boundary to a "use client" component.)
- */
-export declare function ProductTabsShell({ descriptionContent, specsContent, reviewsContent, className, }: ProductTabsShellProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductTabsShell({ descriptionContent, specsContent, ingredientsContent, howToUseContent, reviewsContent, className, }: ProductTabsShellProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/products/components/ProductTabsShell.js

@@ -1,26 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-const TABS = [
+const ALL_TABS = [
     { id: "description", label: "Description" },
     { id: "specs", label: "Specifications" },
+    { id: "ingredients", label: "Ingredients" },
+    { id: "howToUse", label: "How to Use" },
     { id: "reviews", label: "Reviews" },
 ];
-/**
- * RSC-safe tab shell for product detail pages.
- *
- * Accepts pre-rendered ReactNode children instead of render functions so the
- * component can be used inside a server component tree. (Functions cannot cross
- * the RSC serialisation boundary to a "use client" component.)
- */
-export function ProductTabsShell({ descriptionContent, specsContent, reviewsContent, className = "", }) {
-    const visibleTabs = TABS.filter((t) => (t.id === "description" && descriptionContent != null) ||
-        (t.id === "specs" && specsContent != null) ||
-        (t.id === "reviews" && reviewsContent != null));
+export function ProductTabsShell({ descriptionContent, specsContent, ingredientsContent, howToUseContent, reviewsContent, className = "", }) {
+    const contentMap = {
+        description: descriptionContent,
+        specs: specsContent,
+        ingredients: ingredientsContent,
+        howToUse: howToUseContent,
+        reviews: reviewsContent,
+    };
+    const visibleTabs = ALL_TABS.filter((t) => contentMap[t.id] != null);
     const [activeTab, setActiveTab] = useState(visibleTabs[0]?.id ?? "description");
     if (visibleTabs.length === 0)
         return null;
-    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "mb-6 flex gap-4 border-b border-zinc-200 dark:border-zinc-700", children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `-mb-px pb-2.5 text-sm font-medium border-b-2 transition-colors ${activeTab === t.id
+    return (_jsxs("div", { className: `mt-8 ${className}`, children: [_jsx("div", { className: "mb-6 flex gap-1 overflow-x-auto border-b border-zinc-200 dark:border-zinc-700 pb-px", children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `flex-shrink-0 -mb-px pb-3 px-4 text-sm font-medium border-b-2 transition-colors ${activeTab === t.id
                         ? "border-primary-500 text-primary-600 dark:text-primary-400"
-                        : "border-transparent text-neutral-500 hover:text-neutral-700 dark:hover:text-zinc-300"}`, children: t.label }, t.id))) }), _jsxs("div", { children: [activeTab === "description" && descriptionContent, activeTab === "specs" && specsContent, activeTab === "reviews" && reviewsContent] })] }));
+                        : "border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"}`, children: t.label }, t.id))) }), _jsx("div", { children: visibleTabs.map((t) => (_jsx("div", { hidden: activeTab !== t.id, children: contentMap[t.id] }, t.id))) })] }));
 }