@wix/headless-bookings 0.0.16 → 0.0.18

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

@@ -7,7 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useTimeSlotListService } from './TimeSlotList.js';
+import { useService } from '@wix/services-manager-react';
+import { TimeSlotListServiceDefinition, } from '../../../services/time-slot-list/time-slot-list.def.js';
 const TimeSlotContext = React.createContext(null);
 /**
  * Hook to access TimeSlot context
@@ -25,17 +26,17 @@ export function useTimeSlotContext() {
  * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
  */
 export function TimeSlotProvider(props) {
-    const { children, slot } = props;
-    const service = useTimeSlotListService();
+    const { children, timeSlot } = props;
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
-    const isSelected = selection?.slot?.id === slot.id;
-    const selectSlot = () => {
-        service.actions.selectSlot(slot);
+    const isSelected = selection?.slot?.id === timeSlot.id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
     };
     const contextValue = {
-        slot,
+        timeSlot,
         isSelected,
-        selectSlot,
+        selectTimeSlot,
     };
     return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
 }
@@ -57,7 +58,7 @@ export function useLocationContext() {
  */
 export function LocationProvider(props) {
     const { children, location } = props;
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const selectLocation = () => {
         service.actions.selectLocation(location.id);
     };
@@ -85,7 +86,7 @@ export function useStaffMemberContext() {
  */
 export function StaffMemberProvider(props) {
     const { children, staffMember } = props;
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const selectStaffMember = () => {
         service.actions.selectStaffMember(staffMember.id);
     };
@@ -113,10 +114,10 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { slot, isSelected } = useTimeSlotContext();
-    const startDate = slot.localStartDate ?? undefined;
-    const endDate = slot.localEndDate ?? undefined;
-    const bookable = slot.bookable ?? false;
+    const { timeSlot, isSelected } = useTimeSlotContext();
+    const startDate = timeSlot.localStartDate ?? undefined;
+    const endDate = timeSlot.localEndDate ?? undefined;
+    const bookable = timeSlot.bookable ?? false;
     // Calculate duration from start and end dates
     let durationInMinutes = null;
     if (startDate && endDate) {
@@ -130,7 +131,7 @@ export function Info(props) {
         durationInMinutes,
         bookable,
         isSelected,
-        slot,
+        timeSlot,
     });
 }
 /**
@@ -154,24 +155,24 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectSlot, slot, isSelected } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
-    const bookable = slot.bookable ?? false;
+    const bookable = timeSlot.bookable ?? false;
     // Check if at least one preference is selected
     const hasPreferenceSelected = !!selection?.locationId || !!selection?.staffMemberId;
     // Check if there are multiple options
-    const locationCount = slot.staffByLocation.length;
-    const staffCount = new Set(slot.staffByLocation.flatMap(({ staffMembers }) => staffMembers.map((s) => s.id))).size;
+    const locationCount = timeSlot.staffByLocation.length;
+    const staffCount = new Set(timeSlot.staffByLocation.flatMap(({ staffMembers }) => staffMembers.map((s) => s.id))).size;
     const hasMultipleOptions = locationCount > 1 || staffCount > 1;
     const shouldShowClearPreferences = hasPreferenceSelected && hasMultipleOptions;
     const clearPreferences = shouldShowClearPreferences
         ? service.actions.clearPreferences
         : undefined;
     return props.children({
-        selectSlot,
+        selectTimeSlot,
         clearPreferences,
-        slot,
+        timeSlot,
         bookable,
         isSelected,
     });
@@ -181,6 +182,8 @@ export function Actions(props) {
  * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
  * Each location includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 location (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -194,13 +197,13 @@ export function Actions(props) {
  * ```
  */
 export function Locations(props) {
-    const { slot } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { timeSlot } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
     const selectedLocationId = selection?.locationId ?? null;
     const selectedStaffMemberId = selection?.staffMemberId ?? null;
     // Build locations array from staffByLocation (names already included)
-    const locations = slot.staffByLocation.map(({ location, staffMembers }) => {
+    const locations = timeSlot.staffByLocation.map(({ location, staffMembers }) => {
         // Check if this location is selectable based on selected staff
         // If no staff selected, all locations are selectable
         // If staff selected, only locations where that staff works are selectable
@@ -214,6 +217,10 @@ export function Locations(props) {
             isSelectable,
         };
     });
+    // Return null if only 1 location - nothing to choose from
+    if (locations.length <= 1) {
+        return null;
+    }
     return props.children({
         locations,
         selectLocation: service.actions.selectLocation,
@@ -272,6 +279,8 @@ export function LocationActions(props) {
  * Extracts unique staff members from slot.staffByLocation (names already included).
  * Each staff member includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 staff member (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -285,14 +294,14 @@ export function LocationActions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { slot } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { timeSlot } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
     const selectedStaffMemberId = selection?.staffMemberId ?? null;
     const selectedLocationId = selection?.locationId ?? null;
     // Build unique staff members array from staffByLocation
     // Flatten all staff members with their location IDs, then dedupe by ID
-    const allStaff = slot.staffByLocation.flatMap(({ location, staffMembers }) => staffMembers.map((s) => ({ ...s, locationId: location.id })));
+    const allStaff = timeSlot.staffByLocation.flatMap(({ location, staffMembers }) => staffMembers.map((s) => ({ ...s, locationId: location.id })));
     // Group by staff ID to get all locations per staff member
     const grouped = Object.groupBy(allStaff, (s) => s.id);
     const staffMembers = Object.entries(grouped).map(([id, entries]) => ({
@@ -302,6 +311,10 @@ export function StaffMembers(props) {
         isSelectable: !selectedLocationId ||
             entries.some((e) => e.locationId === selectedLocationId),
     }));
+    // Return null if only 1 staff member - nothing to choose from
+    if (staffMembers.length <= 1) {
+        return null;
+    }
     return props.children({
         staffMembers,
         selectStaffMember: service.actions.selectStaffMember,

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

@@ -3,11 +3,7 @@
  * Provides low-level access to TimeSlotListService via render props
  */
 import React from 'react';
-import { type TimeSlotListServiceAPI, type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
-/**
- * Hook to access TimeSlotListService from within TimeSlotList.Root
- */
-export declare const useTimeSlotListService: () => TimeSlotListServiceAPI;
+import { type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
 /**
  * Props for Root component
  */
@@ -32,7 +28,10 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface TimezoneProps {
     children: (data: {
+        /** Raw IANA timezone string (e.g., "America/New_York") */
         timezone: string | undefined;
+        /** User-friendly display name (e.g., "Eastern Standard Time") */
+        displayName: string;
     }) => React.ReactNode;
 }
 /**
@@ -42,8 +41,8 @@ export interface TimezoneProps {
  * @example
  * ```tsx
  * <Timezone>
- *   {({ timezone }) => (
- *     <span>{timezone}</span>
+ *   {({ timezone, displayName }) => (
+ *     <span>{displayName}</span>  // "Eastern Standard Time"
  *   )}
  * </Timezone>
  * ```
@@ -82,3 +81,36 @@ export interface ListDataProps {
  * ```
  */
 export declare function ListData(props: ListDataProps): React.ReactNode;
+/**
+ * Render props for DateRange component
+ */
+export interface DateRangeRenderProps {
+    startDate: Date;
+    endDate: Date;
+    setDateRange: (start: Date, end: Date) => void;
+}
+/**
+ * Props for DateRange render prop component
+ */
+export interface DateRangeProps {
+    children: (data: DateRangeRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to date range data and actions via render props.
+ * Use this to build date range inputs for calendar/week view navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DateRange>
+ *   {({ startDate, endDate, setDateRange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onChange={(start, end) => setDateRange(start, end)}
+ *     />
+ *   )}
+ * </DateRange>
+ * ```
+ */
+export declare function DateRange(props: DateRangeProps): React.ReactNode;

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

@@ -2,12 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition, TimeSlotListService, } from '../../../services/time-slot-list/index.js';
-/**
- * Hook to access TimeSlotListService from within TimeSlotList.Root
- */
-export const useTimeSlotListService = () => {
-    return useService(TimeSlotListServiceDefinition);
-};
 /**
  * Root component that provides TimeSlotListService context to its children.
  *
@@ -22,6 +16,30 @@ export const useTimeSlotListService = () => {
 export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config || {}), children: props.children }));
 }
+// ============================================================================
+// Timezone Component
+// ============================================================================
+/**
+ * Gets the display name for a timezone using Intl.DateTimeFormat
+ * @param timezone - IANA timezone string (e.g., "America/New_York")
+ * @returns User-friendly display name (e.g., "Eastern Standard Time")
+ */
+function getTimezoneDisplayName(timezone) {
+    if (!timezone)
+        return '';
+    try {
+        const formatter = new Intl.DateTimeFormat('en', {
+            timeZone: timezone,
+            timeZoneName: 'long',
+        });
+        const parts = formatter.formatToParts(new Date());
+        const timeZonePart = parts.find((part) => part.type === 'timeZoneName');
+        return timeZonePart?.value || timezone;
+    }
+    catch {
+        return timezone;
+    }
+}
 /**
  * Core component that provides access to the current timezone via render props.
  *
@@ -29,16 +47,17 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Timezone>
- *   {({ timezone }) => (
- *     <span>{timezone}</span>
+ *   {({ timezone, displayName }) => (
+ *     <span>{displayName}</span>  // "Eastern Standard Time"
  *   )}
  * </Timezone>
  * ```
  */
 export function Timezone(props) {
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const timezone = service.timezone.get();
-    return props.children({ timezone });
+    const displayName = getTimezoneDisplayName(timezone);
+    return props.children({ timezone, displayName });
 }
 /**
  * Core component that provides access to time slots list data via render props.
@@ -57,7 +76,7 @@ export function Timezone(props) {
  * ```
  */
 export function ListData(props) {
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     return props.children({
         timeSlots: service.timeSlots.get(),
         hasMore: service.hasMore.get(),
@@ -66,3 +85,29 @@ export function ListData(props) {
         loadMore: service.actions.loadMore,
     });
 }
+/**
+ * Core component that provides access to date range data and actions via render props.
+ * Use this to build date range inputs for calendar/week view navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DateRange>
+ *   {({ startDate, endDate, setDateRange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onChange={(start, end) => setDateRange(start, end)}
+ *     />
+ *   )}
+ * </DateRange>
+ * ```
+ */
+export function DateRange(props) {
+    const service = useService(TimeSlotListServiceDefinition);
+    return props.children({
+        startDate: service.startDate.get(),
+        endDate: service.endDate.get(),
+        setDateRange: service.actions.setDateRange,
+    });
+}

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

@@ -128,13 +128,13 @@ Duration.displayName = 'TimeSlot.Duration';
  */
 export const Select = React.forwardRef((props, ref) => {
     const { asChild, children, className, label } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectSlot, isSelected, bookable }) => {
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, 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,
+                    onClick: selectTimeSlot,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';

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

@@ -7,14 +7,21 @@ 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';
+/**
+ * Render props for TimeSlotList.Timezone component
+ */
+export interface TimezoneRenderProps {
+    /** Raw IANA timezone string (e.g., "America/New_York") */
+    timezone: string | undefined;
+    /** User-friendly display name (e.g., "Eastern Standard Time") */
+    displayName: string;
+}
 /**
  * Props for TimeSlotList.Timezone component
  */
 export interface TimezoneProps {
     asChild?: boolean;
-    children?: AsChildChildren<{
-        timezone: string | undefined;
-    }>;
+    children?: AsChildChildren<TimezoneRenderProps>;
     className?: string;
 }
 /**
@@ -23,19 +30,14 @@ export interface TimezoneProps {
  * @component
  * @example
  * ```tsx
- * // Default usage
+ * // Default usage - shows display name
  * <TimeSlotList.Timezone className="text-sm text-gray-600" />
  *
- * // asChild with primitive
- * <TimeSlotList.Timezone asChild>
- *   <span className="font-medium" />
- * </TimeSlotList.Timezone>
- *
- * // asChild with render function
+ * // asChild with render function for custom formatting
  * <TimeSlotList.Timezone asChild>
- *   {({ timezone }) => (
+ *   {({ timezone, displayName }) => (
  *     <span className="text-sm">
- *       Timezone: {timezone || 'Not set'}
+ *       {displayName}  // "Eastern Standard Time"
  *     </span>
  *   )}
  * </TimeSlotList.Timezone>
@@ -153,6 +155,47 @@ export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & R
 export declare const Actions: {
     LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for DateRange.Input component
+ */
+export interface DateRangeInputProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Children for custom rendering */
+    children?: AsChildChildren<{
+        startDate: Date;
+        endDate: Date;
+        onChange: (start: Date, end: Date) => void;
+    }>;
+    /** CSS classes to apply to the container */
+    className?: string;
+}
+/**
+ * Date range input for setting the start and end date filter.
+ * Uses the core DateRange component to access service data.
+ * Both dates are set together and trigger a single fetch.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.DateRange.Input asChild>
+ *   {({ startDate, endDate, onChange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onRangeChange={(start, end) => onChange(start, end)}
+ *     />
+ *   )}
+ * </TimeSlotList.DateRange.Input>
+ * ```
+ */
+export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
+/**
+ * DateRange namespace for TimeSlotList date range filter
+ */
+export declare const DateRange: {
+    Input: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
+};
 /**
  * TimeSlot namespace containing components for displaying individual time slot data.
  * These components must be used within TimeSlotList.TimeSlotRepeater.

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * TimeSlotList - High-level component for displaying time slot list information
  * Provides components for displaying timezone and time slot data
@@ -8,7 +8,7 @@ import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
-import { StartDate, EndDate, Duration, Actions as TimeSlotActions, Locations, LocationRepeater, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Locations, LocationRepeater, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -19,6 +19,7 @@ var TestIds;
     TestIds["timeSlotListTimeSlot"] = "time-slot-list-time-slot";
     TestIds["timeSlotListTimezone"] = "time-slot-list-timezone";
     TestIds["timeSlotListLoadMore"] = "time-slot-list-load-more";
+    TestIds["timeSlotListDateRangeInput"] = "time-slot-list-date-range-input";
 })(TestIds || (TestIds = {}));
 /**
  * Displays the current timezone with customizable rendering.
@@ -26,19 +27,14 @@ var TestIds;
  * @component
  * @example
  * ```tsx
- * // Default usage
+ * // Default usage - shows display name
  * <TimeSlotList.Timezone className="text-sm text-gray-600" />
  *
- * // asChild with primitive
+ * // asChild with render function for custom formatting
  * <TimeSlotList.Timezone asChild>
- *   <span className="font-medium" />
- * </TimeSlotList.Timezone>
- *
- * // asChild with render function
- * <TimeSlotList.Timezone asChild>
- *   {({ timezone }) => (
+ *   {({ timezone, displayName }) => (
  *     <span className="text-sm">
- *       Timezone: {timezone || 'Not set'}
+ *       {displayName}  // "Eastern Standard Time"
  *     </span>
  *   )}
  * </TimeSlotList.Timezone>
@@ -46,7 +42,7 @@ var TestIds;
  */
 export const Timezone = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlotList.Timezone, { children: ({ timezone }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListTimezone, customElement: children, customElementProps: { timezone }, children: _jsx("span", { children: timezone }) })) }));
+    return (_jsx(CoreTimeSlotList.Timezone, { children: ({ timezone, displayName }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListTimezone, customElement: children, customElementProps: { timezone, displayName }, children: _jsx("span", { children: displayName }) })) }));
 });
 Timezone.displayName = 'TimeSlotList.Timezone';
 /**
@@ -81,7 +77,7 @@ Root.displayName = 'TimeSlotList.Root';
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant } = props;
-    return (_jsx(CoreTimeSlotList.ListData, { children: ({ timeSlots, hasMore, isLoading, loadMore }) => (_jsx(GenericList.Root, { items: timeSlots, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.timeSlotListRoot, variant: variant, children: children })) }));
+    return (_jsx(CoreTimeSlotList.ListData, { children: ({ timeSlots, hasMore, isLoading, error, loadMore }) => (_jsx(GenericList.Root, { items: timeSlots, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading, error: error, className: className, ref: ref, "data-testid": TestIds.timeSlotListRoot, variant: variant, children: children })) }));
 });
 RootContent.displayName = 'TimeSlotList.RootContent';
 /**
@@ -107,8 +103,8 @@ 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.
  */
-const TimeSlotItemWrapper = ({ slot, children, }) => {
-    return (_jsx(TimeSlotProvider, { slot: slot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": slot.localStartDate, "data-slot-id": slot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
+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 })) }) }));
 };
 /**
  * Repeater component that renders each time slot.
@@ -127,7 +123,7 @@ const TimeSlotItemWrapper = ({ slot, children, }) => {
  */
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: slot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { slot: slot, children: itemChildren }, slot.id)), children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, timeSlot.id)), children: children }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**
@@ -153,6 +149,40 @@ LoadMore.displayName = 'TimeSlotList.Actions.LoadMore';
 export const Actions = {
     LoadMore,
 };
+/**
+ * Date range input for setting the start and end date filter.
+ * Uses the core DateRange component to access service data.
+ * Both dates are set together and trigger a single fetch.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.DateRange.Input asChild>
+ *   {({ startDate, endDate, onChange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onRangeChange={(start, end) => onChange(start, end)}
+ *     />
+ *   )}
+ * </TimeSlotList.DateRange.Input>
+ * ```
+ */
+export const DateRangeInput = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                startDate,
+                endDate,
+                onChange: setDateRange,
+            }, ...otherProps, children: _jsxs("div", { children: [startDate.toLocaleDateString(), " - ", endDate.toLocaleDateString()] }) })) }));
+});
+DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
+/**
+ * DateRange namespace for TimeSlotList date range filter
+ */
+export const DateRange = {
+    Input: DateRangeInput,
+};
 // ============================================================================
 // TimeSlot Entity Components (re-exported)
 // ============================================================================
