@wix/headless-restaurants-olo 0.0.6 → 0.0.8

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

@@ -3,6 +3,7 @@ import { Commerce } from '@wix/ecom/components';
 import { type LineItem } from '@wix/ecom/services';
 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';
 /**
  * Root component for menu item display and interaction.
  * Provides context for all menu item-related components like name, price, description, image, etc.
@@ -46,36 +47,6 @@ export interface ItemDetailsNameProps {
     className?: string;
 }
 export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item image with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Image />
- * <ItemDetails.Image asChild>
- *   <img className="rounded" />
- * </ItemDetails.Image>
- * ```
- */
-export interface ItemDetailsImageProps {
-    asChild?: boolean;
-    /**
-     * Custom render function when using asChild.
-     * Receives an object with:
-     * - hasImage: boolean - whether the item has an image
-     * - image: string - the actual image element (WixMediaImage)
-     * - altText: string - the alt text for the image
-     */
-    children?: (props: {
-        hasImage: boolean;
-        image?: string;
-        altText: string;
-    }) => React.ReactNode;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Image: React.ForwardRefExoticComponent<ItemDetailsImageProps & React.RefAttributes<HTMLElement>>;
 /**
  * Displays the item price with customizable rendering.
  *
@@ -113,52 +84,80 @@ export interface ItemDetailsDescriptionProps {
 }
 export declare const Description: React.ForwardRefExoticComponent<ItemDetailsDescriptionProps & React.RefAttributes<HTMLElement>>;
 /**
- * Wrapper component for Item.LabelsRepeater.
- * Renders the labels for the item using the headless component.
+ * Wrapper component for CoreItemDetails.ModifierComponent.
+ * Renders a single modifier with checkbox functionality.
  *
  * @component
  * @example
  * ```tsx
- * <ItemDetails.Labels>
- *   {(label) => <span>{label.name}</span>}
- * </ItemDetails.Labels>
+ * <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 ItemDetailsLabelsProps {
+export interface ItemDetailsModifiersSingleSelectProps {
     children?: AsChildChildren<{
-        label: string;
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
     }>;
     className?: string;
     asChild?: boolean;
-    iconClassName?: string;
-    nameClassName?: string;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
 }
-export declare const Labels: React.ForwardRefExoticComponent<ItemDetailsLabelsProps & React.RefAttributes<HTMLElement>>;
-/**
- * Wrapper component for Item.ModifierGroupsRepeater.
- * Renders the modifier groups for the item using the headless component.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.ModifierGroups>
- *   {(modifierGroup) => <span>{modifierGroup.name}</span>}
- * </ItemDetails.ModifierGroups>
- * ```
- */
-export interface ItemDetailsModifierGroupsProps {
+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<{
-        modifierGroup: any;
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
     }>;
     className?: string;
     asChild?: boolean;
     modifierNameClassName?: string;
     modifierPriceClassName?: string;
 }
-export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetailsModifierGroupsProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
- * Wrapper component for Item.VariantsRepeater.
- * Renders the variants for the item using the headless component.
+ * Wrapper component for CoreItemDetails.VariantsComponent.
+ * Renders the variants for the item using Radix UI RadioGroup.
  *
  * @component
  * @example
@@ -170,12 +169,17 @@ export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetails
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
-        variant: any;
+        variant: EnhancedVariant;
+        variants: EnhancedVariant[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
     }>;
     className?: string;
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 export interface AddToCartActionProps {

package/cjs/dist/react/ItemDetails.js

@@ -3,7 +3,9 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
-import { Item, Label, Modifier, ModifierGroup, Variant, } from '@wix/restaurants/components';
+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 * as CoreItemDetails from './core/ItemDetails.js';
 var TestIds;
 (function (TestIds) {
@@ -14,9 +16,10 @@ var TestIds;
     TestIds["itemAddToCart"] = "item-add-to-cart";
     TestIds["itemSpecialRequest"] = "item-special-request";
     TestIds["itemLabels"] = "item-labels";
-    TestIds["itemModifierGroups"] = "item-modifier-groups";
     TestIds["itemVariants"] = "item-variants";
+    TestIds["itemModifier"] = "item-modifier";
 })(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 }) }));
 };
