@mohasinac/appkit 2.8.2 → 2.8.4

package/dist/features/categories/components/CategoriesIndexListing.js

@@ -3,27 +3,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useCategoriesFiltered } from "../hooks/useCategories";
 import { ROUTES } from "../../../next";
-import { ListingFilterDrawer, ListingToolbar, Pagination, Text } from "../../../ui";
+import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Text } from "../../../ui";
 import { CategoryCard } from "./CategoryGrid";
 import { CategoryFilters } from "./CategoryFilters";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { sortBy } from "../../../constants/sort";
 import { CATEGORY_FIELDS } from "../../../constants/field-names";
+const __P = {
+    p3: "p-3",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 const PAGE_SIZE = 24;
 function renderCategoryGrid(props) {
     const { isLoading, categories, view, activeSearch, activeTab, brandsOnly } = props;
     const isBrandView = activeTab === "brands" || brandsOnly;
     if (isLoading) {
-        return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3.5 space-y-2", children: [_jsx("div", { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) }));
+        return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3}.5 space-y-2`, children: [_jsx(Div, { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) }));
     }
     if (categories.length === 0) {
         return (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: activeSearch ? `No ${isBrandView ? "brands" : "categories"} matching "${activeSearch}"` : isBrandView ? "No brands found" : "No categories found" }));
     }
     if (view === "list") {
-        return (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
+        return (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
     }
-    return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
+    return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => _jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id)) }));
 }
 function renderCategoryFilterDrawer(props) {
     const { filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable } = props;
@@ -37,7 +43,7 @@ const FILTER_KEYS = [TABLE_KEYS.IS_FEATURED, "isBrand", "rootOnly", "tier", "min
 const SORT_OPTIONS = [
     { value: sortBy(CATEGORY_FIELDS.NAME, "ASC"), label: "Name A–Z" },
     { value: sortBy(CATEGORY_FIELDS.NAME), label: "Name Z–A" },
-    { value: "-productCount", label: "Most Products" },
+    { value: sortBy("productCount", "DESC"), label: "Most Products" },
 ];
 export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
@@ -138,10 +144,10 @@ export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
         { key: "categories", label: "Categories" },
         { key: "brands", label: "Brands" },
     ];
-    return (_jsxs("div", { className: "min-h-screen", children: [!brandsOnly && (_jsx("div", { className: "flex gap-1 border-b border-zinc-200 dark:border-slate-700 mb-2", children: TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => switchTab(tab.key), className: [
+    return (_jsxs(Div, { className: "min-h-screen", children: [!brandsOnly && (_jsx(Div, { className: "flex gap-1 border-b border-zinc-200 dark:border-slate-700 mb-2", children: TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => switchTab(tab.key), className: [
                         "px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
                         activeTab === tab.key
                             ? "border-primary text-primary dark:text-primary-400 dark:border-primary-400"
                             : "border-transparent text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
-                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: renderCategoryGrid({ isLoading, categories, view, activeSearch, activeTab, brandsOnly }) }), renderCategoryFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
+                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: renderCategoryGrid({ isLoading, categories, view, activeSearch, activeTab, brandsOnly }) }), renderCategoryFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
 }

package/dist/features/categories/components/CategoriesIndexPageView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { categoriesRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
@@ -21,16 +22,16 @@ function buildCategoryFilters(params) {
     const minItemCount = sp(params, "minItemCount");
     const maxItemCount = sp(params, "maxItemCount");
     if (minItemCount)
-        parts.push(`metrics.totalItemCount>=${minItemCount}`);
+        parts.push(sieveFilter("metrics.totalItemCount", SIEVE_OP.GTE, minItemCount));
     if (maxItemCount)
-        parts.push(`metrics.totalItemCount<=${maxItemCount}`);
+        parts.push(sieveFilter("metrics.totalItemCount", SIEVE_OP.LTE, maxItemCount));
     const tier = sp(params, "tier");
     if (tier) {
         const values = tier.split("|").filter(Boolean);
         if (values.length === 1)
-            parts.push(`tier==${values[0]}`);
+            parts.push(sieveFilter("tier", SIEVE_OP.EQ, values[0]));
         else if (values.length > 1)
-            parts.push(`tier==${values.join("|")}`);
+            parts.push(sieveFilter("tier", SIEVE_OP.EQ, values.join("|")));
     }
     return parts.join(",");
 }

package/dist/features/categories/components/CategoryBundlesListing.js

@@ -8,20 +8,24 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * All data is server-fetched; this component owns URL-state driven
  * sort/search/filter/pagination on top of the initial snapshot.
  */
+import { sortBy } from "@mohasinac/appkit";
 import { useMemo, useCallback, useState } from "react";
-import { Div, Text } from "../../../ui";
+import { Div, Span, Text } from "../../../ui";
 import { ListingToolbar, Pagination, FilterDrawer } from "../../../ui";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { BundleBuyNowCta } from "./BundleBuyNowCta";
 import { MarketplaceBundleCard } from "../../products/components/MarketplaceBundleCard";
 import { TABLE_KEYS } from "../../../constants/table-keys";
+const __P = {
+    p4: "p-4",
+};
 const PAGE_SIZE = 12;
 const FILTER_KEYS = ["showOutOfStock"];
 const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest First" },
-    { value: "createdAt", label: "Oldest First" },
-    { value: "price", label: "Price: Low to High" },
-    { value: "-price", label: "Price: High to Low" },
+    { value: sortBy("createdAt", "DESC"), label: "Newest First" },
+    { value: sortBy("createdAt", "ASC"), label: "Oldest First" },
+    { value: sortBy("price", "ASC"), label: "Price: Low to High" },
+    { value: sortBy("price", "DESC"), label: "Price: High to Low" },
 ];
 const DEFAULT_SORT = "-createdAt";
 export function CategoryBundlesListing({ initialBundles, brandName, onBuyNow, }) {
@@ -83,5 +87,5 @@ export function CategoryBundlesListing({ initialBundles, brandName, onBuyNow, })
         return (_jsx(Div, { className: "rounded-2xl border border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700", children: _jsxs(Text, { color: "muted", children: ["No bundles available", brandName ? ` for ${brandName}` : "", " yet."] }) }));
     }
     return (_jsxs(Div, { className: "min-h-[40vh]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search bundles...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
-                    commitSearch(); }, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: pageItems.length === 0 ? (_jsxs(Text, { className: "py-16 text-center text-sm text-zinc-500 dark:text-zinc-400", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: pageItems.map((bundle) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx("div", { className: "border-t border-zinc-100 px-3 pt-2 pb-3 dark:border-zinc-800 -mt-px rounded-b-xl border border-t-0 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx("div", { className: "space-y-4 p-4", children: _jsxs("label", { className: "flex items-center justify-between gap-3 cursor-pointer", children: [_jsx("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Show out-of-stock bundles" }), _jsx("button", { type: "button", role: "switch", "aria-checked": pendingShowOutOfStock, onClick: () => setPendingShowOutOfStock((v) => !v), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${pendingShowOutOfStock ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${pendingShowOutOfStock ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }) })] }));
+                    commitSearch(); }, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: pageItems.length === 0 ? (_jsxs(Text, { className: "py-16 text-center text-sm text-zinc-500 dark:text-zinc-400", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: pageItems.map((bundle) => (_jsxs(Div, { className: "flex flex-col", children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx(Div, { surface: "default", className: "border-t border-zinc-100 px-3 pt-2 pb-3 dark:border-zinc-800 -mt-px rounded-b-xl border border-t-0 border-zinc-200 dark:border-zinc-800", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Div, { className: `space-y-4 ${__P.p4}`, children: _jsxs("label", { className: "flex items-center justify-between gap-3 cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-zinc-700 dark:text-zinc-300", children: "Show out-of-stock bundles" }), _jsx("button", { type: "button", role: "switch", "aria-checked": pendingShowOutOfStock, onClick: () => setPendingShowOutOfStock((v) => !v), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${pendingShowOutOfStock ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${pendingShowOutOfStock ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }) })] }));
 }

package/dist/features/categories/components/CategoryDetailPageView.js

@@ -1,22 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveAnd, sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import Link from "next/link";
 import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories";
 import { ROUTES } from "../../../next";
-import { Container, Heading, Main, Section, Text } from "../../../ui";
+import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../../ui";
 import { CategoryDetailTabs } from "./CategoryDetailTabs";
+const __O = {
+    hidden: "overflow-hidden",
+    xAuto: "overflow-x-auto",
+};
 export async function CategoryDetailPageView({ slug }) {
     const category = await categoriesRepository
         .getCategoryBySlug(slug)
         .catch(() => undefined);
     // Use categorySlugs@=<id> (array-contains) — products store category FK in
     // the categorySlugs[] array, not the legacy `category` string field.
-    const catFilter = category?.id ? `categorySlugs@=${category.id}` : null;
+    const catFilter = category?.id ? sieveFilter("categorySlugs", SIEVE_OP.CONTAINS, category.id) : null;
     const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories] = await Promise.all([
         catFilter
             ? productRepository
                 .list({
-                filters: `status==published,${catFilter},listingType==standard`,
-                sorts: "-createdAt",
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "standard")),
+                sorts: sortBy("createdAt", "DESC"),
                 page: 1,
                 pageSize: 24,
             })
@@ -25,8 +31,8 @@ export async function CategoryDetailPageView({ slug }) {
         catFilter
             ? productRepository
                 .list({
-                filters: `status==published,${catFilter},listingType==auction`,
-                sorts: "auctionEndDate",
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "auction")),
+                sorts: sortBy("auctionEndDate", "ASC"),
                 page: 1,
                 pageSize: 1,
             })
@@ -35,8 +41,8 @@ export async function CategoryDetailPageView({ slug }) {
         catFilter
             ? productRepository
                 .list({
-                filters: `status==published,${catFilter},listingType==pre-order`,
-                sorts: "-createdAt",
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "pre-order")),
+                sorts: sortBy("createdAt", "DESC"),
                 page: 1,
                 pageSize: 1,
             })
@@ -45,8 +51,8 @@ export async function CategoryDetailPageView({ slug }) {
         catFilter
             ? productRepository
                 .list({
-                filters: `status==published,${catFilter},listingType==prize-draw`,
-                sorts: "-createdAt",
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), catFilter, sieveFilter("listingType", SIEVE_OP.EQ, "prize-draw")),
+                sorts: sortBy("createdAt", "DESC"),
                 page: 1,
                 pageSize: 1,
             })
@@ -69,7 +75,7 @@ export async function CategoryDetailPageView({ slug }) {
         ...childCategories.map((c) => c.slug).filter(Boolean),
     ];
     const storeResults = await Promise.all(storeCategorySlugs.map((catSlug) => storeRepository
-        .listStores({ filters: `storeCategory==${catSlug}`, page: 1, pageSize: 50 }, true)
+        .listStores({ filters: sieveFilter("storeCategory", SIEVE_OP.EQ, catSlug), page: 1, pageSize: 50 }, true)
         .catch(() => null)));
     const seen = new Set();
     const categoryStores = storeResults
@@ -106,7 +112,7 @@ export async function CategoryDetailPageView({ slug }) {
     const totalCount = productCount + auctionCount + preOrderCount + prizeDrawCount + bundleCount + storeCount;
     const coverImage = category?.display?.coverImage;
     const hasCover = Boolean(coverImage);
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative overflow-hidden ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", style: { backgroundImage: `url(${coverImage})` } }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs("nav", { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Home" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Categories" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx("span", { className: hasCover ? "text-white font-medium" : "text-zinc-900 dark:text-zinc-100 font-medium", children: category?.name ?? slug })] }), _jsx(Heading, { level: 1, className: `text-3xl md:text-4xl font-bold mb-2 ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { className: `text-base max-w-2xl mb-4 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: category.description })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [productCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"}`, children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400"}`, children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"}`, children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), childCategories.length > 0 && (_jsx(Section, { surface: "default", className: "border-b border-zinc-100 dark:border-zinc-800", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 py-3", children: _jsx("div", { className: "flex gap-2.5 overflow-x-auto pb-1", style: { scrollbarWidth: "none" }, children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), className: "flex-shrink-0 flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx("span", { className: "text-base leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx("span", { className: "text-xs text-zinc-400 dark:text-zinc-400", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: {
+    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", style: { backgroundImage: `url(${coverImage})` } }), _jsx(Div, { className: "absolute inset-0 bg-black/55" })] })), _jsxs(Div, { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs(Nav, { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-100", children: category?.name ?? slug })] }), _jsx(Heading, { level: 1, className: `text-3xl md:text-4xl font-bold mb-2 ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { className: `text-base max-w-2xl mb-4 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: category.description })), _jsxs(Div, { className: "flex flex-wrap gap-2", children: [productCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"}`, children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400"}`, children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { size: "xs", weight: "medium", className: `inline-flex items-center gap-1 px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"}`, children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), childCategories.length > 0 && (_jsx(Section, { surface: "default", className: "border-b border-zinc-100 dark:border-zinc-800", children: _jsx(Div, { className: "max-w-7xl mx-auto px-4 py-3", children: _jsx(Div, { className: `flex gap-2.5 ${__O.xAuto} pb-1`, style: { scrollbarWidth: "none" }, children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), className: "flex-shrink-0 flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: {
                             products: productCount,
                             auctions: auctionCount,
                             preOrders: preOrderCount,

package/dist/features/categories/components/CategoryDetailTabs.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Div } from "../../../ui";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
@@ -8,6 +9,9 @@ import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsInde
 import { CategoryBundlesListing } from "./CategoryBundlesListing";
 import { CategoryStoresListing } from "./CategoryStoresListing";
 import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
+const __O = {
+    xAuto: "overflow-x-auto",
+};
 function tabLabel(label, count) {
     if (!count)
         return label;
@@ -50,7 +54,7 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
             default: return undefined;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex border-b border-zinc-200 dark:border-slate-700 mb-6 overflow-x-auto", children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium whitespace-nowrap transition-colors -mb-px border-b-2 ${activeTab === t.id
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: `flex border-b border-zinc-200 dark:border-slate-700 mb-6 ${__O.xAuto}`, children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium whitespace-nowrap transition-colors -mb-px border-b-2 ${activeTab === t.id
                         ? "border-primary text-primary"
                         : "border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: tabLabel(t.label, countFor(t.id)) }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
 }

package/dist/features/categories/components/CategoryFilters.d.ts

@@ -9,51 +9,51 @@ export declare const CATEGORY_ADMIN_SORT_OPTIONS: readonly [{
     readonly value: "order";
     readonly label: "Order Asc";
 }, {
-    readonly value: "-order";
+    readonly value: string;
     readonly label: "Order Desc";
 }, {
-    readonly value: "name";
+    readonly value: string;
     readonly label: "Name A-Z";
 }, {
-    readonly value: "-name";
+    readonly value: string;
     readonly label: "Name Z-A";
 }, {
     readonly value: "tier";
     readonly label: "Tier Low to High";
 }, {
-    readonly value: "-tier";
+    readonly value: string;
     readonly label: "Tier High to Low";
 }, {
-    readonly value: "-metrics.totalItemCount";
+    readonly value: string;
     readonly label: "Most Items";
 }, {
-    readonly value: "-createdAt";
+    readonly value: string;
     readonly label: "Newest First";
 }];
 export declare const CATEGORY_SELLER_SORT_OPTIONS: readonly [{
     readonly value: "order";
     readonly label: "Order Asc";
 }, {
-    readonly value: "name";
+    readonly value: string;
     readonly label: "Name A-Z";
 }, {
-    readonly value: "-name";
+    readonly value: string;
     readonly label: "Name Z-A";
 }, {
-    readonly value: "-metrics.totalItemCount";
+    readonly value: string;
     readonly label: "Most Items";
 }];
 export declare const CATEGORY_PUBLIC_SORT_OPTIONS: readonly [{
     readonly value: "order";
     readonly label: "Recommended";
 }, {
-    readonly value: "name";
+    readonly value: string;
     readonly label: "Name A-Z";
 }, {
-    readonly value: "-name";
+    readonly value: string;
     readonly label: "Name Z-A";
 }, {
-    readonly value: "-metrics.totalItemCount";
+    readonly value: string;
     readonly label: "Most Items";
 }];
 export declare function getCategoryFilterKeys(variant: CategoryFilterVariant): readonly string[];

package/dist/features/categories/components/CategoryFilters.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
@@ -19,25 +20,25 @@ export const CATEGORY_FILTER_KEYS = {
 };
 export const CATEGORY_ADMIN_SORT_OPTIONS = [
     { value: "order", label: "Order Asc" },
-    { value: "-order", label: "Order Desc" },
-    { value: "name", label: "Name A-Z" },
-    { value: "-name", label: "Name Z-A" },
+    { value: sortBy("order", "DESC"), label: "Order Desc" },
+    { value: sortBy("name", "ASC"), label: "Name A-Z" },
+    { value: sortBy("name", "DESC"), label: "Name Z-A" },
     { value: "tier", label: "Tier Low to High" },
-    { value: "-tier", label: "Tier High to Low" },
-    { value: "-metrics.totalItemCount", label: "Most Items" },
-    { value: "-createdAt", label: "Newest First" },
+    { value: sortBy("tier", "DESC"), label: "Tier High to Low" },
+    { value: sortBy("metrics.totalItemCount", "DESC"), label: "Most Items" },
+    { value: sortBy("createdAt", "DESC"), label: "Newest First" },
 ];
 export const CATEGORY_SELLER_SORT_OPTIONS = [
     { value: "order", label: "Order Asc" },
-    { value: "name", label: "Name A-Z" },
-    { value: "-name", label: "Name Z-A" },
-    { value: "-metrics.totalItemCount", label: "Most Items" },
+    { value: sortBy("name", "ASC"), label: "Name A-Z" },
+    { value: sortBy("name", "DESC"), label: "Name Z-A" },
+    { value: sortBy("metrics.totalItemCount", "DESC"), label: "Most Items" },
 ];
 export const CATEGORY_PUBLIC_SORT_OPTIONS = [
     { value: "order", label: "Recommended" },
-    { value: "name", label: "Name A-Z" },
-    { value: "-name", label: "Name Z-A" },
-    { value: "-metrics.totalItemCount", label: "Most Items" },
+    { value: sortBy("name", "ASC"), label: "Name A-Z" },
+    { value: sortBy("name", "DESC"), label: "Name Z-A" },
+    { value: sortBy("metrics.totalItemCount", "DESC"), label: "Most Items" },
 ];
 export function getCategoryFilterKeys(variant) {
     return CATEGORY_FILTER_KEYS[variant];

package/dist/features/categories/components/CategoryForm.js

@@ -1,11 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormGroup } from "../../../ui";
+import { Div, FormGroup } from "../../../ui";
 import { Label, Checkbox, RichTextEditor, Text } from "../../../ui";
 import { ImageUpload, MediaImage, useMediaUpload } from "../../media";
 import { FormField } from "../../../ui";
 import { flattenCategories } from "../types";
 import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter";
+const __O = {
+    hidden: "overflow-hidden",
+};
 const DEFAULT_LABELS = {
     name: "Name",
     slug: "Slug",
@@ -32,10 +35,10 @@ export function CategoryForm({ category, allCategories, onChange, isReadonly = f
     const handleNameChange = (value) => {
         update({ name: value, slug: makeSlug(value, category.isBrand ?? false) });
     };
-    return (_jsxs("div", { className: stackClassName, "data-section": "categoryform-div-262", children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "name", label: L.name, type: "text", value: category.name || "", onChange: handleNameChange, disabled: isReadonly }), _jsx(FormField, { name: "slug", label: L.slug, type: "text", value: category.slug || "", onChange: (value) => update({ slug: value }), disabled: isReadonly })] }), _jsxs("div", { className: "appkit-form-field", "data-section": "categoryform-div-263", children: [_jsx(Label, { className: "appkit-form-field__label", children: L.description }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(category.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, minHeightClassName: "min-h-[140px]", placeholder: "Enter category description" }), _jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: "Rich text is supported for category descriptions." })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
+    return (_jsxs(Div, { className: stackClassName, children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "name", label: L.name, type: "text", value: category.name || "", onChange: handleNameChange, disabled: isReadonly }), _jsx(FormField, { name: "slug", label: L.slug, type: "text", value: category.slug || "", onChange: (value) => update({ slug: value }), disabled: isReadonly })] }), _jsxs(Div, { className: "appkit-form-field", children: [_jsx(Label, { className: "appkit-form-field__label", children: L.description }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(category.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, minHeightClassName: "min-h-[140px]", placeholder: "Enter category description" }), _jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: "Rich text is supported for category descriptions." })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
                     type: "category-image",
                     name: category.name || "category",
-                }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs("div", { "data-section": "categoryform-div-264", children: [_jsx(Label, { className: "block text-sm font-medium mb-2", children: L.categoryImage }), _jsx("div", { className: "relative h-32 w-40 overflow-hidden rounded", "data-section": "categoryform-div-265", children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [
+                }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs(Div, { children: [_jsx(Label, { className: "block text-sm font-medium mb-2", children: L.categoryImage }), _jsx(Div, { className: `relative h-32 w-40 ${__O.hidden} rounded`, children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [
                     { value: "", label: L.noneRoot },
                     ...flattenCategories(allCategories).map((cat) => ({
                         value: cat.id,

package/dist/features/categories/components/CategoryGrid.js

@@ -3,9 +3,16 @@ import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { Div, Span, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
+const __P = {
+    p3: "p-3",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
+const CLS_FEATURED_DOT = "absolute left-2 top-2 rounded-full bg-amber-400 p-1 leading-none";
 export function CategoryCard({ category, href, onClick, className = "", }) {
     const productCount = category.metrics?.productCount ?? category.productCount ?? 0;
-    const inner = (_jsxs(Div, { className: "flex h-full flex-col", children: [_jsxs(Div, { className: "relative aspect-[4/3] w-full overflow-hidden bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-zinc-800 dark:to-zinc-700 flex-shrink-0", children: [category.display?.coverImage ? (_jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${category.display.coverImage})` } })) : category.display?.color ? (_jsx(Div, { className: "h-full w-full opacity-80", style: { backgroundColor: category.display.color } })) : null, category.display?.icon && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center text-4xl", children: category.display.icon })), category.isFeatured && (_jsx(Span, { className: "absolute left-2 top-2 rounded-full bg-amber-400 p-1 text-xs leading-none", children: "\u2605" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col p-3.5", children: [_jsx(Text, { className: `font-semibold text-sm leading-snug ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-900 dark:text-white`, children: category.name }), category.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400 flex-1`, children: category.description })), _jsxs(Div, { className: "mt-2 flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { className: "inline-flex items-center gap-1 rounded-md border border-zinc-200 dark:border-zinc-700 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
+    const inner = (_jsxs(Div, { className: "flex h-full flex-col", children: [_jsxs(Div, { className: `relative aspect-[4/3] w-full ${__O.hidden} bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-zinc-800 dark:to-zinc-700 flex-shrink-0`, children: [category.display?.coverImage ? (_jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${category.display.coverImage})` } })) : category.display?.color ? (_jsx(Div, { className: "h-full w-full opacity-80", style: { backgroundColor: category.display.color } })) : null, category.display?.icon && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center text-4xl", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p3}.5`, children: [_jsx(Text, { className: `font-semibold text-sm leading-snug ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-900 dark:text-white`, children: category.name }), category.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400 flex-1`, children: category.description })), _jsxs(Div, { className: "mt-2 flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { size: "xs", weight: "medium", className: "inline-flex items-center gap-1 rounded-md border border-zinc-200 dark:border-zinc-700 px-2.5 py-1 text-zinc-600 dark:text-zinc-300 group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
     const cardClass = `group relative flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm transition hover:shadow-md h-full ${className}`;
     if (href) {
         return (_jsx(Link, { href: href, className: cardClass, children: inner }));
@@ -18,5 +25,5 @@ export function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel
     if (categories.length === 0) {
         return (_jsx(Text, { className: "py-12 text-center text-sm text-neutral-500 dark:text-zinc-500", children: emptyLabel }));
     }
-    return (_jsx("div", { className: `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 ${className}`, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
+    return (_jsx(Div, { className: `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 ${className}`, children: categories.map((cat) => (_jsx(CategoryCard, { category: cat, href: getHref ? getHref(cat) : undefined, onClick: !getHref ? onCategoryClick : undefined }, cat.id))) }));
 }

package/dist/features/categories/components/CategoryProductsListing.js

@@ -4,7 +4,7 @@ import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, useToast, ListingToolbar, FilterDrawer, LoginRequiredModal, } from "../../../ui";
+import { Div, Pagination, useToast, ListingToolbar, FilterDrawer, LoginRequiredModal, } from "../../../ui";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID } from "../../products/constants/action-defs";
 import { ROUTES } from "../../../next";
@@ -13,12 +13,18 @@ import { ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/comp
 import { useGuestCart } from "../../cart/hooks/useGuestCart";
 import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
 import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
+const __P = {
+    p3: "p-3",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 const FILTER_KEYS = ["condition", "brand", "minPrice", "maxPrice"];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderCategoryProductGrid(props) {
     const { isLoading, products, view, getProductHref, onWishlistToggle, wishlistedIds, onAddToCart } = props;
     if (isLoading) {
-        return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) }));
+        return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3} space-y-2`, children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) }));
     }
     return (_jsx(ProductGrid, { products: products, getProductHref: getProductHref, view: view, emptyLabel: "No products found in this category.", onWishlistToggle: onWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: onAddToCart }));
 }
@@ -96,9 +102,9 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, i
         pushCartOp({ op: "add", productId: product.id, quantity: 1, ...snapshot });
         showToast("Added to cart", "success");
     }, [localCart, showToast]);
-    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
+    return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: renderCategoryProductGrid({
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: renderCategoryProductGrid({
                     isLoading, products: products, view,
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)),

package/dist/features/categories/components/CategorySelectorCreate.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Select, Label, Button, SideDrawer } from "../../../ui";
+import { Div, Select, Label, Button, SideDrawer } from "../../../ui";
 import { useState, useCallback } from "react";
 import { useCategories, useCreateCategory } from "../hooks/useCategorySelector";
 import { useMessage } from "../../../react";
@@ -33,7 +33,7 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
             return;
         mutate(draft);
     }, [draft, mutate]);
-    return (_jsxs("div", { className: stackClassName, "data-section": "categoryselectorcreate-div-266", children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }));
+    return (_jsxs(Div, { className: stackClassName, children: [_jsx(CategoryForm, { category: draft, allCategories: allCategories, onChange: setDraft, labels: labels.form, stackClassName: stackClassName }), _jsx(DrawerFormFooter, { variant: "inline", isLoading: isLoading, onSubmit: handleSave, onCancel: onCancel, isSubmitDisabled: !draft.name })] }));
 }
 export function CategorySelectorCreate({ value, onChange, disabled = false, label, labels = {}, stackClassName = "space-y-4", }) {
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -47,7 +47,7 @@ export function CategorySelectorCreate({ value, onChange, disabled = false, labe
         if (newId)
             onChange(newId);
     }, [onChange, refetch]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-section": "categoryselectorcreate-div-267", children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: "flex gap-2 items-center", "data-section": "categoryselectorcreate-div-268", children: [_jsx("div", { className: "flex-1", "data-section": "categoryselectorcreate-div-269", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? "Category", options: [
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs(Div, { className: "flex gap-2 items-center", children: [_jsx(Div, { className: "flex-1", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? "Category", options: [
                                         { value: "", label: L.selectPlaceholder },
                                         ...flat.map((cat) => ({
                                             value: cat.id,

package/dist/features/categories/components/CategorySortSelect.js

@@ -3,5 +3,5 @@ import { Div, Row, Select, Span } from "../../../ui";
 import { getCategorySortOptions, } from "./CategoryFilters";
 export function CategorySortSelect({ value, onChange, variant = "public", label = "Sort", className = "", }) {
     const options = [...getCategorySortOptions(variant)];
-    return (_jsxs(Row, { className: ["items-center gap-3", className].filter(Boolean).join(" "), children: [_jsx(Span, { className: "text-sm text-zinc-600 dark:text-zinc-400", children: label }), _jsx(Div, { className: "min-w-44", children: _jsx(Select, { value: value, onValueChange: (next) => onChange(next), options: options }) })] }));
+    return (_jsxs(Row, { className: ["items-center gap-3", className].filter(Boolean).join(" "), children: [_jsx(Span, { size: "sm", className: "text-zinc-600 dark:text-zinc-400", children: label }), _jsx(Div, { className: "min-w-44", children: _jsx(Select, { value: value, onValueChange: (next) => onChange(next), options: options }) })] }));
 }

package/dist/features/categories/components/CategoryStoresListing.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
-import { Text } from "../../../ui";
+import { Div, Text } from "../../../ui";
 export function CategoryStoresListing({ stores }) {
     if (stores.length === 0) {
-        return (_jsx("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400 text-sm", children: "No stores found in this category." }) }));
+        return (_jsx(Div, { className: "flex flex-col items-center justify-center py-16 text-center", children: _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400 text-sm", children: "No stores found in this category." }) }));
     }
-    return (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug)) }, store.id))) }));
+    return (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug)) }, store.id))) }));
 }