@wix/headless-bookings 0.0.86 → 0.0.88

package/dist/react/index.js

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
+export * as BookingItem from './booking/BookingItem.js';
 export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';

package/dist/react/service/Service.d.ts

@@ -1178,7 +1178,5 @@ export declare const StaffMembers: typeof StaffMembersBase & {
 };
 export declare const MainMedia: React.ForwardRefExoticComponent<ServiceMediaModule.MainProps & React.RefAttributes<HTMLImageElement>>;
 export declare const CoverMedia: React.ForwardRefExoticComponent<ServiceMediaModule.CoverProps & React.RefAttributes<HTMLImageElement>>;
-export declare const MediaGallery: React.FC<ServiceMediaModule.GalleryProps>;
 export type { MainProps as MainMediaProps } from './ServiceMedia.js';
 export type { CoverProps as CoverMediaProps } from './ServiceMedia.js';
-export type { GalleryProps as MediaGalleryProps } from './ServiceMedia.js';

package/dist/react/service/Service.js

@@ -5,8 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React from 'react';
 import * as CoreService from '../core/service/Service.js';
+import * as CoreServiceMediaGallery from '../core/service/ServiceMediaGallery.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Money } from '@wix/headless-components/react';
+import { MediaGallery } from '@wix/headless-media/react';
 import { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as LocationList from '../location/LocationList.js';
 // Note: Location components are used inside LocationList.LocationRepeater
@@ -118,7 +120,7 @@ export const Root = React.forwardRef((props, ref) => {
         serviceSlug,
         appId,
     };
-    return (_jsx(CoreService.Root, { serviceServiceConfig: serviceServiceConfig, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
+    return (_jsx(CoreService.Root, { serviceServiceConfig: serviceServiceConfig, children: ({ selected, bookable }) => (_jsx(CoreServiceMediaGallery.MediaGallery, { children: ({ mediaItems }) => (_jsx(MediaGallery.Root, { mediaGalleryServiceConfig: { media: mediaItems }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children }) })) })) }));
 });
 Root.displayName = 'Service.Root';
 /**
@@ -1131,5 +1133,3 @@ export const MainMedia = ServiceMediaModule.Main;
 MainMedia.displayName = 'Service.MainMedia';
 export const CoverMedia = ServiceMediaModule.Cover;
 CoverMedia.displayName = 'Service.CoverMedia';
-export const MediaGallery = ServiceMediaModule.Gallery;
-MediaGallery.displayName = 'Service.MediaGallery';

package/dist/react/service/ServiceMedia.d.ts

@@ -1,6 +1,6 @@
 /**
  * ServiceMedia - Compound component for displaying service media
- * Provides components for displaying main media, cover media, and media galleries
+ * Provides components for displaying main media and cover media images
  */
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
@@ -105,67 +105,6 @@ export interface CoverProps {
  * ```
  */
 export declare const Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
-/**
- * Props for ServiceMedia.Gallery component
- */
-export interface GalleryProps {
-    /** Child components to render within the gallery (MediaGallery components) */
-    children: React.ReactNode;
-    /** Whether the gallery should loop infinitely */
-    infinite?: boolean;
-    /** Auto-play configuration for the gallery */
-    autoPlay?: {
-        /** Direction of auto-play */
-        direction?: 'forward' | 'backward';
-        /** Interval between slides in milliseconds */
-        intervalMs?: number;
-    };
-}
-/**
- * Container for service media items gallery.
- * Renders a MediaGallery.Root with the service media items.
- * Supports autoPlay and infinite scroll options for carousel behavior.
- *
- * @component
- * @example
- * ```tsx
- * // Basic usage with MediaGallery components
- * <ServiceMedia.Gallery>
- *   <MediaGallery.Thumbnails>
- *     <MediaGallery.ThumbnailRepeater>
- *       <MediaGallery.ThumbnailItem />
- *     </MediaGallery.ThumbnailRepeater>
- *   </MediaGallery.Thumbnails>
- * </ServiceMedia.Gallery>
- *
- * // With autoPlay carousel
- * <ServiceMedia.Gallery
- *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
- *   infinite
- * >
- *   <MediaGallery.Viewport />
- *   <MediaGallery.Previous />
- *   <MediaGallery.Next />
- * </ServiceMedia.Gallery>
- *
- * // Full gallery with thumbnails and navigation
- * <ServiceMedia.Gallery infinite>
- *   <div className="gallery-container">
- *     <MediaGallery.Viewport className="main-image" />
- *     <div className="controls">
- *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
- *       <MediaGallery.Next>Next</MediaGallery.Next>
- *     </div>
- *     <MediaGallery.Thumbnails>
- *       <MediaGallery.ThumbnailRepeater>
- *         <MediaGallery.ThumbnailItem />
- *       </MediaGallery.ThumbnailRepeater>
- *     </MediaGallery.Thumbnails>
- *   </div>
- * </ServiceMedia.Gallery>
- * ```
- */
-export declare const Gallery: React.FC<GalleryProps>;
 /**
  * ServiceMedia compound component for displaying service media
  *
@@ -186,6 +125,5 @@ export declare const Gallery: React.FC<GalleryProps>;
 export declare const ServiceMedia: {
     Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLImageElement>>;
     Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
-    Gallery: React.FC<GalleryProps>;
 };
 export default ServiceMedia;

package/dist/react/service/ServiceMedia.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * ServiceMedia - Compound component for displaying service media
- * Provides components for displaying main media, cover media, and media galleries
+ * Provides components for displaying main media and cover media images
  */
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { WixMediaImage } from '@wix/headless-media/react';
-import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreServiceMediaMain from '../core/service/ServiceMediaMain.js';
 import * as CoreServiceMediaCover from '../core/service/ServiceMediaCover.js';
-import * as CoreServiceMediaGallery from '../core/service/ServiceMediaGallery.js';
 var TestIds;
 (function (TestIds) {
     TestIds["serviceMediaMain"] = "service-media-main";
@@ -94,62 +92,6 @@ export const Cover = React.forwardRef((props, ref) => {
     return (_jsx(CoreServiceMediaCover.CoverMedia, { children: ({ coverMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaCover, customElement: children, customElementProps: { media: coverMedia }, children: coverMedia?.image ? _jsx(WixMediaImage, { media: coverMedia }) : null })) }));
 });
 Cover.displayName = 'ServiceMedia.Cover';
-/**
- * Container for service media items gallery.
- * Renders a MediaGallery.Root with the service media items.
- * Supports autoPlay and infinite scroll options for carousel behavior.
- *
- * @component
- * @example
- * ```tsx
- * // Basic usage with MediaGallery components
- * <ServiceMedia.Gallery>
- *   <MediaGallery.Thumbnails>
- *     <MediaGallery.ThumbnailRepeater>
- *       <MediaGallery.ThumbnailItem />
- *     </MediaGallery.ThumbnailRepeater>
- *   </MediaGallery.Thumbnails>
- * </ServiceMedia.Gallery>
- *
- * // With autoPlay carousel
- * <ServiceMedia.Gallery
- *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
- *   infinite
- * >
- *   <MediaGallery.Viewport />
- *   <MediaGallery.Previous />
- *   <MediaGallery.Next />
- * </ServiceMedia.Gallery>
- *
- * // Full gallery with thumbnails and navigation
- * <ServiceMedia.Gallery infinite>
- *   <div className="gallery-container">
- *     <MediaGallery.Viewport className="main-image" />
- *     <div className="controls">
- *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
- *       <MediaGallery.Next>Next</MediaGallery.Next>
- *     </div>
- *     <MediaGallery.Thumbnails>
- *       <MediaGallery.ThumbnailRepeater>
- *         <MediaGallery.ThumbnailItem />
- *       </MediaGallery.ThumbnailRepeater>
- *     </MediaGallery.Thumbnails>
- *   </div>
- * </ServiceMedia.Gallery>
- * ```
- */
-export const Gallery = (props) => {
-    const { children, infinite, autoPlay } = props;
-    return (_jsx(CoreServiceMediaGallery.MediaGallery, { children: ({ mediaItems }) => {
-            const mediaGalleryServiceConfig = {
-                media: mediaItems,
-                infinite,
-                autoPlay,
-            };
-            return (_jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }));
-        } }));
-};
-Gallery.displayName = 'ServiceMedia.Gallery';
 /**
  * ServiceMedia compound component for displaying service media
  *
@@ -170,6 +112,5 @@ Gallery.displayName = 'ServiceMedia.Gallery';
 export const ServiceMedia = {
     Main,
     Cover,
-    Gallery,
 };
 export default ServiceMedia;

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

@@ -6,6 +6,7 @@
  * 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';
@@ -46,9 +47,10 @@ export declare enum TestIds {
     timeSlotStaffMemberActionSelect = "time-slot-staff-member-action-select"
 }
 /**
- * Props for TimeSlot.StartDate component
+ * Props for TimeSlot.StartDate component.
+ * Inherits formatting options from DateData (dateTimeFormatOptions, locale).
  */
-export interface StartDateProps {
+export interface StartDateProps extends Omit<DateData, 'date'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         startDate: Date;
@@ -65,7 +67,13 @@ export interface StartDateProps {
  * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
- * // With custom formatting
+ * // 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>
@@ -75,9 +83,10 @@ export interface StartDateProps {
  */
 export declare const StartDate: React.ForwardRefExoticComponent<StartDateProps & React.RefAttributes<HTMLElement>>;
 /**
- * Props for TimeSlot.EndDate component
+ * Props for TimeSlot.EndDate component.
+ * Inherits formatting options from DateData (dateTimeFormatOptions, locale).
  */
-export interface EndDateProps {
+export interface EndDateProps extends Omit<DateData, 'date'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         endDate: Date;
@@ -94,7 +103,13 @@ export interface EndDateProps {
  * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
- * // With custom formatting
+ * // 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>

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

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * 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 { GenericList, Date, } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 /**
@@ -56,7 +56,13 @@ export var TestIds;
  * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
- * // With custom formatting
+ * // 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>
@@ -65,11 +71,15 @@ export var TestIds;
  * ```
  */
 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.toLocaleTimeString([], {
-                    hour: '2-digit',
-                    minute: '2-digit',
-                }) }) })) }));
+    const { asChild, children, className, dateTimeFormatOptions, locale } = 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(Date, { date: {
+                    date: startDate,
+                    locale,
+                    dateTimeFormatOptions: dateTimeFormatOptions ?? {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                    },
+                } }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
@@ -82,7 +92,13 @@ StartDate.displayName = 'TimeSlot.StartDate';
  * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
- * // With custom formatting
+ * // 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>
@@ -91,11 +107,15 @@ StartDate.displayName = 'TimeSlot.StartDate';
  * ```
  */
 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.toLocaleTimeString([], {
-                    hour: '2-digit',
-                    minute: '2-digit',
-                }) }) })) }));
+    const { asChild, children, className, dateTimeFormatOptions, locale } = 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(Date, { date: {
+                    date: endDate,
+                    locale,
+                    dateTimeFormatOptions: dateTimeFormatOptions ?? {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                    },
+                } }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**
@@ -168,7 +188,7 @@ export const Select = React.forwardRef((props, ref) => {
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: children || label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';

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

@@ -5,7 +5,6 @@
 import React from 'react';
 import { ListVariant } 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 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, LocationNameProps as TimeSlotLocationNameProps, StaffMembersProps as TimeSlotStaffMembersProps, StaffMemberRepeaterProps as TimeSlotStaffMemberRepeaterProps, StaffMemberNameProps as TimeSlotStaffMemberNameProps, SelectStaffMemberProps as TimeSlotSelectStaffMemberProps, ClearStaffSelectionProps as TimeSlotClearStaffSelectionProps, } from './TimeSlot.js';
 /**
@@ -120,32 +119,11 @@ 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 Date (constructed from the raw localStartDate string) */
-    startDate: Date;
-    /** End date/time as Date (constructed from the raw localEndDate string) */
-    endDate: Date;
-    /** Duration in minutes */
-    durationInMinutes: number;
-    /** 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: TimeSlotRepeaterChildren;
+    children: React.ReactNode;
 }
 export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;
 /**
@@ -193,36 +171,12 @@ export interface DateRangeInputProps {
         startDate: Date;
         endDate: Date;
         onChange: (start: Date, end: Date) => void;
+        /** IANA timezone string for the time slots (e.g., "America/New_York") */
+        timezone: string | undefined;
     }>;
     /** 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.
- *
- * Default rendering provides two native date inputs.
- *
- * @component
- * @example
- * ```tsx
- * // Default usage - renders two date inputs
- * <TimeSlotList.DateRange.Input className="flex gap-2" />
- *
- * // With asChild for custom rendering
- * <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
  */

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * TimeSlotList - High-level component for displaying time slot list information
  * Provides components for displaying timezone and time slot data
@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { startOfDay, endOfDay, parse, format } from 'date-fns';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
@@ -14,9 +15,19 @@ import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, A
 // ============================================================================
 /**
  * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ * Uses the specified timezone or falls back to local timezone
  */
-function toISODateString(date) {
-    return date.toISOString().split('T')[0] ?? '';
+function toISODateString(date, timezone) {
+    if (timezone) {
+        const formatter = new Intl.DateTimeFormat('en-CA', {
+            timeZone: timezone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        });
+        return formatter.format(date);
+    }
+    return format(date, 'yyyy-MM-dd');
 }
 /**
  * TimeSlot with required id field for GenericList
@@ -117,34 +128,22 @@ export const TimeSlots = React.forwardRef((props, ref) => {
 TimeSlots.displayName = 'TimeSlotList.TimeSlots';
 /**
  * Internal component that wraps each time slot item with context provider.
- * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children })) }) }));
+    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: children })) }) }));
 };
 /**
- * Repeater component that renders each time slot.
+ * Repeater component that renders TimeSlot.Root for each time slot.
  * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
- * Automatically provides TimeSlot context to 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>
  * ```
  */
 const generateSlotKey = (timeSlot) => {
@@ -152,7 +151,7 @@ const generateSlotKey = (timeSlot) => {
 };
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: children }, generateSlotKey(timeSlot))), children: undefined }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, generateSlotKey(timeSlot))), children: children }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**
@@ -203,14 +202,18 @@ export const Actions = {
  * </TimeSlotList.DateRange.Input>
  * ```
  */
-export const DateRangeInput = React.forwardRef((props, ref) => {
+const DateRangeInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => {
-            const defaultContent = (_jsxs("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, children: [_jsx("input", { type: "date", value: toISODateString(startDate), onChange: (e) => setDateRange(new Date(e.target.value), endDate) }), _jsx("span", { children: "-" }), _jsx("input", { type: "date", value: toISODateString(endDate), onChange: (e) => setDateRange(startDate, new Date(e.target.value)) })] }));
+    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange, timezone }) => {
+            const defaultContent = (_jsx("input", { ref: ref, type: "date", className: className, "data-testid": TestIds.timeSlotListDateRangeInput, value: toISODateString(startDate, timezone), required: true, onChange: (e) => {
+                    const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
+                    setDateRange(startOfDay(date), endOfDay(date));
+                } }));
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
                     startDate,
                     endDate,
                     onChange: setDateRange,
+                    timezone,
                 }, ...otherProps, children: defaultContent }));
         } }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "6041aa234f74932e69f71ef03f6f6ca73f31c1c5a4a0cd64898112ed"
+  "falconPackageHash": "812d699830f343f6c162ed64b79333910ca8641451f43f1090ae9c17"
 }