@cimplify/sdk 0.17.0 → 0.18.0

package/dist/react.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { getVariantDisplayName, createCimplifyClient } from './chunk-G6KNFYJD.mjs';
-export { getVariantDisplayName } from './chunk-G6KNFYJD.mjs';
-import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-GFKBH7R2.mjs';
-import { isSupportedCurrency, formatPrice, parsePrice, isOnSale, getDiscountPercentage, getBasePrice } from './chunk-OVM5YWM5.mjs';
+import { getVariantDisplayName, createCimplifyClient } from './chunk-KTTQC5HG.mjs';
+export { getVariantDisplayName } from './chunk-KTTQC5HG.mjs';
+import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-2JI47EYJ.mjs';
+import { isSupportedCurrency, formatPrice, parsePrice, isOnSale, getDiscountPercentage, getBasePrice } from './chunk-FTL2SXCG.mjs';
 import React3, { createContext, useContext, useState, useEffect, useRef, useMemo, useSyncExternalStore, useCallback, useId } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { NumberField } from '@base-ui/react/number-field';
@@ -1661,7 +1661,6 @@ function buildProductsCacheKey(client, locationId, options) {
     client.getPublicKey(),
     locationId ?? "",
     options.category ?? "",
-    options.collection ?? "",
     options.taxonomy ?? "",
     options.search ?? "",
     options.featured ?? "",
@@ -1672,7 +1671,8 @@ function buildProductsCacheKey(client, locationId, options) {
     options.in_stock ?? "",
     options.min_price ?? "",
     options.max_price ?? "",
-    options.page ?? ""
+    options.page ?? "",
+    options.properties ? JSON.stringify(options.properties) : ""
   ].join("|");
 }
 function useProducts(options = {}) {
@@ -1689,7 +1689,6 @@ function useProducts(options = {}) {
   const queryOptions = useMemo(
     () => ({
       category: options.category,
-      collection: options.collection,
       taxonomy: options.taxonomy,
       search: options.search,
       featured: options.featured,
@@ -1700,11 +1699,11 @@ function useProducts(options = {}) {
       in_stock: options.in_stock,
       min_price: options.min_price,
       max_price: options.max_price,
-      page: options.page
+      page: options.page,
+      properties: options.properties
     }),
     [
       options.category,
-      options.collection,
       options.taxonomy,
       options.search,
       options.featured,
@@ -1715,7 +1714,8 @@ function useProducts(options = {}) {
       options.in_stock,
       options.min_price,
       options.max_price,
-      options.page
+      options.page,
+      options.properties
     ]
   );
   const cacheKey = useMemo(
@@ -2416,6 +2416,7 @@ function useSearch(options = {}) {
   const [error, setError] = useState(null);
   const requestIdRef = useRef(0);
   const timerRef = useRef(null);
+  const tagsSignature = options.tags?.join(",") ?? "";
   useEffect(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
@@ -2436,7 +2437,15 @@ function useSearch(options = {}) {
         try {
           const result = await client.catalogue.searchProducts(trimmedQuery, {
             limit,
-            category: options.category
+            category: options.category,
+            taxonomy: options.taxonomy,
+            tags: options.tags,
+            featured: options.featured,
+            in_stock: options.in_stock,
+            min_price: options.min_price,
+            max_price: options.max_price,
+            sort_by: options.sort_by,
+            sort_order: options.sort_order
           });
           if (!result.ok) {
             throw result.error;
@@ -2462,7 +2471,7 @@ function useSearch(options = {}) {
         timerRef.current = null;
       }
     };
-  }, [client, debounceMs, limit, minLength, options.category, query]);
+  }, [client, debounceMs, limit, minLength, options.category, options.taxonomy, tagsSignature, options.featured, options.in_stock, options.min_price, options.max_price, options.sort_by, options.sort_order, query]);
   const setQuery = useCallback((nextQuery) => {
     setQueryState(nextQuery);
   }, []);
@@ -7545,6 +7554,13 @@ function CataloguePage({
   categories: categoriesProp,
   showFilter = true,
   showSearch = true,
+  showSort = false,
+  showInStockFilter = false,
+  showPriceRange = false,
+  showTagsFilter = false,
+  availableTags,
+  defaultSort,
+  pageSize,
   onProductClick,
   onCategoryClick,
   renderCard,
@@ -7555,30 +7571,36 @@ function CataloguePage({
 }) {
   const [selectedCategoryId, setSelectedCategoryId] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
-  const { products: fetchedProducts, isLoading: productsLoading } = useProducts({
-    enabled: productsProp === void 0
+  const [sortBy, setSortBy] = useState(defaultSort?.by ?? "name");
+  const [sortOrder, setSortOrder] = useState(defaultSort?.order ?? "asc");
+  const [inStockOnly, setInStockOnly] = useState(false);
+  const [selectedTags, setSelectedTags] = useState([]);
+  const [minPrice, setMinPrice] = useState("");
+  const [maxPrice, setMaxPrice] = useState("");
+  const [page, setPage] = useState(1);
+  const debouncedSearch = useDebounce(searchQuery, 300);
+  const { products: fetchedProducts, isLoading: productsLoading, pagination } = useProducts({
+    enabled: productsProp === void 0,
+    category: selectedCategoryId ?? void 0,
+    search: debouncedSearch.length >= 2 ? debouncedSearch : void 0,
+    sort_by: sortBy,
+    sort_order: sortOrder,
+    in_stock: inStockOnly || void 0,
+    tags: selectedTags.length > 0 ? selectedTags : void 0,
+    min_price: minPrice ? parseFloat(minPrice) : void 0,
+    max_price: maxPrice ? parseFloat(maxPrice) : void 0,
+    page,
+    limit: pageSize
   });
   const { categories: fetchedCategories } = useCategories({
     enabled: showFilter && categoriesProp === void 0
   });
   const allProducts = productsProp ?? fetchedProducts;
   const categories = categoriesProp ?? fetchedCategories;
-  const filteredProducts = useMemo(() => {
-    let result = allProducts;
-    if (selectedCategoryId) {
-      result = result.filter((p) => p.category_id === selectedCategoryId);
-    }
-    if (searchQuery.trim().length >= 2) {
-      const q = searchQuery.trim().toLowerCase();
-      result = result.filter(
-        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q)
-      );
-    }
-    return result;
-  }, [allProducts, selectedCategoryId, searchQuery]);
   const handleCategorySelect = useCallback(
     (id) => {
       setSelectedCategoryId(id);
+      setPage(1);
       if (id) {
         const cat = categories.find((c) => c.id === id);
         if (cat) onCategoryClick?.(cat);
@@ -7586,6 +7608,13 @@ function CataloguePage({
     },
     [categories, onCategoryClick]
   );
+  const handleTagToggle = useCallback((tag) => {
+    setSelectedTags(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+    setPage(1);
+  }, []);
+  const totalPages = pagination?.total_pages ?? 1;
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-catalogue-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsxs("div", { "data-cimplify-catalogue-header": true, className: classNames?.header, children: [
       /* @__PURE__ */ jsx("h1", { "data-cimplify-catalogue-title": true, className: classNames?.title, children: title }),
@@ -7604,6 +7633,92 @@ function CataloguePage({
         onSelect: handleCategorySelect
       }
     ) }),
+    (showSort || showInStockFilter || showPriceRange || showTagsFilter) && /* @__PURE__ */ jsxs("div", { "data-cimplify-catalogue-toolbar": true, className: cn("flex flex-wrap items-center gap-3", classNames?.toolbar), children: [
+      showSort && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          "data-cimplify-sort": true,
+          value: `${sortBy}:${sortOrder}`,
+          onChange: (e) => {
+            const [by, order] = e.target.value.split(":");
+            setSortBy(by);
+            setSortOrder(order);
+            setPage(1);
+          },
+          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "name:asc", children: "Name A\u2013Z" }),
+            /* @__PURE__ */ jsx("option", { value: "name:desc", children: "Name Z\u2013A" }),
+            /* @__PURE__ */ jsx("option", { value: "price:asc", children: "Price: Low to High" }),
+            /* @__PURE__ */ jsx("option", { value: "price:desc", children: "Price: High to Low" }),
+            /* @__PURE__ */ jsx("option", { value: "created_at:desc", children: "Newest" }),
+            /* @__PURE__ */ jsx("option", { value: "created_at:asc", children: "Oldest" }),
+            /* @__PURE__ */ jsx("option", { value: "updated_at:desc", children: "Recently Updated" })
+          ]
+        }
+      ),
+      showInStockFilter && /* @__PURE__ */ jsxs("label", { "data-cimplify-stock-filter": true, className: "flex items-center gap-1.5 text-sm cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: inStockOnly,
+            onChange: (e) => {
+              setInStockOnly(e.target.checked);
+              setPage(1);
+            },
+            className: "accent-primary"
+          }
+        ),
+        "In stock only"
+      ] }),
+      showPriceRange && /* @__PURE__ */ jsxs("div", { "data-cimplify-price-range": true, className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            placeholder: "Min",
+            value: minPrice,
+            onChange: (e) => {
+              setMinPrice(e.target.value);
+              setPage(1);
+            },
+            className: "w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
+            min: 0,
+            step: "0.01"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "\u2013" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            placeholder: "Max",
+            value: maxPrice,
+            onChange: (e) => {
+              setMaxPrice(e.target.value);
+              setPage(1);
+            },
+            className: "w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
+            min: 0,
+            step: "0.01"
+          }
+        )
+      ] }),
+      showTagsFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ jsx("div", { "data-cimplify-tags-filter": true, className: "flex flex-wrap gap-1.5", children: availableTags.map((tag) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleTagToggle(tag),
+          className: cn(
+            "rounded-full px-3 py-1 text-xs font-medium border transition-colors",
+            selectedTags.includes(tag) ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-muted"
+          ),
+          children: tag
+        },
+        tag
+      )) })
+    ] }),
     /* @__PURE__ */ jsx("div", { "data-cimplify-catalogue-grid": true, className: classNames?.gridContainer, children: productsLoading && !productsProp ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -7614,15 +7729,50 @@ function CataloguePage({
     ) : /* @__PURE__ */ jsx(
       ProductGrid,
       {
-        products: filteredProducts,
+        products: allProducts,
         renderCard,
         renderImage,
         columns,
         emptyMessage: "No products found"
       }
-    ) })
+    ) }),
+    totalPages > 1 && /* @__PURE__ */ jsxs("div", { "data-cimplify-catalogue-pagination": true, className: cn("flex items-center justify-center gap-2 pt-6", classNames?.pagination), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: page <= 1,
+          onClick: () => setPage((p) => Math.max(1, p - 1)),
+          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground tabular-nums", children: [
+        page,
+        " / ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: page >= totalPages,
+          onClick: () => setPage((p) => p + 1),
+          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40",
+          children: "Next"
+        }
+      )
+    ] })
   ] });
 }
