@wix/headless-bookings 0.0.12 → 0.0.14

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

@@ -0,0 +1,438 @@
+/**
+ * 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 { AsChildChildren } from '@wix/headless-utils/react';
+export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
+export type { TimeSlotProviderProps } from '../core/time-slot-list/TimeSlot.js';
+export type { LocationData, StaffMemberData, } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Props for TimeSlot.StartDate component
+ */
+export interface StartDateProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        startDate: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * 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 declare const StartDate: React.ForwardRefExoticComponent<StartDateProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlot.EndDate component
+ */
+export interface EndDateProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        endDate: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * 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 declare const EndDate: React.ForwardRefExoticComponent<EndDateProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlot.Duration component
+ */
+export interface DurationProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        durationInMinutes: number | null;
+    }>;
+    className?: string;
+}
+/**
+ * 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 {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        isSelected: boolean;
+        bookable: boolean;
+        onClick: () => void;
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+}
+/**
+ * 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 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for TimeSlot.Actions.ClearPreferences component
+ */
+export interface ClearPreferencesProps {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        onClick: () => void;
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+}
+/**
+ * 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 declare const ClearPreferences: React.ForwardRefExoticComponent<ClearPreferencesProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace for TimeSlot
+ */
+export declare const Actions: {
+    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+    ClearPreferences: React.ForwardRefExoticComponent<ClearPreferencesProps & React.RefAttributes<HTMLButtonElement>>;
+};
+/**
+ * Props for TimeSlot.Locations component
+ */
+export interface LocationsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * 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 declare const Locations: React.ForwardRefExoticComponent<LocationsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlot.LocationRepeater component
+ */
+export interface LocationRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * 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 declare const LocationRepeater: React.ForwardRefExoticComponent<LocationRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for TimeSlot.Location.Name component
+ */
+export interface LocationNameProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    className?: 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>>;
+/**
+ * Props for TimeSlot.Location.Actions.Select component
+ */
+export interface SelectLocationProps {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        isSelected: boolean;
+        isSelectable: boolean;
+        onClick: () => void;
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+}
+/**
+ * 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 declare const SelectLocation: React.ForwardRefExoticComponent<SelectLocationProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 declare const Location: {
+    Name: React.ForwardRefExoticComponent<LocationNameProps & React.RefAttributes<HTMLElement>>;
+    Actions: {
+        Select: React.ForwardRefExoticComponent<SelectLocationProps & React.RefAttributes<HTMLButtonElement>>;
+    };
+};
+/**
+ * Props for TimeSlot.StaffMembers component
+ */
+export interface StaffMembersProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * 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 {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    className?: 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 {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        isSelected: boolean;
+        isSelectable: boolean;
+        onClick: () => void;
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+}
+/**
+ * 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 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>>;
+    };
+};