@wix/headless-stores 0.0.51 → 0.0.53

package/cjs/dist/astro/actions/custom-checkout.d.ts

@@ -1,4 +1,4 @@
-import { type CustomLineItemCheckoutOptions } from "../../server-actions/index.js";
+import { type CustomLineItemCheckoutOptions } from '../../server-actions/index.js';
 /**
  * Creates an Astro action factory for custom checkout functionality with line items.
  *

package/cjs/dist/astro/actions/custom-checkout.js

@@ -1,7 +1,7 @@
 /// <reference types="astro/env" />
 // @ts-ignore
-import { defineAction } from "astro:actions";
-import { getCustomLineItemCheckoutURLFactory, } from "../../server-actions/index.js";
+import { defineAction } from 'astro:actions';
+import { getCustomLineItemCheckoutURLFactory, } from '../../server-actions/index.js';
 /**
  * Creates an Astro action factory for custom checkout functionality with line items.
  *

package/cjs/dist/astro/actions/index.d.ts

@@ -1 +1 @@
-export * from "./custom-checkout.js";
+export * from './custom-checkout.js';

package/cjs/dist/astro/actions/index.js

@@ -1 +1 @@
-export * from "./custom-checkout.js";
+export * from './custom-checkout.js';

package/cjs/dist/enums/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./sort-enums.js";
-export * from "./social-platform-enums.js";
+export * from './sort-enums.js';
+export * from './social-platform-enums.js';

package/cjs/dist/enums/index.js

@@ -1,2 +1,2 @@
-export * from "./sort-enums.js";
-export * from "./social-platform-enums.js";
+export * from './sort-enums.js';
+export * from './social-platform-enums.js';

package/cjs/dist/react/Category.d.ts

@@ -1,98 +1,199 @@
-import { type CategoryServiceConfig } from "../services/category-service.js";
-export interface RootProps {
+import React from 'react';
+import { type Category } from '../services/category-service.js';
+import { type CategoryServiceConfig } from '../services/category-service.js';
+/**
+ * Props for Category.Root component
+ */
+export interface CategoryRootProps {
+    /** Category object to initialize the service with */
+    category?: Category;
+    /** Configuration for the category service */
+    categoryServiceConfig?: CategoryServiceConfig;
+    /** Whether the category is currently selected */
+    isSelected?: boolean;
+    /** Child components */
     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.
+ * Props for Category.Trigger component
+ */
+export interface CategoryTriggerProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLButtonElement, {
+        category: Category;
+        isSelected: boolean;
+        onSelect: () => void;
+    }>;
+    /** Callback when category is selected */
+    onSelect?: (category: Category) => void;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Props for Category.Label component
+ */
+export interface CategoryLabelProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        name: string;
+        category: Category;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Props for Category.ID component
+ */
+export interface CategoryIDProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        id: string;
+        category: Category;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Props for Category.Raw component
+ */
+export interface CategoryRawProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        category: Category;
+        isSelected: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Root container for a single category item.
+ * This component sets up the necessary services for managing category state
+ * and provides category context to child components.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { Category } from '@wix/stores/components';
+ * import { Category } from '@wix/headless-stores/react';
  *
- * function CategoryPage() {
- *   return (
- *     <Category.Root categoryServiceConfig={{ category: myCategory }}>
- *       <Category.Name>
- *         {({ name }) => <h1>{name}</h1>}
- *       </Category.Name>
- *       <Category.Slug>
- *         {({ slug }) => <p>Slug: {slug}</p>}
- *       </Category.Slug>
- *     </Category.Root>
- *   );
- * }
+ * <Category.Root categoryServiceConfig={{ category }}>
+ *   <Category.Trigger />
+ *   <Category.Label />
+ *   <Category.ID />
+ * </Category.Root>
  * ```
  */
-export declare function Root(props: RootProps): React.ReactNode;
+export declare function Root(props: CategoryRootProps): 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) => React.ReactNode) | React.ReactNode;
-}
-/**
- * Render props for Name component
+ * Interactive element for selecting or triggering category actions.
+ * Provides category data and selection state to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Category.Trigger className="px-4 py-2 rounded border hover:bg-surface-hover" />
+ *
+ * // Custom rendering with forwardRef
+ * <Category.Trigger asChild>
+ *   {React.forwardRef(({category, isSelected, onSelect, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={onSelect}
+ *       className={`px-4 py-2 rounded transition-colors ${
+ *         isSelected
+ *           ? 'bg-brand-primary text-white'
+ *           : 'border border-surface-subtle hover:bg-surface-hover'
+ *       }`}
+ *     >
+ *       {category.name}
+ *     </button>
+ *   ))}
+ * </Category.Trigger>
+ * ```
  */
-export interface NameRenderProps {
-    /** Category name */
-    name: string;
-}
+export declare const Trigger: React.ForwardRefExoticComponent<CategoryTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 /**
- * Headless component for category name display
+ * Displays the category name or label.
+ * Provides category name and full category data to custom render functions.
  *
  * @component
  * @example
  * ```tsx
- * import { Category } from '@wix/stores/components';
+ * // Default usage
+ * <Category.Label className="text-lg font-medium text-content-primary" />
  *
- * function CategoryHeader() {
- *   return (
- *     <Category.Name>
- *       {({ name }) => (
- *         <h1 className="category-title">{name}</h1>
+ * // Custom rendering with forwardRef
+ * <Category.Label asChild>
+ *   {React.forwardRef(({name, category, ...props}, ref) => (
+ *     <span ref={ref} {...props} className="text-lg font-medium text-content-primary">
+ *       {name}
+ *       {category.numberOfProducts > 0 && (
+ *         <span className="text-sm text-content-muted ml-2">
+ *           ({category.numberOfProducts})
+ *         </span>
  *       )}
- *     </Category.Name>
- *   );
- * }
+ *     </span>
+ *   ))}
+ * </Category.Label>
  * ```
  */
-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) => React.ReactNode) | React.ReactNode;
-}
+export declare const Label: React.ForwardRefExoticComponent<CategoryLabelProps & React.RefAttributes<HTMLElement>>;
 /**
- * Render props for Slug component
+ * Provides access to the category ID for advanced use cases.
+ * Typically used for tracking, analytics, or hidden form fields.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage (hidden by default)
+ * <Category.ID className="hidden" />
+ *
+ * // Custom rendering with forwardRef
+ * <Category.ID asChild>
+ *   {React.forwardRef(({id, category, ...props}, ref) => (
+ *     <span
+ *       ref={ref}
+ *       {...props}
+ *       data-category-id={id}
+ *       className="sr-only"
+ *     >
+ *       Category ID: {id}
+ *     </span>
+ *   ))}
+ * </Category.ID>
+ * ```
  */
