@wix/headless-bookings 0.0.10 → 0.0.11

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

@@ -4,13 +4,18 @@
  */
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
-import type { services } from '@wix/bookings';
+import { MoneyData } from '@wix/headless-components/react';
+import { services } from '@wix/bookings';
 /**
  * Props for Service.Root component
  */
 export interface ServiceRootProps {
-    children: React.ReactNode;
+    children?: React.ReactNode | AsChildChildren<{
+        selected: boolean;
+        bookable: boolean;
+    }>;
     service: services.Service;
+    appId?: string;
     asChild?: boolean;
     className?: string;
 }
@@ -95,6 +100,647 @@ export interface DescriptionProps {
  * ```
  */
 export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Price component
+ */
+export interface PriceProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        servicePayment: services.Payment | undefined;
+        rateType: services.Payment['rateType'] | undefined;
+        money: MoneyData | null;
+        minPrice: MoneyData | null;
+        maxPrice: MoneyData | null;
+        priceDescription: string | null;
+        hasAddOns: boolean;
+        hasPricingPlans: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service price using the Money component with customizable rendering.
+ * Renders different defaults based on rate type:
+ * - FIXED: Shows formatted price (e.g., '$50.00')
+ * - VARIED: Shows price range (e.g., '$30.00 - $50.00')
+ * - CUSTOM: Shows custom description text
+ * - NO_FEE: Shows zero price (e.g., '$0.00')
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - renders based on rate type
+ * <Service.Price className="text-3xl font-bold" />
+ *
+ * // Custom rendering with full price data
+ * <Service.Price asChild>
+ *   {({ rateType, money, minPrice, maxPrice, priceDescription, hasAddOns, hasPricingPlans }) => (
+ *     <div>
+ *       {rateType === 'FIXED' && money && <Money money={money} />}
+ *       {rateType === 'VARIED' && minPrice && maxPrice && (
+ *         <span><Money money={minPrice} /> - <Money money={maxPrice} /></span>
+ *       )}
+ *       {rateType === 'CUSTOM' && priceDescription && <span>{priceDescription}</span>}
+ *       {rateType === 'NO_FEE' && money && <Money money={money} />}
+ *       {hasPricingPlans && <span>Pricing plans available</span>}
+ *     </div>
+ *   )}
+ * </Service.Price>
+ * ```
+ */
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Tagline component
+ */
+export interface TaglineProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        tagline: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service tagline with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Tagline className="text-lg text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive element
+ * <Service.Tagline asChild>
+ *   <p className="italic text-secondary-foreground" />
+ * </Service.Tagline>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing tagline data
+ * <Service.Tagline asChild>
+ *   {React.forwardRef(({tagline, ...props}, ref) => (
+ *     <blockquote ref={ref} {...props} className="border-l-4 pl-4">
+ *       "{tagline}"
+ *     </blockquote>
+ *   ))}
+ * </Service.Tagline>
+ * ```
+ */
+export declare const Tagline: React.ForwardRefExoticComponent<TaglineProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service DurationInMinutes component
+ */
+export interface DurationInMinutesProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        duration: number;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service duration in minutes (raw number) with customizable rendering.
+ * Returns the duration as a numeric value representing minutes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw minutes
+ * <Service.DurationInMinutes className="text-base text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive element
+ * <Service.DurationInMinutes asChild>
+ *   <span className="font-semibold" />
+ * </Service.DurationInMinutes>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component to format duration
+ * <Service.DurationInMinutes asChild>
+ *   {React.forwardRef(({duration, ...props}, ref) => (
+ *     <span ref={ref} {...props}>
+ *       {duration} minutes
+ *     </span>
+ *   ))}
+ * </Service.DurationInMinutes>
+ * ```
+ */
+export declare const DurationInMinutes: React.ForwardRefExoticComponent<DurationInMinutesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Type component
+ */
+export interface TypeProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        type: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service type (APPOINTMENT, CLASS, COURSE, etc.) with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Type className="text-sm text-secondary-foreground uppercase" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with badge styling
+ * <Service.Type asChild>
+ *   <span className="px-2 py-1 bg-secondary text-secondary-foreground rounded-full text-xs" />
+ * </Service.Type>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component to format type
+ * <Service.Type asChild>
+ *   {React.forwardRef(({type, ...props}, ref) => {
+ *     const label = {
+ *       APPOINTMENT: '1-on-1',
+ *       CLASS: 'Group Class',
+ *       COURSE: 'Course',
+ *     }[type] || type;
+ *     return <span ref={ref} {...props}>{label}</span>;
+ *   })}
+ * </Service.Type>
+ * ```
+ */
+export declare const Type: React.ForwardRefExoticComponent<TypeProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Category component
+ */
+export interface CategoryProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        category: {
+            name?: string;
+            _id?: string;
+        };
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service category with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Category className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with link styling
+ * <Service.Category asChild>
+ *   <a href="#" className="text-primary hover:underline" />
+ * </Service.Category>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing category data
+ * <Service.Category asChild>
+ *   {React.forwardRef(({category, ...props}, ref) => (
+ *     <a
+ *       ref={ref}
+ *       {...props}
+ *       href={`/category/${category._id}`}
+ *       className="text-primary hover:underline"
+ *     >
+ *       {category.name}
+ *     </a>
+ *   ))}
+ * </Service.Category>
+ * ```
+ */
+export declare const Category: React.ForwardRefExoticComponent<CategoryProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Type for location
+ */
+type LocationType = NonNullable<services.Service['locations']>[number] & {
+    id: string;
+};
+/**
+ * Props for Service Locations component (Container Level)
+ */
+export interface LocationsProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for service locations list (Container Level).
+ * Follows the 3-level List/Options/Repeater pattern.
+ * Provides context and doesn't render when there are no locations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with 3-level pattern
+ * <Service.Locations>
+ *   <Service.Locations.List emptyState={<div>No locations available</div>}>
+ *     <Service.Locations.LocationRepeater>
+ *       {({ location }) => (
+ *         <div>
+ *           <span>{location.name}</span>
+ *           <Address.Root address={location.address}>
+ *             <Address.Formatted />
+ *           </Address.Root>
+ *         </div>
+ *       )}
+ *     </Service.Locations.LocationRepeater>
+ *   </Service.Locations.List>
+ * </Service.Locations>
+ *
+ * // With asChild pattern for custom container
+ * <Service.Locations asChild>
+ *   <ul className="locations-list">
+ *     <Service.Locations.List>
+ *       <Service.Locations.LocationRepeater>
+ *         {({ location }) => <li>{location.name}</li>}
+ *       </Service.Locations.LocationRepeater>
+ *     </Service.Locations.List>
+ *   </ul>
+ * </Service.Locations>
+ * ```
+ */
+declare const LocationsBase: React.ForwardRefExoticComponent<LocationsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service Locations.List component (List Container Level)
+ */
+export interface LocationsListProps {
+    children?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * List container for locations with empty state support (List Container Level).
+ * Renders emptyState when no locations, otherwise renders children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Locations.List emptyState={<div>No locations available</div>}>
+ *   <Service.Locations.LocationRepeater />
+ * </Service.Locations.List>
+ * ```
+ */
+export declare const LocationsList: React.ForwardRefExoticComponent<LocationsListProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Render props for LocationRepeater asChild pattern
+ */
+export interface LocationRepeaterRenderProps {
+    items: LocationType[];
+    itemWrapper: (props: {
+        item: LocationType;
+        index: number;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+}
+/**
+ * Props for Service Locations.LocationRepeater component
+ */
+export interface LocationRepeaterProps {
+    children?: React.ReactNode | ((props: LocationRepeaterRenderProps) => React.ReactNode);
+    asChild?: boolean;
+}
+/**
+ * Repeater component that renders Location.Root for each location.
+ * Supports asChild pattern for custom rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage - renders Location.Root for each location
+ * <Service.Locations.LocationRepeater>
+ *   <span className="location-badge">📍</span>
+ * </Service.Locations.LocationRepeater>
+ *
+ * // AsChild usage with custom numbered list
+ * <Service.Locations.LocationRepeater asChild>
+ *   {({ items, itemWrapper }) => (
+ *     <ol>
+ *       {items.map((item, index) => (
+ *         <li key={item.id}>
+ *           {index + 1}. {itemWrapper({ item, index, children: null })}
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   )}
+ * </Service.Locations.LocationRepeater>
+ * ```
+ */
+export declare const LocationRepeater: React.ForwardRefExoticComponent<LocationRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Type for staff member
+ */
+type StaffMemberType = {
+    name?: string;
+    _id?: string;
+    id: string;
+};
+/**
+ * Props for Service StaffMembers component (Container Level)
+ */
+export interface StaffMembersProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for service staff members list (Container Level).
+ * Follows the 3-level List/Options/Repeater pattern.
+ * Provides context and doesn't render when there are no staff members.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with 3-level pattern
+ * <Service.StaffMembers>
+ *   <Service.StaffMembers.List emptyState={<div>No staff assigned</div>}>
+ *     <Service.StaffMembers.StaffMemberRepeater>
+ *       {({ staffMember }) => (
+ *         <div className="staff-card">
+ *           <img src={staffMember.mainMedia?.image} alt={staffMember.name} />
+ *           <span>{staffMember.name}</span>
+ *         </div>
+ *       )}
+ *     </Service.StaffMembers.StaffMemberRepeater>
+ *   </Service.StaffMembers.List>
+ * </Service.StaffMembers>
+ *
+ * // With asChild pattern for custom container
+ * <Service.StaffMembers asChild>
+ *   <ul className="staff-list">
+ *     <Service.StaffMembers.List>
+ *       <Service.StaffMembers.StaffMemberRepeater>
+ *         {({ staffMember }) => <li>{staffMember.name}</li>}
+ *       </Service.StaffMembers.StaffMemberRepeater>
+ *     </Service.StaffMembers.List>
+ *   </ul>
+ * </Service.StaffMembers>
+ * ```
+ */
+export declare const StaffMembersBase: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service StaffMembers.List component (List Container Level)
+ */
+export interface StaffMembersListProps {
+    children?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * List container for staff members with empty state support (List Container Level).
+ * Renders emptyState when no staff members, otherwise renders children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.StaffMembers.List emptyState={<div>No staff assigned</div>}>
+ *   <Service.StaffMembers.StaffMemberRepeater />
+ * </Service.StaffMembers.List>
+ * ```
+ */
+export declare const StaffMembersList: React.ForwardRefExoticComponent<StaffMembersListProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Render props for StaffMemberRepeater asChild pattern
+ */
+export interface StaffMemberRepeaterRenderProps {
+    items: StaffMemberType[];
+    itemWrapper: (props: {
+        item: StaffMemberType;
+        index: number;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+}
+/**
+ * Props for Service StaffMembers.StaffMemberRepeater component
+ */
+export interface StaffMemberRepeaterProps {
+    children?: React.ReactNode | ((props: StaffMemberRepeaterRenderProps) => React.ReactNode);
+    asChild?: boolean;
+}
+/**
+ * Repeater component that renders staff member name for each staff member.
+ * Supports asChild pattern for custom rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage - renders staff member names
+ * <Service.StaffMembers.StaffMemberRepeater>
+ *   <span className="staff-badge">👤</span>
+ * </Service.StaffMembers.StaffMemberRepeater>
+ *
+ * // AsChild usage with custom numbered list
+ * <Service.StaffMembers.StaffMemberRepeater asChild>
+ *   {({ items, itemWrapper }) => (
+ *     <ol>
+ *       {items.map((item, index) => (
+ *         <li key={item.id}>
+ *           {index + 1}. {itemWrapper({ item, index, children: null })}
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   )}
+ * </Service.StaffMembers.StaffMemberRepeater>
+ * ```
+ */
+export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service MainMedia component
+ */
+export interface MainMediaProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        media: {
+            image?: string;
+        };
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.MainMedia className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <Service.MainMedia asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </Service.MainMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <Service.MainMedia asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="relative aspect-video">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 p-4">
+ *         <Service.Name className="text-primary-foreground" />
+ *       </div>
+ *     </div>
+ *   ))}
+ * </Service.MainMedia>
+ * ```
+ */
+export declare const MainMedia: React.ForwardRefExoticComponent<MainMediaProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Props for Service CoverMedia component
+ */
+export interface CoverMediaProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        media: {
+            image?: string;
+        };
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service cover media image using WixMediaImage.
+ * The cover media is typically used as a hero/banner image.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.CoverMedia className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <Service.CoverMedia asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </Service.CoverMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <Service.CoverMedia asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <header ref={ref} {...props} className="relative h-96">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+ *         <h1 className="text-4xl font-bold text-primary-foreground">
+ *           <Service.Name />
+ *         </h1>
+ *       </div>
+ *     </header>
+ *   ))}
+ * </Service.CoverMedia>
+ * ```
+ */
+export declare const CoverMedia: React.ForwardRefExoticComponent<CoverMediaProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Props for Service MediaItems component
+ */
+export interface MediaItemsProps {
+    children: React.ReactNode;
+    infinite?: boolean;
+    autoPlay?: {
+        direction?: 'forward' | 'backward';
+        intervalMs?: number;
+    };
+}
+/**
+ * Container for service media items gallery.
+ * Renders a MediaGallery.Root with the service media items.
+ * Supports autoPlay and infinite scroll options for carousel behavior.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with MediaGallery components
+ * <Service.MediaItems>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       {({ mediaItem, isActive }) => (
+ *         <img
+ *           src={mediaItem.url}
+ *           alt={mediaItem.altText}
+ *           className={isActive ? 'active' : ''}
+ *         />
+ *       )}
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Service.MediaItems>
+ *
+ * // With autoPlay carousel
+ * <Service.MediaItems
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.MainImage />
+ *   <MediaGallery.Actions.Previous />
+ *   <MediaGallery.Actions.Next />
+ * </Service.MediaItems>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <Service.MediaItems infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.MainImage className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Actions.Previous>Prev</MediaGallery.Actions.Previous>
+ *       <MediaGallery.Actions.Next>Next</MediaGallery.Actions.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails className="thumbnails" />
+ *   </div>
+ * </Service.MediaItems>
+ * ```
+ */
+export declare const MediaItems: React.ForwardRefExoticComponent<MediaItemsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Service Raw component
+ */
+export interface RawProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        service: services.Service;
+        isLoading: boolean;
+        error: string | null;
+    }>;
+    className?: string;
+}
+/**
+ * Provides direct access to service object. Should be used only in rare cases.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Raw>
+ *   {({ service, isLoading, error }) => (
+ *     <div>
+ *       {isLoading && <div>Loading...</div>}
+ *       {error && <div>Error: {error}</div>}
+ *       {service && <pre>{JSON.stringify(service, null, 2)}</pre>}
+ *     </div>
+ *   )}
+ * </Service.Raw>
+ * ```
+ */
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
 /**
  * Actions namespace with individual action components
  */
