import React from 'react';
import type { Menu, Location } from '../services/types.js';
import { type AsChildChildren } from '@wix/headless-utils/react';
import { MenusServiceConfig } from '../services/index.js';
export interface MenusRootProps {
    children: React.ReactNode;
    config: MenusServiceConfig;
}
export interface MenusProps {
    children: (props: {
        menus: Menu[];
    }) => React.ReactNode;
}
export interface MenusRepeaterProps {
    children: React.ReactNode;
}
export declare function Root(props: MenusRootProps): import("react/jsx-runtime").JSX.Element;
export interface MenuSelectorProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        menus: Menu[];
        selectedMenu: Menu | null;
        onMenuSelect: (menu: Menu) => void;
    }>;
    /** CSS classes to apply to the tabs root element */
    className?: string;
    /** CSS classes to apply to the tabs list element */
    listClassName?: string;
    /** CSS classes to apply to each tab trigger element */
    triggerClassName?: string;
    /** Text for the "all" option */
    allText?: string;
    /** Whether to show the "all" option */
    showAll?: boolean;
}
/**
 * Menu selector component that provides menu selection functionality using tabs.
 * Uses the core MenuSelector component and wraps it with AsChildSlot for flexible rendering.
 * Only renders when there are more than 1 real menu available (excluding "All" option).
 *
 * @component
 * @example
 * ```tsx
 * // Default usage with custom styling (only shows if more than 1 real menu)
 * <Menus.MenuSelector
 *   className="w-full"
 *   listClassName="flex space-x-1"
 *   triggerClassName="px-4 py-2 rounded-md hover:bg-gray-100 data-[state=active]:bg-blue-500 data-[state=active]:text-white"
 * />
 *
 * // Conditional rendering based on menu count
 * {menus.filter(menu => menu._id !== 'all').length > 1 && (
 *   <Menus.MenuSelector className="mb-4" />
 * )}
 *
 * // asChild with custom tabs implementation
 * <Menus.MenuSelector asChild>
 *   {React.forwardRef(({menus, selectedMenu, onMenuSelect, ...props}, ref) => (
 *     <Tabs.Root ref={ref} {...props} value={selectedMenu?._id || ''} onValueChange={(value) => {
 *       const menu = menus.find(m => m._id === value);
 *       if (menu) onMenuSelect(menu);
 *     }}>
 *       <Tabs.List className="flex space-x-1">
 *         {menus.map(menu => (
 *           <Tabs.Trigger key={menu._id} value={menu._id} className="px-4 py-2">
 *             {menu.name}
 *           </Tabs.Trigger>
 *         ))}
 *       </Tabs.List>
 *     </Tabs.Root>
 *   ))}
 * </Menus.MenuSelector>
 *
 * // Custom render function
 * <Menus.MenuSelector>
 *   {({ menus, selectedMenu, onMenuSelect }) => (
 *     <Tabs.Root value={selectedMenu?._id || ''} onValueChange={(value) => {
 *       const menu = menus.find(m => m._id === value);
 *       if (menu) onMenuSelect(menu);
 *     }}>
 *       <Tabs.List className="flex space-x-1">
 *         {menus.map(menu => (
 *           <Tabs.Trigger key={menu._id} value={menu._id} className="px-4 py-2">
 *             {menu.name}
 *           </Tabs.Trigger>
 *         ))}
 *       </Tabs.List>
 *     </Tabs.Root>
 *   )}
 * </Menus.MenuSelector>
 * ```
 */
export declare const MenuSelector: React.ForwardRefExoticComponent<MenuSelectorProps & React.RefAttributes<HTMLElement>>;
export declare const MenusRepeater: React.ForwardRefExoticComponent<MenusRepeaterProps & React.RefAttributes<HTMLElement>>;
export interface LoadingProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        loading: boolean;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** Text to display when loading. If not provided, component renders nothing by default */
    loadingText?: string;
}
export interface ErrorProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        error: string | null;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** Prefix to prepend to error message. If not provided, only the error message is shown */
    errorPrefix?: string;
}
/**
 * Displays loading state with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Menus.Loading className="text-center" />
 *
 * // asChild with primitive
 * <Menus.Loading asChild>
 *   <p className="text-center" />
 * </Menus.Loading>
 *
 * // asChild with react component
 * <Menus.Loading asChild>
 *   {React.forwardRef(({loading, ...props}, ref) => (
 *     <p ref={ref} {...props} className="text-center">
 *       {loading ? "Loading..." : null}
 *     </p>
 *   ))}
 * </Menus.Loading>
 *
 * // With custom loading text
 * <Menus.Loading loadingText="Please wait..." className="text-center" />
 * ```
 */
export declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLElement>>;
/**
 * Displays error state with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Menus.Error className="text-red-600" />
 *
 * // asChild with primitive
 * <Menus.Error asChild>
 *   <p className="text-red-600" />
 * </Menus.Error>
 *
 * // asChild with react component
 * <Menus.Error asChild>
 *   {React.forwardRef(({error, ...props}, ref) => (
 *     <p ref={ref} {...props} className="text-red-600">
 *       {error ? `Error: ${error}` : null}
 *     </p>
 *   ))}
 * </Menus.Error>
 *
 * // With custom error prefix
 * <Menus.Error errorPrefix="Error: " className="text-red-600" />
 *
 * // Without prefix (only error message)
 * <Menus.Error className="text-red-600" />
 * ```
 */
