@wix/headless-bookings 0.0.92 → 0.0.93

package/cjs/dist/react/service/Service.js

@@ -148,8 +148,8 @@ Root.displayName = 'Service.Root';
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreService.Info, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
 });
 Name.displayName = 'Service.Name';
 /**
@@ -168,8 +168,8 @@ Name.displayName = 'Service.Name';
  * ```
  */
 export const Description = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ description }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDescription, customElement: children, customElementProps: { description }, children: _jsx("div", { children: description }) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreService.Info, { children: ({ description }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceDescription, customElement: children, customElementProps: { description }, children: _jsx("div", { children: description }) })) }));
 });
 Description.displayName = 'Service.Description';
 /**
@@ -261,8 +261,8 @@ Price.displayName = 'Service.Price';
  * ```
  */
 export const Tagline = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ tagline }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceTagline, customElement: children, customElementProps: { tagline }, children: tagline ? _jsx("p", { children: tagline }) : null })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreService.Info, { children: ({ tagline }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceTagline, customElement: children, customElementProps: { tagline }, children: tagline ? _jsx("p", { children: tagline }) : null })) }));
 });
 Tagline.displayName = 'Service.Tagline';
 /**
@@ -297,9 +297,9 @@ Tagline.displayName = 'Service.Tagline';
  * ```
  */
 export const DurationInMinutes = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreService.Info, { children: ({ duration }) => {
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDurationInMinutes, customElement: children, customElementProps: { duration }, children: duration ? _jsx("span", { children: duration }) : null }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceDurationInMinutes, customElement: children, customElementProps: { duration }, children: duration ? _jsx("span", { children: duration }) : null }));
         } }));
 });
 DurationInMinutes.displayName = 'Service.DurationInMinutes';
@@ -337,8 +337,8 @@ DurationInMinutes.displayName = 'Service.DurationInMinutes';
  * ```
  */
 export const Type = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ type }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceType, customElement: children, customElementProps: { type }, children: type ? _jsx("span", { children: type }) : null })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreService.Info, { children: ({ type }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceType, customElement: children, customElementProps: { type }, children: type ? _jsx("span", { children: type }) : null })) }));
 });
 Type.displayName = 'Service.Type';
 /**
@@ -377,8 +377,8 @@ Type.displayName = 'Service.Type';
  * ```
  */
 export const Category = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreService.Info, { children: ({ category }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceCategory, customElement: children, customElementProps: { category }, children: category?.name ? _jsx("span", { children: category.name }) : null })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreService.Info, { children: ({ category }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceCategory, customElement: children, customElementProps: { category }, children: category?.name ? _jsx("span", { children: category.name }) : null })) }));
 });
 Category.displayName = 'Service.Category';
 /**
@@ -413,13 +413,13 @@ Category.displayName = 'Service.Category';
  * ```
  */
 const LocationsBase = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attributes } = props;
+    const { asChild, children, className, ...rest } = props;
     return (_jsx(CoreService.Info, { children: ({ locations }) => {
             // Container level: don't render if no locations
             if (!locations || locations.length === 0) {
                 return null;
             }
-            return (_jsx(LocationList.Root, { locationListConfig: { locations }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...attributes, asChild: asChild, className: className, "data-testid": TestIds.serviceLocations, customElement: children, children: _jsx("div", { children: children }) }) }));
+            return (_jsx(LocationList.Root, { locationListConfig: { locations }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...rest, asChild: asChild, className: className, "data-testid": TestIds.serviceLocations, customElement: children, children: _jsx("div", { children: children }) }) }));
         } }));
 });
 LocationsBase.displayName = 'Service.Locations';
@@ -501,13 +501,13 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  * ```
  */
 const StaffMembersBase = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attributes } = props;
+    const { asChild, children, className, ...rest } = props;
     return (_jsx(CoreService.Info, { children: ({ staff }) => {
             // Container level: don't render if no staff members
             if (!staff || staff.length === 0) {
                 return null;
             }
-            return (_jsx(StaffMemberListModule.Root, { staffMemberListConfig: { staffMembers: staff }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...attributes, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: children }) }) }));
+            return (_jsx(StaffMemberListModule.Root, { staffMemberListConfig: { staffMembers: staff }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...rest, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: children }) }) }));
         } }));
 });
 StaffMembersBase.displayName = 'Service.StaffMembers';
@@ -618,20 +618,20 @@ export var Actions;
      * ```
      */
     Actions.Select = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label, onClick, ...buttonProps } = props;