+function useDebounce(value, delay) {
+  const [debounced, setDebounced] = React3.useState(value);
+  React3.useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
 function ProductPage({
   productId,
   product: productProp,

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.z-50{z-index:50}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[5\/2\]{aspect-ratio:5/2}.h-fit{height:fit-content}.max-h-\[85vh\]{max-height:85vh}.w-2\/5{width:40%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.\[appearance\:textfield\]{appearance:textfield}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--color-border,oklch(90% 0 0))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.rounded{border-radius:var(--radius,.5rem)}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-muted-foreground\/30{border-color:#6363634d}@supports (color:color-mix(in lab, red, red)){.border-muted-foreground\/30{border-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.bg-background{background-color:var(--color-background,oklch(99% 0 0))}.bg-destructive\/10{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.bg-muted{background-color:var(--color-muted,oklch(95% 0 0))}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.text-center{text-align:center}.text-left{text-align:left}.font-\[inherit\]{font-family:inherit}.text-\[10px\]{font-size:10px}.text-\[inherit\]{color:inherit}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.uppercase{text-transform:uppercase}.no-underline{text-decoration-line:none}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.outline-none{--tw-outline-style:none;outline-style:none}.\[cimplify\:checkout\]{cimplify:checkout}@media (hover:hover){.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.z-50{z-index:50}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[5\/2\]{aspect-ratio:5/2}.h-fit{height:fit-content}.max-h-\[85vh\]{max-height:85vh}.w-2\/5{width:40%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.\[appearance\:textfield\]{appearance:textfield}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--color-border,oklch(90% 0 0))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.rounded{border-radius:var(--radius,.5rem)}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-input{border-color:var(--color-input,oklch(90% 0 0))}.border-muted-foreground\/30{border-color:#6363634d}@supports (color:color-mix(in lab, red, red)){.border-muted-foreground\/30{border-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.bg-background{background-color:var(--color-background,oklch(99% 0 0))}.bg-destructive\/10{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.bg-muted{background-color:var(--color-muted,oklch(95% 0 0))}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.text-center{text-align:center}.text-left{text-align:left}.font-\[inherit\]{font-family:inherit}.text-\[10px\]{font-size:10px}.text-\[inherit\]{color:inherit}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-foreground{color:var(--color-foreground,oklch(15% 0 0))}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.accent-primary{accent-color:var(--color-primary,oklch(50% .1 35))}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.outline-none{--tw-outline-style:none;outline-style:none}.\[cimplify\:checkout\]{cimplify:checkout}@media (hover:hover){.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/dist/utils.d.mts

@@ -1,5 +1,5 @@
-import { M as Money, C as CurrencyCode, aB as PricePathTaxInfo, bm as PaymentErrorDetails, bk as PaymentResponse, bl as PaymentStatusResponse } from './payment-C6ULw3K-.mjs';
-import { P as ProductWithPrice } from './price-CbR6DCt0.mjs';
+import { M as Money, C as CurrencyCode, aK as PricePathTaxInfo, bv as PaymentErrorDetails, bt as PaymentResponse, bu as PaymentStatusResponse } from './payment-D9FTaOse.mjs';
+import { P as ProductWithPrice } from './price-9JsPuknm.mjs';
 import { CountryCode } from 'libphonenumber-js';
 
 declare const CURRENCY_SYMBOLS: Record<string, string>;
@@ -40,15 +40,15 @@ declare function normalizeStatusResponse(response: unknown): PaymentStatusRespon
 declare const MOBILE_MONEY_PROVIDERS: {
     readonly mtn: {
         readonly name: "MTN Mobile Money";
-        readonly prefix: readonly ["024", "054", "055", "059"];
+        readonly prefix: readonly ["024", "025", "053", "054", "055", "059"];
     };
     readonly vodafone: {
-        readonly name: "Vodafone Cash";
+        readonly name: "Telecel Cash";
         readonly prefix: readonly ["020", "050"];
     };
     readonly airtel: {
         readonly name: "AirtelTigo Money";
-        readonly prefix: readonly ["027", "057", "026", "056"];
+        readonly prefix: readonly ["026", "027", "056", "057"];
     };
 };
 declare function detectMobileMoneyProvider(phoneNumber: string): "mtn" | "vodafone" | "airtel" | null;

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { M as Money, C as CurrencyCode, aB as PricePathTaxInfo, bm as PaymentErrorDetails, bk as PaymentResponse, bl as PaymentStatusResponse } from './payment-C6ULw3K-.js';
-import { P as ProductWithPrice } from './price-Bd6JBV8W.js';
+import { M as Money, C as CurrencyCode, aK as PricePathTaxInfo, bv as PaymentErrorDetails, bt as PaymentResponse, bu as PaymentStatusResponse } from './payment-D9FTaOse.js';
+import { P as ProductWithPrice } from './price-BD1iioLh.js';
 import { CountryCode } from 'libphonenumber-js';
 
 declare const CURRENCY_SYMBOLS: Record<string, string>;
@@ -40,15 +40,15 @@ declare function normalizeStatusResponse(response: unknown): PaymentStatusRespon
 declare const MOBILE_MONEY_PROVIDERS: {
     readonly mtn: {
         readonly name: "MTN Mobile Money";
-        readonly prefix: readonly ["024", "054", "055", "059"];
+        readonly prefix: readonly ["024", "025", "053", "054", "055", "059"];
     };
     readonly vodafone: {
-        readonly name: "Vodafone Cash";
+        readonly name: "Telecel Cash";
         readonly prefix: readonly ["020", "050"];
     };
     readonly airtel: {
         readonly name: "AirtelTigo Money";
-        readonly prefix: readonly ["027", "057", "026", "056"];
+        readonly prefix: readonly ["026", "027", "056", "057"];
     };
 };
 declare function detectMobileMoneyProvider(phoneNumber: string): "mtn" | "vodafone" | "airtel" | null;

package/dist/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkS6TU55KP_js = require('./chunk-S6TU55KP.js');
-var chunkJ65U5SED_js = require('./chunk-J65U5SED.js');
+var chunkRYQ5IPWX_js = require('./chunk-RYQ5IPWX.js');
 
 
 
@@ -19,109 +19,109 @@ Object.defineProperty(exports, "resolvePhoneCountryCode", {
 });
 Object.defineProperty(exports, "CURRENCY_SYMBOLS", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.CURRENCY_SYMBOLS; }
+  get: function () { return chunkRYQ5IPWX_js.CURRENCY_SYMBOLS; }
 });
 Object.defineProperty(exports, "MOBILE_MONEY_PROVIDERS", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.MOBILE_MONEY_PROVIDERS; }
+  get: function () { return chunkRYQ5IPWX_js.MOBILE_MONEY_PROVIDERS; }
 });
 Object.defineProperty(exports, "categorizePaymentError", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.categorizePaymentError; }
