@wix/headless-bookings 0.0.87 → 0.0.89

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * TimeSlotList - High-level component for displaying time slot list information
  * Provides components for displaying timezone and time slot data
@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { startOfDay, endOfDay, parse, format } from 'date-fns';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
@@ -14,9 +15,19 @@ import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, A
 // ============================================================================
 /**
  * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ * Uses the specified timezone or falls back to local timezone
  */
-function toISODateString(date) {
-    return date.toISOString().split('T')[0] ?? '';
+function toISODateString(date, timezone) {
+    if (timezone) {
+        const formatter = new Intl.DateTimeFormat('en-CA', {
+            timeZone: timezone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        });
+        return formatter.format(date);
+    }
+    return format(date, 'yyyy-MM-dd');
 }
 /**
  * TimeSlot with required id field for GenericList
@@ -117,34 +128,22 @@ export const TimeSlots = React.forwardRef((props, ref) => {
 TimeSlots.displayName = 'TimeSlotList.TimeSlots';
 /**
  * Internal component that wraps each time slot item with context provider.
- * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children })) }) }));
+    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: children })) }) }));
 };
 /**
- * Repeater component that renders each time slot.
+ * Repeater component that renders TimeSlot.Root for each time slot.
  * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
- * Automatically provides TimeSlot context to children.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
- *
- * // Function children pattern - all data available directly
- * <TimeSlotList.TimeSlotRepeater>
- *   {({ isSelected, bookable, startDate }) => (
- *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
- *       {formatTime(startDate)}
- *     </button>
- *   )}
- * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 const generateSlotKey = (timeSlot) => {
@@ -152,7 +151,7 @@ const generateSlotKey = (timeSlot) => {
 };
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: children }, generateSlotKey(timeSlot))), children: undefined }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, generateSlotKey(timeSlot))), children: children }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**
@@ -203,14 +202,18 @@ export const Actions = {
  * </TimeSlotList.DateRange.Input>
  * ```
  */
-export const DateRangeInput = React.forwardRef((props, ref) => {
+const DateRangeInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    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(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange, timezone }) => {
+            const defaultContent = (_jsx("input", { ref: ref, type: "date", className: className, "data-testid": TestIds.timeSlotListDateRangeInput, value: toISODateString(startDate, timezone), required: true, onChange: (e) => {
+                    const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
+                    setDateRange(startOfDay(date), endOfDay(date));
+                } }));
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
                     startDate,
                     endDate,
                     onChange: setDateRange,
+                    timezone,
                 }, ...otherProps, children: defaultContent }));
         } }));
 });

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

