@deneb-ui/ui 2.0.67 → 2.0.68

package/dist/EditableProductGrid.d.ts

@@ -48,14 +48,78 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
      * e.g. "home.product1", "home.product2", etc.
      */
     cardPrefix?: string;
+    /**
+     * Whether to display the live search bar above the product grid (default: true).
+     */
+    showSearch?: boolean;
+    /**
+     * Custom placeholder text for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether to enable live backend catalog search when query is typed (default: true).
+     */
+    enableBackendSearch?: boolean;
+    /**
+     * Callback fired whenever the search query changes.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Whether to enable pagination for the product grid (default: true).
+     */
+    enablePagination?: boolean;
+    /**
+     * Number of products to display per page (default: 8).
+     */
+    pageSize?: number;
+    /**
+     * Selectable page size options for the dropdown selector (e.g. [8, 16, 24, 48]).
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Whether to show the page size selector dropdown (default: false).
+     */
+    showPageSizeSelector?: boolean;
+    /**
+     * Pagination visual display variant:
+     * - 'numbers': Standard numbered buttons with smart ellipsis and Prev/Next (default)
+     * - 'simple': Minimal Previous / Next controls with page indicator
+     * - 'load-more': Progressive infinite-style "Load More Products" button
+     */
+    paginationVariant?: 'numbers' | 'simple' | 'load-more';
+    /**
+     * Whether to automatically hide pagination controls when all products fit on a single page (default: true).
+     */
+    hidePaginationOnSinglePage?: boolean;
+    /**
+     * Controlled active page number (1-indexed).
+     */
+    currentPage?: number;
+    /**
+     * Initial page number when uncontrolled (default: 1).
+     */
+    initialPage?: number;
+    /**
+     * Callback fired when the active page changes.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Whether to smoothly scroll to the top of the grid section when the page changes (default: true).
+     */
+    scrollToTopOnPageChange?: boolean;
+    /**
+     * Total products count override when backend performs server-side pagination slicing.
+     */
+    totalProducts?: number;
     className?: string;
 }
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
- * automatic useProducts() fallback rehydration, and built-in Quick View modal triggers.
+ * smart multi-variant pagination, automatic useProducts() fallback rehydration,
+ * and built-in Quick View modal triggers.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function EditableProductGrid({ sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
+export declare function EditableProductGrid({ sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, showSearch, searchPlaceholder, enableBackendSearch, onSearchChange, enablePagination, pageSize, pageSizeOptions, showPageSizeSelector, paginationVariant, hidePaginationOnSinglePage, currentPage: controlledPage, initialPage, onPageChange, scrollToTopOnPageChange, totalProducts, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
 export declare const ProductGrid: typeof EditableProductGrid;

package/dist/EditableProductGrid.js

@@ -9,13 +9,71 @@ const SiteDataProvider_1 = require("./SiteDataProvider");
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
- * automatic useProducts() fallback rehydration, and built-in Quick View modal triggers.
+ * smart multi-variant pagination, automatic useProducts() fallback rehydration,
+ * and built-in Quick View modal triggers.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function EditableProductGrid({ sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', className = '', style, ...props }) {
+function EditableProductGrid({ sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', showSearch = true, searchPlaceholder = 'Search products by name, brand, or tag...', enableBackendSearch = true, onSearchChange, enablePagination = true, pageSize = 8, pageSizeOptions = [8, 16, 24, 48], showPageSizeSelector = false, paginationVariant = 'numbers', hidePaginationOnSinglePage = true, currentPage: controlledPage, initialPage = 1, onPageChange, scrollToTopOnPageChange = true, totalProducts, className = '', style, ...props }) {
+    const sectionRef = (0, react_1.useRef)(null);
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const siteApi = (0, SiteDataProvider_1.useSiteApi)();
     const liveProducts = (0, SiteDataProvider_1.useProducts)();
-    const products = userProducts && userProducts.length > 0 ? userProducts : liveProducts;
+    const baseProducts = userProducts && userProducts.length > 0 ? userProducts : liveProducts;
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [isSearchingBackend, setIsSearchingBackend] = (0, react_1.useState)(false);
+    const [backendProducts, setBackendProducts] = (0, react_1.useState)(null);
+    // Pagination internal state
+    const [internalPage, setInternalPage] = (0, react_1.useState)(initialPage);
+    const activePage = controlledPage !== undefined ? controlledPage : internalPage;
+    const [activePageSize, setActivePageSize] = (0, react_1.useState)(pageSize);
+    const [loadedCount, setLoadedCount] = (0, react_1.useState)(pageSize);
+    // Sync internal page size if prop changes
+    (0, react_1.useEffect)(() => {
+        if (pageSize) {
+            setActivePageSize(pageSize);
+        }
+    }, [pageSize]);
+    // Use backend search results if available, else fallback to baseProducts
+    const products = backendProducts && backendProducts.length > 0 ? backendProducts : baseProducts;
+    // Live backend catalog search when query changes
+    (0, react_1.useEffect)(() => {
+        if (!enableBackendSearch || !searchQuery.trim()) {
+            setBackendProducts(null);
+            return;
+        }
+        const catalogUrl = siteApi?.catalogUrl ||
+            (siteData?.siteInstance?.slug ? `/site-catalog/${siteData.siteInstance.slug}` : null);
+        if (!catalogUrl)
+            return;
+        let active = true;
+        const timer = setTimeout(async () => {
+            try {
+                setIsSearchingBackend(true);
+                const sep = catalogUrl.includes('?') ? '&' : '?';
+                const url = `${catalogUrl}${sep}q=${encodeURIComponent(searchQuery.trim())}`;
+                const res = await fetch(url, { headers: { Accept: 'application/json' } });
+                if (res.ok) {
+                    const data = await res.json();
+                    const items = Array.isArray(data) ? data : (data.products || data.items || []);
+                    if (active && Array.isArray(items) && items.length > 0) {
+                        setBackendProducts(items);
+                    }
+                }
+            }
+            catch {
+                // Fallback to client-side filtering cleanly
+            }
+            finally {
+                if (active)
+                    setIsSearchingBackend(false);
+            }
+        }, 300);
+        return () => {
+            active = false;
+            clearTimeout(timer);
+        };
+    }, [searchQuery, enableBackendSearch, siteApi, siteData]);
     const resolvedCategories = (0, react_1.useMemo)(() => {
         if (categories && categories.length > 1) {
             return categories;
@@ -26,15 +84,78 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
         return distinct.length > 0 ? ['All', ...distinct] : categories;
     }, [categories, products]);
     const [activeCategory, setActiveCategory] = (0, react_1.useState)(categories[0] || 'All');
+    // Reset to page 1 whenever category or search query changes
+    (0, react_1.useEffect)(() => {
+        setInternalPage(1);
+        setLoadedCount(activePageSize);
+        onPageChange?.(1);
+    }, [searchQuery, activeCategory, activePageSize]);
     const filteredProducts = (0, react_1.useMemo)(() => {
-        if (!activeCategory || activeCategory.toLowerCase() === 'all') {
-            return products;
-        }
-        return products.filter((p) => {
-            const cat = String(p.category || '').toLowerCase();
-            return cat === activeCategory.toLowerCase();
-        });
-    }, [products, activeCategory]);
+        let result = products;
+        // Filter by category
+        if (activeCategory && activeCategory.toLowerCase() !== 'all') {
+            result = result.filter((p) => {
+                const cat = String(p.category || '').toLowerCase();
+                return cat === activeCategory.toLowerCase();
+            });
+        }
+        // Filter by search query
+        if (searchQuery.trim()) {
+            const q = searchQuery.trim().toLowerCase();
+            result = result.filter((p) => {
+                const name = String(p.name || p.title || '').toLowerCase();
+                const desc = String(p.description || '').toLowerCase();
+                const brand = String(p.brand || '').toLowerCase();
+                const cat = String(p.category || '').toLowerCase();
+                const tags = Array.isArray(p.tags) ? p.tags.join(' ').toLowerCase() : '';
+                return name.includes(q) || desc.includes(q) || brand.includes(q) || cat.includes(q) || tags.includes(q);
+            });
+        }
+        return result;
+    }, [products, activeCategory, searchQuery]);
+    // Total count calculation
+    const totalItems = totalProducts !== undefined ? totalProducts : filteredProducts.length;
+    const totalPages = Math.max(1, Math.ceil(totalItems / activePageSize));
+    // Products to render based on pagination mode
+    const displayedProducts = (0, react_1.useMemo)(() => {
+        if (!enablePagination) {
+            return filteredProducts;
+        }
+        if (paginationVariant === 'load-more') {
+            return filteredProducts.slice(0, loadedCount);
+        }
+        const startIndex = (activePage - 1) * activePageSize;
+        const endIndex = startIndex + activePageSize;
+        return filteredProducts.slice(startIndex, endIndex);
+    }, [filteredProducts, enablePagination, paginationVariant, loadedCount, activePage, activePageSize]);
+    // Smart page numbers calculation with ellipsis (e.g. 1 ... 4 5 6 ... 10)
+    const visiblePages = (0, react_1.useMemo)(() => {
+        if (totalPages <= 7) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        if (activePage <= 4) {
+            return [1, 2, 3, 4, 5, 'ellipsis', totalPages];
+        }
+        if (activePage >= totalPages - 3) {
+            return [1, 'ellipsis', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+        }
+        return [1, 'ellipsis', activePage - 1, activePage, activePage + 1, 'ellipsis', totalPages];
+    }, [activePage, totalPages]);
+    // Page navigation handler
+    const handlePageChange = (newPage) => {
+        if (newPage < 1 || newPage > totalPages || newPage === activePage)
+            return;
+        if (controlledPage === undefined) {
+            setInternalPage(newPage);
+        }
+        onPageChange?.(newPage);
+        if (scrollToTopOnPageChange && sectionRef.current) {
+            sectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    };
+    const handleLoadMore = () => {
+        setLoadedCount((prev) => Math.min(prev + activePageSize, filteredProducts.length));
+    };
     // Map column config to CSS grid class names
     const gridColClasses = (0, react_1.useMemo)(() => {
         const m = columns.mobile || 1;
@@ -45,19 +166,58 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
         const dClass = d === 3 ? 'lg:grid-cols-3' : d === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4';
         return `${mClass} ${tClass} ${dClass}`;
     }, [columns]);
-    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-emerald-600 dark:text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight", children: title })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: resolvedCategories.map((cat) => {
+    const shouldShowPagination = enablePagination && !(hidePaginationOnSinglePage && totalPages <= 1);
+    return ((0, jsx_runtime_1.jsxs)("section", { ref: sectionRef, "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-8 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-emerald-600 dark:text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight", children: title })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: resolvedCategories.map((cat) => {
                             const isActive = activeCategory.toLowerCase() === cat.toLowerCase();
                             return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory(cat), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${isActive
                                     ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-950 shadow-md scale-102 font-extrabold'
                                     : 'bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200 hover:bg-slate-200/70 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:text-white dark:border-slate-800/80 dark:hover:bg-slate-850'}`, children: cat }, cat));
-                        }) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { ...(listPath ? { 'data-preview-list-path': listPath } : {}), className: `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
+                        }) }))] }), showSearch && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 max-w-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: searchQuery, onChange: (e) => {
+                                    setSearchQuery(e.target.value);
+                                    onSearchChange?.(e.target.value);
+                                }, placeholder: searchPlaceholder, className: "w-full pl-10 pr-10 py-2.5 rounded-2xl text-sm bg-slate-100/90 dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-lime-400 dark:focus:ring-lime-400 transition-all shadow-sm" }), searchQuery && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                                    setSearchQuery('');
+                                    onSearchChange?.('');
+                                }, className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors", title: "Clear search", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [isSearchingBackend && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1.5 text-emerald-600 dark:text-lime-400 font-medium animate-pulse", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-lime-400" }), "Searching live catalog..."] })), (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold bg-slate-100 dark:bg-slate-900/80 px-3 py-1.5 rounded-xl border border-slate-200/80 dark:border-slate-800", children: ["Showing ", (0, jsx_runtime_1.jsx)("span", { className: "text-slate-900 dark:text-white font-bold", children: filteredProducts.length }), " of ", products.length, " products"] })] })] })), (0, jsx_runtime_1.jsx)("div", { ...(listPath ? { 'data-preview-list-path': listPath } : {}), className: displayedProducts.length > 0
+                    ? `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`
+                    : 'deneb-product-grid-empty w-full', children: displayedProducts.length > 0 ? (displayedProducts.map((product, idx) => {
+                    // Determine true index in baseProducts for exact Fivora visual editing focus targeting
+                    const baseIndex = baseProducts.findIndex((bp) => (bp.id && product.id ? String(bp.id) === String(product.id) : false) ||
+                        (bp.name && product.name ? bp.name === product.name : false) ||
+                        (bp.title && product.title ? bp.title === product.title : false));
+                    const effectiveIndex = baseIndex !== -1 ? baseIndex : (activePage - 1) * activePageSize + idx;
                     const itemPath = listPath
-                        ? `${listPath}[${idx}]`
-                        : `${sectionPath}.${cardPrefix}${idx + 1}`;
+                        ? `${listPath}[${effectiveIndex}]`
+                        : `${sectionPath}.${cardPrefix}${effectiveIndex + 1}`;
                     return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
-                }) })) : (
-            /* Empty State */
-            (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-20 px-4 rounded-3xl border border-dashed border-slate-800 bg-slate-900/30", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-slate-400", children: ["No products found matching category \"", activeCategory, "\"."] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "mt-4 px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors", children: "View All Products" })] }))] }));
+                })) : (
+                /* Empty State — strictly inside the listPath container */
+                (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-16 px-4 rounded-3xl border border-dashed border-slate-300 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 mx-auto mb-4 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: "No products found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto", children: searchQuery
+                                ? `No products matched "${searchQuery}"${activeCategory !== 'All' ? ` in category "${activeCategory}"` : ''}.`
+                                : `No products available in category "${activeCategory}".` }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-5 flex items-center justify-center gap-3", children: [searchQuery && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSearchQuery(''), className: "px-4 py-2 rounded-xl text-xs font-bold bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors", children: "Clear Search" })), activeCategory !== 'All' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors shadow-sm", children: "View All Products" }))] })] })) }), shouldShowPagination && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: paginationVariant === 'load-more' ? (
+                /* Progressive "Load More" Variant */
+                (0, jsx_runtime_1.jsxs)("div", { className: "mt-12 flex flex-col items-center justify-center gap-3 text-center", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-slate-500 dark:text-slate-400 font-medium", children: ["Showing ", (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white", children: displayedProducts.length }), " of", ' ', (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white", children: totalItems }), " products"] }), displayedProducts.length < totalItems && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleLoadMore, className: "px-8 py-3 rounded-2xl font-bold text-sm bg-slate-900 text-white hover:bg-slate-800 dark:bg-lime-400 dark:text-slate-950 dark:hover:bg-lime-300 shadow-md transition-all active:scale-95 cursor-pointer", children: ["Load More Products (", totalItems - displayedProducts.length, " remaining)"] }))] })) : (
+                /* Numbered & Simple Pagination Navigation */
+                (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Product pagination", className: "mt-12 pt-8 border-t border-slate-200 dark:border-slate-800/80 flex flex-col sm:flex-row items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Showing", ' ', (0, jsx_runtime_1.jsxs)("strong", { className: "text-slate-900 dark:text-white font-semibold", children: [Math.min((activePage - 1) * activePageSize + 1, totalItems), "\u2013", Math.min(activePage * activePageSize, totalItems)] }), ' ', "of ", (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white font-semibold", children: totalItems }), " products"] }), showPageSizeSelector && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 border-l border-slate-200 dark:border-slate-800 pl-3", children: [(0, jsx_runtime_1.jsx)("span", { children: "Show" }), (0, jsx_runtime_1.jsx)("select", { value: activePageSize, onChange: (e) => {
+                                                const newSize = Number(e.target.value);
+                                                setActivePageSize(newSize);
+                                                setInternalPage(1);
+                                                onPageChange?.(1);
+                                            }, className: "bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg px-2 py-1 text-xs font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-lime-400", children: pageSizeOptions.map((size) => ((0, jsx_runtime_1.jsx)("option", { value: size, children: size }, size))) }), (0, jsx_runtime_1.jsx)("span", { children: "per page" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePageChange(activePage - 1), disabled: activePage <= 1, "aria-label": "Previous page", className: `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1 border ${activePage <= 1
+                                        ? 'opacity-40 cursor-not-allowed border-slate-200 dark:border-slate-800 text-slate-400'
+                                        : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/80 dark:text-slate-300 dark:hover:bg-slate-800 active:scale-95 shadow-xs cursor-pointer'}`, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Previous" })] }), paginationVariant === 'numbers' ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: visiblePages.map((pageNum, idx) => {
+                                        if (pageNum === 'ellipsis') {
+                                            return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "px-2 text-slate-400 dark:text-slate-600 select-none text-xs font-bold", children: "\u2026" }, `ellipsis-${idx}`));
+                                        }
+                                        const isCurrent = pageNum === activePage;
+                                        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handlePageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": isCurrent ? 'page' : undefined, className: `min-w-[34px] h-[34px] px-2 rounded-xl text-xs font-bold transition-all flex items-center justify-center cursor-pointer ${isCurrent
+                                                ? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-black shadow-md scale-105'
+                                                : 'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800/80 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'}`, children: pageNum }, pageNum));
+                                    }) })) : (
+                                /* Simple Indicator */
+                                (0, jsx_runtime_1.jsxs)("span", { className: "px-3 py-1.5 text-xs font-bold text-slate-700 dark:text-slate-300", children: ["Page ", activePage, " of ", totalPages] })), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePageChange(activePage + 1), disabled: activePage >= totalPages, "aria-label": "Next page", className: `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1 border ${activePage >= totalPages
+                                        ? 'opacity-40 cursor-not-allowed border-slate-200 dark:border-slate-800 text-slate-400'
+                                        : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/80 dark:text-slate-300 dark:hover:bg-slate-800 active:scale-95 shadow-xs cursor-pointer'}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Next" }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) })] })] })] })) }))] }));
 }
 // Canonical alias
 exports.ProductGrid = EditableProductGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.67",
+  "version": "2.0.68",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -50,7 +50,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.67"
+    "@deneb-ui/core": "^2.0.68"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",