* ))}
*
* ```
*/
export declare const Tagline: React.ForwardRefExoticComponent>;
/**
* Props for Service DurationInMinutes component
*/
export interface DurationInMinutesProps extends Omit, 'children'> {
asChild?: boolean;
children?: AsChildChildren<{
duration: number;
}>;
}
/**
* Displays the service duration in minutes (raw number) with customizable rendering.
* Returns the duration as a numeric value representing minutes.
*
* @component
* @example
* ```tsx
* // Default usage - displays raw minutes
*
* ```
*
* @example
* ```tsx
* // asChild with primitive element
*
*
*
* ```
*
* @example
* ```tsx
* // asChild with custom component to format duration
*
* {React.forwardRef(({duration, ...props}, ref) => (
*
* {duration} minutes
*
* ))}
*
* ```
*/
export declare const DurationInMinutes: React.ForwardRefExoticComponent>;
/**
* Props for Service DurationRange component
*/
export interface DurationRangeProps extends Omit, 'children'> {
asChild?: boolean;
children?: AsChildChildren<{
range: DurationRangeData;
}>;
}
/**
* Provides the service's supported session duration range as raw SDK data.
* Renders nothing when the service has fewer than two distinct supported
* durations — use {@link DurationInMinutes} for that case.
*
* The component is intentionally UI-agnostic: it does not pick formatting,
* units, or labels for you. The default render outputs only the raw
* `min - max` numbers (no unit text). Consumers wanting unit-aware UI use
* `asChild` with a custom render and narrow on the SDK `range` payload
* (`range.hourOptions` / `range.dayOptions` / `range.unitType`, or any
* other unit configuration the SDK adds in the future).
*
* @component
* @example
* ```tsx
* // Default usage - displays raw min/max, e.g. "120 - 540" or "2 - 5"
*
* ```
*
* @example
* ```tsx
* // asChild with primitive element
*
*
*
* ```
*
* @example
* ```tsx
* // asChild with custom component - narrow on the SDK range payload to
* // decide unit-specific formatting.
*
* {React.forwardRef(({ range, ...props }, ref) => {
* if (range.hourOptions) {
* const { minDurationInMinutes: min, maxDurationInMinutes: max } =
* range.hourOptions;
* return (
*
* {min}-{max} min
*
* );
* }
* if (range.dayOptions) {
* const { minDurationInDays: min, maxDurationInDays: max } =
* range.dayOptions;
* return (
*
* {min}-{max} days
*
* );
* }
* return ;
* })}
*
* ```
*/
export declare const DurationRange: React.ForwardRefExoticComponent>;
/**
* Props for Service Type component
*/
export interface TypeProps extends Omit, 'children'> {
asChild?: boolean;
children?: AsChildChildren<{
type: string;
}>;
}
/**
* Displays the service type (APPOINTMENT, CLASS, COURSE, etc.) with customizable rendering.
*
* @component
* @example
* ```tsx
* // Default usage
*
* ```
*
* @example
* ```tsx
* // asChild with badge styling
*
*
*
* ```
*
* @example
* ```tsx
* // asChild with custom component to format type
*
* {React.forwardRef(({type, ...props}, ref) => {
* const label = {
* APPOINTMENT: '1-on-1',
* CLASS: 'Group Class',
* COURSE: 'Course',
* }[type] || type;
* return {label};
* })}
*
* ```
*/
export declare const Type: React.ForwardRefExoticComponent>;
/**
* Props for Service Category component
*/
export interface CategoryProps extends Omit, 'children'> {
asChild?: boolean;
children?: AsChildChildren<{
category: {
name?: string;
_id?: string;
};
}>;
}
/**
* Displays the service category with customizable rendering.
*
* @component
* @example
* ```tsx
* // Default usage
*
* ```
*
* @example
* ```tsx
* // asChild with link styling
*
*
*
* ```
*
* @example
* ```tsx
* // asChild with custom component accessing category data
*
* {React.forwardRef(({category, ...props}, ref) => (
*
* {category.name}
*
* ))}
*
* ```
*/
export declare const Category: React.ForwardRefExoticComponent>;
/**
* Type for location
*/
type LocationType = NonNullable[number] & {
id: string;
};
/**
* Props for Service Locations component (Container Level)
*/
export interface LocationsProps {
asChild?: boolean;
children?: React.ReactNode;
className?: string;
}
/**
* Container for service locations list (Container Level).
* Follows the 3-level List/Options/Repeater pattern.
* Provides context and doesn't render when there are no locations.
* Internally uses LocationList.Root for consistent location handling.
*
* @component
* @example
* ```tsx
* // Basic usage with 3-level pattern
*
* No locations available}>
*
*
*
*
*
*
*
* // With asChild pattern for custom container
*
*
*
*
*
*
*
*
*
* ```
*/
declare const LocationsBase: React.ForwardRefExoticComponent>;
/**
* Props for Service Locations.List component (List Container Level)
*/
export interface LocationsListProps {
children?: React.ReactNode;
emptyState?: React.ReactNode;
className?: string;
}
/**
* List container for locations with empty state support (List Container Level).
* Renders emptyState when no locations, otherwise renders children.
* Internally delegates to LocationList.Locations.
*
* @component
* @example
* ```tsx
* No locations available}>
*
*
* ```
*/
export declare const LocationsList: React.ForwardRefExoticComponent>;
/**
* Render props for LocationRepeater asChild pattern
*/
export interface LocationRepeaterRenderProps {
items: LocationType[];
itemWrapper: (props: {
item: LocationType;
index: number;
children: React.ReactNode;
}) => React.ReactNode;
}
/**
* Props for Service Locations.LocationRepeater component
*/
export interface LocationRepeaterProps {
children?: React.ReactNode;
}
/**
* Repeater component that renders Location.Root for each location.
* Internally delegates to LocationList.LocationRepeater.
* Children are rendered inside each Location.Root context.
*
* @component
* @example
* ```tsx
* // Standard usage - renders Location.Root for each location
*
*
*
*
*
* // With custom styling
*
*
*
*
*
*
*
* ```
*/
export declare const LocationRepeater: React.ForwardRefExoticComponent>;
/**
* Props for Service StaffMembers component (Container Level)
*/
export interface StaffMembersProps {
asChild?: boolean;
children?: React.ReactNode;
className?: string;
}
/**
* Container for service staff members list (Container Level).
* Follows the 3-level List/Options/Repeater pattern.
* Provides context and doesn't render when there are no staff members.
* Internally uses StaffMemberList.Root for consistent staff member handling.
*
* @component
* @example
* ```tsx
* // Basic usage with 3-level pattern
*
* No staff assigned}>
*
*
*
*
*
*
* // With asChild pattern for custom container
*
*
*
*
*
*
*
*
*
* ```
*/
declare const StaffMembersBase: React.ForwardRefExoticComponent>;
/**
* Props for Service StaffMembers.List component (List Container Level)
*/
export interface StaffMembersListProps {
children?: React.ReactNode;
emptyState?: React.ReactNode;
className?: string;
}
/**
* List container for staff members with empty state support (List Container Level).
* Renders emptyState when no staff members, otherwise renders children.
* Internally delegates to StaffMemberList.StaffMembers.
*
* @component
* @example
* ```tsx
* No staff assigned}>
*
*
* ```
*/
export declare const StaffMembersList: React.ForwardRefExoticComponent>;
/**
* Props for Service StaffMembers.StaffMemberRepeater component
*/
export interface StaffMemberRepeaterProps {
children?: React.ReactNode;
}
/**
* Repeater component that renders StaffMember.Root for each staff member.
* Internally delegates to StaffMemberList.StaffMemberRepeater.
* Children are rendered inside each StaffMember.Root context.
*
* @component
* @example
* ```tsx
* // Standard usage - renders StaffMember.Root for each staff member
*
*
*
*
* // With custom styling
*
*
*
*
*
* ```
*/
export declare const StaffMemberRepeater: React.ForwardRefExoticComponent>;
/**
* Props for Service Raw component
*/
export interface RawProps {
asChild?: boolean;
children?: AsChildChildren<{
service: Service;
isLoading: boolean;
error: string | null;
}>;
className?: string;
}
/**
* Provides direct access to service object. Should be used only in rare cases.
*
* @component
* @example
* ```tsx
* // Using render prop pattern to access raw service data
*
* {({ service, isLoading, error }) => (
*
* {isLoading &&
Loading...
}
* {error &&
Error: {error}
}
* {service &&
{JSON.stringify(service, null, 2)}
}
*
* )}
*
*
* // With asChild pattern
*
*
*
* ```
*/
export declare const Raw: React.ForwardRefExoticComponent>;
/**
* Actions namespace with individual action components
*/
export declare namespace Actions {
/**
* Props for Select action component
*/
interface SelectProps extends Omit, 'children' | 'disabled' | 'onClick'> {
asChild?: boolean;
children?: React.ReactNode | ((props: {
bookable: boolean;
selected: boolean;
requiresAvailability: boolean;
onClick: () => void;
service: Service;
}) => React.ReactNode);
label?: string;
/** Called after selection with the selected service */
onClick?: (service: Service) => void;
}
/**
* Select action component - replaces selection with only this service.
*
* @component
* @example
* ```tsx
* // Default button
*
*
* // With asChild using custom Button component
*
*
*
*
* // With onClick callback for navigation
* router.push('/booking/time-slots')}
* />
*
* // Using render prop pattern to access bookable state
*
* {({ bookable, selected, onClick }) => (
*
* )}
*
* ```
*/
const Select: React.ForwardRefExoticComponent>;
/**
* Props for Add action component
*/
interface AddProps extends Omit, 'children' | 'disabled' | 'onClick'> {
asChild?: boolean;
children?: React.ReactNode | ((props: {
bookable: boolean;
selected: boolean;
requiresAvailability: boolean;
onClick: () => void;
service: Service;
}) => React.ReactNode);
label?: string;
/** Called after adding with the added service */
onClick?: (service: Service) => void;
}
/**
* Add action component - adds service to selection array.
*
* @component
* @example
* ```tsx
* // Default button
*
*
* // With asChild using custom Button component
*
*
*
*
* // With onClick callback
* console.log('Service added')}
* />
*
* // Using render prop pattern to access bookable state
*
* {({ bookable, selected, onClick }) => (
*
* )}
*
* ```
*/
const Add: React.ForwardRefExoticComponent>;
/**
* Props for Remove action component
*/
interface RemoveProps extends Omit, 'children' | 'disabled' | 'onClick'> {
asChild?: boolean;
children?: React.ReactNode | ((props: {
bookable: boolean;
selected: boolean;
requiresAvailability: boolean;
onClick: () => void;
service: Service;
}) => React.ReactNode);
label?: string;
/** Called after removing with the removed service */
onClick?: (service: Service) => void;
}
/**
* Remove action component - removes service from selection array.
*
* @component
* @example
* ```tsx
* // Default button
*
*
* // With asChild using custom Button component
*
*
*
*
* // With onClick callback
* console.log('Service removed')}
* />
*
* // Using render prop pattern to access bookable state
*
* {({ bookable, selected, onClick }) => (
*
* )}
*
* ```
*/
const Remove: React.ForwardRefExoticComponent>;
}
/**
* Props for Service.Policy.LatestCancellationInMinutes component
*/
export interface PolicyLatestCancellationInMinutesProps {
asChild?: boolean;
children?: AsChildChildren<{
cancellationPolicyEnabled: boolean;
limitLatestCancellationEnabled: boolean;
latestCancellationInMinutes: number | undefined;
}>;
className?: string;
}
/**
* Displays latestCancellationInMinutes as a raw number.
* Headless component - contains zero formatting logic.
*
* Maps to: bookingPolicy.cancellationPolicy.latestCancellationInMinutes
*
* @component
* @example
* ```tsx
* // Default usage - displays raw number only (or null if disabled/undefined)
*
* // Renders: 30 or null
* ```
*
* @example
* ```tsx
* // Consumer adds formatting logic via asChild
*
* {({ cancellationPolicyEnabled, limitLatestCancellationEnabled, latestCancellationInMinutes }) => (
* cancellationPolicyEnabled ? (
*