@wix/headless-bookings 0.0.30 → 0.0.32

package/cjs/dist/react/payment/PaymentLineItem.d.ts

@@ -0,0 +1,144 @@
+/**
+ * PaymentLineItem - Component for displaying individual line item information
+ * Used within Payment.LineItemRepeater to display price, discount, deposit, etc.
+ */
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import { MoneyData } from '@wix/headless-components/react';
+import type { CombinedLineItem } from '../core/payment/Payment.js';
+/**
+ * Props for PaymentLineItem.Root component
+ */
+export interface RootProps {
+    lineItem: CombinedLineItem;
+    currency: string;
+    children?: React.ReactNode | AsChildChildren<{
+        lineItem: CombinedLineItem;
+        currency: string;
+    }>;
+    asChild?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Root component for a single line item.
+ * Provides context for child components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Root lineItem={item} currency="USD">
+ *   <PaymentLineItem.Price />
+ *   <PaymentLineItem.Discount />
+ * </PaymentLineItem.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.Price component
+ */
+export interface PriceProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        totalPrice: MoneyData | null;
+        subtotal: MoneyData | null;
+        tax: MoneyData | null;
+        discount: MoneyData | null;
+        deposit: MoneyData | null;
+        priceText: string | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item price with support for different price types.
+ * Uses data-attributes for conditional visibility.
+ *
+ * For CUSTOM rate type services, displays priceText instead of monetary value.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - renders total price or price text
+ * <PaymentLineItem.Price className="text-lg font-bold" />
+ *
+ * // Custom rendering with full price data
+ * <PaymentLineItem.Price asChild>
+ *   {({ totalPrice, subtotal, tax, discount, priceText }) => (
+ *     <div>
+ *       {priceText ? (
+ *         <span>{priceText}</span>
+ *       ) : (
+ *         <>
+ *           <span><Money money={totalPrice} /></span>
+ *           <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
+ *         </>
+ *       )}
+ *     </div>
+ *   )}
+ * </PaymentLineItem.Price>
+ * ```
+ */
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.Discount component
+ */
+export interface DiscountProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        discount: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Discount className="text-green-500" />
+ * ```
+ */
+export declare const Discount: React.ForwardRefExoticComponent<DiscountProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.Deposit component
+ */
+export interface DepositProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        deposit: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item deposit amount.
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Deposit className="font-semibold" />
+ * ```
+ */
+export declare const Deposit: React.ForwardRefExoticComponent<DepositProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for PaymentLineItem.PriceText component
+ */
+export interface PriceTextProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        priceText: string | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the custom price text (for CUSTOM rate type services).
+ * Uses data-has-price-text attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.PriceText className="text-foreground" />
+ * ```
+ */
+export declare const PriceText: React.ForwardRefExoticComponent<PriceTextProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/payment/PaymentLineItem.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PaymentLineItem - Component for displaying individual line item information
+ * Used within Payment.LineItemRepeater to display price, discount, deposit, etc.
+ */
+import React from 'react';
+import * as CorePayment from '../core/payment/Payment.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { Money } from '@wix/headless-components/react';
+var TestIds;
+(function (TestIds) {
+    TestIds["paymentLineItemRoot"] = "payment-line-item-root";
+    TestIds["paymentLineItemPrice"] = "payment-line-item-price";
+    TestIds["paymentLineItemDiscount"] = "payment-line-item-discount";
+    TestIds["paymentLineItemDeposit"] = "payment-line-item-deposit";
+    TestIds["paymentLineItemPriceText"] = "payment-line-item-price-text";
+})(TestIds || (TestIds = {}));
+const PaymentLineItemContext = React.createContext(null);
+/**
+ * Hook to access PaymentLineItem context
+ */
+function usePaymentLineItemContext() {
+    const context = React.useContext(PaymentLineItemContext);
+    if (!context) {
+        throw new Error('usePaymentLineItemContext must be used within a PaymentLineItem.Root component');
+    }
+    return context;
+}
+/**
+ * Root component for a single line item.
+ * Provides context for child components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Root lineItem={item} currency="USD">
+ *   <PaymentLineItem.Price />
+ *   <PaymentLineItem.Discount />
+ * </PaymentLineItem.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { lineItem, currency, children, asChild, className, ...attrs } = props;
+    return (_jsx(PaymentLineItemContext.Provider, { value: { lineItem, currency }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": attrs['data-testid'] || TestIds.paymentLineItemRoot, customElement: children, customElementProps: { lineItem, currency }, ...attrs, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+});
+Root.displayName = 'PaymentLineItem.Root';
+/**
+ * Displays the line item price with support for different price types.
+ * Uses data-attributes for conditional visibility.
+ *
+ * For CUSTOM rate type services, displays priceText instead of monetary value.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - renders total price or price text
+ * <PaymentLineItem.Price className="text-lg font-bold" />
+ *
+ * // Custom rendering with full price data
+ * <PaymentLineItem.Price asChild>
+ *   {({ totalPrice, subtotal, tax, discount, priceText }) => (
+ *     <div>
+ *       {priceText ? (
+ *         <span>{priceText}</span>
+ *       ) : (
+ *         <>
+ *           <span><Money money={totalPrice} /></span>
+ *           <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
+ *         </>
+ *       )}
+ *     </div>
+ *   )}
+ * </PaymentLineItem.Price>
+ * ```
+ */
+export const Price = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: (priceData) => {
+            const { totalPrice, discount, deposit, priceText } = priceData;
+            // Default rendering based on price type
+            const renderDefaultPrice = () => {
+                // If custom price text (CUSTOM rate type), show text
+                if (priceText) {
+                    return (_jsx("span", { className: className, "data-testid": TestIds.paymentLineItemPrice, children: priceText }));
+                }
+                // Otherwise show monetary price
+                return totalPrice ? (_jsx(Money, { money: totalPrice, className: className })) : null;
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemPrice, "data-has-discount": discount !== null && discount.amount > 0, "data-has-deposit": deposit !== null && deposit.amount > 0, "data-has-price-text": !!priceText, customElement: children, customElementProps: priceData, children: renderDefaultPrice() }));
+        } }));
+});
+Price.displayName = 'PaymentLineItem.Price';
+/**
+ * Displays the line item discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Discount className="text-green-500" />
+ * ```
+ */
+export const Discount = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: ({ discount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": discount !== null && discount.amount > 0, customElement: children, customElementProps: { discount }, children: discount ? _jsx(Money, { money: discount }) : null })) }));
+});
+Discount.displayName = 'PaymentLineItem.Discount';
+/**
+ * Displays the line item deposit amount.
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.Deposit className="font-semibold" />
+ * ```
+ */
+export const Deposit = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: ({ deposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": deposit !== null && deposit.amount > 0, customElement: children, customElementProps: { deposit }, children: deposit ? _jsx(Money, { money: deposit }) : null })) }));
+});
+Deposit.displayName = 'PaymentLineItem.Deposit';
+/**
+ * Displays the custom price text (for CUSTOM rate type services).
+ * Uses data-has-price-text attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PaymentLineItem.PriceText className="text-foreground" />
+ * ```
+ */
+export const PriceText = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem, currency } = usePaymentLineItemContext();
+    return (_jsx(CorePayment.LineItem, { lineItem: lineItem, currency: currency, children: ({ priceText }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemPriceText, "data-has-price-text": !!priceText, customElement: children, customElementProps: { priceText }, children: priceText ? _jsx("span", { children: priceText }) : null })) }));
+});
+PriceText.displayName = 'PaymentLineItem.PriceText';

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

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

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

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

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