+        const { asChild, children, className, label, onClick, ...rest } = props;
         return (_jsx(CoreService.Actions, { children: ({ select, rawService, bookable, selected, requiresAvailability, }) => {
                 const handleClick = () => {
                     select();
                     onClick?.(rawService);
                 };
-                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, disabled: !bookable, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
                         onClick: handleClick,
                         disabled: !bookable,
                         selected,
                         bookable,
                         requiresAvailability,
                         service: rawService,
-                    }, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: !bookable, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: children || label }) }));
+                    }, children: _jsx("button", { children: children || label }) }));
             } }));
     });
     Actions.Select.displayName = 'Service.Actions.Select';
@@ -665,7 +665,7 @@ export var Actions;
      * ```
      */
     Actions.Add = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label, onClick, ...buttonProps } = props;
+        const { asChild, children, className, label, onClick, ...rest } = props;
         return (_jsx(CoreService.Actions, { children: ({ add, rawService, bookable, selected, requiresAvailability }) => {
                 // Disabled when already selected (can't add again) or not bookable
                 const isDisabled = selected || !bookable;
@@ -673,14 +673,14 @@ export var Actions;
                     add();
                     onClick?.(rawService);
                 };
-                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, disabled: isDisabled, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
                         onClick: handleClick,
                         disabled: isDisabled,
                         selected,
                         bookable,
                         requiresAvailability,
                         service: rawService,
-                    }, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: isDisabled, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: children || label }) }));
+                    }, children: _jsx("button", { children: children || label }) }));
             } }));
     });
     Actions.Add.displayName = 'Service.Actions.Add';
@@ -714,7 +714,7 @@ export var Actions;
      * ```
      */
     Actions.Remove = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label, onClick, ...buttonProps } = props;
+        const { asChild, children, className, label, onClick, ...rest } = props;
         return (_jsx(CoreService.Actions, { children: ({ remove, rawService, bookable, selected, requiresAvailability, }) => {
                 // Disabled when not selected (nothing to remove) or not bookable
                 const isDisabled = !selected || !bookable;
@@ -722,14 +722,14 @@ export var Actions;
                     remove();
                     onClick?.(rawService);
                 };
-                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, disabled: isDisabled, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
                         onClick: handleClick,
                         disabled: isDisabled,
                         selected,
                         bookable,
                         requiresAvailability,
                         service: rawService,
-                    }, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: isDisabled, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: children || label }) }));
+                    }, children: _jsx("button", { children: children || label }) }));
             } }));
     });
     Actions.Remove.displayName = 'Service.Actions.Remove';
@@ -1067,10 +1067,10 @@ export var Schedule;
  * ```
  */
 export const DefaultCapacity = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreService.Info, { children: ({ type, defaultCapacity }) => {
             const isClassOrCourse = type === 'CLASS' || type === 'COURSE';
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceDefaultCapacity, customElement: children, customElementProps: { defaultCapacity, isClassOrCourse }, children: isClassOrCourse && defaultCapacity ? (_jsxs("span", { children: ["Max ", defaultCapacity, " participants"] })) : null }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceDefaultCapacity, customElement: children, customElementProps: { defaultCapacity, isClassOrCourse }, children: isClassOrCourse && defaultCapacity ? (_jsxs("span", { children: ["Max ", defaultCapacity, " participants"] })) : null }));
         } }));
 });
 DefaultCapacity.displayName = 'Service.DefaultCapacity';
@@ -1098,10 +1098,10 @@ DefaultCapacity.displayName = 'Service.DefaultCapacity';
  * ```
  */
 export const AvailableOnline = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, label, ...rest } = props;
     return (_jsx(CoreService.Service, { children: ({ service }) => {
             const availableOnline = service.conferencing?.enabled ?? false;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceAvailableOnline, customElement: children, customElementProps: { availableOnline }, children: availableOnline && label ? _jsx("span", { children: label }) : null }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.serviceAvailableOnline, customElement: children, customElementProps: { availableOnline }, children: availableOnline && label ? _jsx("span", { children: label }) : null }));
         } }));
 });
 AvailableOnline.displayName = 'Service.AvailableOnline';