@@ -24,9 +24,9 @@ export type ErrorPaymentConfigResult = {
  * Calls the pricing APIs and returns pre-calculated payment details.
  *
  * @param params.pricingServiceSelections - Pricing service selections for calculation
- * @param params.numberOfParticipants - Number of participants (default: 1)
+ * @param params.totalParticipants - Number of participants (default: 1)
  */
 export declare function loadPaymentConfig(params: {
     pricingServiceSelections: PricingServiceSelection[];
-    numberOfParticipants?: number;
+    totalParticipants?: number;
 }): Promise<SuccessPaymentConfigResult | ErrorPaymentConfigResult>;

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

@@ -53,7 +53,7 @@ export interface PaymentServiceInternalConfig extends PaymentServiceConfig {
     /** Booking services for lazy loading (internal use) */
     pricingServiceSelections?: PricingServiceSelection[];
     /** Number of participants for lazy loading (internal use) */
-    numberOfParticipants?: number;
+    totalParticipants?: number;
 }
 export interface PaymentServiceAPI {
     paymentDetailsSignal: Signal<PaymentDetails | null>;

package/cjs/dist/services/payment/payment.js

@@ -36,15 +36,15 @@ function getPaymentOption(service, hasDeposit) {
     }
     return 'FULL_PAYMENT_ONLINE';
 }
-function buildLineItem(service, numberOfParticipants, lineItemId) {
+function buildLineItem(service, totalParticipants, lineItemId) {
     // Get fixed price from service
     const servicePrice = service.payment?.fixed?.price?.value;
-    const price = Number(servicePrice || 0) * numberOfParticipants;
+    const price = Number(servicePrice || 0) * totalParticipants;
     // Get deposit if configured
     const depositValue = service.payment?.fixed?.deposit?.value;
     const hasDeposit = !!depositValue && Number(depositValue) > 0;
     const deposit = hasDeposit
-        ? Number(depositValue) * numberOfParticipants
+        ? Number(depositValue) * totalParticipants
         : undefined;
     // Get payment option from service configuration (pass hasDeposit for correct API behavior)
     const paymentOption = getPaymentOption(service, hasDeposit);
@@ -60,13 +60,13 @@ function buildLineItem(service, numberOfParticipants, lineItemId) {
         paymentOption,
     };
 }
-async function calculatePaymentDetails(pricingServiceSelections, numberOfParticipants) {
+async function calculatePaymentDetails(pricingServiceSelections, totalParticipants) {
     // Ensure all booking services have a lineItemId
     const data = pricingServiceSelections.map((selection) => ({
         ...selection,
         lineItemId: selection.lineItemId || generateLineItemId(),
     }));
-    const lineItems = data.map((item) => buildLineItem(item.service, numberOfParticipants, item.lineItemId));
+    const lineItems = data.map((item) => buildLineItem(item.service, totalParticipants, item.lineItemId));
     const response = await calculateTotals({
         lineItems,
     });
@@ -96,7 +96,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
     // Internal calculate function
-    const calculate = async (pricingServiceSelections, numberOfParticipants) => {
+    const calculate = async (pricingServiceSelections, totalParticipants) => {
         if (!pricingServiceSelections.length) {
             paymentDetailsSignal.set(null);
             return;
@@ -104,7 +104,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
         isLoadingSignal.set(true);
         errorSignal.set(null);
         try {
-            const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, numberOfParticipants);
+            const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants);
             paymentDetailsSignal.set(paymentDetails);
         }
         catch (error) {
@@ -124,7 +124,7 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     }
     // Mode 2: Lazy loading - pricingServiceSelections provided via internal config
     else if (config.pricingServiceSelections?.length) {
-        void calculate(config.pricingServiceSelections, config.numberOfParticipants ?? 1);
+        void calculate(config.pricingServiceSelections, config.totalParticipants ?? 1);
     }
     // Mode 3: Reactive - observe BookingService signals (client-side only)
     else if (typeof window !== 'undefined' && bookingService) {
@@ -159,18 +159,18 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
  * Calls the pricing APIs and returns pre-calculated payment details.
  *
  * @param params.pricingServiceSelections - Pricing service selections for calculation
- * @param params.numberOfParticipants - Number of participants (default: 1)
+ * @param params.totalParticipants - Number of participants (default: 1)
  */
 export async function loadPaymentConfig(params) {
     try {
-        const { pricingServiceSelections, numberOfParticipants = 1 } = params;
+        const { pricingServiceSelections, totalParticipants = 1 } = params;
         if (!pricingServiceSelections.length) {
             return {
                 type: 'success',
                 config: { paymentDetails: undefined },
             };
         }
-        const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, numberOfParticipants);
+        const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, totalParticipants);
         return {
             type: 'success',
             config: { paymentDetails },

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

@@ -5,7 +5,7 @@
 import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import type { BookingServiceConfig } from '../../services/booking/booking.js';
-import { type AsChildChildren } from '@wix/headless-utils/react';
+import * as BookingItemComponents from './BookingItem.js';
 export type { BookingData, DataProps, BookingItem, } from '../core/booking/Booking.js';
 /**
  * Props for Booking.Root component
@@ -63,132 +63,70 @@ export declare const Actions: {
  */
 export declare const useBookingItem: typeof CoreBooking.useBookingItemContext;
 /**
- * Props for Booking.ItemsRoot component (Container Level)
+ * Props for Booking.BookingItems component
  */
-export interface ItemsRootProps {
-    children: React.ReactNode;
-    className?: string;
-}
-/**
- * Container component that provides GenericList.Root context for booking items.
- * Use Booking.Items inside for list container with emptyState support.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <div className="booking-card">
- *         <Booking.Service>
- *           <Service.Name />
- *         </Booking.Service>
- *       </div>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
- * ```
- */
-export declare const ItemsRoot: React.ForwardRefExoticComponent<ItemsRootProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * Props for Booking.Items component (List Container Level)
- */
-export interface ItemsProps {
+export interface BookingItemsProps {
     children: React.ReactNode;
     /** Content to render when there are no booking items */
     emptyState?: React.ReactNode;
     className?: string;
 }
 /**
- * List container component with emptyState support.
- * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
+ * Container component for booking items with emptyState support.
+ * Provides GenericList context and renders items.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <Booking.Service>
- *         <Service.Name />
- *       </Booking.Service>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
+ * <Booking.BookingItems emptyState={<div>No bookings selected</div>}>
+ *   <Booking.BookingItemRepeater>
+ *     <BookingItem.Service>
+ *       <Service.Name />
+ *     </BookingItem.Service>
+ *   </Booking.BookingItemRepeater>
+ * </Booking.BookingItems>
  * ```
  */
-export declare const Items: React.ForwardRefExoticComponent<ItemsProps & React.RefAttributes<HTMLElement>>;
+export declare const BookingItems: React.ForwardRefExoticComponent<BookingItemsProps & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Use Booking.BookingItems instead */
+export declare const ItemsRoot: React.ForwardRefExoticComponent<BookingItemsProps & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Use Booking.BookingItems instead */
+export declare const Items: React.ForwardRefExoticComponent<BookingItemsProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * Props for Booking.ItemRepeater component
+ * Props for Booking.BookingItemRepeater component
  */
-export interface ItemRepeaterProps {
+export interface BookingItemRepeaterProps {
     children: React.ReactNode;
 }
 /**
  * Repeater component that maps over booking items and provides context per item.
  * Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
- * Children have access to Booking.Service, Booking.TimeSlot, etc.
+ * Children have access to BookingItem.Service, BookingItem.TimeSlot, etc.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemRepeater>
+ * <Booking.BookingItemRepeater>
  *   <div className="booking-card">
- *     <Booking.Service>
+ *     <BookingItem.Service>
  *       <Service.Name />
  *       <Service.Price />
- *     </Booking.Service>
- *     <Booking.TimeSlot>
+ *     </BookingItem.Service>
+ *     <BookingItem.TimeSlot>
  *       <TimeSlot.StartDate />
- *     </Booking.TimeSlot>
- *     <Booking.StaffName />
+ *     </BookingItem.TimeSlot>
+ *     <BookingItem.StaffName />
  *   </div>
- * </Booking.ItemRepeater>
- * ```
- */
-export declare const ItemRepeater: React.ForwardRefExoticComponent<ItemRepeaterProps & React.RefAttributes<HTMLElement>>;
-/**
- * Props for Booking.Service component
- */
-export interface BookingServiceProps {
-    children: React.ReactNode;
-}
-/**
- * Wraps Service.Root with the service from the current booking item context.
- * Children can use all Service.* components (Service.Name, Service.Price, etc.).
- *
- * @component
- * @example
- * ```tsx
- * <Booking.Service>
- *   <Service.Name className="text-xl font-bold" />
- *   <Service.Description />
- *   <Service.Price />
- * </Booking.Service>
+ * </Booking.BookingItemRepeater>
  * ```
  */
-export declare function Service(props: BookingServiceProps): React.ReactNode;
-/**
- * Props for Booking.TimeSlot component
- */
-export interface BookingTimeSlotProps {
-    children: React.ReactNode;
-}
-/**
- * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
- * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
- * Always renders with data-has-time-slot attribute for CSS targeting.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.TimeSlot>
- *   <TimeSlot.StartDate />
- *   <TimeSlot.Duration />
- * </Booking.TimeSlot>
- * ```
- */
-export declare function TimeSlot(props: BookingTimeSlotProps): React.ReactNode;
+export declare const BookingItemRepeater: React.ForwardRefExoticComponent<BookingItemRepeaterProps & React.RefAttributes<HTMLElement>>;
+/** @deprecated Use Booking.BookingItemRepeater instead */
+export declare const ItemRepeater: React.ForwardRefExoticComponent<BookingItemRepeaterProps & React.RefAttributes<HTMLElement>>;
+/** @deprecated Use BookingItem.Service instead */
+export declare const Service: typeof BookingItemComponents.Service;
+/** @deprecated Use BookingItem.TimeSlot instead */
+export declare const TimeSlot: typeof BookingItemComponents.TimeSlot;
 /**
  * Props for Booking.Payment component
  */
@@ -244,24 +182,5 @@ export interface BookingLocationProps {
  * ```
  */
 export declare function Location(props: BookingLocationProps): React.ReactNode;
-/**
- * Props for Booking.StaffName component
- */
-export interface StaffNameProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        name: string;
-    }>;
-    className?: string;
-}
-/**
- * Displays the first staff member's name from the current booking item.
- * Returns null when staff name is empty.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.StaffName className="text-foreground" />
- * ```
- */
-export declare const StaffName: React.ForwardRefExoticComponent<StaffNameProps & React.RefAttributes<HTMLElement>>;
+/** @deprecated Use BookingItem.StaffName instead */
+export declare const StaffName: React.ForwardRefExoticComponent<BookingItemComponents.StaffNameProps & React.RefAttributes<HTMLElement>>;

package/dist/react/booking/Booking.js

@@ -6,12 +6,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import { Book } from './Book.js';
-import { AsChildSlot } from '@wix/headless-utils/react';
-import * as ServiceComponent from '../service/Service.js';
-import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
 import * as PaymentComponent from '../payment/Payment.js';
 import * as CoreLocation from '../core/location/Location.js';
 import { GenericList } from '@wix/headless-components/react';
+// Re-export BookingItem components for backward compatibility
+import * as BookingItemComponents from './BookingItem.js';
 // ============================================================================
 // TestIds
 // ============================================================================
@@ -82,56 +81,33 @@ export const Actions = {
  */
 export const useBookingItem = CoreBooking.useBookingItemContext;
 /**
- * Container component that provides GenericList.Root context for booking items.
- * Use Booking.Items inside for list container with emptyState support.
+ * Container component for booking items with emptyState support.
+ * Provides GenericList context and renders items.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <div className="booking-card">
- *         <Booking.Service>
- *           <Service.Name />
- *         </Booking.Service>
- *       </div>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
+ * <Booking.BookingItems emptyState={<div>No bookings selected</div>}>
+ *   <Booking.BookingItemRepeater>
+ *     <BookingItem.Service>
+ *       <Service.Name />
+ *     </BookingItem.Service>
+ *   </Booking.BookingItemRepeater>
+ * </Booking.BookingItems>
  * ```
  */
-export const ItemsRoot = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
+export const BookingItems = React.forwardRef((props, ref) => {
+    const { children, emptyState, ...otherProps } = props;
     return (_jsx(CoreBooking.ItemsData, { children: ({ items }) => (_jsx(GenericList.Root, { ref: ref, items: items.map((item) => ({
                 ...item,
                 id: item.instanceId,
-            })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItemsRoot, ...otherProps, children: children })) }));
-});
-ItemsRoot.displayName = 'Booking.ItemsRoot';
-/**
- * List container component with emptyState support.
- * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.ItemsRoot>
- *   <Booking.Items emptyState={<div>No bookings selected</div>}>
- *     <Booking.ItemRepeater>
- *       <Booking.Service>
- *         <Service.Name />
- *       </Booking.Service>
- *     </Booking.ItemRepeater>
- *   </Booking.Items>
- * </Booking.ItemsRoot>
- * ```
- */
-export const Items = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.bookingItems, ...otherProps, children: children }));
+            })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItems, ...otherProps, children: _jsx(GenericList.Items, { emptyState: emptyState, children: children }) })) }));
 });
