@wix/headless-bookings 0.0.19 → 0.0.20

package/cjs/dist/api/time-slot-list/index.d.ts

@@ -15,8 +15,6 @@ export interface FetchAvailabilityOptions {
     staffMemberIds?: string[];
     cursorPaging?: CursorPaging;
     viewMode?: ViewMode;
-    /** Maximum slots to return per day (useful for calendar views) */
-    slotsPerDay?: number;
     /** Filter by bookable status. If undefined, returns both bookable and non-bookable */
     bookable?: boolean;
     /** Filter by booking policy violations */
@@ -54,20 +52,20 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }: {
     services: Service[];
     fromLocalDate: string;
     toLocalDate: string;
     timeZone?: string;
     locations?: Location[];
     staffMemberIds?: string[];
-    cursorPaging?: CursorPaging;
+    cursor?: string;
     viewMode?: ViewMode;
-    slotsPerDay?: number;
     bookable?: boolean;
     bookingPolicyViolations?: {
         tooEarlyToBook?: boolean;
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    slotsPerPage?: number;
 }): Promise<FetchAvailabilityResponse>;

package/cjs/dist/api/time-slot-list/index.js

@@ -15,6 +15,7 @@ var FlowType;
     FlowType["MULTI_SERVICE"] = "multi_service";
     FlowType["CLASS"] = "class";
 })(FlowType || (FlowType = {}));
+const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
 // Grouping Functions
 // ============================================================================