+  get: function () { return chunkRYQ5IPWX_js.categorizePaymentError; }
 });
 Object.defineProperty(exports, "detectMobileMoneyProvider", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.detectMobileMoneyProvider; }
+  get: function () { return chunkRYQ5IPWX_js.detectMobileMoneyProvider; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatMoney; }
+  get: function () { return chunkRYQ5IPWX_js.formatMoney; }
 });
 Object.defineProperty(exports, "formatNumberCompact", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatNumberCompact; }
+  get: function () { return chunkRYQ5IPWX_js.formatNumberCompact; }
 });
 Object.defineProperty(exports, "formatPrice", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatPrice; }
+  get: function () { return chunkRYQ5IPWX_js.formatPrice; }
 });
 Object.defineProperty(exports, "formatPriceAdjustment", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatPriceAdjustment; }
+  get: function () { return chunkRYQ5IPWX_js.formatPriceAdjustment; }
 });
 Object.defineProperty(exports, "formatPriceCompact", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatPriceCompact; }
+  get: function () { return chunkRYQ5IPWX_js.formatPriceCompact; }
 });
 Object.defineProperty(exports, "formatPriceWithTax", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatPriceWithTax; }
+  get: function () { return chunkRYQ5IPWX_js.formatPriceWithTax; }
 });
 Object.defineProperty(exports, "formatProductPrice", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.formatProductPrice; }
