@wix/headless-bookings 0.0.89 → 0.0.91

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

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

@@ -159,11 +159,9 @@ Duration.displayName = 'TimeSlot.Duration';
  *   <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
@@ -177,18 +175,19 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select', onClicked } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable, timeSlot }) => {
+    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, timeSlot, isSelected, bookable }) => {
             const handleClick = () => {
                 selectTimeSlot();
-                onClicked?.(timeSlot);
+                onClick?.(timeSlot);
             };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
                     onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: children || label }) }));
+                    timeSlot,
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: !bookable, children: children || label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -211,11 +210,9 @@ Select.displayName = 'TimeSlot.Actions.Select';
  *   <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
@@ -225,18 +222,18 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Change', onClicked } = props;
+    const { asChild, children, className, label, onClick, ...buttonProps } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
             }
             const handleClick = () => {
                 clearStaffSelection();
-                onClicked?.(timeSlot);
+                onClick?.(timeSlot);
             };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
                     onClick: handleClick,
-                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -366,11 +363,9 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  *   <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
@@ -384,16 +379,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select', onClicked } = props;
+    const { asChild, children, className, label, onClick, ...buttonProps } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
             const handleClick = () => {
                 selectStaffMember();
-                onClicked?.(staffMember);
+                onClick?.(staffMember);
             };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     isSelected,
-                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+                    staffMember,
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
         } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';

package/cjs/dist/services/booking/book-action/types.d.ts

@@ -62,9 +62,9 @@ export interface BookProps {
      * The navigateToCheckout function has the checkoutId captured - just call it.
      * When navigateToCheckout is called, the button will show loading state until navigation completes.
      */
-    onCheckout?: (result: {
-        navigateToCheckout: () => Promise<void>;
-    }) => void;
+    onCheckout?: (navigateToCheckout: (options: {
+        postFlowUrl: string;
+    }) => Promise<void>) => void;
     /**
      * Called when booking completes without requiring checkout (free/offline services).
      * Receives the orderId which can be used to display confirmation or navigate to a thank you page.

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

@@ -7,28 +7,23 @@ import type { BookChildProps, BookingError } from '../../services/booking/book-a
 /**
  * Props for the high-level Book component
  */
-export interface BookProps {
+export interface BookProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onError' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode);
-    className?: string;
     label?: string;
     loadingState?: string;
     disabled?: boolean;
-    /**
-     * URL to redirect to after the checkout flow completes.
-     * Required for navigating to checkout.
-     */
-    postFlowUrl: string;
     /**
      * Called when checkout is required for payment.
+     * Receives navigateToCheckout function that accepts postFlowUrl.
      * The navigateToCheckout function already has the checkoutId captured - just call it to navigate.
      *
      * To keep loading active during navigation, return navigateToCheckout():
-     * `onCheckout={({ navigateToCheckout }) => navigateToCheckout()}`
+     * `onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}`
      */
-    onCheckout?: (result: {
-        navigateToCheckout: () => Promise<void>;
-    }) => void | Promise<unknown>;
+    onCheckout?: (navigateToCheckout: (options: {
+        postFlowUrl: string;
+    }) => Promise<void>) => void | Promise<unknown>;
     /**
      * Called when booking completes without requiring checkout (free/offline services).
      * Receives the orderId which can be used to display confirmation or navigate to a thank you page.
@@ -39,6 +34,7 @@ export interface BookProps {
         orderId: string;
     }) => void | Promise<unknown>;
     onError?: (error: BookingError) => void;
+    onClick?: (data: BookChildProps) => void;
 }
 /**
  * Book action button component with AsChildSlot pattern.
@@ -53,22 +49,19 @@ export interface BookProps {
  * ```tsx
  * // Basic usage - call navigateToCheckout when ready
  * <Booking.Actions.Book
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  * />
  *
  * // With callbacks
  * <Booking.Actions.Book
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => console.error(error.message)}
  * />
  *
  * // With render function
  * <Booking.Actions.Book
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
@@ -81,8 +74,7 @@ export interface BookProps {
  * // With asChild
  * <Booking.Actions.Book
  *   asChild
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   <CustomBookButton />

package/dist/react/booking/Book.js

@@ -24,22 +24,19 @@ var TestIds;
  * ```tsx
  * // Basic usage - call navigateToCheckout when ready
  * <Booking.Actions.Book
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  * />
  *
  * // With callbacks
  * <Booking.Actions.Book
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => console.error(error.message)}
  * />
  *
  * // With render function
  * <Booking.Actions.Book
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
@@ -52,8 +49,7 @@ var TestIds;
  * // With asChild
  * <Booking.Actions.Book
  *   asChild
- *   postFlowUrl="/thank-you"
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   <CustomBookButton />
@@ -61,17 +57,25 @@ var TestIds;
  * ```
  */
 export const Book = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Book Now', loadingState = 'Booking...', disabled, postFlowUrl, onCheckout, onComplete, onError, } = props;
+    const { asChild, children, className, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...buttonProps } = props;
     return (_jsx(CoreBook.Book, { onCheckout: (result) => {
             // Create navigateToCheckout with checkoutId captured
-            const navigateToCheckout = () => navigateToCheckoutUtil({
+            const navigateToCheckout = (options) => navigateToCheckoutUtil({
                 checkoutId: result.checkoutId,
-                navigationInfo: { postFlowUrl },
+                navigationInfo: { postFlowUrl: options.postFlowUrl },
             });
             // Return user's callback result so core can await it
-            return onCheckout?.({ navigateToCheckout });
+            return onCheckout?.(navigateToCheckout);
         }, onComplete: (result) => {
             return onComplete?.({ orderId: result.orderId });
-        }, onError: onError, disabled: disabled, children: (childProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { onClick: childProps.onClick, disabled: childProps.disabled, children: childProps.isLoading ? loadingState : label }) })) }));
+        }, onError: onError, disabled: disabled, children: (childProps) => {
+            const handleClick = () => {
+                childProps.onClick();
+                onClick?.(childProps);
+            };
+            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
+                        ? loadingState
+                        : children || label }) }));
+        } }));
 });
 Book.displayName = 'Booking.Actions.Book';

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

