/**
 * 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 { type DateData } from '@wix/headless-components/react';
import { AsChildChildren } from '@wix/headless-utils/react';
import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
/**
 * Props for TimeSlot.Root component
 */
export interface RootProps {
    children?: React.ReactNode;
    timeSlot: TimeSlotType;
    asChild?: boolean;
    className?: string;
}
/**
 * Root component that provides time slot context.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * <TimeSlot.Root timeSlot={timeSlot}>
 *   <TimeSlot.StartDate />
 *   <TimeSlot.Duration />
 * </TimeSlot.Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
export declare const TestIds: {
    readonly timeSlotStartDate: "time-slot-start-date";
    readonly timeSlotEndDate: "time-slot-end-date";
    readonly timeSlotDuration: "time-slot-duration";
    readonly timeSlotActionSelect: "time-slot-action-select";
    readonly timeSlotActionClearStaffSelection: "time-slot-action-clear-staff-selection";
    readonly timeSlotLocationName: "time-slot-location-name";
    readonly timeSlotStaffMembers: "time-slot-staff-members";
    readonly timeSlotStaffMember: "time-slot-staff-member";
    readonly timeSlotStaffMemberName: "time-slot-staff-member-name";
    readonly timeSlotStaffMemberActionSelect: "time-slot-staff-member-action-select";
};
/**
 * Props for TimeSlot.StartDate component.
 * Inherits formatting options from DateData (dateTimeFormatOptions, locale).
 */
export interface StartDateProps extends Omit<DateData, 'date'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        startDate: Date;
    }>;
    className?: string;
}
/**
 * Displays the time slot start time.
 * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
 *
 * @component
 * @example
 * ```tsx
 * // Default usage - displays "10:00 AM"
 * <TimeSlot.StartDate className="text-foreground" />
 *
 * // With custom date format
 * <TimeSlot.StartDate
 *   className="text-foreground"
 *   dateTimeFormatOptions={{ weekday: 'long', month: 'long', day: 'numeric' }}
 * />
 *
 * // With custom formatting via asChild
 * <TimeSlot.StartDate asChild>
 *   {({ startDate }) => (
 *     <span>{formatTime(startDate)}</span>
 *   )}
 * </TimeSlot.StartDate>
 * ```
 */
export declare const StartDate: React.ForwardRefExoticComponent<StartDateProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for TimeSlot.EndDate component.
 * Inherits formatting options from DateData (dateTimeFormatOptions, locale).
 */
export interface EndDateProps extends Omit<DateData, 'date'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        endDate: Date;
    }>;
    className?: string;
}
/**
 * Displays the time slot end time.
 * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
 *
 * @component
 * @example
 * ```tsx
 * // Default usage - displays "11:00 AM"
 * <TimeSlot.EndDate className="text-foreground" />
 *
 * // With custom date format
 * <TimeSlot.EndDate
 *   className="text-foreground"
 *   dateTimeFormatOptions={{ weekday: 'long', month: 'long', day: 'numeric' }}
 * />
 *
 * // With custom formatting via asChild
 * <TimeSlot.EndDate asChild>
 *   {({ endDate }) => (
 *     <span>{formatTime(endDate)}</span>
 *   )}
 * </TimeSlot.EndDate>
 * ```
 */
export declare const EndDate: React.ForwardRefExoticComponent<EndDateProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for TimeSlot.Duration component
 */
export interface DurationProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        durationInMinutes: number;
    }>;
}
/**
 * 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 declare const Duration: React.ForwardRefExoticComponent<DurationProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for TimeSlot.Actions.Select component
 */
export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick'> {
    asChild?: boolean;
    children?: React.ReactNode | ((props: {
        isSelected: boolean;
        bookable: boolean;
        onClick: () => void;
        timeSlot: TimeSlotType;
    }) => React.ReactNode);
    label?: string;
    /** Called after selection with the selected timeSlot */
    onClick?: (timeSlot: TimeSlotType) => void;
}
/**
 * Button to select this time slot.
 * Default label is "Select".
 *
 * @component
 * @example
 * ```tsx
 * // Default button with "Select" label
 * <TimeSlot.Actions.Select />
 *
 * // With custom label
 * <TimeSlot.Actions.Select label="Book" />
 *
 * // With asChild
 * <TimeSlot.Actions.Select asChild>
 *   <button className="btn-primary">Book this slot</button>
 * </TimeSlot.Actions.Select>
 *
 * // With onClick callback
 * <TimeSlot.Actions.Select
 *   onClick={() => router.push('/booking/confirm')}
 * />
 *
 * // Using render prop pattern
 * <TimeSlot.Actions.Select>
 *   {({ isSelected, bookable, onClick }) => (
 *     <button onClick={onClick} disabled={!bookable}>
 *       {isSelected ? 'Selected' : 'Select'}
 *     </button>
 *   )}
 * </TimeSlot.Actions.Select>
 * ```
 */
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for TimeSlot.Actions.ClearStaffSelection component
 */