+  get: function () { return chunkRYQ5IPWX_js.formatProductPrice; }
 });
 Object.defineProperty(exports, "getBasePrice", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getBasePrice; }
+  get: function () { return chunkRYQ5IPWX_js.getBasePrice; }
 });
 Object.defineProperty(exports, "getCurrencySymbol", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getCurrencySymbol; }
+  get: function () { return chunkRYQ5IPWX_js.getCurrencySymbol; }
 });
 Object.defineProperty(exports, "getDiscountPercentage", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getDiscountPercentage; }
+  get: function () { return chunkRYQ5IPWX_js.getDiscountPercentage; }
 });
 Object.defineProperty(exports, "getDisplayPrice", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getDisplayPrice; }
+  get: function () { return chunkRYQ5IPWX_js.getDisplayPrice; }
 });
 Object.defineProperty(exports, "getMarkupPercentage", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getMarkupPercentage; }
+  get: function () { return chunkRYQ5IPWX_js.getMarkupPercentage; }
 });
 Object.defineProperty(exports, "getProductCurrency", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getProductCurrency; }
+  get: function () { return chunkRYQ5IPWX_js.getProductCurrency; }
 });
 Object.defineProperty(exports, "getTaxAmount", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.getTaxAmount; }
+  get: function () { return chunkRYQ5IPWX_js.getTaxAmount; }
 });
 Object.defineProperty(exports, "hasTaxInfo", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.hasTaxInfo; }