@@ -24,10 +27,6 @@ export const Name = React.forwardRef(({ asChild, children, className, ...rest },
     return (_jsx(Item.Name, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemName, ...rest, children: children }));
 });
 Name.displayName = 'ItemDetails.Name';
-export const Image = React.forwardRef(({ asChild, children, className, ...rest }) => {
-    return (_jsx(Item.Image, { asChild: asChild, className: className, "data-testid": TestIds.itemImage, ...rest, children: children }));
-});
-Image.displayName = 'ItemDetails.Image';
 export const Price = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     return (_jsx(Item.Price, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemPrice, ...rest }));
 });
@@ -36,18 +35,59 @@ export const Description = React.forwardRef(({ asChild, className, ...rest }, re
     return (_jsx(Item.Description, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemDescription, ...rest }));
 });
 Description.displayName = 'ItemDetails.Description';
-export const Labels = React.forwardRef(({ children, className, asChild, iconClassName, nameClassName, ...rest }) => {
-    return (_jsx(Item.LabelsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemLabels, className: className, customElement: children, children: [_jsx(Label.Icon, { className: iconClassName }), _jsx(Label.Name, { className: nameClassName })] }) }));
+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 }) }) }) }));
+        } }));
 });
-Labels.displayName = 'ItemDetails.Labels';
-export const ModifierGroups = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(Item.ModifierGroupsRepeater, { ...rest, children: _jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifierGroups, className: className, customElement: children, children: _jsxs(ModifierGroup.ModifiersRepeater, { children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: 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 }) }) }));
+        } }));
 });
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, ...rest }) => {
-    return (_jsx(Item.VariantsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, children: [_jsx(Variant.Name, { className: variantNameClassName }), _jsx(Variant.Price, { className: variantPriceClassName })] }) }));
+ModifiersMultiSelect.displayName = 'ItemDetails.ModifiersMultiSelect';
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
+    return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
+            if (!hasVariants) {
+                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 ||
+                                        variant.priceInfo?.price ||
+                                        '' })] }) }, variant._id))) }) }));
+        } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
-ModifierGroups.displayName = 'ItemDetails.ModifierGroups';
 /**
  * Add to Cart button for the menu item.
  * Triggers the action to add the selected item (and its modifiers/variants) to the cart.

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

@@ -1,4 +1,4 @@
-import { useItemContext, useMenuContext, useSectionContext, } from '@wix/restaurants/components';
+import { useItemContext, useMenuContext, useSectionContext, } from '@wix/headless-restaurants-menus/react';
 import { useService } from '@wix/services-manager-react';
 import { OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
 // import { OLOSettingsServiceDefinition } from "../../services/OLOSettingsService";

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

@@ -1,6 +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';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -8,20 +9,6 @@ interface ItemDetailsRootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: React.FC<ItemDetailsRootProps>;
-interface ItemDetailsModifiersRepeaterProps {
-    children: (props: {
-        modifiers: [];
-        hasModifiers: boolean;
-    }) => React.ReactNode;
-}
-export declare const ModifiersRepeater: React.FC<ItemDetailsModifiersRepeaterProps>;
-interface ItemDetailsVariantsRepeaterProps {
-    children: (props: {
-        variants: [];
-        hasVariants: boolean;
-    }) => React.ReactNode;
-}
-export declare const VariantsRepeater: React.FC<ItemDetailsVariantsRepeaterProps>;
 interface ItemDetailsSpecialRequestProps {
     children: (props: {
         value: string;
@@ -47,4 +34,24 @@ interface ItemDetailsQuantityProps {
     }) => React.ReactNode;
 }
 export declare const QuantityComponent: React.FC<ItemDetailsQuantityProps>;
+interface ItemDetailsVariantsProps {
+    children: (props: {
+        variants: EnhancedVariant[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
+        selectedVariant?: EnhancedVariant;
+    }) => 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>;
 export {};

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

@@ -4,6 +4,7 @@ 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';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -19,22 +20,6 @@ export const Root = ({ children, itemDetailsServiceConfig, }) => {
     }
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
 };
-export const ModifiersRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    const item = service.item?.get();
-    // TODO: Check if modifiers exist on item type - might be in a different property
-    const modifiers = item?.modifiers || [];
-    const hasModifiers = modifiers.length > 0;
-    return children({ modifiers, hasModifiers });
-};
-export const VariantsRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    const item = service.item?.get();
-    // TODO: Check if variants exist on item type - might be in a different property
-    const variants = item?.variants || [];
-    const hasVariants = variants.length > 0;
-    return children({ variants, hasVariants });
-};
 export const SpecialRequest = ({ children, }) => {
     const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
@@ -77,3 +62,49 @@ export const QuantityComponent = ({ children, }) => {
         onValueChange,
     });
 };
+export const VariantsComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { item } = useItemContext();
+    const selectedVariant = service.selectedVariant?.get?.();
+    // Get variants from item context
+    const variants = item?.priceVariants || [];
+    const hasVariants = variants.length > 0;
+    const selectedVariantId = selectedVariant?._id ?? undefined;
+    const onVariantChange = (variantId) => {
+        const variant = variants.find((v) => v._id === variantId);
+        if (variant) {
+            service.updateSelectedVariant?.(variant);
+        }
+    };
+    return children({
+        variants,
+        hasVariants,
+        selectedVariantId,
+        onVariantChange,
+        selectedVariant,
+    });
+};
+export const ModifiersComponent = ({ children, singleSelect, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { modifierGroup } = useModifierGroupContext();
+    const selectedModifiers = service.selectedModifiers?.get?.() ?? {};
+    // Get selected modifier IDs for this group
+    const groupId = modifierGroup._id;
+    const groupSelectedModifierIds = groupId
+        ? selectedModifiers[groupId] || []
+        : [];
+    const onToggle = (modifierId) => {
+        if (groupId) {
+            service.toggleModifier?.(groupId, modifierId, singleSelect);
+        }
+    };
+    return children({
+        selectedModifierIds: groupSelectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers: modifierGroup.modifiers.map((modifier, index) => ({
+            ...modifier,
+            _id: `${modifier._id}~${index}`,
+        })),
+    });
+};

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

@@ -1,6 +1,8 @@
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import * as items from '@wix/auto_sdk_restaurants_items';
 import { type LineItem } from '@wix/ecom/services';
+import { itemVariants } from '@wix/restaurants';
+import type { EnhancedItem } from '@wix/headless-restaurants-menus/services';
+type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
  * This service handles loading and managing a single item's data, loading state, and errors.
@@ -9,10 +11,12 @@ import { type LineItem } from '@wix/ecom/services';
  */
 export interface ItemServiceAPI {
     /** Reactive signal containing the current item data */
-    item?: Signal<items.Item | undefined>;
+    item?: Signal<EnhancedItem | undefined>;
     quantity: Signal<number>;
     specialRequest: Signal<string>;
     lineItem: Signal<LineItem>;
+    selectedVariant: Signal<Variant | undefined>;
+    selectedModifiers: Signal<Record<string, Array<string>>>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -21,6 +25,10 @@ export interface ItemServiceAPI {
     updateQuantity: (quantity: number) => void;
     /** Function to update the special request of the item */
     updateSpecialRequest: (specialRequest: string) => void;
+    /** Function to update the selected variant of the item */
+    updateSelectedVariant: (variant: Variant) => void;
+    /** Function to toggle a modifier instance in a specific group */
+    toggleModifier: (modifierGroupId: string, modifierId: string, singleSelect?: boolean) => void;
 }
 /**
  * Service definition for the Item service.
@@ -41,7 +49,7 @@ export declare const ItemServiceDefinition: string & {
  */
 export interface ItemServiceConfig {
     /** The initial item data to configure the service with */
-    item?: items.Item;
+    item?: EnhancedItem;
     itemId?: string;
     operationId?: string;
 }
@@ -149,6 +157,7 @@ export interface NotFoundItemServiceConfigResult {
  * ```
  */
 export declare function loadItemServiceConfig({ item, operationId, }: {
-    item: any;
+    item: EnhancedItem;
     operationId: string;
 }): ItemServiceConfig;
+export {};

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

@@ -49,6 +49,17 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const quantity = signalsService.signal(1);
     const specialRequest = signalsService.signal('');
     const lineItem = signalsService.signal({});
+    const priceVariants = config.item?.priceVariants || [];
+    const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    const selectedVariant = signalsService.signal(initialVariant);
+    const modifierGroups = config.item?.modifierGroups || [];
+    const initialSelectedModifiers = {};
+    modifierGroups.forEach((group) => {
+        if (group._id) {
+            initialSelectedModifiers[group._id] = [];
+        }
+    });
+    const selectedModifiers = signalsService.signal(initialSelectedModifiers);
     if (config.item) {
         console.log('config.item', config.item);
         lineItem.set({
@@ -89,15 +100,53 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             },
         });
     };
+    const updateSelectedVariant = (variant) => {
+        selectedVariant.set(variant);
+    };
+    const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        const groupModifierIds = currentSelectedModifiers[modifierGroupId] || [];
+        // Check if this modifier is already selected
+        const isModifierSelected = groupModifierIds.includes(modifierId);
+        if (singleSelect) {
+            // Single select behavior: select the modifier, replacing any existing selection
+            selectedModifiers.set({
+                ...currentSelectedModifiers,
+                [modifierGroupId]: [modifierId],
+            });
+        }
+        else {
+            // Multi-select behavior: toggle the modifier
+            if (isModifierSelected) {
+                // Remove the modifier if it exists
+                const updatedModifierIds = groupModifierIds.filter((id) => id !== modifierId);
+                selectedModifiers.set({
+                    ...currentSelectedModifiers,
+                    [modifierGroupId]: updatedModifierIds,
+                });
+            }
+            else {
+                // Add the modifier to the existing selection
+                selectedModifiers.set({
+                    ...currentSelectedModifiers,
+                    [modifierGroupId]: [...groupModifierIds, modifierId],
+                });
+            }
+        }
+    };
     return {
         item,
         quantity,
         updateQuantity,
         updateSpecialRequest,
+        updateSelectedVariant,
+        toggleModifier,
         isLoading,
         error,
         specialRequest,
         lineItem,
+        selectedVariant,
+        selectedModifiers,
     };
 });
 /**

package/dist/react/ItemDetails.d.ts

@@ -3,6 +3,7 @@ import { Commerce } from '@wix/ecom/components';
 import { type LineItem } from '@wix/ecom/services';
 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';
 /**
  * Root component for menu item display and interaction.
  * Provides context for all menu item-related components like name, price, description, image, etc.
@@ -46,36 +47,6 @@ export interface ItemDetailsNameProps {
     className?: string;
 }
 export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item image with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Image />
- * <ItemDetails.Image asChild>
- *   <img className="rounded" />
- * </ItemDetails.Image>
- * ```
- */
-export interface ItemDetailsImageProps {
-    asChild?: boolean;
-    /**
-     * Custom render function when using asChild.
-     * Receives an object with:
-     * - hasImage: boolean - whether the item has an image
-     * - image: string - the actual image element (WixMediaImage)
-     * - altText: string - the alt text for the image
-     */
-    children?: (props: {
-        hasImage: boolean;
-        image?: string;
-        altText: string;
-    }) => React.ReactNode;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Image: React.ForwardRefExoticComponent<ItemDetailsImageProps & React.RefAttributes<HTMLElement>>;
 /**
  * Displays the item price with customizable rendering.
  *
@@ -113,52 +84,80 @@ export interface ItemDetailsDescriptionProps {
 }
 export declare const Description: React.ForwardRefExoticComponent<ItemDetailsDescriptionProps & React.RefAttributes<HTMLElement>>;
 /**
- * Wrapper component for Item.LabelsRepeater.
- * Renders the labels for the item using the headless component.
+ * Wrapper component for CoreItemDetails.ModifierComponent.
+ * Renders a single modifier with checkbox functionality.
  *
  * @component
  * @example
  * ```tsx
- * <ItemDetails.Labels>
- *   {(label) => <span>{label.name}</span>}
- * </ItemDetails.Labels>
+ * <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 ItemDetailsLabelsProps {
+export interface ItemDetailsModifiersSingleSelectProps {
     children?: AsChildChildren<{
-        label: string;
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
     }>;
     className?: string;
     asChild?: boolean;
-    iconClassName?: string;
-    nameClassName?: string;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
 }
-export declare const Labels: React.ForwardRefExoticComponent<ItemDetailsLabelsProps & React.RefAttributes<HTMLElement>>;
-/**
- * Wrapper component for Item.ModifierGroupsRepeater.
- * Renders the modifier groups for the item using the headless component.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.ModifierGroups>
- *   {(modifierGroup) => <span>{modifierGroup.name}</span>}
- * </ItemDetails.ModifierGroups>
- * ```
- */
-export interface ItemDetailsModifierGroupsProps {
+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<{
-        modifierGroup: any;
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
     }>;
     className?: string;
     asChild?: boolean;
     modifierNameClassName?: string;
     modifierPriceClassName?: string;
 }
-export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetailsModifierGroupsProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
- * Wrapper component for Item.VariantsRepeater.
- * Renders the variants for the item using the headless component.
+ * Wrapper component for CoreItemDetails.VariantsComponent.
+ * Renders the variants for the item using Radix UI RadioGroup.
  *
  * @component
  * @example
@@ -170,12 +169,17 @@ export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetails
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
-        variant: any;
+        variant: EnhancedVariant;
+        variants: EnhancedVariant[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
     }>;
     className?: string;
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 export interface AddToCartActionProps {

package/dist/react/ItemDetails.js

@@ -3,7 +3,9 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
-import { Item, Label, Modifier, ModifierGroup, Variant, } from '@wix/restaurants/components';
+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 * as CoreItemDetails from './core/ItemDetails.js';
 var TestIds;
 (function (TestIds) {
@@ -14,9 +16,10 @@ var TestIds;
     TestIds["itemAddToCart"] = "item-add-to-cart";
     TestIds["itemSpecialRequest"] = "item-special-request";
     TestIds["itemLabels"] = "item-labels";
-    TestIds["itemModifierGroups"] = "item-modifier-groups";
     TestIds["itemVariants"] = "item-variants";
+    TestIds["itemModifier"] = "item-modifier";
 })(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 }) }));
 };