package/cjs/dist/react/staff-member/StaffMember.d.ts

@@ -58,12 +58,11 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for StaffMember.Name component
  */
-export interface NameProps {
+export interface NameProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
         name: string | undefined;
     }>;
-    className?: string;
 }
 /**
  * Displays the staff member name.

package/cjs/dist/react/staff-member/StaffMember.js

@@ -74,9 +74,9 @@ Root.displayName = 'StaffMember.Root';
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     const { name } = useStaffMemberContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberName, customElement: children, customElementProps: { name }, ...attrs, children: name ? _jsx("span", { children: name }) : null }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.staffMemberName, customElement: children, customElementProps: { name }, children: name ? _jsx("span", { children: name }) : null }));
 });
 Name.displayName = 'StaffMember.Name';
 /**
@@ -123,7 +123,7 @@ Raw.displayName = 'StaffMember.Raw';
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, onClick, label, className, ...buttonProps } = props;
+    const { asChild, children, onClick, label, className, ...rest } = props;
     return (_jsx(CoreStaffMember.Actions, { children: ({ select, selected, rawStaffMember }) => {
             const handleClick = () => {
                 select();
@@ -131,11 +131,11 @@ const Select = React.forwardRef((props, ref) => {
                     onClick?.(rawStaffMember);
                 }
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberActionSelect, "data-selected": selected, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, "data-testid": TestIds.staffMemberActionSelect, "data-selected": selected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     selected,
                     staffMember: rawStaffMember,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 Select.displayName = 'StaffMember.Actions.Select';

package/cjs/dist/react/staff-member/StaffMemberList.d.ts

@@ -13,7 +13,8 @@ export declare enum TestIds {
     staffMemberListRoot = "staff-member-list-root",
     staffMemberListStaffMembers = "staff-member-list-staff-members",
     staffMemberListStaffMember = "staff-member-list-staff-member",
-    staffMemberListActionClear = "staff-member-list-action-clear"
+    staffMemberListActionClear = "staff-member-list-action-clear",
+    staffMemberListTotals = "staff-member-list-totals"
 }
 /**
  * Props for the StaffMemberList root component
@@ -77,13 +78,12 @@ export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffM
 /**
  * Props for StaffMemberList.Totals component
  */
-export interface TotalsProps {
+export interface TotalsProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
         count: number;
         hasStaffMembers: boolean;
     }>;
-    className?: string;
 }
 /**
  * Displays the total count of staff members.

package/cjs/dist/react/staff-member/StaffMemberList.js

@@ -23,6 +23,7 @@ export var TestIds;
     TestIds["staffMemberListStaffMembers"] = "staff-member-list-staff-members";
     TestIds["staffMemberListStaffMember"] = "staff-member-list-staff-member";
     TestIds["staffMemberListActionClear"] = "staff-member-list-action-clear";
+    TestIds["staffMemberListTotals"] = "staff-member-list-totals";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the StaffMemberList service context for rendering staff member lists.
@@ -110,10 +111,10 @@ StaffMemberRepeater.displayName = 'StaffMemberList.StaffMemberRepeater';
  * ```
  */
 export const Totals = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...attrs } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreStaffMemberList.StaffMembers, { children: ({ staffMembers, hasStaffMembers }) => {
             const count = staffMembers.length;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { count, hasStaffMembers }, ...attrs, children: _jsx("span", { children: count }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.staffMemberListTotals, customElement: children, customElementProps: { count, hasStaffMembers }, children: _jsx("span", { children: count }) }));
         } }));
 });
 Totals.displayName = 'StaffMemberList.Totals';