-Items.displayName = 'Booking.Items';
+BookingItems.displayName = 'Booking.BookingItems';
+/** @deprecated Use Booking.BookingItems instead */
+export const ItemsRoot = BookingItems;
+/** @deprecated Use Booking.BookingItems instead */
+export const Items = BookingItems;
 /**
  * Internal component that wraps each booking item with context provider.
  */
@@ -141,66 +117,39 @@ const BookingItemWrapper = ({ item, children, }) => {
 /**
  * Repeater component that maps over booking items and provides context per item.
  * Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
- * Children have access to Booking.Service, Booking.TimeSlot, etc.
+ * Children have access to BookingItem.Service, BookingItem.TimeSlot, etc.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.ItemRepeater>
+ * <Booking.BookingItemRepeater>
  *   <div className="booking-card">
- *     <Booking.Service>
+ *     <BookingItem.Service>
  *       <Service.Name />
  *       <Service.Price />
- *     </Booking.Service>
- *     <Booking.TimeSlot>
+ *     </BookingItem.Service>
+ *     <BookingItem.TimeSlot>
  *       <TimeSlot.StartDate />
- *     </Booking.TimeSlot>
- *     <Booking.StaffName />
+ *     </BookingItem.TimeSlot>
+ *     <BookingItem.StaffName />
  *   </div>
- * </Booking.ItemRepeater>
+ * </Booking.BookingItemRepeater>
  * ```
  */
-export const ItemRepeater = React.forwardRef((props, ref) => {
+export const BookingItemRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(BookingItemWrapper, { item: item, children: children }, item.instanceId)), children: undefined }));
 });
