@wix/headless-bookings 0.0.89 → 0.0.91

package/dist/react/location/LocationList.d.ts

@@ -103,15 +103,13 @@ export declare const Totals: React.ForwardRefExoticComponent<TotalsProps & React
 /**
  * Props for LocationList.Actions.Clear component
  */
-export interface ClearProps {
+export interface ClearProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: {
         onClick: () => void;
     }) => React.ReactNode);
-    className?: string;
     label?: string;
-    /** Callback fired when the clear button is clicked */
-    onClicked?: () => void;
+    onClick?: (location: Location | null) => void;
 }
 /**
  * Actions namespace for location list-level actions

package/dist/react/location/LocationList.js

@@ -153,6 +153,11 @@ Totals.displayName = 'LocationList.Totals';
  * // With custom label
  * <LocationList.Actions.Clear label="Clear selection" />
  *
+ * // With children as button content
+ * <LocationList.Actions.Clear className="text-destructive">
+ *   <span>Reset Location</span>
+ * </LocationList.Actions.Clear>
+ *
  * // With asChild
  * <LocationList.Actions.Clear asChild>
  *   <button className="btn-secondary">Clear location</button>
@@ -165,21 +170,23 @@ Totals.displayName = 'LocationList.Totals';
  * ```
  */
 const Clear = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Clear', onClicked } = props;
-    let bookingService = null;
-    try {
-        bookingService = useService(BookingServiceDefinition);
-    }
-    catch {
-        // BookingService not available - likely no ServiceManagerProvider
-    }
-    const handleClick = () => {
-        bookingService?.actions.clearLocation();
-        onClicked?.();
-    };
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
-            onClick: handleClick,
-        }, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    return (_jsx(CoreLocationList.Actions, { children: ({ selectedLocation }) => {
+            let bookingService = null;
+            try {
+                bookingService = useService(BookingServiceDefinition);
+            }
+            catch {
+                // BookingService not available - likely no ServiceManagerProvider
+            }
+            const handleClick = () => {
+                bookingService?.actions.clearLocation();
+                onClick?.(selectedLocation);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+        } }));
 });
 Clear.displayName = 'LocationList.Actions.Clear';
 /**

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

@@ -646,7 +646,7 @@ export declare namespace Actions {
     /**
      * Props for Select action component
      */