@@ -147,7 +148,7 @@ Totals.displayName = 'StaffMemberList.Totals';
  * ```
  */
 const Clear = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreStaffMemberList.Actions, { children: ({ selectedStaffMember }) => {
             let bookingService = null;
             try {
@@ -160,9 +161,9 @@ const Clear = React.forwardRef((props, ref) => {
                 bookingService?.actions.clearResourceByType(STAFF_MEMBER_RESOURCE_TYPE_ID);
                 onClick?.(selectedStaffMember);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberListActionClear, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, "data-testid": TestIds.staffMemberListActionClear, customElement: children, customElementProps: {
                     onClick: handleClick,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 Clear.displayName = 'StaffMemberList.Actions.Clear';

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

@@ -121,12 +121,11 @@ export declare const EndDate: React.ForwardRefExoticComponent<EndDateProps & Rea
 /**
  * Props for TimeSlot.Duration component
  */
-export interface DurationProps {
+export interface DurationProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         durationInMinutes: number;
     }>;
-    className?: string;
 }
 /**
  * Calculates and displays the duration between start and end times in minutes.
@@ -249,12 +248,11 @@ export declare const Actions: {
 /**
  * Props for TimeSlot.Location.Name component
  */
-export interface LocationNameProps {
+export interface LocationNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the location name.
@@ -283,9 +281,8 @@ export declare const Location: {
 /**
  * Props for TimeSlot.StaffMembers component
  */
-export interface StaffMembersProps {
+export interface StaffMembersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     children: React.ReactNode;
-    className?: string;
 }
 /**
  * Container for the staff members list within a time slot.
@@ -329,12 +326,11 @@ export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffM
 /**
  * Props for TimeSlot.StaffMember.Name component
  */
-export interface StaffMemberNameProps {
+export interface StaffMemberNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the staff member name.

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

@@ -24,8 +24,8 @@ import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, timeSlot, asChild, className, ...attrs } = props;
-    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...attrs, children: children }) }));
+    const { children, timeSlot, asChild, className } = props;
+    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, children: children }) }));
 });
 Root.displayName = 'TimeSlot.Root';
 // ============================================================================
@@ -137,8 +137,8 @@ EndDate.displayName = 'TimeSlot.EndDate';
  * ```
  */
 export const Duration = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ durationInMinutes }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotDuration, customElement: children, customElementProps: { durationInMinutes }, children: _jsx("span", { children: durationInMinutes }) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreTimeSlot.Info, { children: ({ durationInMinutes }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.timeSlotDuration, customElement: children, customElementProps: { durationInMinutes }, children: _jsx("span", { children: durationInMinutes }) })) }));
 });
 Duration.displayName = 'TimeSlot.Duration';
 /**
@@ -175,19 +175,19 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, timeSlot, isSelected, bookable }) => {
             const handleClick = () => {
                 selectTimeSlot();
                 onClick?.(timeSlot);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, disabled: !bookable, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
                     onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
                     timeSlot,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: !bookable, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -222,7 +222,7 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
@@ -231,9 +231,9 @@ export const ClearStaffSelection = React.forwardRef((props, ref) => {
                 clearStaffSelection();
                 onClick?.(timeSlot);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
                     onClick: handleClick,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -262,9 +262,9 @@ export const Actions = {
  * ```
  */
 export const LocationName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreTimeSlot.Info, { children: ({ locationName }) => {
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotLocationName, customElement: children, customElementProps: { name: locationName }, children: _jsx("span", { children: locationName }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.timeSlotLocationName, customElement: children, customElementProps: { name: locationName }, children: _jsx("span", { children: locationName }) }));
         } }));
 });
 LocationName.displayName = 'TimeSlot.Location.Name';
@@ -290,9 +290,9 @@ export const Location = {
  * ```
  */
 export const StaffMembers = React.forwardRef((props, ref) => {
-    const { children, className } = props;
+    const { children, ...attrs } = props;
     return (_jsx(CoreTimeSlot.StaffMembers, { children: ({ staffMembers }) => {
-            return (_jsx(GenericList.Root, { items: staffMembers, children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotStaffMembers, children: children }) }));
+            return (_jsx(GenericList.Root, { items: staffMembers, children: _jsx("div", { ref: ref, ...attrs, "data-testid": TestIds.timeSlotStaffMembers, children: children }) }));
         } }));
 });
 StaffMembers.displayName = 'TimeSlot.StaffMembers';
@@ -341,8 +341,8 @@ StaffMemberRepeater.displayName = 'TimeSlot.StaffMemberRepeater';
  * ```
  */
 export const StaffMemberName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.StaffMemberInfo, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberInfo, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.timeSlotStaffMemberName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
 });
 StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
 /**
@@ -379,17 +379,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
             const handleClick = () => {
                 selectStaffMember();
                 onClick?.(staffMember);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onClick: handleClick, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     isSelected,
                     staffMember,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { children: children || label }) }));
         } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';

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

@@ -163,7 +163,7 @@ export declare const Actions: {
 /**
  * Props for DateRange.Input component
  */
