@wix/headless-restaurants-olo 0.0.0

package/dist/react/ItemDetails.d.ts

@@ -0,0 +1,279 @@
+import React from 'react';
+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';
+import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
+/**
+ * Root component for menu item display and interaction.
+ * Provides context for all menu item-related components like name, price, description, image, etc.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails>
+ *   <ItemDetailsImage src="wix:image://v1/abc123.jpg" alt="Menu item" />
+ *   <ItemDetailsName />
+ *   <ItemDetailsPrice />
+ *   <ItemDetailsDescription />
+ * </ItemDetails>
+ * ```
+ */
+export interface RootProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+    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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Variants>
+ *   {(variant) => <span>{variant.name}</span>}
+ * </ItemDetails.Variants>
+ * ```
+ */
+export interface ItemDetailsVariantsProps {
+    children?: AsChildChildren<{
+        variants: EnhancedVariant[];
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    variantNameClassName?: string;
+    variantPriceClassName?: string;
+}
+export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
+export interface AddToCartActionProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Text label for the button */
+    label: string;
+    /** Custom render function when using asChild */
+    lineItems: LineItem[];
+    /** CSS classes to apply to the button */
+    className?: string;
+    /** Content to display when loading */
+    loadingState?: string | React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Add to Cart button for the menu item.
+ * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails>
+ *   <AddToCart
+ *     label="Add to Cart"
+ *     lineItems={[{ catalogReference: { ... }, quantity: 1 }]}
+ *   />
+ * </ItemDetails>
+ * ```
+ */
+export declare const AddToCart: React.ForwardRefExoticComponent<AddToCartActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Multi-line text input component for special requests or instructions.
+ * Provides a textarea for customers to add custom notes or modifications.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails>
+ *   <SpecialRequest
+ *     placeholder="Any special requests or dietary restrictions?"
+ *     maxLength={200}
+ *     className="mt-4"
+ *   />
+ * </ItemDetails>
+ * ```
+ */
+export interface SpecialRequestProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        description: string;
+    }>;
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Number of visible text lines */
+    rows?: number;
+    /** CSS classes to apply to the textarea */
+    className?: string;
+    labelClassName?: string;
+    /** Label text for the input */
+    label?: string;
+    /** Whether to show character count */
+    showCharCount?: boolean;
+}
+/**
+ * AddToCartButton component that uses Commerce.Actions.AddToCart with AsChildSlot,
+ * and gets the lineItem from CoreItemDetails.LineItemComponent.
+ *
+ * Usage:
+ * <ItemDetails.AddToCartButton>Add to cart</ItemDetails.AddToCartButton>
+ */
+export interface AddToCartButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Commerce.Actions.AddToCart>, 'lineItems'> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    label?: string;
+    onClick?: () => void;
+}
+export interface ItemDetailsQuantityProps {
+    children: React.ReactNode;
+}
+export declare const AddToCartButton: React.FC<AddToCartButtonProps>;
+export declare const Quantity: React.FC<ItemDetailsQuantityProps>;
+export declare const SpecialRequest: React.ForwardRefExoticComponent<SpecialRequestProps & React.RefAttributes<never>>;
+export interface ItemDetailsAvailabilityProps {
+    asChild?: boolean;
+    textClassName?: string;
+    buttonClassName?: string;
+    availabilityStatusMap: AvailabilityStatusMap;
+    children: (props: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+        availabilityAction?: () => void;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.ForwardRefExoticComponent<ItemDetailsAvailabilityProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ItemDetails.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 * 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';
+import { AvailabilityStatus, } from '../services/common-types.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["itemName"] = "item-name";
+    TestIds["itemPrice"] = "item-price";
+    TestIds["itemDescription"] = "item-description";
+    TestIds["itemImage"] = "item-image";
+    TestIds["itemAddToCart"] = "item-add-to-cart";
+    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) => {
+    return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
+            if (!hasVariants) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, customElementProps: {
+                    variants,
+                    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';
+/**
+ * Add to Cart button for the menu item.
+ * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails>
+ *   <AddToCart
+ *     label="Add to Cart"
+ *     lineItems={[{ catalogReference: { ... }, quantity: 1 }]}
+ *   />
+ * </ItemDetails>
+ * ```
+ */
+export const AddToCart = React.forwardRef(({ lineItems, className, label, ...props }, ref) => {
+    return (_jsx(Commerce.Actions.AddToCart, { ref: ref, asChild: false, label: label, className: className, lineItems: lineItems, children: props.children }));
+});
+AddToCart.displayName = 'AddToCart';
+export const AddToCartButton = ({ asChild = false, children, className, onClick, label = 'Add to cart', ...props }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { children: ({ lineItem }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
+                onClick,
+            }, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children }) })) }));
+};
+export const Quantity = ({ children }) => {
+    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));
+};
+Quantity.displayName = 'Quantity';
+export const SpecialRequest = React.forwardRef(({ className, labelClassName, placeholder = 'Any special requests or dietary restrictions?', maxLength = 200, rows = 3, label = 'Special Requests', asChild, children, ...props }, ref) => {
+    return (_jsx(CoreItemDetails.SpecialRequest, { children: ({ value, onChange, }) => (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, className: className, onChange: onChange, "data-testid": TestIds.itemSpecialRequest, customElement: children, customElementProps: { label, value }, content: value, ...props, children: [label && _jsx("label", { className: labelClassName, children: label }), _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, maxLength: maxLength, rows: rows, className: className, children: value })] })) }));
+});
+SpecialRequest.displayName = 'SpecialRequest';
+export const AvailabilityComponent = React.forwardRef(({ asChild, children, textClassName, buttonClassName, availabilityStatusMap, ...rest }, ref) => {
+    return (_jsx(CoreItemDetails.AvailabilityComponent, { availabilityStatusMap: availabilityStatusMap, children: ({ availabilityStatus, availabilityAction, availabilityStatusText, availabilityStatusButtonText, }) => {
+            if (availabilityStatus === AvailabilityStatus.AVAILABLE) {
+                return null;
+            }
+            return (_jsxs(AsChildSlot, { asChild: asChild, "data-testid": TestIds.itemAvailability, customElement: children, customElementProps: {
+                    availabilityStatus,
+                    availabilityStatusText,
+                    availabilityStatusButtonText,
+                    availabilityAction,
+                }, ref: ref, ...rest, children: [_jsx("p", { className: textClassName, children: availabilityStatusText }), availabilityStatusButtonText && availabilityAction && (_jsx("button", { className: buttonClassName, onClick: availabilityAction, children: availabilityStatusButtonText }))] }));
+        } }));
+});
+AvailabilityComponent.displayName = 'AvailabilityComponent';