-export interface SlugRenderProps {
-    /** Category slug */
-    slug: string;
-}
+export declare const ID: React.ForwardRefExoticComponent<CategoryIDProps & React.RefAttributes<HTMLElement>>;
 /**
- * Headless component for category slug display
+ * Provides access to the full category data for advanced use cases.
+ * Useful for custom implementations that need access to all category properties.
  *
  * @component
  * @example
  * ```tsx
- * import { Category } from '@wix/stores/components';
- *
- * function CategoryInfo() {
- *   return (
- *     <Category.Slug>
- *       {({ slug }) => (
- *         <p className="category-slug">Category slug: {slug}</p>
- *       )}
- *     </Category.Slug>
- *   );
- * }
+ * // Custom rendering with forwardRef
+ * <Category.Raw asChild>
+ *   {React.forwardRef(({category, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       data-category-id={category._id}
+ *       className="category-raw-data"
+ *     >
+ *       <pre>{JSON.stringify(category, null, 2)}</pre>
+ *     </div>
+ *   ))}
+ * </Category.Raw>
  * ```
  */
-export declare function Slug(props: SlugProps): import("react").ReactNode;
+export declare const Raw: React.ForwardRefExoticComponent<CategoryRawProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/Category.js

@@ -1,81 +1,197 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createServicesMap } from "@wix/services-manager";
-import { useService, WixServices } from "@wix/services-manager-react";
-import { CategoryService, CategoryServiceDefinition, } from "../services/category-service.js";
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import * as CoreCategory from './core/Category.js';
+import { CategoryServiceDefinition, } from '../services/category-service.js';
+import { useService } from '@wix/services-manager-react';
+import { renderChildren } from '../utils/renderChildren.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["categoryItem"] = "category-item";
+    TestIds["categoryTrigger"] = "category-trigger";
+    TestIds["categoryLabel"] = "category-label";
+    TestIds["categoryId"] = "category-id";
+    TestIds["categoryRaw"] = "category-raw";
+})(TestIds || (TestIds = {}));
 /**
- * Root component that provides the Category service context to its children.
- * This component sets up the necessary services for managing category state.
+ * Root container for a single category item.
+ * This component sets up the necessary services for managing category state
+ * and provides category context to child components.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { Category } from '@wix/stores/components';
+ * import { Category } from '@wix/headless-stores/react';
  *
- * function CategoryPage() {
- *   return (
- *     <Category.Root categoryServiceConfig={{ category: myCategory }}>
- *       <Category.Name>
- *         {({ name }) => <h1>{name}</h1>}
- *       </Category.Name>
- *       <Category.Slug>
- *         {({ slug }) => <p>Slug: {slug}</p>}
- *       </Category.Slug>
- *     </Category.Root>
- *   );
- * }
+ * <Category.Root categoryServiceConfig={{ category }}>
+ *   <Category.Trigger />
+ *   <Category.Label />
+ *   <Category.ID />
+ * </Category.Root>
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoryServiceDefinition, CategoryService, props.categoryServiceConfig), children: props.children }));
+    const { category, categoryServiceConfig, isSelected, children } = props;
+    if (!category && !categoryServiceConfig) {
+        throw new Error('Category.Root: category or categoryServiceConfig is required');
+    }
+    const serviceConfig = categoryServiceConfig || {
+        category: category,
+        isSelected,
+    };
+    return (_jsx(CoreCategory.Root, { categoryServiceConfig: serviceConfig, children: children }));
 }
 /**
- * Headless component for category name display
+ * Interactive element for selecting or triggering category actions.
+ * Provides category data and selection state to custom render functions.
  *
  * @component
  * @example
  * ```tsx
- * import { Category } from '@wix/stores/components';
+ * // Default usage
+ * <Category.Trigger className="px-4 py-2 rounded border hover:bg-surface-hover" />
  *
- * function CategoryHeader() {
- *   return (
- *     <Category.Name>
- *       {({ name }) => (
- *         <h1 className="category-title">{name}</h1>
- *       )}
- *     </Category.Name>
- *   );
- * }
+ * // Custom rendering with forwardRef
+ * <Category.Trigger asChild>
+ *   {React.forwardRef(({category, isSelected, onSelect, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={onSelect}
+ *       className={`px-4 py-2 rounded transition-colors ${
+ *         isSelected
+ *           ? 'bg-brand-primary text-white'
+ *           : 'border border-surface-subtle hover:bg-surface-hover'
+ *       }`}
+ *     >
+ *       {category.name}
+ *     </button>
+ *   ))}
+ * </Category.Trigger>
  * ```
  */