export interface ClearStaffSelectionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
    asChild?: boolean;
    children?: React.ReactNode | ((props: {
        onClick: () => void;
    }) => React.ReactNode);
    label?: string;
    /** Called after clearing with the timeSlot whose staff selection was cleared */
    onClick?: (timeSlot: TimeSlotType) => void;
}
/**
 * Button to clear staff selection while keeping the slot selected.
 * Only renders when a staff member is selected and there are multiple staff options.
 * Default label is "Change".
 *
 * @component
 * @example
 * ```tsx
 * // Default button with "Change" label
 * <TimeSlot.Actions.ClearStaffSelection />
 *
 * // With custom label
 * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
 *
 * // With asChild
 * <TimeSlot.Actions.ClearStaffSelection asChild>
 *   <button className="btn-secondary">Clear staff</button>
 * </TimeSlot.Actions.ClearStaffSelection>
 *
 * // With onClick callback
 * <TimeSlot.Actions.ClearStaffSelection
 *   onClick={() => console.log('Staff selection cleared')}
 * />
 *
 * // Using render prop pattern
 * <TimeSlot.Actions.ClearStaffSelection>
 *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
 * </TimeSlot.Actions.ClearStaffSelection>
 * ```
 */
export declare const ClearStaffSelection: React.ForwardRefExoticComponent<ClearStaffSelectionProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Actions namespace for TimeSlot
 */
export declare const Actions: {
    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
    ClearStaffSelection: React.ForwardRefExoticComponent<ClearStaffSelectionProps & React.RefAttributes<HTMLButtonElement>>;
};
/**
 * Props for TimeSlot.Location.Name component
 */
export interface LocationNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        name: string;
    }>;
}
/**
 * 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 declare const LocationName: React.ForwardRefExoticComponent<LocationNameProps & React.RefAttributes<HTMLElement>>;
/**
 * Location namespace containing components for displaying individual location data.
 */
export declare const Location: {
    Name: React.ForwardRefExoticComponent<LocationNameProps & React.RefAttributes<HTMLElement>>;
};
/**
 * Props for TimeSlot.StaffMembers component
 */
export interface StaffMembersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
    children: React.ReactNode;
}
/**
 * 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 declare const StaffMembers: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for TimeSlot.StaffMemberRepeater component
 */
export interface StaffMemberRepeaterProps {
    children: React.ReactNode;
}
/**
 * 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 declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for TimeSlot.StaffMember.Name component
 */
export interface StaffMemberNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        name: string;
    }>;
}
/**
 * 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 declare const StaffMemberName: React.ForwardRefExoticComponent<StaffMemberNameProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for TimeSlot.StaffMember.Actions.Select component
 */
export interface SelectStaffMemberProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
    asChild?: boolean;
    children?: React.ReactNode | ((props: {
        isSelected: boolean;
        onClick: () => void;
        staffMember: CoreTimeSlot.StaffMemberData;
    }) => React.ReactNode);
    label?: string;
    /** Called after selection with the selected staffMember */
    onClick?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
}
/**
 * Button to select this staff member.
 * Default label is "Select".
 *
 * @component
 * @example
 * ```tsx
 * // Default button with "Select" label
 * <TimeSlot.StaffMember.Actions.Select />
 *
 * // With custom label
 * <TimeSlot.StaffMember.Actions.Select label="Choose" />
 *
 * // With asChild
 * <TimeSlot.StaffMember.Actions.Select asChild>
 *   <button className="btn-primary">Choose Staff</button>
 * </TimeSlot.StaffMember.Actions.Select>
 *
 * // With onClick callback
 * <TimeSlot.StaffMember.Actions.Select
 *   onClick={() => console.log('Staff selected')}
 * />
 *
 * // Using render prop pattern
 * <TimeSlot.StaffMember.Actions.Select>
 *   {({ isSelected, onClick }) => (
 *     <button onClick={onClick}>
 *       {isSelected ? 'Selected' : 'Select'}
 *     </button>
 *   )}
 * </TimeSlot.StaffMember.Actions.Select>
 * ```
 */
export declare const SelectStaffMember: React.ForwardRefExoticComponent<SelectStaffMemberProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * 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 declare const StaffMember: {
    Name: React.ForwardRefExoticComponent<StaffMemberNameProps & React.RefAttributes<HTMLElement>>;
    Actions: {
        Select: React.ForwardRefExoticComponent<SelectStaffMemberProps & React.RefAttributes<HTMLButtonElement>>;
    };
};