@@ -46,7 +46,7 @@ export declare const Root: {
  *
  * // With callbacks - navigateToCheckout has checkoutId captured, triggers loading when called
  * <Booking.Actions.Book
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => toast.error(error.message)}
  * />

package/dist/react/booking/Booking.js

@@ -61,7 +61,7 @@ Root.displayName = 'Booking.Root';
  *
  * // With callbacks - navigateToCheckout has checkoutId captured, triggers loading when called
  * <Booking.Actions.Book
- *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}
  *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => toast.error(error.message)}
  * />

package/dist/react/booking-form/BookingForm.d.ts

@@ -105,20 +105,23 @@ export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React
 /**
  * Props for BookingForm.Actions.ValidateFormSubmission component
  */
-export interface ValidateFormSubmissionProps {
+export interface ValidateFormSubmissionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
     asChild?: boolean;
     children?: React.ReactNode | ((props: {
         onClick: () => Promise<void>;
         valid: boolean | null;
         validationFailures: string[];
     }) => React.ReactNode);
-    className?: string;
     label?: string;
     /** Callback when validation completes */
     onValidationComplete?: (result: {
         valid: boolean;
         validationFailures: string[];
     }) => void;
+    onClick?: (result: {
+        valid: boolean;
+        validationFailures: string[];
+    }) => void;
 }
 /**
  * Button to validate the booking form submission.

package/dist/react/booking-form/BookingForm.js

@@ -171,7 +171,7 @@ Fields.displayName = 'BookingForm.Fields';
  * ```
  */
 export const ValidateFormSubmission = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Validate', onValidationComplete, } = props;
+    const { asChild, children, className, label, onValidationComplete, onClick, ...buttonProps } = props;
     const [valid, setValid] = React.useState(null);
     const [validationFailures, setValidationFailures] = React.useState([]);
     return (_jsx(CoreBookingForm.Actions, { children: ({ validateFormSubmission }) => {
@@ -182,12 +182,13 @@ export const ValidateFormSubmission = React.forwardRef((props, ref) => {
                 if (onValidationComplete) {
                     onValidationComplete(result);
                 }
+                onClick?.(result);
             };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
                     onClick: handleClick,
                     valid,
                     validationFailures,
-                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
         } }));
 });
 ValidateFormSubmission.displayName =

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

@@ -229,18 +229,17 @@ export declare const Raw: React.FC<RawProps>;
 /**
  * Props for Location.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;
         location: CoreLocation.Location | null;
     }>;
-    /** Callback fired after location is selected - receives the location */
-    onClicked?: (location: CoreLocation.Location) => void;
     /** Label for the button */
     label?: string;
-    className?: string;
+    /** Called after selection with the selected location */
+    onClick?: (location: CoreLocation.Location) => void;
 }
 /**
  * Actions namespace for location-related actions

package/dist/react/location/Location.js

@@ -227,10 +227,10 @@ Raw.displayName = 'Location.Raw';
  * ```tsx
  * <Location.Actions.Select label="Choose Location" />
  *
- * // With onClicked callback for navigation
+ * // With onClick callback
  * <Location.Actions.Select
  *   label="Select"
- *   onClicked={(location) => navigate('/time-slots')}
+ *   onClick={() => navigate('/time-slots')}
  * />
  *
  * // With asChild
@@ -244,19 +244,19 @@ Raw.displayName = 'Location.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(CoreLocation.Actions, { children: ({ select, selected, rawLocation }) => {
             const handleClick = () => {
                 select();
-                if (onClicked && rawLocation) {
-                    onClicked(rawLocation);
+                if (rawLocation) {
+                    onClick?.(rawLocation);
                 }
             };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationActionSelect, "data-selected": selected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     selected,
                     location: rawLocation,
-                }, ...attrs, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
         } }));
 });
 Select.displayName = 'Location.Actions.Select';