-export function Name(props) {
+export const Trigger = React.forwardRef((props, ref) => {
+    const { asChild, children, onSelect, className } = props;
     const categoryService = useService(CategoryServiceDefinition);
-    return typeof props.children === "function"
-        ? props.children({ name: categoryService.category.get().name })
-        : props.children;
-}
+    const category = categoryService.category.get();
+    const isSelected = categoryService.isSelected.get();
+    const handleSelect = () => {
+        if (onSelect) {
+            onSelect(category);
+        }
+    };
+    const Comp = asChild && children ? Slot : 'button';
+    return (_jsx(Comp, { ref: ref, className: className, onClick: handleSelect, "data-testid": TestIds.categoryTrigger, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
+            ? renderChildren({
+                children,
+                props: { category, isSelected, onSelect: handleSelect },
+                ref,
+            })
+            : category.name }));
+});
 /**
- * Headless component for category slug display
+ * Displays the category name or label.
+ * Provides category name and full category data to custom render functions.
  *
  * @component
  * @example
  * ```tsx
- * import { Category } from '@wix/stores/components';
+ * // Default usage
+ * <Category.Label className="text-lg font-medium text-content-primary" />
  *
- * function CategoryInfo() {
- *   return (
- *     <Category.Slug>
- *       {({ slug }) => (
- *         <p className="category-slug">Category slug: {slug}</p>
+ * // Custom rendering with forwardRef
+ * <Category.Label asChild>
+ *   {React.forwardRef(({name, category, ...props}, ref) => (
+ *     <span ref={ref} {...props} className="text-lg font-medium text-content-primary">
+ *       {name}
+ *       {category.numberOfProducts > 0 && (
+ *         <span className="text-sm text-content-muted ml-2">
+ *           ({category.numberOfProducts})
+ *         </span>
  *       )}
- *     </Category.Slug>
- *   );
- * }
+ *     </span>
+ *   ))}
+ * </Category.Label>
  * ```
  */
