@wix/headless-bookings 0.0.12 → 0.0.14

package/cjs/dist/react/time-slot-list/TimeSlot.js

@@ -0,0 +1,427 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TimeSlot - Headless components for displaying time slot information within TimeSlotList
+ * Provides components for displaying start/end times, duration, and selection actions
+ *
+ * Note: These components must be used within TimeSlotList.TimeSlotRepeater which provides
+ * the necessary context. There is no public TimeSlot.Root - context is managed internally.
+ */
+import React from 'react';
+import { GenericList } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
+// Re-export TimeSlotProvider from core for use by TimeSlotRepeater
+export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
+// ============================================================================
+// TestIds
+// ============================================================================
+var TestIds;
+(function (TestIds) {
+    TestIds["timeSlotStartDate"] = "time-slot-start-date";
+    TestIds["timeSlotEndDate"] = "time-slot-end-date";
+    TestIds["timeSlotDuration"] = "time-slot-duration";
+    TestIds["timeSlotActionSelect"] = "time-slot-action-select";
+    TestIds["timeSlotActionClearPreferences"] = "time-slot-action-clear-preferences";
+    // Location components
+    TestIds["timeSlotLocations"] = "time-slot-locations";
+    TestIds["timeSlotLocation"] = "time-slot-location";
+    TestIds["timeSlotLocationName"] = "time-slot-location-name";
+    TestIds["timeSlotLocationActionSelect"] = "time-slot-location-action-select";
+    // StaffMember components
+    TestIds["timeSlotStaffMembers"] = "time-slot-staff-members";
+    TestIds["timeSlotStaffMember"] = "time-slot-staff-member";
+    TestIds["timeSlotStaffMemberName"] = "time-slot-staff-member-name";
+    TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
+})(TestIds || (TestIds = {}));
+/**
+ * Displays the time slot start date/time as a raw string.
+ * Consumer is responsible for formatting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw localStartDate string
+ * <TimeSlot.StartDate className="text-foreground" />
+ *
+ * // With custom formatting
+ * <TimeSlot.StartDate asChild>
+ *   {({ startDate }) => (
+ *     <span>{formatTime(startDate)}</span>
+ *   )}
+ * </TimeSlot.StartDate>
+ * ```
+ */
+export const StartDate = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate }) })) }));
+});
+StartDate.displayName = 'TimeSlot.StartDate';
+/**
+ * Displays the time slot end date/time as a raw string.
+ * Consumer is responsible for formatting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw localEndDate string
+ * <TimeSlot.EndDate className="text-foreground" />
+ *
+ * // With custom formatting
+ * <TimeSlot.EndDate asChild>
+ *   {({ endDate }) => (
+ *     <span>{formatTime(endDate)}</span>
+ *   )}
+ * </TimeSlot.EndDate>
+ * ```
+ */
+export const EndDate = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate }) })) }));
+});
+EndDate.displayName = 'TimeSlot.EndDate';
+/**
+ * Calculates and displays the duration between start and end times in minutes.
+ * Returns null if start/end dates are not available.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw minutes number
+ * <TimeSlot.Duration className="text-foreground" />
+ *
+ * // With custom formatting
+ * <TimeSlot.Duration asChild>
+ *   {({ durationInMinutes }) => (
+ *     <span>{durationInMinutes} min</span>
+ *   )}
+ * </TimeSlot.Duration>
+ * ```
+ */
+export const Duration = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlot.Info, { children: ({ durationInMinutes }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotDuration, customElement: children, customElementProps: { durationInMinutes }, children: durationInMinutes && _jsx("span", { children: durationInMinutes }) })) }));
+});
+Duration.displayName = 'TimeSlot.Duration';
+/**
+ * Button to select this time slot.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button
+ * <TimeSlot.Actions.Select label="Select" />
+ *
+ * // With asChild
+ * <TimeSlot.Actions.Select asChild>
+ *   <button className="btn-primary">Book this slot</button>
+ * </TimeSlot.Actions.Select>
+ *
+ * // Using render prop pattern
+ * <TimeSlot.Actions.Select>
+ *   {({ isSelected, bookable, onClick }) => (
+ *     <button onClick={onClick} disabled={!bookable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </TimeSlot.Actions.Select>
+ * ```
+ */
+export const Select = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectSlot, isSelected, bookable }) => {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
+                    onClick: selectSlot,
+                    disabled: !bookable,
+                    isSelected,
+                    bookable,
+                }, children: _jsx("button", { onClick: selectSlot, disabled: !bookable, children: label }) }));
+        } }));
+});
+Select.displayName = 'TimeSlot.Actions.Select';
+/**
+ * Button to clear location and staff preferences while keeping the slot selected.
+ * Only renders when at least one preference is selected AND there are multiple options.
+ * If it renders, clicking it will clear the preferences.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button - only shows when there's something to clear
+ * <TimeSlot.Actions.ClearPreferences label="Change" />
+ *
+ * // With asChild
+ * <TimeSlot.Actions.ClearPreferences asChild>
+ *   <button className="btn-secondary">Clear preferences</button>
+ * </TimeSlot.Actions.ClearPreferences>
+ *
+ * // Using render prop pattern
+ * <TimeSlot.Actions.ClearPreferences>
+ *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
+ * </TimeSlot.Actions.ClearPreferences>
+ * ```
+ */
+export const ClearPreferences = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearPreferences }) => {
+            if (!clearPreferences) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearPreferences, customElement: children, customElementProps: {
+                    onClick: clearPreferences,
+                }, children: _jsx("button", { onClick: clearPreferences, children: label }) }));
+        } }));
+});
+ClearPreferences.displayName = 'TimeSlot.Actions.ClearPreferences';
+/**
+ * Actions namespace for TimeSlot
+ */
+export const Actions = {
+    Select,
+    ClearPreferences,
+};
+/**
+ * Container for the locations list within a time slot.
+ * Uses GenericList.Root to manage the locations list.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Locations>
+ *   <TimeSlot.LocationRepeater>
+ *     <TimeSlot.Location.Name />
+ *     <TimeSlot.Location.Actions.Select />
+ *   </TimeSlot.LocationRepeater>
+ * </TimeSlot.Locations>
+ * ```
+ */
+export const Locations = React.forwardRef((props, ref) => {
+    const { children, className } = props;
+    return (_jsx(CoreTimeSlot.Locations, { children: ({ locations }) => {
+            return (_jsx(GenericList.Root, { items: locations, children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotLocations, children: children }) }));
+        } }));
+});
+Locations.displayName = 'TimeSlot.Locations';
+/**
+ * Internal component that wraps each location item with context provider.
+ */
+const LocationItemWrapper = ({ location, children, }) => {
+    return (_jsx(CoreTimeSlot.LocationProvider, { location: location, children: _jsx("div", { "data-testid": TestIds.timeSlotLocation, "data-location-id": location.id, "data-selected": location.isSelected, "data-selectable": location.isSelectable, children: children }) }));
+};
+/**
+ * Repeater component that renders each location.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Automatically provides Location context to children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.LocationRepeater>
+ *   <div className="data-[selectable=false]:opacity-50 data-[selected=true]:bg-primary">
+ *     <TimeSlot.Location.Name />
+ *     <TimeSlot.Location.Actions.Select />
+ *   </div>
+ * </TimeSlot.LocationRepeater>
+ * ```
+ */
+export const LocationRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: location, children: itemChildren }) => (_jsx(LocationItemWrapper, { location: location, children: itemChildren }, location.id)), children: children }));
+});
+LocationRepeater.displayName = 'TimeSlot.LocationRepeater';
+/**
+ * Displays the location name.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <TimeSlot.Location.Name className="text-foreground" />
+ *
+ * // With custom formatting
+ * <TimeSlot.Location.Name asChild>
+ *   {({ name }) => (
+ *     <span className="font-bold">{name || 'Unknown Location'}</span>
+ *   )}
+ * </TimeSlot.Location.Name>
+ * ```
+ */
+export const LocationName = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlot.LocationInfo, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotLocationName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
+});
+LocationName.displayName = 'TimeSlot.Location.Name';
+/**
+ * Button to select this location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button
+ * <TimeSlot.Location.Actions.Select label="Select" />
+ *
+ * // With asChild
+ * <TimeSlot.Location.Actions.Select asChild>
+ *   <button className="btn-primary">Choose Location</button>
+ * </TimeSlot.Location.Actions.Select>
+ *
+ * // Using render prop pattern
+ * <TimeSlot.Location.Actions.Select>
+ *   {({ isSelected, isSelectable, onClick }) => (
+ *     <button onClick={onClick} disabled={!isSelectable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </TimeSlot.Location.Actions.Select>
+ * ```
+ */
+export const SelectLocation = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreTimeSlot.LocationActions, { children: ({ selectLocation, isSelected, isSelectable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotLocationActionSelect, "data-selected": isSelected, "data-selectable": isSelectable, customElement: children, customElementProps: {
+                onClick: selectLocation,
+                disabled: !isSelectable,
+                isSelected,
+                isSelectable,
+            }, children: _jsx("button", { onClick: selectLocation, disabled: !isSelectable, children: label }) })) }));
+});
+SelectLocation.displayName = 'TimeSlot.Location.Actions.Select';
+/**
+ * Location namespace containing components for displaying individual location data.
+ * These components must be used within TimeSlot.LocationRepeater.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlot.LocationRepeater>
+ *   <TimeSlot.Location.Name />
+ *   <TimeSlot.Location.Actions.Select />
+ * </TimeSlot.LocationRepeater>
+ * ```
+ */
+export const Location = {
+    Name: LocationName,
+    Actions: {
+        Select: SelectLocation,
+    },
+};
+/**
+ * Container for the staff members list within a time slot.
+ * Uses GenericList.Root to manage the staff members list.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.StaffMembers>
+ *   <TimeSlot.StaffMemberRepeater>
+ *     <TimeSlot.StaffMember.Name />
+ *     <TimeSlot.StaffMember.Actions.Select />
+ *   </TimeSlot.StaffMemberRepeater>
+ * </TimeSlot.StaffMembers>
+ * ```
+ */
+export const StaffMembers = React.forwardRef((props, ref) => {
+    const { children, className } = props;
+    return (_jsx(CoreTimeSlot.StaffMembers, { children: ({ staffMembers }) => {
+            return (_jsx(GenericList.Root, { items: staffMembers, children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotStaffMembers, children: children }) }));
+        } }));
+});
+StaffMembers.displayName = 'TimeSlot.StaffMembers';
+/**
+ * Internal component that wraps each staff member item with context provider.
+ */
+const StaffMemberItemWrapper = ({ staffMember, children, }) => {
+    return (_jsx(CoreTimeSlot.StaffMemberProvider, { staffMember: staffMember, children: _jsx("div", { "data-testid": TestIds.timeSlotStaffMember, "data-staff-member-id": staffMember.id, "data-selected": staffMember.isSelected, "data-selectable": staffMember.isSelectable, children: children }) }));
+};
+/**
+ * Repeater component that renders each staff member.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Automatically provides StaffMember context to children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.StaffMemberRepeater>
+ *   <div className="data-[selectable=false]:opacity-50 data-[selected=true]:bg-primary">
+ *     <TimeSlot.StaffMember.Name />
+ *     <TimeSlot.StaffMember.Actions.Select />
+ *   </div>
+ * </TimeSlot.StaffMemberRepeater>
+ * ```
+ */
+export const StaffMemberRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: staffMember, children: itemChildren }) => (_jsx(StaffMemberItemWrapper, { staffMember: staffMember, children: itemChildren }, staffMember.id)), children: children }));
+});
+StaffMemberRepeater.displayName = 'TimeSlot.StaffMemberRepeater';
+/**
+ * Displays the staff member name.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <TimeSlot.StaffMember.Name className="text-foreground" />
+ *
+ * // With custom formatting
+ * <TimeSlot.StaffMember.Name asChild>
+ *   {({ name }) => (
+ *     <span className="font-bold">{name || 'Any Staff'}</span>
+ *   )}
+ * </TimeSlot.StaffMember.Name>
+ * ```
+ */
+export const StaffMemberName = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberInfo, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
+});
+StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
+/**
+ * Button to select this staff member.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button
+ * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ *
+ * // With asChild
+ * <TimeSlot.StaffMember.Actions.Select asChild>
+ *   <button className="btn-primary">Choose Staff</button>
+ * </TimeSlot.StaffMember.Actions.Select>
+ *
+ * // Using render prop pattern
+ * <TimeSlot.StaffMember.Actions.Select>
+ *   {({ isSelected, isSelectable, onClick }) => (
+ *     <button onClick={onClick} disabled={!isSelectable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </TimeSlot.StaffMember.Actions.Select>
+ * ```
+ */
+export const SelectStaffMember = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, isSelectable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, "data-selectable": isSelectable, customElement: children, customElementProps: {
+                onClick: selectStaffMember,
+                disabled: !isSelectable,
+                isSelected,
+                isSelectable,
+            }, children: _jsx("button", { onClick: selectStaffMember, disabled: !isSelectable, children: label }) })) }));
+});
+SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';
+/**
+ * StaffMember namespace containing components for displaying individual staff member data.
+ * These components must be used within TimeSlot.StaffMemberRepeater.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlot.StaffMemberRepeater>
+ *   <TimeSlot.StaffMember.Name />
+ *   <TimeSlot.StaffMember.Actions.Select />
+ * </TimeSlot.StaffMemberRepeater>
+ * ```
+ */
+export const StaffMember = {
+    Name: StaffMemberName,
+    Actions: {
+        Select: SelectStaffMember,
+    },
+};