+  get: function () { return chunkRYQ5IPWX_js.hasTaxInfo; }
 });
 Object.defineProperty(exports, "isOnSale", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.isOnSale; }
+  get: function () { return chunkRYQ5IPWX_js.isOnSale; }
 });
 Object.defineProperty(exports, "isPaymentStatusFailure", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.isPaymentStatusFailure; }
+  get: function () { return chunkRYQ5IPWX_js.isPaymentStatusFailure; }
 });
 Object.defineProperty(exports, "isPaymentStatusRequiresAction", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.isPaymentStatusRequiresAction; }
+  get: function () { return chunkRYQ5IPWX_js.isPaymentStatusRequiresAction; }
 });
 Object.defineProperty(exports, "isPaymentStatusSuccess", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.isPaymentStatusSuccess; }
+  get: function () { return chunkRYQ5IPWX_js.isPaymentStatusSuccess; }
 });
 Object.defineProperty(exports, "isTaxInclusive", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.isTaxInclusive; }
+  get: function () { return chunkRYQ5IPWX_js.isTaxInclusive; }
 });
 Object.defineProperty(exports, "normalizePaymentResponse", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.normalizePaymentResponse; }
+  get: function () { return chunkRYQ5IPWX_js.normalizePaymentResponse; }
 });
 Object.defineProperty(exports, "normalizeStatusResponse", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.normalizeStatusResponse; }
+  get: function () { return chunkRYQ5IPWX_js.normalizeStatusResponse; }
 });
 Object.defineProperty(exports, "parsePrice", {
   enumerable: true,
-  get: function () { return chunkJ65U5SED_js.parsePrice; }
+  get: function () { return chunkRYQ5IPWX_js.parsePrice; }
 });

package/dist/utils.mjs

@@ -1,2 +1,2 @@
 export { isValidPhoneForContext, normalizePhoneToE164, resolvePhoneCountryCode } from './chunk-WDIMISRC.mjs';