export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
export interface LocationSelectorProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        locations: Location[];
        selectedLocation: string | null;
        onLocationSelect: (location: string) => void;
    }>;
    /** CSS classes to apply to the root container element */
    className?: string;
    /** CSS classes to apply to the select trigger element */
    triggerClassName?: string;
    /** CSS classes to apply to the select content element */
    contentClassName?: string;
    /** CSS classes to apply to the select viewport element */
    viewportClassName?: string;
    /** CSS classes to apply to the option elements */
    optionClassName?: string;
    /** CSS classes to apply to the scroll up button */
    scrollUpButtonClassName?: string;
    /** CSS classes to apply to the scroll down button */
    scrollDownButtonClassName?: string;
    /** Placeholder text for the select */
    placeholder?: string;
    /** Text for the "all" option */
    allText?: string;
    /** Whether to show the "all" option */
    showAll?: boolean;
}
/**
 * Location selector component that provides location selection functionality using a dropdown.
 * Uses the core LocationSelector component and wraps it with AsChildSlot for flexible rendering.
 * Only renders when there are more than 1 real location available (excluding "All" option).
 *
 * @component
 * @example
 * ```tsx
 * // Default usage with custom styling (only shows if more than 1 real location)
 * <Menus.LocationSelector
 *   className="w-full"
 *   triggerClassName="w-full p-2 border rounded-md bg-white"
 *   contentClassName="bg-white border rounded-md shadow-lg"
 *   viewportClassName="p-1"
 *   optionClassName="p-2 hover:bg-gray-100 cursor-pointer"
 *   scrollUpButtonClassName="p-2 text-gray-500"
 *   scrollDownButtonClassName="p-2 text-gray-500"
 *   placeholder="Choose your location"
 * />
 *
 * // Conditional rendering based on location count
 * {locations.filter(location => location.id !== 'all').length > 1 && (
 *   <Menus.LocationSelector
 *     className="mb-4"
 *     triggerClassName="w-full p-3 border-2 border-blue-500 rounded-lg"
 *     contentClassName="bg-blue-50 border-2 border-blue-500 rounded-lg"
 *     placeholder="Pick a location"
 *   />
 * )}
 *
 * // asChild with custom Radix Select implementation
 * <Menus.LocationSelector asChild>
 *   {React.forwardRef(({locations, selectedLocation, onLocationSelect, ...props}, ref) => (
 *     <Select.Root
 *       ref={ref}
 *       {...props}
 *       value={selectedLocation || ''}
 *       onValueChange={onLocationSelect}
 *     >
 *       <Select.Trigger>
 *         <Select.Value placeholder="Select a location" />
 *         <Select.Icon />
 *       </Select.Trigger>
 *       <Select.Portal>
 *         <Select.Content>
 *           <Select.Viewport>
 *             {locations.map(location => (
 *               <Select.Item key={location.id} value={location.id}>
 *                 <Select.ItemText>{location.name}</Select.ItemText>
 *               </Select.Item>
 *             ))}
 *           </Select.Viewport>
 *         </Select.Content>
 *       </Select.Portal>
 *     </Select.Root>
 *   ))}
 * </Menus.LocationSelector>
 *
 * // Custom render function
 * <Menus.LocationSelector>
 *   {({ locations, selectedLocation, onLocationSelect }) => (
 *     <Select.Root
 *       value={selectedLocation || ''}
 *       onValueChange={onLocationSelect}
 *     >
 *       <Select.Trigger>
 *         <Select.Value placeholder="Select a location" />
 *         <Select.Icon />
 *       </Select.Trigger>
 *       <Select.Portal>
 *         <Select.Content>
 *           <Select.Viewport>
 *             {locations.map(location => (
 *               <Select.Item key={location.id} value={location.id}>
 *                 <Select.ItemText>{location.name}</Select.ItemText>
 *               </Select.Item>
 *             ))}
 *           </Select.Viewport>
 *         </Select.Content>
 *       </Select.Portal>
 *     </Select.Root>
 *   )}
 * </Menus.LocationSelector>
 * ```
 */
export declare const LocationSelector: React.ForwardRefExoticComponent<LocationSelectorProps & React.RefAttributes<HTMLElement>>;
/**
 * Menus namespace containing all menus components
 * following the compound component pattern: MenusComponent.Root, MenusComponent.MenusRepeater, MenusComponent.Loading, etc.
 */
export declare const MenusComponent: {
    /** Menus root component */
    readonly Root: typeof Root;
    /** Menu selector component */
    readonly MenuSelector: React.ForwardRefExoticComponent<MenuSelectorProps & React.RefAttributes<HTMLElement>>;
    /** Location selector component */
    readonly LocationSelector: React.ForwardRefExoticComponent<LocationSelectorProps & React.RefAttributes<HTMLElement>>;
    /** Menus repeater component */
    readonly MenusRepeater: React.ForwardRefExoticComponent<MenusRepeaterProps & React.RefAttributes<HTMLElement>>;
    /** Menus loading component */
    readonly Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLElement>>;
    /** Menus error component */
    readonly Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
};