@@ -102,16 +103,14 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
     if (flow === FlowType.SINGLE_SERVICE) {
-        // Build resourceTypes filter for staff members
-        // Staff member resource type ID is 1cd44cf8-756f-41c3-bd90-3e2ffcaf1155
         const resourceTypes = staffMemberIds?.length
             ? [
                 {
-                    resourceTypeId: '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155',
+                    resourceTypeId: STAFF_RESOURCE_TYPE_ID,
                     resourceIds: staffMemberIds,
                 },
             ]
@@ -122,11 +121,14 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             locations,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             resourceTypes,
-            timeSlotsPerDay: slotsPerDay,
             bookable,
             bookingPolicyViolations,
+            includeResourceTypeIds: [STAFF_RESOURCE_TYPE_ID],
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -152,13 +154,12 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             serviceIds: serviceIds.length ? serviceIds : undefined,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             eventFilter: Object.keys(eventFilter).length ? eventFilter : undefined,
-            maxSlotsPerDay: slotsPerDay,
-            // bookable=true means only bookable, so includeNonBookable=false
-            // bookable=false means only non-bookable, so includeNonBookable=true
-            // bookable=undefined means both, so includeNonBookable=true (default)
-            includeNonBookable: bookable === undefined ? undefined : !bookable,
+            includeNonBookable: bookable ? !bookable : undefined,
             bookingPolicyViolations,
         });
         return {

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

@@ -5,7 +5,7 @@
 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';
+import type { TimeSlotListServiceConfig, TimeSlot as TimeSlotType } 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';
 /**
  * Render props for TimeSlotList.Timezone component
@@ -81,17 +81,23 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
  */
 export interface TimeSlotsProps {
     children: React.ReactNode;
+    /** Content to display when no time slots are available */
     emptyState?: React.ReactNode;
+    /** Content to display while time slots are loading */
+    loadingState?: React.ReactNode;
     className?: string;
 }
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -99,11 +105,32 @@ export interface TimeSlotsProps {
  * ```
  */
 export declare const TimeSlots: React.ForwardRefExoticComponent<TimeSlotsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Data provided to TimeSlotRepeater function children
+ */
+export interface TimeSlotRepeaterChildProps {
+    /** Whether the slot is currently selected */
+    isSelected: boolean;
+    /** Whether the slot can be booked */
+    bookable: boolean;
+    /** Start date/time as ISO string */
+    startDate: string | undefined;
+    /** End date/time as ISO string */
+    endDate: string | undefined;
+    /** Duration in minutes */
+    durationInMinutes: number | null;
+    /** The raw time slot data */
+    timeSlot: TimeSlotType;
+}
+/**
+ * Children type for TimeSlotRepeater - can be ReactNode or function
+ */
+type TimeSlotRepeaterChildren = React.ReactNode | ((props: TimeSlotRepeaterChildProps) => React.ReactNode);
 /**
  * Props for TimeSlotList.TimeSlotRepeater component
  */
 export interface TimeSlotRepeaterProps {
-    children: React.ReactNode;
+    children: TimeSlotRepeaterChildren;
 }
 /**
  * Repeater component that renders each time slot.
@@ -113,11 +140,21 @@ export interface TimeSlotRepeaterProps {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;

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

@@ -81,13 +81,16 @@ const RootContent = React.forwardRef((props, ref) => {
 });
 RootContent.displayName = 'TimeSlotList.RootContent';
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -101,10 +104,12 @@ export const TimeSlots = React.forwardRef((props, ref) => {
 TimeSlots.displayName = 'TimeSlotList.TimeSlots';
 /**
  * Internal component that wraps each time slot item with context provider.
- * This is separate to allow using the service hook within the repeater.
+ * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": timeSlot.localStartDate, "data-slot-id": timeSlot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
+    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
+                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
+            } }) }));
 };
 /**
  * Repeater component that renders each time slot.
@@ -114,16 +119,26 @@ const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, timeSlot.id)), children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: children }, timeSlot.id)), children: undefined }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**

package/cjs/dist/services/time-slot-list/time-slot-list.def.d.ts

@@ -51,8 +51,6 @@ export interface TimeSlotsFilters {
     locations?: Location[];
     /** Filter by specific staff member IDs */
     staffMemberIds?: string[];
-    /** Maximum slots to return per day (useful for calendar views) */
-    slotsPerDay?: number;
     /** Filter by bookable status. If undefined, returns both bookable and non-bookable */
     bookable?: boolean;
     /** Filter by booking policy violations */
@@ -61,6 +59,17 @@ export interface TimeSlotsFilters {
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    /**
+     * Number of time slots to load per request.
+     * Controls how many slots are fetched initially and on each "Load More" action.
+     * Default: 1000. Max: 1000.
+     * @example
+     * ```ts
+     * // Load 6 slots at a time
+     * filters: { slotsPerPage: 6 }
+     * ```
+     */
+    slotsPerPage?: number;
 }
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */

package/cjs/dist/services/time-slot-list/time-slot-list.js

@@ -4,6 +4,7 @@
  */
 import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { format } from 'date-fns';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 import { fetchAvailability } from '../../api/time-slot-list/index.js';
 import { BookingServiceDefinition, } from '../booking/booking.js';
@@ -22,13 +23,8 @@ function getClientTimezone() {
  * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
  */
 function toLocalDateString(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
+    return format(date, pattern);
 }
 /**
  * Merges new grouped slots with existing ones
@@ -114,6 +110,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         isLoadingSignal.set(true);
         errorSignal.set(null);
         cursorSignal.set(undefined);
+        timeSlotsSignal.set([]);
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
@@ -121,6 +118,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
                 viewMode: viewModeSignal.get(),
+                cursor: cursorSignal.get(),
                 ...filters,
             });
             timeSlotsSignal.set(response.timeSlots);
@@ -312,7 +310,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 fromLocalDate: toLocalDateString(startDateSignal.get()),
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
-                cursorPaging: { cursor },
+                cursor,
                 viewMode: viewModeSignal.get(),
                 ...filters,
             });

package/dist/api/time-slot-list/index.d.ts

@@ -15,8 +15,6 @@ export interface FetchAvailabilityOptions {
     staffMemberIds?: string[];
     cursorPaging?: CursorPaging;
     viewMode?: ViewMode;
-    /** Maximum slots to return per day (useful for calendar views) */
-    slotsPerDay?: number;
     /** Filter by bookable status. If undefined, returns both bookable and non-bookable */
     bookable?: boolean;
     /** Filter by booking policy violations */
@@ -54,20 +52,20 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }: {
     services: Service[];
     fromLocalDate: string;
     toLocalDate: string;
     timeZone?: string;
     locations?: Location[];
     staffMemberIds?: string[];
-    cursorPaging?: CursorPaging;
+    cursor?: string;
     viewMode?: ViewMode;
-    slotsPerDay?: number;
     bookable?: boolean;
     bookingPolicyViolations?: {
         tooEarlyToBook?: boolean;
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    slotsPerPage?: number;
 }): Promise<FetchAvailabilityResponse>;

package/dist/api/time-slot-list/index.js

@@ -15,6 +15,7 @@ var FlowType;
     FlowType["MULTI_SERVICE"] = "multi_service";
     FlowType["CLASS"] = "class";
 })(FlowType || (FlowType = {}));
+const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
 // Grouping Functions
 // ============================================================================
@@ -102,16 +103,14 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
     if (flow === FlowType.SINGLE_SERVICE) {
-        // Build resourceTypes filter for staff members
-        // Staff member resource type ID is 1cd44cf8-756f-41c3-bd90-3e2ffcaf1155
         const resourceTypes = staffMemberIds?.length
             ? [
                 {
-                    resourceTypeId: '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155',
+                    resourceTypeId: STAFF_RESOURCE_TYPE_ID,
                     resourceIds: staffMemberIds,
                 },
             ]
@@ -122,11 +121,14 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             locations,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             resourceTypes,
-            timeSlotsPerDay: slotsPerDay,
             bookable,
             bookingPolicyViolations,
+            includeResourceTypeIds: [STAFF_RESOURCE_TYPE_ID],
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -152,13 +154,12 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             serviceIds: serviceIds.length ? serviceIds : undefined,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             eventFilter: Object.keys(eventFilter).length ? eventFilter : undefined,
-            maxSlotsPerDay: slotsPerDay,
-            // bookable=true means only bookable, so includeNonBookable=false
-            // bookable=false means only non-bookable, so includeNonBookable=true
-            // bookable=undefined means both, so includeNonBookable=true (default)
-            includeNonBookable: bookable === undefined ? undefined : !bookable,
+            includeNonBookable: bookable ? !bookable : undefined,
             bookingPolicyViolations,
         });
         return {

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

@@ -5,7 +5,7 @@
 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';
+import type { TimeSlotListServiceConfig, TimeSlot as TimeSlotType } 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';
 /**
  * Render props for TimeSlotList.Timezone component
@@ -81,17 +81,23 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
  */
 export interface TimeSlotsProps {
     children: React.ReactNode;
+    /** Content to display when no time slots are available */
     emptyState?: React.ReactNode;
+    /** Content to display while time slots are loading */
+    loadingState?: React.ReactNode;
     className?: string;
 }
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -99,11 +105,32 @@ export interface TimeSlotsProps {
  * ```
  */
 export declare const TimeSlots: React.ForwardRefExoticComponent<TimeSlotsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Data provided to TimeSlotRepeater function children
+ */
+export interface TimeSlotRepeaterChildProps {
+    /** Whether the slot is currently selected */
+    isSelected: boolean;
+    /** Whether the slot can be booked */
+    bookable: boolean;
+    /** Start date/time as ISO string */
+    startDate: string | undefined;
+    /** End date/time as ISO string */
+    endDate: string | undefined;
+    /** Duration in minutes */
+    durationInMinutes: number | null;
+    /** The raw time slot data */
+    timeSlot: TimeSlotType;
+}
+/**
+ * Children type for TimeSlotRepeater - can be ReactNode or function
+ */
+type TimeSlotRepeaterChildren = React.ReactNode | ((props: TimeSlotRepeaterChildProps) => React.ReactNode);
 /**
  * Props for TimeSlotList.TimeSlotRepeater component
  */
 export interface TimeSlotRepeaterProps {
-    children: React.ReactNode;
+    children: TimeSlotRepeaterChildren;
 }
 /**
  * Repeater component that renders each time slot.
@@ -113,11 +140,21 @@ export interface TimeSlotRepeaterProps {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;

package/dist/react/time-slot-list/TimeSlotList.js

@@ -81,13 +81,16 @@ const RootContent = React.forwardRef((props, ref) => {
 });
 RootContent.displayName = 'TimeSlotList.RootContent';
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -101,10 +104,12 @@ export const TimeSlots = React.forwardRef((props, ref) => {
 TimeSlots.displayName = 'TimeSlotList.TimeSlots';
 /**
  * Internal component that wraps each time slot item with context provider.
- * This is separate to allow using the service hook within the repeater.
+ * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": timeSlot.localStartDate, "data-slot-id": timeSlot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
+    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
+                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
+            } }) }));
 };
 /**
  * Repeater component that renders each time slot.
@@ -114,16 +119,26 @@ const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, timeSlot.id)), children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: children }, timeSlot.id)), children: undefined }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**

package/dist/services/time-slot-list/time-slot-list.def.d.ts

@@ -51,8 +51,6 @@ export interface TimeSlotsFilters {
     locations?: Location[];
     /** Filter by specific staff member IDs */
     staffMemberIds?: string[];
-    /** Maximum slots to return per day (useful for calendar views) */
-    slotsPerDay?: number;
     /** Filter by bookable status. If undefined, returns both bookable and non-bookable */
     bookable?: boolean;
     /** Filter by booking policy violations */
@@ -61,6 +59,17 @@ export interface TimeSlotsFilters {
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    /**
+     * Number of time slots to load per request.
+     * Controls how many slots are fetched initially and on each "Load More" action.
+     * Default: 1000. Max: 1000.
+     * @example
+     * ```ts
+     * // Load 6 slots at a time
+     * filters: { slotsPerPage: 6 }
+     * ```
+     */
+    slotsPerPage?: number;
 }
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */

package/dist/services/time-slot-list/time-slot-list.js

@@ -4,6 +4,7 @@
  */
 import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { format } from 'date-fns';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 import { fetchAvailability } from '../../api/time-slot-list/index.js';
 import { BookingServiceDefinition, } from '../booking/booking.js';
@@ -22,13 +23,8 @@ function getClientTimezone() {
  * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
  */
 function toLocalDateString(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
+    return format(date, pattern);
 }
 /**
  * Merges new grouped slots with existing ones
@@ -114,6 +110,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         isLoadingSignal.set(true);
         errorSignal.set(null);
         cursorSignal.set(undefined);
+        timeSlotsSignal.set([]);
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
@@ -121,6 +118,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
                 viewMode: viewModeSignal.get(),
+                cursor: cursorSignal.get(),
                 ...filters,
             });
             timeSlotsSignal.set(response.timeSlots);
@@ -312,7 +310,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 fromLocalDate: toLocalDateString(startDateSignal.get()),
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
-                cursorPaging: { cursor },
+                cursor,
                 viewMode: viewModeSignal.get(),
                 ...filters,
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -39,7 +39,8 @@
     "@wix/headless-media": "0.0.18",
     "@wix/headless-utils": "0.0.8",
     "@wix/services-definitions": "^0.1.4",
-    "@wix/services-manager-react": "^0.1.26"
+    "@wix/services-manager-react": "^0.1.26",
+    "date-fns": "^4.1.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -69,5 +70,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "2a71ca796bb480604700e6cc7fde7a950ba7f71c92a189dbd0a2375a"
+  "falconPackageHash": "25ba2b137a6e9ae4a9d267c7eeede1474665fe843f2999d663f593e4"
 }