@wix/headless-stores 0.0.37 → 0.0.39

package/cjs/dist/services/products-list-filters-service.d.ts

@@ -112,10 +112,14 @@ export declare function loadProductsListFiltersServiceConfig(): Promise<Products
  */
 export declare const ProductsListFiltersServiceDefinition: string & {
     __api: {
-        /** Reactive signal containing the minimum price filter value */
-        minPrice: Signal<number>;
-        /** Reactive signal containing the maximum price filter value */
-        maxPrice: Signal<number>;
+        /** Reactive signal containing the user's selected minimum price filter value */
+        selectedMinPrice: Signal<number>;
+        /** Reactive signal containing the user's selected maximum price filter value */
+        selectedMaxPrice: Signal<number>;
+        /** Reactive signal containing the catalog minimum price (for UI bounds) */
+        availableMinPrice: Signal<number>;
+        /** Reactive signal containing the catalog maximum price (for UI bounds) */
+        availableMaxPrice: Signal<number>;
         /** Reactive signal containing available inventory status options */
         availableInventoryStatuses: Signal<InventoryStatusType[]>;
         /** Reactive signal containing selected inventory status filters */
@@ -125,9 +129,9 @@ export declare const ProductsListFiltersServiceDefinition: string & {
         /** Reactive signal containing selected product option filters */
         selectedProductOptions: Signal<Record<string, string[]>>;
         /** Function to set the minimum price filter */
-        setMinPrice: (minPrice: number) => void;
+        setSelectedMinPrice: (minPrice: number) => void;
         /** Function to set the maximum price filter */
-        setMaxPrice: (maxPrice: number) => void;
+        setSelectedMaxPrice: (maxPrice: number) => void;
         /** Function to toggle an inventory status filter */
         toggleInventoryStatus: (status: InventoryStatusType) => void;
         /** Function to toggle a product option choice filter */
@@ -140,10 +144,14 @@ export declare const ProductsListFiltersServiceDefinition: string & {
     __config: {};
     isServiceDefinition?: boolean;
 } & {
-    /** Reactive signal containing the minimum price filter value */
-    minPrice: Signal<number>;
-    /** Reactive signal containing the maximum price filter value */
-    maxPrice: Signal<number>;
+    /** Reactive signal containing the user's selected minimum price filter value */
+    selectedMinPrice: Signal<number>;
+    /** Reactive signal containing the user's selected maximum price filter value */
+    selectedMaxPrice: Signal<number>;
+    /** Reactive signal containing the catalog minimum price (for UI bounds) */
+    availableMinPrice: Signal<number>;
+    /** Reactive signal containing the catalog maximum price (for UI bounds) */
+    availableMaxPrice: Signal<number>;
     /** Reactive signal containing available inventory status options */
     availableInventoryStatuses: Signal<InventoryStatusType[]>;
     /** Reactive signal containing selected inventory status filters */
@@ -153,9 +161,9 @@ export declare const ProductsListFiltersServiceDefinition: string & {
     /** Reactive signal containing selected product option filters */
     selectedProductOptions: Signal<Record<string, string[]>>;
     /** Function to set the minimum price filter */
-    setMinPrice: (minPrice: number) => void;
+    setSelectedMinPrice: (minPrice: number) => void;
     /** Function to set the maximum price filter */
-    setMaxPrice: (maxPrice: number) => void;
+    setSelectedMaxPrice: (maxPrice: number) => void;
     /** Function to toggle an inventory status filter */
     toggleInventoryStatus: (status: InventoryStatusType) => void;
     /** Function to toggle a product option choice filter */
@@ -233,14 +241,19 @@ export declare const ProductsListFiltersServiceDefinition: string & {
  *     </div>
  *   );
  * }
+ * }
  * ```
  */
 export declare const ProductsListFiltersService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: {
-        /** Reactive signal containing the minimum price filter value */
-        minPrice: Signal<number>;
-        /** Reactive signal containing the maximum price filter value */
-        maxPrice: Signal<number>;
+        /** Reactive signal containing the user's selected minimum price filter value */
+        selectedMinPrice: Signal<number>;
+        /** Reactive signal containing the user's selected maximum price filter value */
+        selectedMaxPrice: Signal<number>;
+        /** Reactive signal containing the catalog minimum price (for UI bounds) */
+        availableMinPrice: Signal<number>;
+        /** Reactive signal containing the catalog maximum price (for UI bounds) */
+        availableMaxPrice: Signal<number>;
         /** Reactive signal containing available inventory status options */
         availableInventoryStatuses: Signal<InventoryStatusType[]>;
         /** Reactive signal containing selected inventory status filters */
@@ -250,9 +263,9 @@ export declare const ProductsListFiltersService: import("@wix/services-definitio
         /** Reactive signal containing selected product option filters */
         selectedProductOptions: Signal<Record<string, string[]>>;
         /** Function to set the minimum price filter */
-        setMinPrice: (minPrice: number) => void;
+        setSelectedMinPrice: (minPrice: number) => void;
         /** Function to set the maximum price filter */
-        setMaxPrice: (maxPrice: number) => void;
+        setSelectedMaxPrice: (maxPrice: number) => void;
         /** Function to toggle an inventory status filter */
         toggleInventoryStatus: (status: InventoryStatusType) => void;
         /** Function to toggle a product option choice filter */
@@ -265,10 +278,14 @@ export declare const ProductsListFiltersService: import("@wix/services-definitio
     __config: {};
     isServiceDefinition?: boolean;
 } & {
-    /** Reactive signal containing the minimum price filter value */
-    minPrice: Signal<number>;
-    /** Reactive signal containing the maximum price filter value */
-    maxPrice: Signal<number>;
+    /** Reactive signal containing the user's selected minimum price filter value */
+    selectedMinPrice: Signal<number>;
+    /** Reactive signal containing the user's selected maximum price filter value */
+    selectedMaxPrice: Signal<number>;
+    /** Reactive signal containing the catalog minimum price (for UI bounds) */
+    availableMinPrice: Signal<number>;
+    /** Reactive signal containing the catalog maximum price (for UI bounds) */
+    availableMaxPrice: Signal<number>;
     /** Reactive signal containing available inventory status options */
     availableInventoryStatuses: Signal<InventoryStatusType[]>;
     /** Reactive signal containing selected inventory status filters */
@@ -278,9 +295,9 @@ export declare const ProductsListFiltersService: import("@wix/services-definitio
     /** Reactive signal containing selected product option filters */
     selectedProductOptions: Signal<Record<string, string[]>>;
     /** Function to set the minimum price filter */
-    setMinPrice: (minPrice: number) => void;
+    setSelectedMinPrice: (minPrice: number) => void;
     /** Function to set the maximum price filter */
-    setMaxPrice: (maxPrice: number) => void;
+    setSelectedMaxPrice: (maxPrice: number) => void;
     /** Function to toggle an inventory status filter */
     toggleInventoryStatus: (status: InventoryStatusType) => void;
     /** Function to toggle a product option choice filter */

package/cjs/dist/services/products-list-filters-service.js

@@ -4,6 +4,7 @@ import { SignalsServiceDefinition, } from "@wix/services-definitions/core-servic
 import { productsV3 } from "@wix/stores";
 import { ProductsListServiceDefinition } from "./products-list-service.js";
 import { customizationsV3 } from "@wix/stores";
+const PRICE_FILTER_DEBOUNCE_TIME = 300;
 /**
  * Enumeration of inventory status types available for filtering.
  * Maps to the Wix Stores API inventory availability statuses.
@@ -151,6 +152,7 @@ export const ProductsListFiltersServiceDefinition = defineService("products-list
  *     </div>
  *   );
  * }
+ * }
  * ```
  */
 export const ProductsListFiltersService = implementService.withConfig()(ProductsListFiltersServiceDefinition, ({ getService, config }) => {
@@ -159,115 +161,72 @@ export const ProductsListFiltersService = implementService.withConfig()(Products
     const productsListService = getService(ProductsListServiceDefinition);
     const { customizations } = config;
     const aggregationData = productsListService.aggregations.get()?.results;
-    // TODO: use the aggregations to get the available inventory statuses
-    // and the available price ranges
-    // and the available product options
-    // and the available product choices
-    const minPriceSignal = signalsService.signal(getMinPrice(productsListService.searchOptions.get()));
-    const maxPriceSignal = signalsService.signal(getMaxPrice(productsListService.searchOptions.get()));
+    const currentSearchOptions = productsListService.searchOptions.get();
+    // Get the full catalog price range from initial aggregation data (before any filters)
+    const catalogPriceRange = getCatalogPriceRange(aggregationData || []);
+    // Initialize signals with user's current filter selections (or 0 if no filters)
+    const userFilterMinPriceSignal = signalsService.signal(getSelectedMinPrice(currentSearchOptions) ?? catalogPriceRange.minPrice);
+    const userFilterMaxPriceSignal = signalsService.signal(getSelectedMaxPrice(currentSearchOptions) ?? catalogPriceRange.maxPrice);
+    // Separate signals for the available catalog range (for UI bounds)
+    const catalogMinPriceSignal = signalsService.signal(catalogPriceRange.minPrice);
+    const catalogMaxPriceSignal = signalsService.signal(catalogPriceRange.maxPrice);
     const availableInventoryStatusesSignal = signalsService.signal([
         InventoryStatusType.IN_STOCK,
         InventoryStatusType.OUT_OF_STOCK,
         InventoryStatusType.PARTIALLY_OUT_OF_STOCK,
     ]);
-    const selectedInventoryStatusesSignal = signalsService.signal(getSelectedInventoryStatuses(productsListService.searchOptions.get()));
+    const selectedInventoryStatusesSignal = signalsService.signal(getSelectedInventoryStatuses(currentSearchOptions));
     // TODO: Get product options from aggregations data
     const availableProductOptionsSignal = signalsService.signal(getAvailableProductOptions(aggregationData, customizations));
-    const selectedProductOptionsSignal = signalsService.signal(getSelectedProductOptions(productsListService.searchOptions.get()));
+    const selectedProductOptionsSignal = signalsService.signal(getSelectedProductOptions(currentSearchOptions));
     const isFilteredSignal = signalsService.signal(false);
+    // Debounce timeout IDs for price filters
+    let minPriceTimeoutId = null;
+    let maxPriceTimeoutId = null;
     if (typeof window !== "undefined") {
         signalsService.effect(() => {
             // CRITICAL: Read the signals FIRST to establish dependencies, even on first run
-            const minPrice = minPriceSignal.get();
-            const maxPrice = maxPriceSignal.get();
+            const minPrice = userFilterMinPriceSignal.get();
+            const maxPrice = userFilterMaxPriceSignal.get();
             const selectedInventoryStatuses = selectedInventoryStatusesSignal.get();
             const selectedProductOptions = selectedProductOptionsSignal.get();
             if (firstRun) {
                 firstRun = false;
                 return;
             }
-            isFilteredSignal.set(true);
-            // Build new search options with updated price filters
-            const newSearchOptions = {
-                ...productsListService.searchOptions.peek(),
-            };
-            delete newSearchOptions.cursorPaging?.cursor;
-            // Initialize filter if it doesn't exist
-            if (!newSearchOptions.filter) {
-                newSearchOptions.filter = {};
-            }
-            else {
-                // Copy existing filter to avoid mutation
-                newSearchOptions.filter = { ...newSearchOptions.filter };
-            }
-            // Remove existing price filters
-            delete newSearchOptions.filter["actualPriceRange.minValue.amount"];
-            delete newSearchOptions.filter["actualPriceRange.maxValue.amount"];
-            // Remove existing inventory filter
-            delete newSearchOptions.filter["inventory.availabilityStatus"];
-            // Remove existing product option filters
-            // First, find and remove any existing option filters
-            Object.keys(newSearchOptions.filter).forEach((key) => {
-                if (key.startsWith("options.")) {
-                    delete newSearchOptions.filter[key];
-                }
-            });
-            // Add new price filters if they have valid values
-            if (minPrice > 0) {
-                newSearchOptions.filter["actualPriceRange.minValue.amount"] = { $gte: minPrice };
-            }
-            if (maxPrice > 0) {
-                newSearchOptions.filter["actualPriceRange.maxValue.amount"] = { $lte: maxPrice };
-            }
-            // Add new inventory filter if there are selected statuses
-            if (selectedInventoryStatuses.length > 0) {
-                if (selectedInventoryStatuses.length === 1) {
-                    newSearchOptions.filter["inventory.availabilityStatus"] =
-                        selectedInventoryStatuses[0];
-                }
-                else {
-                    newSearchOptions.filter["inventory.availabilityStatus"] =
-                        {
-                            $in: selectedInventoryStatuses,
-                        };
-                }
-            }
-            // Add new product option filters if there are selected options
-            if (selectedProductOptions &&
-                Object.keys(selectedProductOptions).length > 0) {
-                for (const [optionId, choiceIds] of Object.entries(selectedProductOptions)) {
-                    if (choiceIds && choiceIds.length > 0) {
-                        // Handle inventory filter separately
-                        if (optionId === "inventory-filter") {
-                            newSearchOptions.filter["inventory.availabilityStatus"] = {
-                                $in: choiceIds,
-                            };
-                        }
-                        else {
-                            // Regular product options filter
-                            newSearchOptions.filter["options.choicesSettings.choices.choiceId"] = {
-                                $hasSome: choiceIds,
-                            };
-                        }
-                    }
-                }
-            }
-            // Use callback to update search options
-            productsListService.setSearchOptions(newSearchOptions);
+            doFirstRunInit(isFilteredSignal, productsListService, minPrice, maxPrice, selectedInventoryStatuses, selectedProductOptions);
         });
     }
     return {
-        minPrice: minPriceSignal,
-        maxPrice: maxPriceSignal,
+        selectedMinPrice: userFilterMinPriceSignal,
+        selectedMaxPrice: userFilterMaxPriceSignal,
+        availableMinPrice: catalogMinPriceSignal,
+        availableMaxPrice: catalogMaxPriceSignal,
         availableInventoryStatuses: availableInventoryStatusesSignal,
         selectedInventoryStatuses: selectedInventoryStatusesSignal,
         availableProductOptions: availableProductOptionsSignal,
         selectedProductOptions: selectedProductOptionsSignal,
-        setMinPrice: (minPrice) => {
-            minPriceSignal.set(minPrice);
+        setSelectedMinPrice: (minPrice) => {
+            // Clear any existing timeout
+            if (minPriceTimeoutId) {
+                clearTimeout(minPriceTimeoutId);
+            }
+            // Set new debounced timeout
+            minPriceTimeoutId = setTimeout(() => {
+                userFilterMinPriceSignal.set(minPrice);
+                minPriceTimeoutId = null;
+            }, PRICE_FILTER_DEBOUNCE_TIME);
         },
-        setMaxPrice: (maxPrice) => {
-            maxPriceSignal.set(maxPrice);
+        setSelectedMaxPrice: (maxPrice) => {
+            // Clear any existing timeout
+            if (maxPriceTimeoutId) {
+                clearTimeout(maxPriceTimeoutId);
+            }
+            // Set new debounced timeout
+            maxPriceTimeoutId = setTimeout(() => {
+                userFilterMaxPriceSignal.set(maxPrice);
+                maxPriceTimeoutId = null;
+            }, PRICE_FILTER_DEBOUNCE_TIME);
         },
         toggleInventoryStatus: (status) => {
             const current = selectedInventoryStatusesSignal.get();
@@ -308,16 +267,100 @@ export const ProductsListFiltersService = implementService.withConfig()(Products
         },
         isFiltered: isFilteredSignal,
         reset: () => {
-            // TODO: reset the filters to the original values from the aggregation data
-            minPriceSignal.set(0);
-            maxPriceSignal.set(0);
+            // Reset user selections but keep catalog bounds intact
+            userFilterMinPriceSignal.set(catalogMinPriceSignal.get());
+            userFilterMaxPriceSignal.set(catalogMaxPriceSignal.get());
             selectedInventoryStatusesSignal.set([]);
             selectedProductOptionsSignal.set({});
             isFilteredSignal.set(false);
         },
     };
 });
-function getMinPrice(searchOptions) {
+function doFirstRunInit(isFilteredSignal, productsListService, minPrice, maxPrice, selectedInventoryStatuses, selectedProductOptions) {
+    isFilteredSignal.set(true);
+    // Build new search options with updated price filters
+    const newSearchOptions = {
+        ...productsListService.searchOptions.peek(),
+    };
+    delete newSearchOptions.cursorPaging?.cursor;
+    // Initialize filter if it doesn't exist
+    if (!newSearchOptions.filter) {
+        newSearchOptions.filter = {};
+    }
+    else {
+        // Copy existing filter to avoid mutation
+        newSearchOptions.filter = { ...newSearchOptions.filter };
+    }
+    // Remove existing price filters
+    delete newSearchOptions.filter["actualPriceRange.minValue.amount"];
+    delete newSearchOptions.filter["actualPriceRange.maxValue.amount"];
+    // Remove existing inventory filter
+    delete newSearchOptions.filter["inventory.availabilityStatus"];
+    // Remove existing product option filters
+    // First, find and remove any existing option filters
+    Object.keys(newSearchOptions.filter).forEach((key) => {
+        if (key.startsWith("options.")) {
+            delete newSearchOptions.filter[key];
+        }
+    });
+    // Add new price filters if they have valid values
+    if (minPrice > 0) {
+        newSearchOptions.filter["actualPriceRange.minValue.amount"] = {
+            $gte: minPrice,
+        };
+    }
+    if (maxPrice > 0) {
+        newSearchOptions.filter["actualPriceRange.maxValue.amount"] = {
+            $lte: maxPrice,
+        };
+    }
+    // Add new inventory filter if there are selected statuses
+    if (selectedInventoryStatuses.length > 0) {
+        if (selectedInventoryStatuses.length === 1) {
+            newSearchOptions.filter["inventory.availabilityStatus"] =
+                selectedInventoryStatuses[0];
+        }
+        else {
+            newSearchOptions.filter["inventory.availabilityStatus"] = {
+                $in: selectedInventoryStatuses,
+            };
+        }
+    }
+    // Add new product option filters if there are selected options
+    if (selectedProductOptions &&
+        Object.keys(selectedProductOptions).length > 0) {
+        for (const [optionId, choiceIds] of Object.entries(selectedProductOptions)) {
+            if (choiceIds && choiceIds.length > 0) {
+                // Handle inventory filter separately
+                if (optionId === "inventory-filter") {
+                    newSearchOptions.filter["inventory.availabilityStatus"] = {
+                        $in: choiceIds,
+                    };
+                }
+                else {
+                    // Regular product options filter
+                    newSearchOptions.filter["options.choicesSettings.choices.choiceId"] = {
+                        $hasSome: choiceIds,
+                    };
+                }
+            }
+        }
+    }
+    // Use callback to update search options
+    productsListService.setSearchOptions(newSearchOptions);
+}
+/**
+ * Gets the full catalog price range from aggregation data (before any filters applied)
+ */
+function getCatalogPriceRange(aggregationData) {
+    const minPrice = getMinPrice(aggregationData);
+    const maxPrice = getMaxPrice(aggregationData);
+    return { minPrice, maxPrice };
+}
+/**
+ * Gets the user's currently selected minimum price filter from search options
+ */
+function getSelectedMinPrice(searchOptions) {
     const filter = searchOptions.filter;
     if (!filter)
         return 0;
@@ -325,11 +368,13 @@ function getMinPrice(searchOptions) {
     if (typeof minPriceFilter === "object" &&
         minPriceFilter !== null &&
         "$gte" in minPriceFilter) {
-        return Number(minPriceFilter.$gte) || 0;
+        return Number(minPriceFilter.$gte);
     }
-    return 0;
 }
-function getMaxPrice(searchOptions) {
+/**
+ * Gets the user's currently selected maximum price filter from search options
+ */
+function getSelectedMaxPrice(searchOptions) {
     const filter = searchOptions.filter;
     if (!filter)
         return 0;
@@ -337,7 +382,20 @@ function getMaxPrice(searchOptions) {
     if (typeof maxPriceFilter === "object" &&
         maxPriceFilter !== null &&
         "$lte" in maxPriceFilter) {
-        return Number(maxPriceFilter.$lte) || 0;
+        return Number(maxPriceFilter.$lte);
+    }
+}
+function getMinPrice(aggregationData) {
+    const minPriceAggregation = aggregationData.find((data) => data.fieldPath === "actualPriceRange.minValue.amount");
+    if (minPriceAggregation?.scalar?.value) {
+        return Number(minPriceAggregation.scalar.value) || 0;
+    }
+    return 0;
+}
+function getMaxPrice(aggregationData) {
+    const maxPriceAggregation = aggregationData.find((data) => data.fieldPath === "actualPriceRange.maxValue.amount");
+    if (maxPriceAggregation?.scalar?.value) {
+        return Number(maxPriceAggregation.scalar.value) || 0;
     }
     return 0;
 }

package/cjs/dist/services/products-list-service.js

@@ -1,6 +1,6 @@
 import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition, } from "@wix/services-definitions/core-services/signals";
-import { productsV3 } from "@wix/stores";
+import { productsV3, readOnlyVariantsV3 } from "@wix/stores";
 /**
  * Loads products list service configuration from the Wix Stores API for SSR initialization.
  * This function is designed to be used during Server-Side Rendering (SSR) to preload
@@ -83,7 +83,7 @@ import { productsV3 } from "@wix/stores";
  * ```
  */
 export async function loadProductsListServiceConfig(searchOptions) {
-    const result = await productsV3.searchProducts(searchOptions);
+    const result = await fetchProducts(searchOptions);
     return {
         products: result.products ?? [],
         searchOptions,
@@ -91,6 +91,90 @@ export async function loadProductsListServiceConfig(searchOptions) {
         aggregations: result.aggregationData,
     };
 }
+/**
+ * Fetches products and their missing variants in one optimized request.
+ * This function wraps the standard searchProducts call and automatically
+ * fetches missing variant data for all products that need it.
+ *
+ * @param searchOptions - The search options for querying products
+ * @returns Promise that resolves to the search result with complete variant data
+ */
+const fetchProducts = async (searchOptions) => {
+    const result = await productsV3.searchProducts(searchOptions);
+    // Fetch missing variants for all products in one batch request
+    if (result.products) {
+        result.products = await fetchMissingVariants(result.products);
+    }
+    return result;
+};
+/**
+ * Fetches missing variants for all products in one batch request.
+ * This function identifies products that need variant data and fetches
+ * all variants efficiently using the readOnlyVariantsV3 API.
+ *
+ * @param products - Array of products that may need variant data
+ * @returns Promise that resolves to products with complete variant information
+ */
+const fetchMissingVariants = async (products) => {
+    // Find products that need variants (both single and multi-variant products)
+    const productsNeedingVariants = products.filter((product) => !product.variantsInfo?.variants &&
+        product.variantSummary?.variantCount &&
+        product.variantSummary.variantCount > 0);
+    if (productsNeedingVariants.length === 0) {
+        return products;
+    }
+    try {
+        const productIds = productsNeedingVariants
+            .map((p) => p._id)
+            .filter(Boolean);
+        if (productIds.length === 0) {
+            return products;
+        }
+        const items = [];
+        const res = await readOnlyVariantsV3
+            .queryVariants({})
+            .in("productData.productId", productIds)
+            .limit(100)
+            .find();
+        items.push(...res.items);
+        let nextRes = res;
+        while (nextRes.hasNext()) {
+            nextRes = await nextRes.next();
+            items.push(...nextRes.items);
+        }
+        const variantsByProductId = new Map();
+        items.forEach((item) => {
+            const productId = item.productData?.productId;
+            if (productId) {
+                if (!variantsByProductId.has(productId)) {
+                    variantsByProductId.set(productId, []);
+                }
+                variantsByProductId.get(productId).push({
+                    ...item,
+                    choices: item.optionChoices,
+                });
+            }
+        });
+        // Update products with their variants
+        return products.map((product) => {
+            const variants = variantsByProductId.get(product._id || "");
+            if (variants && variants.length > 0) {
+                return {
+                    ...product,
+                    variantsInfo: {
+                        ...product.variantsInfo,
+                        variants,
+                    },
+                };
+            }
+            return product;
+        });
+    }
+    catch (error) {
+        console.error("Failed to fetch missing variants:", error);
+        return products;
+    }
+};
 /**
  * Service definition for the Products List service.
  * This defines the reactive API contract for managing a list of products with search, pagination, and filtering capabilities.
@@ -179,7 +263,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
                         },
                     }
                     : searchOptions;
-                const result = await productsV3.searchProducts(affectiveSearchOptions);
+                const result = await fetchProducts(affectiveSearchOptions);
                 productsSignal.set(result.products ?? []);
                 pagingMetadataSignal.set(result.pagingMetadata);
             }

package/dist/react/Category.d.ts

@@ -1,5 +1,8 @@
-import type { PropsWithChildren, ReactNode } from "react";
 import { type CategoryServiceConfig } from "../services/category-service.js";
+export interface RootProps {
+    children: React.ReactNode;
+    categoryServiceConfig: CategoryServiceConfig;
+}
 /**
  * Root component that provides the Category service context to its children.
  * This component sets up the necessary services for managing category state.
@@ -24,15 +27,13 @@ import { type CategoryServiceConfig } from "../services/category-service.js";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    categoryServiceConfig: CategoryServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Name headless component
  */
 export interface NameProps {
     /** Content to display (can be a render function receiving name data or ReactNode) */
-    children: ((props: NameRenderProps) => ReactNode) | ReactNode;
+    children: ((props: NameRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Name component
@@ -60,13 +61,13 @@ export interface NameRenderProps {
  * }
  * ```
  */
-export declare function Name(props: NameProps): ReactNode;
+export declare function Name(props: NameProps): import("react").ReactNode;
 /**
  * Props for Slug headless component
  */
 export interface SlugProps {
     /** Content to display (can be a render function receiving slug data or ReactNode) */
-    children: ((props: SlugRenderProps) => ReactNode) | ReactNode;
+    children: ((props: SlugRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Slug component
@@ -94,4 +95,4 @@ export interface SlugRenderProps {
  * }
  * ```
  */
-export declare function Slug(props: SlugProps): ReactNode;
+export declare function Slug(props: SlugProps): import("react").ReactNode;