-    interface SelectProps {
+    interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick'> {
         asChild?: boolean;
         children?: React.ReactNode | ((props: {
             bookable: boolean;
@@ -655,9 +655,9 @@ export declare namespace Actions {
             onClick: () => void;
             service: Service;
         }) => React.ReactNode);
-        className?: string;
         label?: string;
-        onClicked?: (service: Service) => void;
+        /** Called after selection with the selected service */
+        onClick?: (service: Service) => void;
     }
     /**
      * Select action component - replaces selection with only this service.
@@ -673,15 +673,10 @@ export declare namespace Actions {
      *   <Button variant="primary">Select Service</Button>
      * </Service.Actions.Select>
      *
-     * // With onClicked callback for navigation
+     * // With onClick callback for navigation
      * <Service.Actions.Select
-     *   asChild
-     *   onClicked={(service) => {
-     *     router.push(`/booking/time-slots/${service._id}`);
-     *   }}
-     * >
-     *   <Button variant="primary">Select Service</Button>
-     * </Service.Actions.Select>
+     *   onClick={() => router.push('/booking/time-slots')}
+     * />
      *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Select>
@@ -697,7 +692,7 @@ export declare namespace Actions {
     /**
      * Props for Add action component
      */
-    interface AddProps {
+    interface AddProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick'> {
         asChild?: boolean;
         children?: React.ReactNode | ((props: {
             bookable: boolean;
@@ -706,9 +701,9 @@ export declare namespace Actions {
             onClick: () => void;
             service: Service;
         }) => React.ReactNode);
-        className?: string;
         label?: string;
-        onClicked?: (service: Service) => void;
+        /** Called after adding with the added service */
+        onClick?: (service: Service) => void;
     }
     /**
      * Add action component - adds service to selection array.
@@ -724,15 +719,10 @@ export declare namespace Actions {
      *   <Button variant="secondary">Add Service</Button>
      * </Service.Actions.Add>
      *
-     * // With onClicked callback for custom behavior after adding
+     * // With onClick callback
      * <Service.Actions.Add
-     *   asChild
-     *   onClicked={(service) => {
-     *     console.log(`Added service: ${service.name}`);
-     *   }}
-     * >
-     *   <Button variant="secondary">Add Service</Button>
-     * </Service.Actions.Add>
+     *   onClick={() => console.log('Service added')}
+     * />
      *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Add>
@@ -748,7 +738,7 @@ export declare namespace Actions {
     /**
      * Props for Remove action component
      */
-    interface RemoveProps {
+    interface RemoveProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick'> {
         asChild?: boolean;
         children?: React.ReactNode | ((props: {
             bookable: boolean;
@@ -757,9 +747,9 @@ export declare namespace Actions {
             onClick: () => void;
             service: Service;
         }) => React.ReactNode);
-        className?: string;
         label?: string;
-        onClicked?: (service: Service) => void;
+        /** Called after removing with the removed service */
+        onClick?: (service: Service) => void;
     }
     /**
      * Remove action component - removes service from selection array.
@@ -775,15 +765,10 @@ export declare namespace Actions {
      *   <Button variant="destructive">Remove Service</Button>
      * </Service.Actions.Remove>
      *
-     * // With onClicked callback for custom behavior after removing
+     * // With onClick callback
      * <Service.Actions.Remove
-     *   asChild
-     *   onClicked={(service) => {
-     *     console.log(`Removed service: ${service.name}`);
-     *   }}
-     * >
-     *   <Button variant="destructive">Remove Service</Button>
-     * </Service.Actions.Remove>
+     *   onClick={() => console.log('Service removed')}
+     * />
      *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Remove>

package/dist/react/service/Service.js

@@ -602,15 +602,10 @@ export var Actions;
      *   <Button variant="primary">Select Service</Button>
      * </Service.Actions.Select>
      *
-     * // With onClicked callback for navigation
+     * // With onClick callback for navigation
      * <Service.Actions.Select
-     *   asChild
-     *   onClicked={(service) => {
-     *     router.push(`/booking/time-slots/${service._id}`);
-     *   }}
-     * >
-     *   <Button variant="primary">Select Service</Button>
-     * </Service.Actions.Select>
+     *   onClick={() => router.push('/booking/time-slots')}
+     * />
      *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Select>
@@ -623,11 +618,11 @@ export var Actions;
      * ```
      */
     Actions.Select = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Select Service', onClicked, } = props;
+        const { asChild, children, className, label, onClick, ...buttonProps } = props;
         return (_jsx(CoreService.Actions, { children: ({ select, rawService, bookable, selected, requiresAvailability, }) => {
                 const handleClick = () => {
                     select();
-                    onClicked?.(rawService);
+                    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: {
                         onClick: handleClick,
@@ -636,7 +631,7 @@ export var Actions;
                         bookable,
                         requiresAvailability,
                         service: rawService,
-                    }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
+                    }, 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 }) }));
             } }));
     });
     Actions.Select.displayName = 'Service.Actions.Select';
@@ -654,15 +649,10 @@ export var Actions;
      *   <Button variant="secondary">Add Service</Button>
      * </Service.Actions.Add>
      *
-     * // With onClicked callback for custom behavior after adding
+     * // With onClick callback
      * <Service.Actions.Add
-     *   asChild
-     *   onClicked={(service) => {
-     *     console.log(`Added service: ${service.name}`);
-     *   }}
-     * >
-     *   <Button variant="secondary">Add Service</Button>
-     * </Service.Actions.Add>
+     *   onClick={() => console.log('Service added')}
+     * />
      *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Add>
@@ -675,13 +665,13 @@ export var Actions;
      * ```
      */
     Actions.Add = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Add Service', onClicked, } = props;
+        const { asChild, children, className, label, onClick, ...buttonProps } = 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;
                 const handleClick = () => {
                     add();
-                    onClicked?.(rawService);
+                    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: {
                         onClick: handleClick,
@@ -689,7 +679,8 @@ export var Actions;
                         selected,
                         bookable,
                         requiresAvailability,
-                    }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
+                        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 }) }));
             } }));
     });
     Actions.Add.displayName = 'Service.Actions.Add';
@@ -707,15 +698,10 @@ export var Actions;
      *   <Button variant="destructive">Remove Service</Button>
      * </Service.Actions.Remove>
      *
-     * // With onClicked callback for custom behavior after removing
+     * // With onClick callback
      * <Service.Actions.Remove
-     *   asChild
-     *   onClicked={(service) => {
-     *     console.log(`Removed service: ${service.name}`);
-     *   }}
-     * >
-     *   <Button variant="destructive">Remove Service</Button>
-     * </Service.Actions.Remove>
+     *   onClick={() => console.log('Service removed')}
+     * />
      *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Remove>
@@ -728,13 +714,13 @@ export var Actions;
      * ```
      */
     Actions.Remove = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Remove Service', onClicked, } = props;