-export interface DateRangeInputProps {
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'type' | 'value' | 'defaultValue'> {
     /** Whether to render as a child component */
     asChild?: boolean;
     /** Children for custom rendering */
@@ -174,8 +174,6 @@ export interface DateRangeInputProps {
         /** IANA timezone string for the time slots (e.g., "America/New_York") */
         timezone: string | undefined;
     }>;
-    /** CSS classes to apply to the container */
-    className?: string;
 }
 /**
  * DateRange namespace for TimeSlotList date range filter

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

@@ -182,7 +182,7 @@ 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.
+ * Default rendering provides a native date input.
  *
  * @component
  * @example
@@ -203,18 +203,19 @@ export const Actions = {
  * ```
  */
 const DateRangeInput = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...otherProps } = props;
+    const { asChild, children, className, onChange, ...rest } = props;
     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: {
+            const handleChange = (e) => {
+                const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
+                setDateRange(startOfDay(date), endOfDay(date));
+                onChange?.(e);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onChange: handleChange, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
                     startDate,
                     endDate,
                     onChange: setDateRange,
                     timezone,
-                }, ...otherProps, children: defaultContent }));
+                }, children: _jsx("input", { ref: ref, type: "date", value: toISODateString(startDate, timezone) }) }));
         } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';

package/dist/react/booking/Book.d.ts

@@ -11,7 +11,7 @@ export interface BookProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
     asChild?: boolean;
     children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode);
     label?: string;
-    loadingState?: string;
+    loadingState?: React.ReactNode;
     disabled?: boolean;
     /**
      * Called when checkout is required for payment.

package/dist/react/booking/Book.js

@@ -57,7 +57,7 @@ var TestIds;
  * ```
  */
 export const Book = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...buttonProps } = props;
+    const { asChild, children, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...rest } = props;
     return (_jsx(CoreBook.Book, { onCheckout: (result) => {
             // Create navigateToCheckout with checkoutId captured
             const navigateToCheckout = (options) => navigateToCheckoutUtil({
@@ -68,12 +68,15 @@ export const Book = React.forwardRef((props, ref) => {
             return onCheckout?.(navigateToCheckout);
         }, onComplete: (result) => {
             return onComplete?.({ orderId: result.orderId });
-        }, onError: onError, disabled: disabled, children: (childProps) => {
-            const handleClick = () => {
-                childProps.onClick();
-                onClick?.(childProps);
+        }, onError: onError, disabled: disabled, children: (coreBookProps) => {
+            const handleClick = async () => {
+                await coreBookProps.onClick();
+                onClick?.(coreBookProps);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: childProps.disabled, children: childProps.isLoading
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, onClick: handleClick, disabled: coreBookProps.disabled, "data-testid": TestIds.bookingActionBook, "data-in-progress": coreBookProps.isLoading, "data-can-book": coreBookProps.canBook, customElement: children, customElementProps: {
+                    ...coreBookProps,
+                    onClick: handleClick,
+                }, children: _jsx("button", { children: coreBookProps.isLoading
                         ? loadingState
                         : children || label }) }));
         } }));

package/dist/react/booking/BookingItem.d.ts

@@ -44,12 +44,11 @@ export declare function TimeSlot(props: TimeSlotProps): React.ReactNode;
 export declare namespace TimeSlot {
     var displayName: string;
 }
-export interface StaffNameProps {
+export interface StaffNameProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the staff member's name from the current booking item.

package/dist/react/booking/BookingItem.js

@@ -61,11 +61,11 @@ TimeSlot.displayName = 'BookingItem.TimeSlot';
  * ```
  */
 export const StaffName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
             if (!staffName)
                 return null;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingItemStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.bookingItemStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
         } }));
 });
 StaffName.displayName = 'BookingItem.StaffName';