@@ -190,9 +190,15 @@ export interface DateRangeInputProps {
  * Uses the core DateRange component to access service data.
  * Both dates are set together and trigger a single fetch.
  *
+ * Default rendering provides two native date inputs.
+ *
  * @component
  * @example
  * ```tsx
+ * // Default usage - renders two date inputs
+ * <TimeSlotList.DateRange.Input className="flex gap-2" />
+ *
+ * // With asChild for custom rendering
  * <TimeSlotList.DateRange.Input asChild>
  *   {({ startDate, endDate, onChange }) => (
  *     <MyDateRangePicker

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

@@ -9,6 +9,15 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
 import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ */
+function toISODateString(date) {
+    return date.toISOString().split('T')[0] ?? '';
+}
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -178,9 +187,15 @@ export const Actions = {
  * Uses the core DateRange component to access service data.
  * Both dates are set together and trigger a single fetch.
  *
+ * Default rendering provides two native date inputs.
+ *
  * @component
  * @example
  * ```tsx
+ * // Default usage - renders two date inputs
+ * <TimeSlotList.DateRange.Input className="flex gap-2" />
+ *
+ * // With asChild for custom rendering
  * <TimeSlotList.DateRange.Input asChild>
  *   {({ startDate, endDate, onChange }) => (
  *     <MyDateRangePicker
@@ -194,11 +209,14 @@ export const Actions = {
  */
 export const DateRangeInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
-                startDate,
-                endDate,
-                onChange: setDateRange,
-            }, ...otherProps, children: _jsxs("div", { children: [startDate.toLocaleDateString(), " - ", endDate.toLocaleDateString()] }) })) }));
+    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => {
+            const defaultContent = (_jsxs("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, children: [_jsx("input", { type: "date", value: toISODateString(startDate), onChange: (e) => setDateRange(new Date(e.target.value), endDate) }), _jsx("span", { children: "-" }), _jsx("input", { type: "date", value: toISODateString(endDate), onChange: (e) => setDateRange(startDate, new Date(e.target.value)) })] }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                    startDate,
+                    endDate,
+                    onChange: setDateRange,
+                }, ...otherProps, children: defaultContent }));
+        } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
 /**

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

@@ -8,3 +8,4 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeS
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';
+export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type SlotService, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';

package/cjs/dist/services/index.js

@@ -8,3 +8,4 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeS
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';
+export { PaymentService, PaymentServiceDefinition, loadPaymentConfig, } from './payment/payment.js';

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

@@ -0,0 +1,32 @@
+/**
+ * Payment Service - Pricing calculation and payment details management
+ * Handles calculating total prices, taxes, discounts, and deposit information
+ * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
+ */
+import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
+export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
+export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
+export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: import("./payment.def.js").PaymentServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & import("./payment.def.js").PaymentServiceAPI, PaymentServiceInternalConfig>;
+export type SuccessPaymentConfigResult = {
+    type: 'success';
+    config: PaymentServiceConfig;
+};
+export type ErrorPaymentConfigResult = {
+    type: 'error';
+    error: string;
+};
+/**
+ * Load payment configuration for Server-Side Rendering (SSR).
+ * Calls the pricing APIs and returns pre-calculated payment details.
+ *
+ * @param params.slotServices - Slot/service inputs for calculation
+ * @param params.numberOfParticipants - Number of participants (default: 1)
+ */
+export declare function loadPaymentConfig(params: {
+    slotServices: SlotService[];
+    numberOfParticipants?: number;
+}): Promise<SuccessPaymentConfigResult | ErrorPaymentConfigResult>;