@wix/headless-bookings 0.0.91 → 0.0.93

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

@@ -122,12 +122,11 @@ export declare const Root: React.ForwardRefExoticComponent<ServiceRootProps & Re
 /**
  * Props for Service Name component
  */
-export interface NameProps {
+export interface NameProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the service name with customizable rendering.
@@ -157,12 +156,11 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Service Description component
  */
-export interface DescriptionProps {
+export interface DescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         description: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the service description with customizable rendering.
@@ -231,12 +229,11 @@ export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.R
 /**
  * Props for Service Tagline component
  */
-export interface TaglineProps {
+export interface TaglineProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         tagline: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the service tagline with customizable rendering.
@@ -272,12 +269,11 @@ export declare const Tagline: React.ForwardRefExoticComponent<TaglineProps & Rea
 /**
  * Props for Service DurationInMinutes component
  */
-export interface DurationInMinutesProps {
+export interface DurationInMinutesProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         duration: number;
     }>;
-    className?: string;
 }
 /**
  * Displays the service duration in minutes (raw number) with customizable rendering.
@@ -314,12 +310,11 @@ export declare const DurationInMinutes: React.ForwardRefExoticComponent<Duration
 /**
  * Props for Service Type component
  */
-export interface TypeProps {
+export interface TypeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         type: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the service type (APPOINTMENT, CLASS, COURSE, etc.) with customizable rendering.
@@ -358,7 +353,7 @@ export declare const Type: React.ForwardRefExoticComponent<TypeProps & React.Ref
 /**
  * Props for Service Category component
  */
-export interface CategoryProps {
+export interface CategoryProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         category: {
@@ -366,7 +361,6 @@ export interface CategoryProps {
             _id?: string;
         };
     }>;
-    className?: string;
 }
 /**
  * Displays the service category with customizable rendering.
@@ -1091,13 +1085,12 @@ export declare namespace Schedule {
 /**
  * Props for Service DefaultCapacity component
  */
-export interface DefaultCapacityProps {
+export interface DefaultCapacityProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         defaultCapacity: number;
         isClassOrCourse: boolean;
     }>;
-    className?: string;
 }
 /**
  * Displays the service default capacity with customizable rendering.
@@ -1121,12 +1114,11 @@ export declare const DefaultCapacity: React.ForwardRefExoticComponent<DefaultCap
 /**
  * Props for Service AvailableOnline component
  */
-export interface AvailableOnlineProps {
+export interface AvailableOnlineProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         availableOnline: boolean;
     }>;
-    className?: string;
     label?: string;
 }
 /**

package/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/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/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/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/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/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/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/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