package/dist/react/OLO.d.ts

@@ -0,0 +1,179 @@
+import React from 'react';
+import { ItemServiceConfig } from '../services/item-details-service.js';
+interface OLORootProps {
+    /** The ID of the item to load */
+    itemId?: string;
+    /** Pre-loaded item service config (optional) */
+    itemServiceConfig?: any;
+    /** Pre-loaded OLO settings service config (optional) */
+    oloSettingsServiceConfig?: any;
+    /** Children render prop that receives the service state */
+    children: React.ReactNode;
+}
+/**
+ * Root headless component for OLO service management
+ * Wraps CoreOLO.Root and provides service state to children
+ *
+ * @example
+ * ```tsx
+ * <OLO.Root itemId="item-123">
+ *   {({ isLoading, hasServices, error, retry }) => (
+ *     isLoading ? (
+ *       <LoadingSpinner />
+ *     ) : error ? (
+ *       <ErrorMessage error={error} onRetry={retry} />
+ *     ) : hasServices ? (
+ *       <ItemDetailsComponents />
+ *     ) : null
+ *   )}
+ * </OLO.Root>
+ * ```
+ */
+export declare const Root: React.FC<OLORootProps>;
+interface OLOProviderProps {
+    /** The ID of the item to load */
+    itemId?: string;
+    /** Pre-loaded configurations (optional) */
+    configs?: {
+        itemServiceConfig?: ItemServiceConfig;
+    };
+    /** Loading component to show while services are initializing */
+    loading?: React.ReactNode;
+    /** Error component to show if service initialization fails */
+    error?: (props: {
+        error: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /** Children that will receive the services context */
+    children: React.ReactNode;
+}
+/**
+ * Convenience provider that handles loading and error states automatically
+ *
+ * @example
+ * ```tsx
+ * <OLO.Provider
+ *   itemId="item-123"
+ *   loading={<Spinner />}
+ *   error={({ error, retry }) => <ErrorBanner message={error} onRetry={retry} />}
+ * >
+ *   <ItemDetailsComponents />
+ * </OLO.Provider>
+ * ```
+ */
+export declare const Provider: React.FC<OLOProviderProps>;
+interface OLOItemDetailsProps {
+    /** The ID of the item to load */
+    itemId: string;
+    /** Pre-loaded configurations (optional) */
+    configs?: {
+        itemServiceConfig?: ItemServiceConfig;
+        cartServiceConfig?: any;
+    };
+    /** Custom loading component */
+    loading?: React.ReactNode;
+    /** Custom error component */
+    error?: (props: {
+        error: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /** Custom not found component */
+    notFound?: React.ReactNode;
+    /** Children that will have access to item services */
+    children: React.ReactNode;
+}
+/**
+ * Specialized headless component for item details
+ * Includes item-specific error handling (like 404 not found)
+ *
+ * @example
+ * ```tsx
+ * <OLO.ItemDetails
+ *   itemId="item-123"
+ *   notFound={<NotFoundPage />}
+ * >
+ *   <ItemDetailsUI />
+ * </OLO.ItemDetails>
+ * ```
+ */
+export declare const ItemDetails: React.FC<OLOItemDetailsProps>;
+interface OLOCartProps {
+    /** Pre-loaded cart service config (optional) */
+    cartServiceConfig?: any;
+    /** Loading component */
+    loading?: React.ReactNode;
+    /** Error component */
+    error?: (props: {
+        error: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /** Children that will have access to cart services */
+    children: React.ReactNode;
+}
+/**
+ * Headless component for cart-only functionality
+ * Doesn't load item services, only cart services
+ *
+ * @example
+ * ```tsx
+ * <OLO.Cart>
+ *   <CartComponents />
+ * </OLO.Cart>
+ * ```
+ */
+export declare const Cart: React.FC<OLOCartProps>;
+interface OLOServicesStatusProps {
+    /** The ID of the item to check */
+    itemId?: string;
+    /** Children render prop that receives service status */
+    children: React.ReactNode;
+}
+/**
+ * Headless component for checking service status
+ * Useful for debugging or conditional rendering
+ *
+ * @example
+ * ```tsx
+ * <OLO.ServicesStatus itemId="item-123">
+ *   {({ hasItemService, hasCartService, error }) => (
+ *     <div>
+ *       Item Service: {hasItemService ? '✅' : '❌'}
+ *       Cart Service: {hasCartService ? '✅' : '❌'}
+ *       {error && <div>Error: {error}</div>}
+ *     </div>
+ *   )}
+ * </OLO.ServicesStatus>
+ * ```
+ */
+export declare const ServicesStatus: React.FC<OLOServicesStatusProps>;
+/**
+ * Headless component for Menus service management.
+ * Wraps CoreOLO.Menus and provides render props for UI.
+ *
+ * @example
+ * ```tsx
+ * <OLO.Menus>
+ *   {({ menus, isLoading, error }) => (
+ *     isLoading ? (
+ *       <div>Loading...</div>
+ *     ) : error ? (
+ *       <div className="text-destructive">{error}</div>
+ *     ) : (
+ *       <ul>
+ *         {menus.map(menu => (
+ *           <li key={menu.id} className="text-foreground font-paragraph">{menu.name}</li>
+ *         ))}
+ *       </ul>
+ *     )
+ *   )}
+ * </OLO.Menus>
+ * ```
+ */
+interface OLOMenusProps {
+    /** Optional menu service config */
+    menuServiceConfig?: any;
+    /** Children render prop that receives menus state */
+    children?: React.ReactNode;
+}
+export declare const Menus: React.FC<OLOMenusProps>;
+export {};