package/cjs/dist/react/time-slot-list/TimeSlotList.d.ts

@@ -0,0 +1,209 @@
+/**
+ * TimeSlotList - High-level component for displaying time slot list information
+ * Provides components for displaying timezone and time slot data
+ */
+import React from 'react';
+import { ListVariant } from '@wix/headless-components/react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import type { TimeSlotListServiceConfig } from '../../services/time-slot-list/time-slot-list.def.js';
+export type { StartDateProps as TimeSlotStartDateProps, EndDateProps as TimeSlotEndDateProps, DurationProps as TimeSlotDurationProps, SelectProps as TimeSlotSelectProps, LocationsProps as TimeSlotLocationsProps, LocationRepeaterProps as TimeSlotLocationRepeaterProps, LocationNameProps as TimeSlotLocationNameProps, SelectLocationProps as TimeSlotSelectLocationProps, StaffMembersProps as TimeSlotStaffMembersProps, StaffMemberRepeaterProps as TimeSlotStaffMemberRepeaterProps, StaffMemberNameProps as TimeSlotStaffMemberNameProps, SelectStaffMemberProps as TimeSlotSelectStaffMemberProps, } from './TimeSlot.js';
+/**
+ * Props for TimeSlotList.Timezone component
+ */
+export interface TimezoneProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        timezone: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the current timezone with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <TimeSlotList.Timezone className="text-sm text-gray-600" />
+ *
+ * // asChild with primitive
+ * <TimeSlotList.Timezone asChild>
+ *   <span className="font-medium" />
+ * </TimeSlotList.Timezone>
+ *
+ * // asChild with render function
+ * <TimeSlotList.Timezone asChild>
+ *   {({ timezone }) => (
+ *     <span className="text-sm">
+ *       Timezone: {timezone || 'Not set'}
+ *     </span>
+ *   )}
+ * </TimeSlotList.Timezone>
+ * ```
+ */
+export declare const Timezone: React.ForwardRefExoticComponent<TimezoneProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlotList.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    config?: TimeSlotListServiceConfig;
+    className?: string;
+    variant?: ListVariant;
+}
+/**
+ * Root component that provides the TimeSlotList service context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { TimeSlotList } from '@wix/bookings/components';
+ *
+ * function TimeSlotsPage({ config }) {
+ *   return (
+ *     <TimeSlotList.Root config={config}>
+ *       <TimeSlotList.TimeSlots>
+ *         <TimeSlotList.TimeSlotRepeater>
+ *           {children}
+ *         </TimeSlotList.TimeSlotRepeater>
+ *       </TimeSlotList.TimeSlots>
+ *     </TimeSlotList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlotList.TimeSlots component
+ */
+export interface TimeSlotsProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for the time slots list with empty state support.
+ * Wraps GenericList.Items. Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ *   <TimeSlotList.TimeSlotRepeater>
+ *     {children}
+ *   </TimeSlotList.TimeSlotRepeater>
+ * </TimeSlotList.TimeSlots>
+ * ```
+ */
+export declare const TimeSlots: React.ForwardRefExoticComponent<TimeSlotsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlotList.TimeSlotRepeater component
+ */
+export interface TimeSlotRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * Repeater component that renders each time slot.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Automatically provides TimeSlot context to children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlotRepeater>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ *   <TimeSlot.Actions.Select />
+ * </TimeSlotList.TimeSlotRepeater>
+ * ```
+ */
+export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlotList.Actions.LoadMore component
+ */
+export interface LoadMoreProps {
+    /** Children content */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the button */
+    className?: string;
+    /** The label to display inside the button */
+    label?: string;
+    /** The loading state to display inside the button */
+    loadingState?: React.ReactNode;
+}
+/**
+ * Displays a button to load more time slots. Not rendered if no more slots are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.Actions.LoadMore asChild>
+ *   <button>Load More</button>
+ * </TimeSlotList.Actions.LoadMore>
+ * ```
+ */
+export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace for TimeSlotList
+ */
+export declare const Actions: {
+    LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
+};
+/**
+ * TimeSlot namespace containing components for displaying individual time slot data.
+ * These components must be used within TimeSlotList.TimeSlotRepeater.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlotRepeater>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ *   <TimeSlot.Actions.Select />
+ *
+ *   // Location selection - visible when slot is selected
+ *   <TimeSlot.Locations>
+ *     <TimeSlot.LocationRepeater>
+ *       <TimeSlot.Location.Name />
+ *       <TimeSlot.Location.Actions.Select />
+ *     </TimeSlot.LocationRepeater>
+ *   </TimeSlot.Locations>
+ *
+ *   // Staff member selection - visible when slot is selected
+ *   <TimeSlot.StaffMembers>
+ *     <TimeSlot.StaffMemberRepeater>
+ *       <TimeSlot.StaffMember.Name />
+ *       <TimeSlot.StaffMember.Actions.Select />
+ *     </TimeSlot.StaffMemberRepeater>
+ *   </TimeSlot.StaffMembers>
+ * </TimeSlotList.TimeSlotRepeater>
+ * ```
+ */
+export declare const TimeSlot: {
+    StartDate: React.ForwardRefExoticComponent<import("./TimeSlot.js").StartDateProps & React.RefAttributes<HTMLElement>>;
+    EndDate: React.ForwardRefExoticComponent<import("./TimeSlot.js").EndDateProps & React.RefAttributes<HTMLElement>>;
+    Duration: React.ForwardRefExoticComponent<import("./TimeSlot.js").DurationProps & React.RefAttributes<HTMLElement>>;
+    Actions: {
+        Select: React.ForwardRefExoticComponent<import("./TimeSlot.js").SelectProps & React.RefAttributes<HTMLButtonElement>>;
+        ClearPreferences: React.ForwardRefExoticComponent<import("./TimeSlot.js").ClearPreferencesProps & React.RefAttributes<HTMLButtonElement>>;
+    };
+    Locations: React.ForwardRefExoticComponent<import("./TimeSlot.js").LocationsProps & React.RefAttributes<HTMLElement>>;
+    LocationRepeater: React.ForwardRefExoticComponent<import("./TimeSlot.js").LocationRepeaterProps & React.RefAttributes<HTMLElement>>;
+    Location: {
+        Name: React.ForwardRefExoticComponent<import("./TimeSlot.js").LocationNameProps & React.RefAttributes<HTMLElement>>;
+        Actions: {
+            Select: React.ForwardRefExoticComponent<import("./TimeSlot.js").SelectLocationProps & React.RefAttributes<HTMLButtonElement>>;
+        };
+    };
+    StaffMembers: React.ForwardRefExoticComponent<import("./TimeSlot.js").StaffMembersProps & React.RefAttributes<HTMLElement>>;
+    StaffMemberRepeater: React.ForwardRefExoticComponent<import("./TimeSlot.js").StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
+    StaffMember: {
+        Name: React.ForwardRefExoticComponent<import("./TimeSlot.js").StaffMemberNameProps & React.RefAttributes<HTMLElement>>;
+        Actions: {
+            Select: React.ForwardRefExoticComponent<import("./TimeSlot.js").SelectStaffMemberProps & React.RefAttributes<HTMLButtonElement>>;
+        };
+    };
+};