-export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-OVM5YWM5.mjs';
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-FTL2SXCG.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/catalogue-page.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "catalogue-page.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport type { Product, Category } from \"@cimplify/sdk\";\nimport { useProducts, useCategories } from \"@cimplify/sdk/react\";\nimport { ProductGrid } from \"./product-grid\";\nimport { CategoryFilter } from \"@cimplify/sdk/react\";\nimport { SearchInput } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CataloguePageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  searchContainer?: string;\n  filterContainer?: string;\n  gridContainer?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface CataloguePageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched products for SSR. When provided, skips client-side fetch. */\n  products?: Product[];\n  /** Pre-fetched categories for SSR. */\n  categories?: Category[];\n  /** Show category filter. Default: true. */\n  showFilter?: boolean;\n  /** Show search input. Default: true. */\n  showSearch?: boolean;\n  /** Called when a product is selected (e.g. navigate to product page). */\n  onProductClick?: (product: Product) => void;\n  /** Called when a category is selected. */\n  onCategoryClick?: (category: Category) => void;\n  /** Custom card renderer passed to ProductGrid. */\n  renderCard?: (product: Product) => React.ReactNode;\n  /** Custom image renderer passed to ProductGrid. */\n  renderImage?: (props: { src: string; alt: string; className?: string }) => React.ReactNode;\n  /** Grid column config. */\n  columns?: { sm?: number; md?: number; lg?: number; xl?: number };\n  className?: string;\n  classNames?: CataloguePageClassNames;\n}\n\n/**\n * CataloguePage — browse all products with category filtering and search.\n *\n * SSR-friendly: pass `products` and `categories` props for server rendering.\n * Omit them for fully client-side data fetching.\n */\nexport function CataloguePage({\n  title = \"Products\",\n  products: productsProp,\n  categories: categoriesProp,\n  showFilter = true,\n  showSearch = true,\n  onProductClick,\n  onCategoryClick,\n  renderCard,\n  renderImage,\n  columns,\n  className,\n  classNames,\n}: CataloguePageProps): React.ReactElement {\n  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const { products: fetchedProducts, isLoading: productsLoading } = useProducts({\n    enabled: productsProp === undefined,\n  });\n  const { categories: fetchedCategories } = useCategories({\n    enabled: showFilter && categoriesProp === undefined,\n  });\n\n  const allProducts = productsProp ?? fetchedProducts;\n  const categories = categoriesProp ?? fetchedCategories;\n\n  const filteredProducts = useMemo(() => {\n    let result = allProducts;\n    if (selectedCategoryId) {\n      result = result.filter((p) => p.category_id === selectedCategoryId);\n    }\n    if (searchQuery.trim().length >= 2) {\n      const q = searchQuery.trim().toLowerCase();\n      result = result.filter(\n        (p) =>\n          p.name.toLowerCase().includes(q) ||\n          p.description?.toLowerCase().includes(q),\n      );\n    }\n    return result;\n  }, [allProducts, selectedCategoryId, searchQuery]);\n\n  const handleCategorySelect = useCallback(\n    (id: string | null) => {\n      setSelectedCategoryId(id);\n      if (id) {\n        const cat = categories.find((c: Category) => c.id === id);\n        if (cat) onCategoryClick?.(cat);\n      }\n    },\n    [categories, onCategoryClick],\n  );\n\n  return (\n    <div data-cimplify-catalogue-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-catalogue-header className={classNames?.header}>\n        <h1 data-cimplify-catalogue-title className={classNames?.title}>\n          {title}\n        </h1>\n\n        {showSearch && (\n          <div data-cimplify-catalogue-search className={classNames?.searchContainer}>\n            <SearchInput\n              onResultClick={onProductClick}\n              searchOptions={{ category: selectedCategoryId ?? undefined }}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Category filter */}\n      {showFilter && categories.length > 0 && (\n        <div data-cimplify-catalogue-filter className={classNames?.filterContainer}>\n          <CategoryFilter\n            selectedId={selectedCategoryId}\n            onSelect={handleCategorySelect}\n          />\n        </div>\n      )}\n\n      {/* Product grid */}\n      <div data-cimplify-catalogue-grid className={classNames?.gridContainer}>\n        {productsLoading && !productsProp ? (\n          <div\n            data-cimplify-catalogue-loading\n            aria-busy=\"true\"\n            className={classNames?.loading}\n          />\n        ) : (\n          <ProductGrid\n            products={filteredProducts}\n            renderCard={renderCard}\n            renderImage={renderImage}\n            columns={columns}\n            emptyMessage=\"No products found\"\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport type { Product, Category } from \"@cimplify/sdk\";\nimport { useProducts, useCategories } from \"@cimplify/sdk/react\";\nimport { ProductGrid } from \"./product-grid\";\nimport { CategoryFilter } from \"@cimplify/sdk/react\";\nimport { SearchInput } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CataloguePageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  searchContainer?: string;\n  filterContainer?: string;\n  toolbar?: string;\n  gridContainer?: string;\n  empty?: string;\n  loading?: string;\n  pagination?: string;\n}\n\nexport interface CataloguePageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched products for SSR. When provided, skips client-side fetch. */\n  products?: Product[];\n  /** Pre-fetched categories for SSR. */\n  categories?: Category[];\n  /** Show category filter. Default: true. */\n  showFilter?: boolean;\n  /** Show search input. Default: true. */\n  showSearch?: boolean;\n  /** Show sort controls. Default: false. */\n  showSort?: boolean;\n  /** Show in-stock toggle. Default: false. */\n  showInStockFilter?: boolean;\n  /** Show price range filter. Default: false. */\n  showPriceRange?: boolean;\n  /** Show tags filter. Default: false. */\n  showTagsFilter?: boolean;\n  /** Available tags for filtering. When provided, renders tag chips. */\n  availableTags?: string[];\n  /** Default sort. */\n  defaultSort?: { by: \"name\" | \"price\" | \"created_at\" | \"updated_at\"; order: \"asc\" | \"desc\" };\n  /** Products per page. */\n  pageSize?: number;\n  /** Called when a product is selected (e.g. navigate to product page). */\n  onProductClick?: (product: Product) => void;\n  /** Called when a category is selected. */\n  onCategoryClick?: (category: Category) => void;\n  /** Custom card renderer passed to ProductGrid. */\n  renderCard?: (product: Product) => React.ReactNode;\n  /** Custom image renderer passed to ProductGrid. */\n  renderImage?: (props: { src: string; alt: string; className?: string }) => React.ReactNode;\n  /** Grid column config. */\n  columns?: { sm?: number; md?: number; lg?: number; xl?: number };\n  className?: string;\n  classNames?: CataloguePageClassNames;\n}\n\n/**\n * CataloguePage — browse all products with server-side filtering, sorting, and pagination.\n *\n * SSR-friendly: pass `products` and `categories` props for server rendering.\n * Omit them for fully client-side data fetching.\n */\nexport function CataloguePage({\n  title = \"Products\",\n  products: productsProp,\n  categories: categoriesProp,\n  showFilter = true,\n  showSearch = true,\n  showSort = false,\n  showInStockFilter = false,\n  showPriceRange = false,\n  showTagsFilter = false,\n  availableTags,\n  defaultSort,\n  pageSize,\n  onProductClick,\n  onCategoryClick,\n  renderCard,\n  renderImage,\n  columns,\n  className,\n  classNames,\n}: CataloguePageProps): React.ReactElement {\n  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [sortBy, setSortBy] = useState<\"name\" | \"price\" | \"created_at\" | \"updated_at\">(defaultSort?.by ?? \"name\");\n  const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(defaultSort?.order ?? \"asc\");\n  const [inStockOnly, setInStockOnly] = useState(false);\n  const [selectedTags, setSelectedTags] = useState<string[]>([]);\n  const [minPrice, setMinPrice] = useState<string>(\"\");\n  const [maxPrice, setMaxPrice] = useState<string>(\"\");\n  const [page, setPage] = useState(1);\n\n  const debouncedSearch = useDebounce(searchQuery, 300);\n\n  const { products: fetchedProducts, isLoading: productsLoading, pagination } = useProducts({\n    enabled: productsProp === undefined,\n    category: selectedCategoryId ?? undefined,\n    search: debouncedSearch.length >= 2 ? debouncedSearch : undefined,\n    sort_by: sortBy,\n    sort_order: sortOrder,\n    in_stock: inStockOnly || undefined,\n    tags: selectedTags.length > 0 ? selectedTags : undefined,\n    min_price: minPrice ? parseFloat(minPrice) : undefined,\n    max_price: maxPrice ? parseFloat(maxPrice) : undefined,\n    page,\n    limit: pageSize,\n  });\n  const { categories: fetchedCategories } = useCategories({\n    enabled: showFilter && categoriesProp === undefined,\n  });\n\n  const allProducts = productsProp ?? fetchedProducts;\n  const categories = categoriesProp ?? fetchedCategories;\n\n  const handleCategorySelect = useCallback(\n    (id: string | null) => {\n      setSelectedCategoryId(id);\n      setPage(1);\n      if (id) {\n        const cat = categories.find((c: Category) => c.id === id);\n        if (cat) onCategoryClick?.(cat);\n      }\n    },\n    [categories, onCategoryClick],\n  );\n\n  const handleTagToggle = useCallback((tag: string) => {\n    setSelectedTags((prev) =>\n      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],\n    );\n    setPage(1);\n  }, []);\n\n  const totalPages = pagination?.total_pages ?? 1;\n\n  return (\n    <div data-cimplify-catalogue-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-catalogue-header className={classNames?.header}>\n        <h1 data-cimplify-catalogue-title className={classNames?.title}>\n          {title}\n        </h1>\n\n        {showSearch && (\n          <div data-cimplify-catalogue-search className={classNames?.searchContainer}>\n            <SearchInput\n              onResultClick={onProductClick}\n              searchOptions={{ category: selectedCategoryId ?? undefined }}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Category filter */}\n      {showFilter && categories.length > 0 && (\n        <div data-cimplify-catalogue-filter className={classNames?.filterContainer}>\n          <CategoryFilter\n            selectedId={selectedCategoryId}\n            onSelect={handleCategorySelect}\n          />\n        </div>\n      )}\n\n      {/* Toolbar: sort, in-stock, price range, tags */}\n      {(showSort || showInStockFilter || showPriceRange || showTagsFilter) && (\n        <div data-cimplify-catalogue-toolbar className={cn(\"flex flex-wrap items-center gap-3\", classNames?.toolbar)}>\n          {showSort && (\n            <select\n              data-cimplify-sort\n              value={`${sortBy}:${sortOrder}`}\n              onChange={(e) => {\n                const [by, order] = e.target.value.split(\":\") as [typeof sortBy, typeof sortOrder];\n                setSortBy(by);\n                setSortOrder(order);\n                setPage(1);\n              }}\n              className=\"rounded-md border border-input bg-background px-3 py-1.5 text-sm\"\n            >\n              <option value=\"name:asc\">Name A–Z</option>\n              <option value=\"name:desc\">Name Z–A</option>\n              <option value=\"price:asc\">Price: Low to High</option>\n              <option value=\"price:desc\">Price: High to Low</option>\n              <option value=\"created_at:desc\">Newest</option>\n              <option value=\"created_at:asc\">Oldest</option>\n              <option value=\"updated_at:desc\">Recently Updated</option>\n            </select>\n          )}\n\n          {showInStockFilter && (\n            <label data-cimplify-stock-filter className=\"flex items-center gap-1.5 text-sm cursor-pointer\">\n              <input\n                type=\"checkbox\"\n                checked={inStockOnly}\n                onChange={(e) => { setInStockOnly(e.target.checked); setPage(1); }}\n                className=\"accent-primary\"\n              />\n              In stock only\n            </label>\n          )}\n\n          {showPriceRange && (\n            <div data-cimplify-price-range className=\"flex items-center gap-1.5\">\n              <input\n                type=\"number\"\n                placeholder=\"Min\"\n                value={minPrice}\n                onChange={(e) => { setMinPrice(e.target.value); setPage(1); }}\n                className=\"w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm\"\n                min={0}\n                step=\"0.01\"\n              />\n              <span className=\"text-muted-foreground text-sm\">–</span>\n              <input\n                type=\"number\"\n                placeholder=\"Max\"\n                value={maxPrice}\n                onChange={(e) => { setMaxPrice(e.target.value); setPage(1); }}\n                className=\"w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm\"\n                min={0}\n                step=\"0.01\"\n              />\n            </div>\n          )}\n\n          {showTagsFilter && availableTags && availableTags.length > 0 && (\n            <div data-cimplify-tags-filter className=\"flex flex-wrap gap-1.5\">\n              {availableTags.map((tag) => (\n                <button\n                  key={tag}\n                  type=\"button\"\n                  onClick={() => handleTagToggle(tag)}\n                  className={cn(\n                    \"rounded-full px-3 py-1 text-xs font-medium border transition-colors\",\n                    selectedTags.includes(tag)\n                      ? \"bg-primary text-primary-foreground border-primary\"\n                      : \"bg-background text-foreground border-input hover:bg-muted\",\n                  )}\n                >\n                  {tag}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Product grid */}\n      <div data-cimplify-catalogue-grid className={classNames?.gridContainer}>\n        {productsLoading && !productsProp ? (\n          <div\n            data-cimplify-catalogue-loading\n            aria-busy=\"true\"\n            className={classNames?.loading}\n          />\n        ) : (\n          <ProductGrid\n            products={allProducts}\n            renderCard={renderCard}\n            renderImage={renderImage}\n            columns={columns}\n            emptyMessage=\"No products found\"\n          />\n        )}\n      </div>\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div data-cimplify-catalogue-pagination className={cn(\"flex items-center justify-center gap-2 pt-6\", classNames?.pagination)}>\n          <button\n            type=\"button\"\n            disabled={page <= 1}\n            onClick={() => setPage((p) => Math.max(1, p - 1))}\n            className=\"rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40\"\n          >\n            Previous\n          </button>\n          <span className=\"text-sm text-muted-foreground tabular-nums\">\n            {page} / {totalPages}\n          </span>\n          <button\n            type=\"button\"\n            disabled={page >= totalPages}\n            onClick={() => setPage((p) => p + 1)}\n            className=\"rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40\"\n          >\n            Next\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction useDebounce(value: string, delay: number): string {\n  const [debounced, setDebounced] = React.useState(value);\n  React.useEffect(() => {\n    const timer = setTimeout(() => setDebounced(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n  return debounced;\n}\n"
     }
   ]
 }