+        const { asChild, children, className, label, onClick, ...buttonProps } = 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;
                 const handleClick = () => {
                     remove();
-                    onClicked?.(rawService);
+                    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: {
                         onClick: handleClick,
@@ -742,7 +728,8 @@ export var Actions;
                         selected,
                         bookable,
                         requiresAvailability,
-                    }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
+                        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 }) }));
             } }));
     });
     Actions.Remove.displayName = 'Service.Actions.Remove';

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

@@ -8,6 +8,12 @@ import React from 'react';
 import * as CoreStaffMember from '../core/staff-member/StaffMember.js';
 import { type AsChildChildren } from '@wix/headless-utils/react';
 export { useStaffMemberContext } from '../core/staff-member/StaffMember.js';
+export declare enum TestIds {
+    staffMemberRoot = "staff-member-root",
+    staffMemberName = "staff-member-name",
+    staffMemberRaw = "staff-member-raw",
+    staffMemberActionSelect = "staff-member-action-select"
+}
 export type { StaffMemberData, StaffMemberRenderProps, } from '../core/staff-member/StaffMember.js';
 /**
  * Props for StaffMember.Root component
@@ -98,18 +104,17 @@ export declare const Raw: React.FC<RawProps>;
 /**
  * Props for StaffMember.Actions.Select component
  */
-export interface SelectProps {
+export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
         onClick: () => void;
         selected: boolean;
         staffMember: CoreStaffMember.StaffMemberData | null;
     }>;
-    /** Callback fired after staff member is selected - receives the staff member */
-    onClicked?: (staffMember: CoreStaffMember.StaffMemberData) => void;
     /** Label for the button */
     label?: string;
-    className?: string;
+    /** Called after selection with the selected staffMember */
+    onClick?: (staffMember: CoreStaffMember.StaffMemberData) => void;
 }
 /**
  * Actions namespace for staff member-related actions

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

@@ -13,7 +13,7 @@ export { useStaffMemberContext } from '../core/staff-member/StaffMember.js';
 // ==========================================
 // TestIds Enum
 // ==========================================
-var TestIds;
+export var TestIds;
 (function (TestIds) {
     TestIds["staffMemberRoot"] = "staff-member-root";
     TestIds["staffMemberName"] = "staff-member-name";
@@ -106,10 +106,10 @@ Raw.displayName = 'StaffMember.Raw';
  * ```tsx
  * <StaffMember.Actions.Select label="Choose Staff Member" />
  *
- * // With onClicked callback
+ * // With onClick callback
  * <StaffMember.Actions.Select
  *   label="Select"
- *   onClicked={(staffMember) => console.log('Selected:', staffMember.name)}
+ *   onClick={() => console.log('Staff member selected')}
  * />
  *
  * // With asChild
@@ -123,19 +123,19 @@ Raw.displayName = 'StaffMember.Raw';
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, onClicked, label = 'Select', className, ...attrs } = props;
+    const { asChild, children, onClick, label, className, ...buttonProps } = props;
     return (_jsx(CoreStaffMember.Actions, { children: ({ select, selected, rawStaffMember }) => {
             const handleClick = () => {
                 select();
-                if (onClicked && rawStaffMember) {
-                    onClicked(rawStaffMember);
+                if (rawStaffMember) {
+                    onClick?.(rawStaffMember);
                 }
             };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberActionSelect, "data-selected": selected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     selected,
                     staffMember: rawStaffMember,
-                }, ...attrs, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
         } }));
 });
 Select.displayName = 'StaffMember.Actions.Select';

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

@@ -9,6 +9,12 @@ import { GenericListRepeaterProps, type ListVariant } from '@wix/headless-compon
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import type { StaffMemberListServiceConfig } from '../../services/staff-member-list/staff-member-list.js';
 import type { StaffMemberData } from '../../services/staff-member-list/staff-member-list.def.js';
+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"
+}
 /**
  * Props for the StaffMemberList root component
  */
@@ -97,15 +103,14 @@ export declare const Totals: React.ForwardRefExoticComponent<TotalsProps & React
 /**
  * Props for StaffMemberList.Actions.Clear component
  */
-export interface ClearProps {
+export interface ClearProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: {
         onClick: () => void;
     }) => React.ReactNode);
-    className?: string;
     label?: string;