-export function Slug(props) {
+export const Label = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
     const categoryService = useService(CategoryServiceDefinition);
-    return typeof props.children === "function"
-        ? props.children({ slug: categoryService.category.get().slug })
-        : props.children;
-}
+    const category = categoryService.category.get();
+    const isSelected = categoryService.isSelected.get();
+    return (_jsx(CoreCategory.Name, { children: ({ name }) => {
+            const Comp = asChild && children ? Slot : 'span';
+            return (_jsx(Comp, { ref: ref, className: className, "data-testid": TestIds.categoryLabel, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
+                    ? renderChildren({ children, props: { name, category }, ref })
+                    : name }));
+        } }));
+});
+/**
+ * Provides access to the category ID for advanced use cases.
+ * Typically used for tracking, analytics, or hidden form fields.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage (hidden by default)
+ * <Category.ID className="hidden" />
+ *
+ * // Custom rendering with forwardRef
+ * <Category.ID asChild>
+ *   {React.forwardRef(({id, category, ...props}, ref) => (
+ *     <span
+ *       ref={ref}
+ *       {...props}
+ *       data-category-id={id}
+ *       className="sr-only"
+ *     >
+ *       Category ID: {id}
+ *     </span>
+ *   ))}
+ * </Category.ID>
+ * ```
+ */
+export const ID = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const categoryService = useService(CategoryServiceDefinition);
+    const category = categoryService.category.get();
+    const isSelected = categoryService.isSelected.get();
+    const id = category._id || '';
+    const Comp = asChild && children ? Slot : 'span';
+    return (_jsx(Comp, { ref: ref, className: className || 'sr-only', "data-testid": TestIds.categoryId, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
+            ? renderChildren({ children, props: { id, category }, ref })
+            : id }));
+});
+/**
+ * Provides access to the full category data for advanced use cases.
+ * Useful for custom implementations that need access to all category properties.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Category.Raw asChild>
+ *   {React.forwardRef(({category, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       data-category-id={category._id}
+ *       className="category-raw-data"
+ *     >
+ *       <pre>{JSON.stringify(category, null, 2)}</pre>
+ *     </div>
+ *   ))}
+ * </Category.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const categoryService = useService(CategoryServiceDefinition);
+    const category = categoryService.category.get();
+    const isSelected = categoryService.isSelected.get();
+    const Comp = asChild && children ? Slot : 'span';
+    return (_jsx(Comp, { ref: ref, className: className || 'sr-only', "data-testid": TestIds.categoryRaw, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
+            ? renderChildren({ children, props: { category, isSelected }, ref })
+            : JSON.stringify(category) }));
+});