@@ -104,10 +750,15 @@ export declare namespace Actions {
      */
     interface SelectProps {
         asChild?: boolean;
-        children?: React.ReactNode;
+        children?: React.ReactNode | ((props: {
+            bookable: boolean;
+            selected: boolean;
+            requiresAvailability: boolean;
+            onClick: () => void;
+            service: services.Service;
+        }) => React.ReactNode);
         className?: string;
         label?: string;
-        onClicked?: (event: React.MouseEvent<HTMLButtonElement>, service: services.Service) => void;
     }
     /**
      * Select action component - replaces selection with only this service.
@@ -123,14 +774,13 @@ export declare namespace Actions {
      *   <Button variant="primary">Select Service</Button>
      * </Service.Actions.Select>
      *
-     * // With onClicked callback for navigation
-     * <Service.Actions.Select
-     *   asChild
-     *   onClicked={(event, service) => {
-     *     router.push(`/booking/time-slots/${service._id}`);
-     *   }}
-     * >
-     *   <Button variant="primary">Select Service</Button>
+     * // Using render prop pattern to access bookable state
+     * <Service.Actions.Select>
+     *   {({ bookable, selected, onClick }) => (
+     *     <button onClick={onClick} disabled={!bookable}>
+     *       {selected ? 'Selected' : 'Select Service'}
+     *     </button>
+     *   )}
      * </Service.Actions.Select>
      * ```
      */
@@ -140,10 +790,15 @@ export declare namespace Actions {
      */
     interface AddProps {
         asChild?: boolean;
-        children?: React.ReactNode;
+        children?: React.ReactNode | ((props: {
+            bookable: boolean;
+            selected: boolean;
+            requiresAvailability: boolean;
+            onClick: () => void;
+            service: services.Service;
+        }) => React.ReactNode);
         className?: string;
         label?: string;
-        onClicked?: (event: React.MouseEvent<HTMLButtonElement>, service: services.Service) => void;
     }
     /**
      * Add action component - adds service to selection array.
@@ -159,13 +814,14 @@ export declare namespace Actions {
      *   <Button variant="secondary">Add Service</Button>
      * </Service.Actions.Add>
      *
-     * // With onClicked callback for tracking
-     * <Service.Actions.Add
-     *   label="Add to Cart"
-     *   onClicked={(event, service) => {
-     *     analytics.track('service_added', { serviceId: service._id });
-     *   }}
-     * />
+     * // Using render prop pattern to access bookable state
+     * <Service.Actions.Add>
+     *   {({ bookable, selected, onClick }) => (
+     *     <button onClick={onClick} disabled={!bookable}>
+     *       {selected ? 'Added' : 'Add to Booking'}
+     *     </button>
+     *   )}
+     * </Service.Actions.Add>
      * ```
      */
     const Add: React.ForwardRefExoticComponent<AddProps & React.RefAttributes<HTMLButtonElement>>;
@@ -174,10 +830,15 @@ export declare namespace Actions {
      */
     interface RemoveProps {
         asChild?: boolean;
-        children?: React.ReactNode;
+        children?: React.ReactNode | ((props: {
+            bookable: boolean;
+            selected: boolean;
+            requiresAvailability: boolean;
+            onClick: () => void;
+            service: services.Service;
+        }) => React.ReactNode);
         className?: string;
         label?: string;
-        onClicked?: (event: React.MouseEvent<HTMLButtonElement>, service: services.Service) => void;
     }
     /**
      * Remove action component - removes service from selection array.
@@ -193,16 +854,360 @@ export declare namespace Actions {
      *   <Button variant="destructive">Remove Service</Button>
      * </Service.Actions.Remove>
      *
-     * // With onClicked callback for notifications
-     * <Service.Actions.Remove
-     *   asChild
-     *   onClicked={(event, service) => {
-     *     toast.success(`${service.name} removed from selection`);
-     *   }}
-     * >
-     *   <IconButton icon="trash" />
+     * // Using render prop pattern to access bookable state
+     * <Service.Actions.Remove>
+     *   {({ bookable, selected, onClick }) => (
+     *     <button onClick={onClick} disabled={!bookable}>
+     *       Remove Service
+     *     </button>
+     *   )}
      * </Service.Actions.Remove>
      * ```
      */
     const Remove: React.ForwardRefExoticComponent<RemoveProps & React.RefAttributes<HTMLButtonElement>>;
 }
+/**
+ * Props for Service.Policy.LatestCancellationInMinutes component
+ */
+export interface PolicyLatestCancellationInMinutesProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        cancellationPolicyEnabled: boolean;
+        limitLatestCancellationEnabled: boolean;
+        latestCancellationInMinutes: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays latestCancellationInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.cancellationPolicy.latestCancellationInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw number only (or null if disabled/undefined)
+ * <Service.Policy.LatestCancellationInMinutes className="text-foreground" />
+ * // Renders: <span>30</span> or null
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Consumer adds formatting logic via asChild
+ * <Service.Policy.LatestCancellationInMinutes asChild>
+ *   {({ cancellationPolicyEnabled, limitLatestCancellationEnabled, latestCancellationInMinutes }) => (
+ *     cancellationPolicyEnabled ? (
+ *       <div className="policy-card">
+ *         {limitLatestCancellationEnabled
+ *           ? `Cancel up to ${latestCancellationInMinutes} minutes before`
+ *           : 'Free cancellation anytime'
+ *         }
+ *       </div>
+ *     ) : null
+ *   )}
+ * </Service.Policy.LatestCancellationInMinutes>
+ * ```
+ */
+export declare const PolicyLatestCancellationInMinutes: React.ForwardRefExoticComponent<PolicyLatestCancellationInMinutesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Policy.LatestBookingInMinutes component
+ */
+export interface PolicyLatestBookingInMinutesProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        latestBookingPolicyEnabled: boolean;
+        latestBookingInMinutes: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays latestBookingInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.limitLateBookingPolicy.latestBookingInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.LatestBookingInMinutes className="text-foreground" />
+ * ```
+ */
+export declare const PolicyLatestBookingInMinutes: React.ForwardRefExoticComponent<PolicyLatestBookingInMinutesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Policy.EarliestBookingInMinutes component
+ */
+export interface PolicyEarliestBookingInMinutesProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        earliestBookingPolicyEnabled: boolean;
+        earliestBookingInMinutes: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays earliestBookingInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.limitEarlyBookingPolicy.earliestBookingInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.EarliestBookingInMinutes className="text-foreground" />
+ * ```
+ */
+export declare const PolicyEarliestBookingInMinutes: React.ForwardRefExoticComponent<PolicyEarliestBookingInMinutesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Policy.LatestRescheduleInMinutes component
+ */
+export interface PolicyLatestRescheduleInMinutesProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        reschedulePolicyEnabled: boolean;
+        limitLatestRescheduleEnabled: boolean;
+        latestRescheduleInMinutes: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays latestRescheduleInMinutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.reschedulePolicy.latestRescheduleInMinutes
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.LatestRescheduleInMinutes className="text-foreground" />
+ * ```
+ */
+export declare const PolicyLatestRescheduleInMinutes: React.ForwardRefExoticComponent<PolicyLatestRescheduleInMinutesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Policy.WaitlistCapacity component
+ */
+export interface PolicyWaitlistCapacityProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        waitlistPolicyEnabled: boolean;
+        waitlistCapacity: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays waitlist capacity as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.waitlistPolicy.capacity
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.WaitlistCapacity className="text-foreground" />
+ * ```
+ */
+export declare const PolicyWaitlistCapacity: React.ForwardRefExoticComponent<PolicyWaitlistCapacityProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Policy.BookAfterStartEnabled component
+ */
+export interface PolicyBookAfterStartEnabledProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        bookAfterStartEnabled: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays whether booking after start is enabled.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.bookAfterStartPolicy.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.BookAfterStartEnabled className="text-foreground" />
+ * ```
+ */
+export declare const PolicyBookAfterStartEnabled: React.ForwardRefExoticComponent<PolicyBookAfterStartEnabledProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Policy.MaxParticipantsPerBooking component
+ */
+export interface PolicyMaxParticipantsPerBookingProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        maxParticipantsPerBooking: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays maximum participants per booking as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: bookingPolicy.participantsPolicy.maxParticipantsPerBooking
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.Policy.MaxParticipantsPerBooking className="text-foreground" />
+ * ```
+ */
+export declare const PolicyMaxParticipantsPerBooking: React.ForwardRefExoticComponent<PolicyMaxParticipantsPerBookingProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Policy namespace containing all policy sub-components
+ */
+export declare namespace Policy {
+    const LatestCancellationInMinutes: React.ForwardRefExoticComponent<PolicyLatestCancellationInMinutesProps & React.RefAttributes<HTMLElement>>;
+    const LatestBookingInMinutes: React.ForwardRefExoticComponent<PolicyLatestBookingInMinutesProps & React.RefAttributes<HTMLElement>>;
+    const EarliestBookingInMinutes: React.ForwardRefExoticComponent<PolicyEarliestBookingInMinutesProps & React.RefAttributes<HTMLElement>>;
+    const LatestRescheduleInMinutes: React.ForwardRefExoticComponent<PolicyLatestRescheduleInMinutesProps & React.RefAttributes<HTMLElement>>;
+    const WaitlistCapacity: React.ForwardRefExoticComponent<PolicyWaitlistCapacityProps & React.RefAttributes<HTMLElement>>;
+    const BookAfterStartEnabled: React.ForwardRefExoticComponent<PolicyBookAfterStartEnabledProps & React.RefAttributes<HTMLElement>>;
+    const MaxParticipantsPerBooking: React.ForwardRefExoticComponent<PolicyMaxParticipantsPerBookingProps & React.RefAttributes<HTMLElement>>;
+}
+/**
+ * Props for Service.Schedule.FirstSessionStart component
+ */
+export interface ScheduleFirstSessionStartProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        firstSessionStart: Date | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the first session start date as a raw Date value.
+ * Headless component - contains zero formatting logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays ISO string
+ * <Service.Schedule.FirstSessionStart className="text-foreground" />
+ *
+ * // With custom formatting
+ * <Service.Schedule.FirstSessionStart asChild>
+ *   {({ firstSessionStart }) => (
+ *     firstSessionStart ? (
+ *       <span>Starts: {formatDate(firstSessionStart)}</span>
+ *     ) : null
+ *   )}
+ * </Service.Schedule.FirstSessionStart>
+ * ```
+ */
+export declare const ScheduleFirstSessionStart: React.ForwardRefExoticComponent<ScheduleFirstSessionStartProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Schedule.LastSessionEnd component
+ */
+export interface ScheduleLastSessionEndProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        lastSessionEnd: Date | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the last session end date as a raw Date value.
+ * Headless component - contains zero formatting logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays ISO string
+ * <Service.Schedule.LastSessionEnd className="text-foreground" />
+ *
+ * // With custom formatting
+ * <Service.Schedule.LastSessionEnd asChild>
+ *   {({ lastSessionEnd }) => (
+ *     lastSessionEnd ? (
+ *       <span>Ends: {formatDate(lastSessionEnd)}</span>
+ *     ) : null
+ *   )}
+ * </Service.Schedule.LastSessionEnd>
+ * ```
+ */
+export declare const ScheduleLastSessionEnd: React.ForwardRefExoticComponent<ScheduleLastSessionEndProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service.Schedule.SessionDuration component
+ */
+export interface ScheduleSessionDurationProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        sessionDuration: number | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the session duration in minutes as a raw number.
+ * Headless component - contains zero formatting logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays raw minutes
+ * <Service.Schedule.SessionDuration className="text-foreground" />
+ *
+ * // With custom formatting
+ * <Service.Schedule.SessionDuration asChild>
+ *   {({ sessionDuration }) => (
+ *     sessionDuration ? (
+ *       <span>{formatDuration(sessionDuration)}</span>
+ *     ) : null
+ *   )}
+ * </Service.Schedule.SessionDuration>
+ * ```
+ */
+export declare const ScheduleSessionDuration: React.ForwardRefExoticComponent<ScheduleSessionDurationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Schedule namespace containing all schedule sub-components
+ */
+export declare namespace Schedule {
+    const FirstSessionStart: React.ForwardRefExoticComponent<ScheduleFirstSessionStartProps & React.RefAttributes<HTMLElement>>;
+    const LastSessionEnd: React.ForwardRefExoticComponent<ScheduleLastSessionEndProps & React.RefAttributes<HTMLElement>>;
+    const SessionDuration: React.ForwardRefExoticComponent<ScheduleSessionDurationProps & React.RefAttributes<HTMLElement>>;
+}
+/**
+ * Props for Service DefaultCapacity component
+ */
+export interface DefaultCapacityProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        defaultCapacity: number;
+        isClassOrCourse: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the service default capacity with customizable rendering.
+ * Only renders for CLASS or COURSE service types.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Service.DefaultCapacity className="text-sm" />
+ *
+ * // asChild with custom component
+ * <Service.DefaultCapacity asChild>
+ *   {({ defaultCapacity, isClassOrCourse }) => isClassOrCourse ? (
+ *     <span>Max participants: {defaultCapacity}</span>
+ *   ) : null}
+ * </Service.DefaultCapacity>
+ * ```
+ */
+export declare const DefaultCapacity: React.ForwardRefExoticComponent<DefaultCapacityProps & React.RefAttributes<HTMLElement>>;
+export declare const Locations: typeof LocationsBase & {
+    List: typeof LocationsList;
+    LocationRepeater: typeof LocationRepeater;
+};
+export declare const StaffMembers: typeof StaffMembersBase & {
+    List: typeof StaffMembersList;
+    StaffMemberRepeater: typeof StaffMemberRepeater;
+};
+export {};