-    /** Callback fired when the clear button is clicked */
-    onClicked?: () => void;
+    /** Called after clearing with the staffMember that was cleared */
+    onClick?: (staffMember: StaffMemberData | null) => void;
 }
 /**
  * Actions namespace for staff member list-level actions

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

@@ -17,7 +17,7 @@ const STAFF_MEMBER_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
 // TestIds
 // ============================================================================
-var TestIds;
+export var TestIds;
 (function (TestIds) {
     TestIds["staffMemberListRoot"] = "staff-member-list-root";
     TestIds["staffMemberListStaffMembers"] = "staff-member-list-staff-members";
@@ -130,6 +130,11 @@ Totals.displayName = 'StaffMemberList.Totals';
  * // With custom label
  * <StaffMemberList.Actions.Clear label="Clear selection" />
  *
+ * // With children as button content
+ * <StaffMemberList.Actions.Clear className="text-destructive">
+ *   <span>Reset Staff</span>
+ * </StaffMemberList.Actions.Clear>
+ *
  * // With asChild
  * <StaffMemberList.Actions.Clear asChild>
  *   <button className="btn-secondary">Clear staff</button>
@@ -142,21 +147,23 @@ Totals.displayName = 'StaffMemberList.Totals';
  * ```
  */
 const Clear = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Clear', onClicked } = props;
-    let bookingService = null;
-    try {
-        bookingService = useService(BookingServiceDefinition);
-    }
-    catch {
-        // BookingService not available - likely no ServiceManagerProvider
-    }
-    const handleClick = () => {
-        bookingService?.actions.clearResourceByType(STAFF_MEMBER_RESOURCE_TYPE_ID);
-        onClicked?.();
-    };
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberListActionClear, customElement: children, customElementProps: {
-            onClick: handleClick,
-        }, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    return (_jsx(CoreStaffMemberList.Actions, { children: ({ selectedStaffMember }) => {
+            let bookingService = null;
+            try {
+                bookingService = useService(BookingServiceDefinition);
+            }
+            catch {
+                // BookingService not available - likely no ServiceManagerProvider
+            }
+            const handleClick = () => {
+                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: {
+                    onClick: handleClick,
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+        } }));
 });
 Clear.displayName = 'StaffMemberList.Actions.Clear';
 /**

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

@@ -150,16 +150,17 @@ export declare const Duration: React.ForwardRefExoticComponent<DurationProps & R
 /**
  * Props for TimeSlot.Actions.Select component
  */
-export interface SelectProps {
+export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: {
         isSelected: boolean;
         bookable: boolean;
         onClick: () => void;
+        timeSlot: TimeSlotType;
     }) => React.ReactNode);
-    className?: string;
     label?: string;
-    onClicked?: (timeSlot: TimeSlotType) => void;
+    /** Called after selection with the selected timeSlot */
+    onClick?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to select this time slot.
@@ -179,11 +180,9 @@ export interface SelectProps {
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
- * // With onClicked callback for navigation
+ * // With onClick callback
  * <TimeSlot.Actions.Select
- *   onClicked={(timeSlot) => {
- *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
- *   }}
+ *   onClick={() => router.push('/booking/confirm')}
  * />
  *
  * // Using render prop pattern
@@ -200,14 +199,14 @@ export declare const Select: React.ForwardRefExoticComponent<SelectProps & React
 /**
  * Props for TimeSlot.Actions.ClearStaffSelection component
  */
-export interface ClearStaffSelectionProps {
+export interface ClearStaffSelectionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: {
         onClick: () => void;
     }) => React.ReactNode);
-    className?: string;
     label?: string;
-    onClicked?: (timeSlot: TimeSlotType) => void;
+    /** Called after clearing with the timeSlot whose staff selection was cleared */
+    onClick?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to clear staff selection while keeping the slot selected.
@@ -228,11 +227,9 @@ export interface ClearStaffSelectionProps {
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
- * // With onClicked callback
+ * // With onClick callback
  * <TimeSlot.Actions.ClearStaffSelection
- *   onClicked={(timeSlot) => {
- *     console.log('Staff selection cleared for', timeSlot.localStartDate);
- *   }}
+ *   onClick={() => console.log('Staff selection cleared')}
  * />
  *
  * // Using render prop pattern
@@ -360,15 +357,16 @@ export declare const StaffMemberName: React.ForwardRefExoticComponent<StaffMembe
 /**
  * Props for TimeSlot.StaffMember.Actions.Select component
  */
-export interface SelectStaffMemberProps {
+export interface SelectStaffMemberProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: {
         isSelected: boolean;
         onClick: () => void;
+        staffMember: CoreTimeSlot.StaffMemberData;
     }) => React.ReactNode);
-    className?: string;
     label?: string;
-    onClicked?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
+    /** Called after selection with the selected staffMember */
+    onClick?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
 }
 /**
  * Button to select this staff member.
@@ -388,11 +386,9 @@ export interface SelectStaffMemberProps {
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
- * // With onClicked callback
+ * // With onClick callback
  * <TimeSlot.StaffMember.Actions.Select
- *   onClicked={(staffMember) => {
- *     console.log('Selected staff:', staffMember.name);
- *   }}
+ *   onClick={() => console.log('Staff selected')}
  * />
  *
  * // Using render prop pattern