-ItemRepeater.displayName = 'Booking.ItemRepeater';
-/**
- * Wraps Service.Root with the service from the current booking item context.
- * Children can use all Service.* components (Service.Name, Service.Price, etc.).
- *
- * @component
- * @example
- * ```tsx
- * <Booking.Service>
- *   <Service.Name className="text-xl font-bold" />
- *   <Service.Description />
- *   <Service.Price />
- * </Booking.Service>
- * ```
- */
-export function Service(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ service }) => (_jsx(ServiceComponent.Root, { service: service, children: children })) }));
-}
-/**
- * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
- * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
- * Always renders with data-has-time-slot attribute for CSS targeting.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.TimeSlot>
- *   <TimeSlot.StartDate />
- *   <TimeSlot.Duration />
- * </Booking.TimeSlot>
- * ```
- */
-export function TimeSlot(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ timeSlot }) => timeSlot ? (_jsx(TimeSlotComponent.Root, { timeSlot: timeSlot, children: children })) : null }));
-}
+BookingItemRepeater.displayName = 'Booking.BookingItemRepeater';
+/** @deprecated Use Booking.BookingItemRepeater instead */
+export const ItemRepeater = BookingItemRepeater;
+// ============================================================================
+// Deprecated: Service, TimeSlot, StaffName (moved to BookingItem namespace)
+// ============================================================================
+/** @deprecated Use BookingItem.Service instead */
+export const Service = BookingItemComponents.Service;
+/** @deprecated Use BookingItem.TimeSlot instead */
+export const TimeSlot = BookingItemComponents.TimeSlot;
 /**
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
@@ -245,23 +194,5 @@ export function Location(props) {
     const { children } = props;
     return (_jsx(CoreBooking.Data, { children: ({ location }) => location ? (_jsx(CoreLocation.Root, { location: location, children: children })) : null }));
 }
-/**
- * Displays the first staff member's name from the current booking item.
- * Returns null when staff name is empty.
- *
- * @component
- * @example
- * ```tsx
- * <Booking.StaffName className="text-foreground" />
- * ```
- */
-export const StaffName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
-            if (!staffName) {
-                return null;
-            }
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
-        } }));
-});
-StaffName.displayName = 'Booking.StaffName';
+/** @deprecated Use BookingItem.StaffName instead */
+export const StaffName = BookingItemComponents.StaffName;