@@ -24,10 +27,6 @@ export const Name = React.forwardRef(({ asChild, children, className, ...rest },
     return (_jsx(Item.Name, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemName, ...rest, children: children }));
 });
 Name.displayName = 'ItemDetails.Name';
-export const Image = React.forwardRef(({ asChild, children, className, ...rest }) => {
-    return (_jsx(Item.Image, { asChild: asChild, className: className, "data-testid": TestIds.itemImage, ...rest, children: children }));
-});
-Image.displayName = 'ItemDetails.Image';
 export const Price = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     return (_jsx(Item.Price, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemPrice, ...rest }));
 });
@@ -36,18 +35,59 @@ export const Description = React.forwardRef(({ asChild, className, ...rest }, re
     return (_jsx(Item.Description, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemDescription, ...rest }));
 });
 Description.displayName = 'ItemDetails.Description';
-export const Labels = React.forwardRef(({ children, className, asChild, iconClassName, nameClassName, ...rest }) => {
-    return (_jsx(Item.LabelsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemLabels, className: className, customElement: children, children: [_jsx(Label.Icon, { className: iconClassName }), _jsx(Label.Name, { className: nameClassName })] }) }));
+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 }) }) }) }));
+        } }));
 });
-Labels.displayName = 'ItemDetails.Labels';
-export const ModifierGroups = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(Item.ModifierGroupsRepeater, { ...rest, children: _jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifierGroups, className: className, customElement: children, children: _jsxs(ModifierGroup.ModifiersRepeater, { children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: 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 }) }) }));
+        } }));
 });
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, ...rest }) => {
-    return (_jsx(Item.VariantsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, children: [_jsx(Variant.Name, { className: variantNameClassName }), _jsx(Variant.Price, { className: variantPriceClassName })] }) }));
+ModifiersMultiSelect.displayName = 'ItemDetails.ModifiersMultiSelect';
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
+    return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
+            if (!hasVariants) {
+                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 ||
+                                        variant.priceInfo?.price ||
+                                        '' })] }) }, variant._id))) }) }));
+        } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
-ModifierGroups.displayName = 'ItemDetails.ModifierGroups';
 /**
  * Add to Cart button for the menu item.
  * Triggers the action to add the selected item (and its modifiers/variants) to the cart.

package/dist/react/core/ClickableItem.js

@@ -1,4 +1,4 @@
-import { useItemContext, useMenuContext, useSectionContext, } from '@wix/restaurants/components';
+import { useItemContext, useMenuContext, useSectionContext, } from '@wix/headless-restaurants-menus/react';
 import { useService } from '@wix/services-manager-react';
 import { OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
 // import { OLOSettingsServiceDefinition } from "../../services/OLOSettingsService";

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

@@ -1,6 +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';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -8,20 +9,6 @@ interface ItemDetailsRootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: React.FC<ItemDetailsRootProps>;
-interface ItemDetailsModifiersRepeaterProps {
-    children: (props: {
-        modifiers: [];
-        hasModifiers: boolean;
-    }) => React.ReactNode;
-}
-export declare const ModifiersRepeater: React.FC<ItemDetailsModifiersRepeaterProps>;
-interface ItemDetailsVariantsRepeaterProps {
-    children: (props: {
-        variants: [];
-        hasVariants: boolean;
-    }) => React.ReactNode;
-}
-export declare const VariantsRepeater: React.FC<ItemDetailsVariantsRepeaterProps>;
 interface ItemDetailsSpecialRequestProps {
     children: (props: {
         value: string;
@@ -47,4 +34,24 @@ interface ItemDetailsQuantityProps {
     }) => React.ReactNode;
 }
 export declare const QuantityComponent: React.FC<ItemDetailsQuantityProps>;
+interface ItemDetailsVariantsProps {
+    children: (props: {
+        variants: EnhancedVariant[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
+        selectedVariant?: EnhancedVariant;
+    }) => 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>;
 export {};

package/dist/react/core/ItemDetails.js

@@ -4,6 +4,7 @@ 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';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -19,22 +20,6 @@ export const Root = ({ children, itemDetailsServiceConfig, }) => {
     }
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
 };
-export const ModifiersRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    const item = service.item?.get();
-    // TODO: Check if modifiers exist on item type - might be in a different property
-    const modifiers = item?.modifiers || [];
-    const hasModifiers = modifiers.length > 0;
-    return children({ modifiers, hasModifiers });
-};
-export const VariantsRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    const item = service.item?.get();
-    // TODO: Check if variants exist on item type - might be in a different property
-    const variants = item?.variants || [];
-    const hasVariants = variants.length > 0;
-    return children({ variants, hasVariants });
-};
 export const SpecialRequest = ({ children, }) => {
     const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
@@ -77,3 +62,49 @@ export const QuantityComponent = ({ children, }) => {
         onValueChange,
     });
 };
+export const VariantsComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { item } = useItemContext();
+    const selectedVariant = service.selectedVariant?.get?.();
+    // Get variants from item context
+    const variants = item?.priceVariants || [];
+    const hasVariants = variants.length > 0;
+    const selectedVariantId = selectedVariant?._id ?? undefined;
+    const onVariantChange = (variantId) => {
+        const variant = variants.find((v) => v._id === variantId);
+        if (variant) {
+            service.updateSelectedVariant?.(variant);
+        }
+    };
+    return children({
+        variants,
+        hasVariants,
+        selectedVariantId,
+        onVariantChange,
+        selectedVariant,
+    });
+};
+export const ModifiersComponent = ({ children, singleSelect, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { modifierGroup } = useModifierGroupContext();
+    const selectedModifiers = service.selectedModifiers?.get?.() ?? {};
+    // Get selected modifier IDs for this group
+    const groupId = modifierGroup._id;
+    const groupSelectedModifierIds = groupId
+        ? selectedModifiers[groupId] || []
+        : [];
+    const onToggle = (modifierId) => {
+        if (groupId) {
+            service.toggleModifier?.(groupId, modifierId, singleSelect);
+        }
+    };
+    return children({
+        selectedModifierIds: groupSelectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers: modifierGroup.modifiers.map((modifier, index) => ({
+            ...modifier,
+            _id: `${modifier._id}~${index}`,
+        })),
+    });
+};

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

@@ -1,6 +1,8 @@
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import * as items from '@wix/auto_sdk_restaurants_items';
 import { type LineItem } from '@wix/ecom/services';
+import { itemVariants } from '@wix/restaurants';
+import type { EnhancedItem } from '@wix/headless-restaurants-menus/services';
+type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
  * This service handles loading and managing a single item's data, loading state, and errors.
@@ -9,10 +11,12 @@ import { type LineItem } from '@wix/ecom/services';
  */
 export interface ItemServiceAPI {
     /** Reactive signal containing the current item data */
-    item?: Signal<items.Item | undefined>;
+    item?: Signal<EnhancedItem | undefined>;
     quantity: Signal<number>;
     specialRequest: Signal<string>;
     lineItem: Signal<LineItem>;
+    selectedVariant: Signal<Variant | undefined>;
+    selectedModifiers: Signal<Record<string, Array<string>>>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -21,6 +25,10 @@ export interface ItemServiceAPI {
     updateQuantity: (quantity: number) => void;
     /** Function to update the special request of the item */
     updateSpecialRequest: (specialRequest: string) => void;
+    /** Function to update the selected variant of the item */
+    updateSelectedVariant: (variant: Variant) => void;
+    /** Function to toggle a modifier instance in a specific group */
+    toggleModifier: (modifierGroupId: string, modifierId: string, singleSelect?: boolean) => void;
 }
 /**
  * Service definition for the Item service.
@@ -41,7 +49,7 @@ export declare const ItemServiceDefinition: string & {
  */
 export interface ItemServiceConfig {
     /** The initial item data to configure the service with */
-    item?: items.Item;
+    item?: EnhancedItem;
     itemId?: string;
     operationId?: string;
 }
@@ -149,6 +157,7 @@ export interface NotFoundItemServiceConfigResult {
  * ```
  */
 export declare function loadItemServiceConfig({ item, operationId, }: {
-    item: any;
+    item: EnhancedItem;
     operationId: string;
 }): ItemServiceConfig;
+export {};

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

@@ -49,6 +49,17 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const quantity = signalsService.signal(1);
     const specialRequest = signalsService.signal('');
     const lineItem = signalsService.signal({});
+    const priceVariants = config.item?.priceVariants || [];
+    const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    const selectedVariant = signalsService.signal(initialVariant);
+    const modifierGroups = config.item?.modifierGroups || [];
+    const initialSelectedModifiers = {};
+    modifierGroups.forEach((group) => {
+        if (group._id) {
+            initialSelectedModifiers[group._id] = [];
+        }
+    });
+    const selectedModifiers = signalsService.signal(initialSelectedModifiers);
     if (config.item) {
         console.log('config.item', config.item);
         lineItem.set({
@@ -89,15 +100,53 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             },
         });
     };
+    const updateSelectedVariant = (variant) => {
+        selectedVariant.set(variant);
+    };
+    const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        const groupModifierIds = currentSelectedModifiers[modifierGroupId] || [];
+        // Check if this modifier is already selected
+        const isModifierSelected = groupModifierIds.includes(modifierId);
+        if (singleSelect) {
+            // Single select behavior: select the modifier, replacing any existing selection
+            selectedModifiers.set({
+                ...currentSelectedModifiers,
+                [modifierGroupId]: [modifierId],
+            });
+        }
+        else {
+            // Multi-select behavior: toggle the modifier
+            if (isModifierSelected) {
+                // Remove the modifier if it exists
+                const updatedModifierIds = groupModifierIds.filter((id) => id !== modifierId);
+                selectedModifiers.set({
+                    ...currentSelectedModifiers,
+                    [modifierGroupId]: updatedModifierIds,
+                });
+            }
+            else {
+                // Add the modifier to the existing selection
+                selectedModifiers.set({
+                    ...currentSelectedModifiers,
+                    [modifierGroupId]: [...groupModifierIds, modifierId],
+                });
+            }
+        }
+    };
     return {
         item,
         quantity,
         updateQuantity,
         updateSpecialRequest,
+        updateSelectedVariant,
+        toggleModifier,
         isLoading,
         error,
         specialRequest,
         lineItem,
+        selectedVariant,
+        selectedModifiers,
     };
 });
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -48,9 +48,12 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.1.0",
     "@wix/auto_sdk_restaurants_items": "^1.0.48",
     "@wix/headless-media": "0.0.15",
+    "@wix/headless-restaurants-menus": "^0.0.11",
     "@wix/headless-utils": "^0.0.4",
     "@wix/redirects": "^1.0.0",
     "@wix/restaurants": "^1.0.396",