@wix/headless-restaurants-olo 0.0.15 → 0.0.16

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
-import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
 import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
@@ -25,136 +25,6 @@ export interface RootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * Displays the item name with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Name />
- * <ItemDetails.Name asChild>
- *   <h2 className="font-heading text-lg" />
- * </ItemDetails.Name>
- * ```
- */
-export interface ItemDetailsNameProps {
-    asChild?: boolean;
-    /** Custom render function when using asChild */
-    children?: AsChildChildren<{
-        name: string;
-    }>;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item price with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Price />
- * <ItemDetails.Price asChild>
- *   <span className="font-semibold text-lg" />
- * </ItemDetails.Price>
- * ```
- */
-export interface ItemDetailsPriceProps {
-    asChild?: boolean;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Price: React.ForwardRefExoticComponent<ItemDetailsPriceProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item description with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Description />
- * <ItemDetails.Description asChild>
- *   <p className="text-sm" />
- * </ItemDetails.Description>
- * ```
- */
-export interface ItemDetailsDescriptionProps {
-    asChild?: boolean;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Description: React.ForwardRefExoticComponent<ItemDetailsDescriptionProps & React.RefAttributes<HTMLElement>>;
-/**
- * Wrapper component for CoreItemDetails.ModifierComponent.
- * Renders a single modifier with checkbox functionality.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Modifier>
- *   {({ modifier, isSelected, onToggle }) => (
- *     <div style={{ display: "flex", alignItems: "center" }}>
- *       <CheckboxPrimitive.Root
- *         className="CheckboxRoot"
- *         checked={isSelected}
- *         onCheckedChange={onToggle}
- *         id={modifier._id}
- *       >
- *         <CheckboxPrimitive.Indicator className="CheckboxIndicator">
- *           <CheckIcon />
- *         </CheckboxPrimitive.Indicator>
- *       </CheckboxPrimitive.Root>
- *       <label className="Label" htmlFor={modifier._id}>
- *         {modifier.name}
- *       </label>
- *     </div>
- *   )}
- * </ItemDetails.Modifier>
- * ```
- */
-export interface ItemDetailsModifiersSingleSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export interface ModifierCheckboxProps {
-    selectedModifierIds: string[];
-    onToggle: (modifierId: string) => void;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-    }>;
-}
-export declare const ModifierCheckbox: React.ForwardRefExoticComponent<ModifierCheckboxProps & React.RefAttributes<HTMLElement>>;
-export interface ModifierRadioProps {
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export declare const ModifierRadio: React.ForwardRefExoticComponent<ModifierRadioProps & React.RefAttributes<HTMLElement>>;
-export declare const ModifiersSingleSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersSingleSelectProps & React.RefAttributes<HTMLElement>>;
-export interface ItemDetailsModifiersMultiSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
  * Wrapper component for CoreItemDetails.VariantsComponent.
  * Renders the variants for the item using Radix UI RadioGroup.
@@ -169,7 +39,9 @@ export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemD
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
+        variant: EnhancedVariant;
         variants: EnhancedVariant[];
+        hasVariants: boolean;
         selectedVariantId?: string;
         onVariantChange?: (variantId: string) => void;
     }>;
