@wix/headless-bookings 0.0.31 → 0.0.32

package/cjs/dist/react/core/payment/Payment.js

@@ -43,7 +43,7 @@ function RootContent({ children, }) {
  * ```
  */
 export function Root(props) {
-    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants } = props;
+    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
     // Merge public config with lazy loading props into internal config
     const internalConfig = {
         ...paymentServiceConfig,

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

@@ -21,13 +21,13 @@ export interface StartDateProps {
     className?: string;
 }
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,13 +50,13 @@ export interface EndDateProps {
     className?: string;
 }
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -112,12 +112,16 @@ export interface SelectProps {
 }
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -149,11 +153,15 @@ export interface ClearStaffSelectionProps {
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -297,12 +305,16 @@ export interface SelectStaffMemberProps {
 }
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>

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

@@ -31,13 +31,13 @@ var TestIds;
     TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
 })(TestIds || (TestIds = {}));
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,17 +50,20 @@ 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.toString() }) })) }));
+    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',
+                }) }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -73,7 +76,10 @@ 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.toString() }) })) }));
+    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',
+                }) }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**
@@ -101,12 +107,16 @@ export const Duration = React.forwardRef((props, ref) => {
 Duration.displayName = 'TimeSlot.Duration';
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -124,7 +134,7 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     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: selectTimeSlot,
@@ -138,11 +148,15 @@ Select.displayName = 'TimeSlot.Actions.Select';
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -157,7 +171,7 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Change' } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
             if (!clearStaffSelection) {
                 return null;
@@ -278,12 +292,16 @@ export const StaffMemberName = React.forwardRef((props, ref) => {
 StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>
@@ -301,7 +319,7 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                 onClick: selectStaffMember,
                 isSelected,

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

@@ -190,9 +190,15 @@ export interface DateRangeInputProps {
  * 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

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

@@ -9,6 +9,15 @@ 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 as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ */
+function toISODateString(date) {
+    return date.toISOString().split('T')[0] ?? '';
+}
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -178,9 +187,15 @@ export const Actions = {
  * 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
@@ -194,11 +209,14 @@ export const Actions = {
  */
 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()] }) })) }));
+    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(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                    startDate,
+                    endDate,
+                    onChange: setDateRange,
+                }, ...otherProps, children: defaultContent }));
+        } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
 /**

package/cjs/dist/services/payment/payment.d.ts

@@ -5,7 +5,7 @@
  */
 import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
 export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
-export type { PaymentServiceAPI, PaymentServiceInternalConfig } from './payment.def.js';
+export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;
     __config: {};

package/dist/react/core/payment/Payment.js

@@ -43,7 +43,7 @@ function RootContent({ children, }) {
  * ```
  */
 export function Root(props) {
-    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants } = props;
+    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
     // Merge public config with lazy loading props into internal config
     const internalConfig = {
         ...paymentServiceConfig,

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

@@ -21,13 +21,13 @@ export interface StartDateProps {
     className?: string;
 }
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,13 +50,13 @@ export interface EndDateProps {
     className?: string;
 }
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -112,12 +112,16 @@ export interface SelectProps {
 }
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -149,11 +153,15 @@ export interface ClearStaffSelectionProps {
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -297,12 +305,16 @@ export interface SelectStaffMemberProps {
 }
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>

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

@@ -31,13 +31,13 @@ var TestIds;
     TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
 })(TestIds || (TestIds = {}));
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,17 +50,20 @@ 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.toString() }) })) }));
+    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',
+                }) }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -73,7 +76,10 @@ 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.toString() }) })) }));
+    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',
+                }) }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**
@@ -101,12 +107,16 @@ export const Duration = React.forwardRef((props, ref) => {
 Duration.displayName = 'TimeSlot.Duration';
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -124,7 +134,7 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     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: selectTimeSlot,
@@ -138,11 +148,15 @@ Select.displayName = 'TimeSlot.Actions.Select';
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -157,7 +171,7 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Change' } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
             if (!clearStaffSelection) {
                 return null;
@@ -278,12 +292,16 @@ export const StaffMemberName = React.forwardRef((props, ref) => {
 StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>
@@ -301,7 +319,7 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                 onClick: selectStaffMember,
                 isSelected,

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

@@ -190,9 +190,15 @@ export interface DateRangeInputProps {
  * 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

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

@@ -9,6 +9,15 @@ 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 as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ */
+function toISODateString(date) {
+    return date.toISOString().split('T')[0] ?? '';
+}
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -178,9 +187,15 @@ export const Actions = {
  * 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
@@ -194,11 +209,14 @@ export const Actions = {
  */
 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()] }) })) }));
+    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(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                    startDate,
+                    endDate,
+                    onChange: setDateRange,
+                }, ...otherProps, children: defaultContent }));
+        } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
 /**

package/dist/services/payment/payment.d.ts

@@ -5,7 +5,7 @@
  */
 import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
 export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
-export type { PaymentServiceAPI, PaymentServiceInternalConfig } from './payment.def.js';
+export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;
     __config: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "7f0622f4f250d712f40cd5c74b49c920e2e55e5b19b7e1a86f572158"
+  "falconPackageHash": "b165685e9ccb4d9fe0e8d310393e59018c8d44c874e2c7cd0fc9906a"
 }