@@ -186,8 +216,8 @@ export const Actions = {
  * ```
  */
 export const TimeSlot = {
-    StartDate,
-    EndDate,
+    StartDate: TimeSlotStartDate,
+    EndDate: TimeSlotEndDate,
     Duration,
     Actions: TimeSlotActions,
     Locations,

package/dist/services/index.d.ts

@@ -4,5 +4,5 @@
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type Location, type BookingServiceActions, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
-export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, type TimeSlot, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
+export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';

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

@@ -2,5 +2,5 @@
  * TimeSlotList Service
  * Main export file for time slot list service
  */
-export { TimeSlotListServiceDefinition, ViewMode, type TimeSlot, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
+export { TimeSlotListServiceDefinition, ViewMode, type TimeSlot, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotsFilters, type SlotSelection, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';

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

@@ -3,7 +3,7 @@
  * Manages time slot fetching, selection, and state
  */
 import type { Service } from '@wix/auto_sdk_bookings_services';
-import { type TimeSlotListServiceConfig, ViewMode } from './time-slot-list.def.js';
+import { type TimeSlotListServiceConfig, type TimeSlotsFilters } from './time-slot-list.def.js';
 export declare const TimeSlotListService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./time-slot-list.def.js").TimeSlotListServiceAPI;
     __config: {};
@@ -21,8 +21,8 @@ export interface LoadTimeSlotListConfigOptions {
     endDate?: Date;
     /** Timezone for formatting (defaults to UTC) */
     timezone?: string;
-    /** View mode (defaults to CLASSIC) */
-    viewMode?: ViewMode;
+    /** Filters for narrowing down time slots */
+    filters?: TimeSlotsFilters;
 }
 /**
  * Result type for SSR loader - either success with config or error