@@ -177,6 +49,7 @@ export interface ItemDetailsVariantsProps {
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 /**

package/cjs/dist/react/ItemDetails.js

@@ -4,8 +4,7 @@ import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Item, Modifier, ModifierGroup, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { Item } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
 import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
@@ -18,69 +17,19 @@ var TestIds;
     TestIds["itemSpecialRequest"] = "item-special-request";
     TestIds["itemLabels"] = "item-labels";
     TestIds["itemVariants"] = "item-variants";
-    TestIds["itemModifier"] = "item-modifier";
     TestIds["itemAvailability"] = "item-availability";
 })(TestIds || (TestIds = {}));
-const CheckIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z", fill: "currentColor" }) }));
 export const Root = ({ children, itemDetailsServiceConfig }) => {
     return (_jsx(CoreItemDetails.Root, { itemDetailsServiceConfig: itemDetailsServiceConfig, children: ({ item }) => _jsx(Item.Root, { item: item, children: children }) }));
 };
-export const Name = React.forwardRef(({ asChild, children, className, ...rest }, ref) => {
-    return (_jsx(Item.Name, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemName, ...rest, children: children }));
-});
-Name.displayName = 'ItemDetails.Name';
-export const Price = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    return (_jsx(Item.Price, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemPrice, ...rest }));
-});
-Price.displayName = 'ItemDetails.Price';
-export const Description = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    return (_jsx(Item.Description, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemDescription, ...rest }));
-});
-Description.displayName = 'ItemDetails.Description';
-export const ModifierCheckbox = React.forwardRef(({ selectedModifierIds, onToggle, className, asChild, modifierNameClassName, modifierPriceClassName, children, ...rest }) => {
-    const { modifier } = useModifierContext();
-    const isSelected = selectedModifierIds.includes(modifier._id || '');
-    return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-            selectedModifierIds,
-            onToggle,
-        }, ...rest, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
-});
-ModifierCheckbox.displayName = 'ItemDetails.ModifierCheckbox';
-export const ModifierRadio = React.forwardRef(({ modifierNameClassName, modifierPriceClassName }) => {
-    const { modifier } = useModifierContext();
-    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
-});
-ModifierRadio.displayName = 'ItemDetails.ModifierRadio';
-export const ModifiersSingleSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: true, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
-            const selectedModifierId = selectedModifierIds.length > 0 ? selectedModifierIds[0] : '';
-            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-                    selectedModifierIds,
-                    onToggle,
-                    modifierGroup,
-                    modifiers,
-                }, ...rest, children: _jsx(RadioGroupPrimitive.Root, { value: selectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }) }));
-        } }));
-});
-ModifiersSingleSelect.displayName = 'ItemDetails.ModifiersSingleSelect';
-export const ModifiersMultiSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: false, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
-            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-                    selectedModifierIds,
-                    onToggle,
-                    modifierGroup,
-                    modifiers,
-                }, ...rest, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }));
-        } }));
-});
-ModifiersMultiSelect.displayName = 'ItemDetails.ModifiersMultiSelect';
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, }, ref) => {
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
     return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
             if (!hasVariants) {
-                return null;
+                return emptyState || null;
             }
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, customElementProps: {
                     variants,
+                    hasVariants,
                     selectedVariantId,
                     onVariantChange,
                 }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+import { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+import { RuleTypeMap } from '../services/common-types.js';
+export interface ItemDetailsModifierGroupProps {
+    children: React.ReactNode;
+}
+export interface ModifiersProps {
+    className?: string;
+    asChild?: boolean;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+    children?: AsChildChildren<{
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
+        isSingleSelect: boolean;
+    }>;
+}
+export interface ModifierCheckboxProps {
+    selectedModifierIds: string[];
+    onToggle: (modifierId: string) => void;
+    className?: string;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export interface ModifierRadioProps {
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export declare const Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
+export declare const Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+export interface DescriptionProps {
+    ruleTypeMap: RuleTypeMap;
+    className?: string;
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        description: string;
+    }>;
+}
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+export interface ErrorProps {
+    ruleTypeMap: RuleTypeMap;
+    className?: string;
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        error: string;
+    }>;
+}
+export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifierGroup: {
+    readonly Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
+    readonly Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+    readonly Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+    readonly Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
+};

package/cjs/dist/react/ModifierGroup.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Modifier, ModifierGroup as ModifierGroupComponents, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { ModifierGroupComponent, ModifiersComponent, Description as DescriptionComponent, GroupError, } from './core/ModifierGroup.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["modifiers"] = "modifiers";
+    TestIds["modifierGroupDescription"] = "modifier-group-description";
+    TestIds["modifierGroupError"] = "modifier-group-error";
+})(TestIds || (TestIds = {}));
+const CheckIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z", fill: "currentColor" }) }));
+export const Root = React.forwardRef(({ children }) => {
+    return _jsx(ModifierGroupComponent, { children: children });
+});
+Root.displayName = 'ItemDetailsModifierGroup.Root';
+export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, children, }, ref) => {
+    return (_jsx(ModifiersComponent, { children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, singleSelectedModifierId, }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifiers, className: className, customElement: children, customElementProps: {
+                selectedModifierIds,
+                onToggle,
+                modifierGroup,
+                modifiers,
+                isSingleSelect,
+            }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) })) })) }));
+});
+Modifiers.displayName = 'ItemDetailsModifierGroup.Modifiers';
+const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, }) => {
+    const { modifier } = useModifierContext();
+    const isSelected = selectedModifierIds.includes(modifier._id || '');
+    return (_jsxs("div", { className: className, style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
+};
+const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, }) => {
+    const { modifier } = useModifierContext();
+    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
+};
+export const Description = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+    return (_jsx(DescriptionComponent, { ruleTypeMap: ruleTypeMap, children: ({ description }) => {
+            if (!description) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupDescription, className: className, customElement: children, customElementProps: { description }, children: _jsx("p", { className: className, children: description }) }));
+        } }));
+});
+Description.displayName = 'ItemDetailsModifierGroup.Description';
+export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+    return (_jsx(GroupError, { ruleTypeMap: ruleTypeMap, children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, children: _jsx("p", { className: className, children: error }) }));
+        } }));
+});
+Error.displayName = 'ItemDetailsModifierGroup.Error';
+export const ModifierGroup = {
+    Root,
+    Modifiers,
+    Description,
+    Error,
+};

package/cjs/dist/react/core/ItemDetails.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type LineItem } from '@wix/ecom/services';
 import { ItemServiceConfig } from '../../services/item-details-service.js';
-import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
 import { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
@@ -45,16 +45,6 @@ interface ItemDetailsVariantsProps {
     }) => React.ReactNode;
 }
 export declare const VariantsComponent: React.FC<ItemDetailsVariantsProps>;
-interface ItemDetailsModifiersProps {
-    children: (props: {
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }) => React.ReactNode;
-    singleSelect?: boolean;
-}
-export declare const ModifiersComponent: React.FC<ItemDetailsModifiersProps>;
 interface ItemDetailsAvailabilityProps {
     availabilityStatusMap: AvailabilityStatusMap;
     children: (props: {

package/cjs/dist/react/core/ItemDetails.js

@@ -4,9 +4,8 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
-import { useItemContext, useModifierGroupContext, } from '@wix/headless-restaurants-menus/react';
+import { useItemContext } from '@wix/headless-restaurants-menus/react';
 import { AvailabilityStatus, } from '../../services/common-types.js';
-import { convertModifierToFormModifier } from '../../services/utils.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -88,24 +87,6 @@ export const VariantsComponent = ({ children, }) => {
         selectedVariant,
     });
 };
-export const ModifiersComponent = ({ children, singleSelect, }) => {
-    const service = useService(ItemServiceDefinition);
-    const { modifierGroup } = useModifierGroupContext();
-    // Get selected modifier IDs for this group
-    const groupId = modifierGroup._id;
-    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
-    const onToggle = (modifierId) => {
-        if (groupId) {
-            service.toggleModifier?.(groupId, modifierId, singleSelect);
-        }
-    };
-    return children({
-        selectedModifierIds: groupSelectedModifierIds,
-        onToggle,
-        modifierGroup,
-        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
-    });
-};
 export const AvailabilityComponent = ({ children, availabilityStatusMap, }) => {
     const oloSettingsService = useService(OLOSettingsServiceDefinition);
     const availabilityDispatchAction = oloSettingsService.availabilityDispatchAction?.get?.();

package/cjs/dist/react/core/ModifierGroup.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+import { RuleType, RuleTypeMap } from '../../services/common-types.js';
+interface ModifiersContextValue {
+    selectedModifierIds: string[];
+    onToggle: (modifierId: string) => void;
+    modifierGroup: EnhancedModifierGroup;
+    modifiers: EnhancedModifier[];
+    ruleType: RuleType;
+    isSingleSelect: boolean;
+}
+export declare function useModifiersContext(): ModifiersContextValue;
+interface ModifierGroupComponentProps {
+    children: React.ReactNode;
+}
+export declare const ModifierGroupComponent: React.FC<ModifierGroupComponentProps>;
+interface ModifiersComponentProps {
+    children: (props: {
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
+        isSingleSelect: boolean;
+        singleSelectedModifierId: string;
+    }) => React.ReactNode;
+}
+export declare const ModifiersComponent: React.FC<ModifiersComponentProps>;
+interface DescriptionProps {
+    ruleTypeMap: RuleTypeMap;
+    children: (props: {
+        description: string | undefined;
+    }) => React.ReactNode;
+}
+export declare const Description: React.FC<DescriptionProps>;
+interface GroupErrorProps {
+    ruleTypeMap: RuleTypeMap;
+    children: (props: {
+        error: string | undefined;
+    }) => React.ReactNode;
+}
+export declare const GroupError: React.FC<GroupErrorProps>;
+export {};

package/cjs/dist/react/core/ModifierGroup.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { useModifierGroupContext } from '@wix/headless-restaurants-menus/react';
+import { convertModifierToFormModifier, getModifierGroupRuleType, getRuleTypeMapValue, isSingleSelectRule, } from '../../services/utils.js';
+import { ItemServiceDefinition } from '../../services/item-details-service.js';
+const ModifiersContext = createContext(null);
+export function useModifiersContext() {
+    const context = React.useContext(ModifiersContext);
+    if (!context) {
+        throw new Error('useModifiersContext must be used within a ModifierGroupComponent');
+    }
+    return context;
+}
+export const ModifierGroupComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { modifierGroup } = useModifierGroupContext();
+    const rule = modifierGroup.rule;
+    const isSingleSelect = Boolean(rule ? isSingleSelectRule(rule) : false);
+    const groupId = modifierGroup._id;
+    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
+    const onToggle = (modifierId) => {
+        if (groupId) {
+            service.toggleModifier?.(groupId, modifierId, isSingleSelect);
+        }
+    };
+    const ruleType = getModifierGroupRuleType(modifierGroup.rule);
+    const contextValue = {
+        selectedModifierIds: groupSelectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
+        isSingleSelect,
+        ruleType,
+    };
+    return (_jsx(ModifiersContext.Provider, { value: contextValue, children: children }));
+};
+export const ModifiersComponent = ({ children, }) => {
+    const { selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, } = useModifiersContext();
+    const singleSelectedModifierId = selectedModifierIds.length > 0 ? (selectedModifierIds[0] ?? '') : '';
+    return children({
+        selectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers,
+        isSingleSelect,
+        singleSelectedModifierId,
+    });
+};
+export const Description = ({ ruleTypeMap, children, }) => {
+    const { ruleType, modifierGroup } = useModifiersContext();
+    const modifierGroupName = modifierGroup.name || '';
+    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    return children({ description });
+};
+export const GroupError = ({ ruleTypeMap, children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { ruleType, modifierGroup } = useModifiersContext();
+    const groupId = modifierGroup._id || '';
+    const modifierGroupErrors = service.modifierGroupError?.get() || {};
+    const modifierGroupName = modifierGroup.name || '';
+    let error;
+    if (modifierGroupErrors[groupId]) {
+        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    }
+    return children({ error });
+};

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

@@ -1,4 +1,5 @@
 export * as ItemDetails from './ItemDetails.js';
+export * as ModifierGroup from './ModifierGroup.js';
 export * as ClickableItem from './ClickableItem.js';
 export * as OLO from './OLO.js';
 export * as Settings from './Settings.js';

package/cjs/dist/react/index.js

@@ -1,4 +1,5 @@
 export * as ItemDetails from './ItemDetails.js';
+export * as ModifierGroup from './ModifierGroup.js';
 export * as ClickableItem from './ClickableItem.js';
 export * as OLO from './OLO.js';
 export * as Settings from './Settings.js';

package/cjs/dist/services/common-types.d.ts

@@ -1,6 +1,24 @@
 import * as currentCart from '@wix/auto_sdk_ecom_current-cart';
 export type LineItem = currentCart.LineItem;
 export type DescriptionLine = currentCart.DescriptionLine;
+export declare enum RuleType {
+    NO_LIMIT = "NO_LIMIT",
+    CHOOSE_ONE = "CHOOSE_ONE",
+    CHOOSE_X = "CHOOSE_X",
+    CHOOSE_AT_LEAST_ONE = "CHOOSE_AT_LEAST_ONE",
+    CHOOSE_AT_LEAST_X = "CHOOSE_AT_LEAST_X",
+    CHOOSE_UP_TO_X = "CHOOSE_UP_TO_X",
+    CHOOSE_BETWEEN_X_AND_Y = "CHOOSE_BETWEEN_X_AND_Y"
+}
+export interface RuleTypeMap {
+    [RuleType.NO_LIMIT]?: (modifierGroupName: string) => string;
+    [RuleType.CHOOSE_ONE]?: (modifierGroupName: string) => string;
+    [RuleType.CHOOSE_X]?: (modifierGroupName: string, x: number) => string;
+    [RuleType.CHOOSE_AT_LEAST_ONE]?: (modifierGroupName: string) => string;
+    [RuleType.CHOOSE_AT_LEAST_X]?: (modifierGroupName: string, x: number) => string;
+    [RuleType.CHOOSE_UP_TO_X]?: (modifierGroupName: string, x: number) => string;
+    [RuleType.CHOOSE_BETWEEN_X_AND_Y]?: (modifierGroupName: string, x: number, y: number) => string;
+}
 export declare enum AvailabilityStatus {
     AVAILABLE = 0,
     NOT_AVAILABLE = 1,

package/cjs/dist/services/common-types.js

@@ -1,3 +1,13 @@
+export var RuleType;
+(function (RuleType) {
+    RuleType["NO_LIMIT"] = "NO_LIMIT";
+    RuleType["CHOOSE_ONE"] = "CHOOSE_ONE";
+    RuleType["CHOOSE_X"] = "CHOOSE_X";
+    RuleType["CHOOSE_AT_LEAST_ONE"] = "CHOOSE_AT_LEAST_ONE";
+    RuleType["CHOOSE_AT_LEAST_X"] = "CHOOSE_AT_LEAST_X";
+    RuleType["CHOOSE_UP_TO_X"] = "CHOOSE_UP_TO_X";
+    RuleType["CHOOSE_BETWEEN_X_AND_Y"] = "CHOOSE_BETWEEN_X_AND_Y";
+})(RuleType || (RuleType = {}));
 export var AvailabilityStatus;
 (function (AvailabilityStatus) {
     AvailabilityStatus[AvailabilityStatus["AVAILABLE"] = 0] = "AVAILABLE";

package/cjs/dist/services/item-details-service.d.ts

@@ -23,6 +23,8 @@ export interface ItemServiceAPI {
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
     error: Signal<string | null>;
+    /** Reactive signal containing error state for each modifier group */
+    modifierGroupError: Signal<Record<string, boolean>>;
     /** Function to update the quantity of the item */
     updateQuantity: (quantity: number) => void;
     /** Function to update the special request of the item */

package/cjs/dist/services/item-details-service.js

@@ -58,7 +58,13 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const modifierGroups = config.item?.modifierGroups || [];
     const initialSelectedModifiers = getModifiersInitState(modifierGroups);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
-    console.log('config.item', config.item);
+    const initialModifierGroupError = modifierGroups.reduce((acc, group) => {
+        if (group._id) {
+            acc[group._id] = false;
+        }
+        return acc;
+    }, {});
+    const modifierGroupError = signalsService.signal(initialModifierGroupError);
     if (config.item) {
         lineItem.set({
             quantity: quantity.get(),
@@ -150,6 +156,7 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         selectedModifiers,
         availabilityStatus,
         getSelectedModifiers,
+        modifierGroupError,
     };
 });
 /**