@wix/headless-bookings 0.0.53 → 0.0.55

package/cjs/dist/react/location/LocationList.js

@@ -8,6 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { GenericList, } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { useService } from '@wix/services-manager-react';
+import { BookingServiceDefinition } from '../../services/booking/booking.js';
 import * as CoreLocationList from '../core/location-list/LocationList.js';
 import * as Location from './Location.js';
 // ============================================================================
@@ -18,6 +20,7 @@ var TestIds;
     TestIds["locationListRoot"] = "location-list-root";
     TestIds["locationListLocations"] = "location-list-locations";
     TestIds["locationListLocation"] = "location-list-location";
+    TestIds["locationListActionClear"] = "location-list-action-clear";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the LocationList service context for rendering locations lists.
@@ -89,7 +92,7 @@ export const LocationRepeater = React.forwardRef((props, ref) => {
         const location = displayLocation.location ?? {
             locationType: displayLocation.type,
             synthetic: true,
-            id: displayLocation.id,
+            _id: displayLocation.id,
         };
         return (_jsx(Location.Root, { location: location, "data-testid": TestIds.locationListLocation, "data-location-id": displayLocation.id, "data-location-type": displayLocation.type, "data-item-id": displayLocation.id, children: itemChildren }, displayLocation.id));
     };
@@ -118,3 +121,51 @@ export const Totals = React.forwardRef((props, ref) => {
         } }));
 });
 Totals.displayName = 'LocationList.Totals';
+/**
+ * Button to clear the location selection.
+ * Clears the location from the BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button with "Clear" label
+ * <LocationList.Actions.Clear />
+ *
+ * // With custom label
+ * <LocationList.Actions.Clear label="Clear selection" />
+ *
+ * // With asChild
+ * <LocationList.Actions.Clear asChild>
+ *   <button className="btn-secondary">Clear location</button>
+ * </LocationList.Actions.Clear>
+ *
+ * // Using render prop pattern
+ * <LocationList.Actions.Clear>
+ *   {({ onClick }) => <button onClick={onClick}>Clear selection</button>}
+ * </LocationList.Actions.Clear>
+ * ```
+ */
+const Clear = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label = 'Clear', onClicked } = props;
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - likely no ServiceManagerProvider
+    }
+    const handleClick = () => {
+        bookingService?.actions.clearLocation();
+        onClicked?.();
+    };
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
+            onClick: handleClick,
+        }, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+});
+Clear.displayName = 'LocationList.Actions.Clear';
+/**
+ * Actions namespace for location list-level actions
+ */
+export const Actions = {
+    Clear,
+};

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

@@ -514,14 +514,6 @@ export interface LocationRepeaterProps {
  * ```
  */
 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)
  */
@@ -534,6 +526,7 @@ export interface StaffMembersProps {
  * 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.
+ * Internally uses StaffMemberList.Root for consistent staff member handling.
  *
  * @component
  * @example
@@ -542,12 +535,7 @@ export interface StaffMembersProps {
  * <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>
- *       )}
+ *       <StaffMember.Name />
  *     </Service.StaffMembers.StaffMemberRepeater>
  *   </Service.StaffMembers.List>
  * </Service.StaffMembers>
@@ -557,14 +545,14 @@ export interface StaffMembersProps {
  *   <ul className="staff-list">
  *     <Service.StaffMembers.List>
  *       <Service.StaffMembers.StaffMemberRepeater>
- *         {({ staffMember }) => <li>{staffMember.name}</li>}
+ *         <li><StaffMember.Name /></li>
  *       </Service.StaffMembers.StaffMemberRepeater>
  *     </Service.StaffMembers.List>
  *   </ul>
  * </Service.StaffMembers>
  * ```
  */
-export declare const StaffMembersBase: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
+declare const StaffMembersBase: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Service StaffMembers.List component (List Container Level)
  */
@@ -576,6 +564,7 @@ export interface StaffMembersListProps {
 /**
  * List container for staff members with empty state support (List Container Level).
  * Renders emptyState when no staff members, otherwise renders children.
+ * Internally delegates to StaffMemberList.StaffMembers.
  *
  * @component
  * @example
@@ -586,47 +575,30 @@ export interface StaffMembersListProps {
  * ```
  */
 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;
+    children?: React.ReactNode;
 }
 /**
- * Repeater component that renders staff member name for each staff member.
- * Supports asChild pattern for custom rendering.
+ * Repeater component that renders StaffMember.Root for each staff member.
+ * Internally delegates to StaffMemberList.StaffMemberRepeater.
+ * Children are rendered inside each StaffMember.Root context.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage - renders staff member names
+ * // Standard usage - renders StaffMember.Root for each staff member
  * <Service.StaffMembers.StaffMemberRepeater>
- *   <span className="staff-badge">👤</span>
+ *   <StaffMember.Name />
  * </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>
- *   )}
+ * // With custom styling
+ * <Service.StaffMembers.StaffMemberRepeater>
+ *   <div className="staff-card">
+ *     <StaffMember.Name className="font-bold" />
+ *   </div>
  * </Service.StaffMembers.StaffMemberRepeater>
  * ```
  */
@@ -1161,6 +1133,41 @@ export interface DefaultCapacityProps {
  * ```
  */
 export declare const DefaultCapacity: React.ForwardRefExoticComponent<DefaultCapacityProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service AvailableOnline component
+ */
+export interface AvailableOnlineProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        availableOnline: boolean;
+    }>;
+    className?: string;
+    label?: string;
+}
+/**
+ * Displays whether the service is available online (conferencing enabled).
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: service.conferencing.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays label only when available online
+ * <Service.AvailableOnline label="Available Online" className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component
+ * <Service.AvailableOnline asChild>
+ *   {({ availableOnline }) => availableOnline ? (
+ *     <span className="badge bg-green-500">Online</span>
+ *   ) : null}
+ * </Service.AvailableOnline>
+ * ```
+ */
+export declare const AvailableOnline: React.ForwardRefExoticComponent<AvailableOnlineProps & React.RefAttributes<HTMLElement>>;
 export declare const Locations: typeof LocationsBase & {
     List: typeof LocationsList;
     LocationRepeater: typeof LocationRepeater;

package/cjs/dist/react/service/Service.js

@@ -6,11 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as CoreService from '../core/service/Service.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import { Money, GenericList } from '@wix/headless-components/react';
+import { Money } from '@wix/headless-components/react';
 import { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as LocationList from '../location/LocationList.js';
 // Note: Location components are used inside LocationList.LocationRepeater
 // Users should import { Location } from '@wix/headless-bookings/react' for Location.Name, Location.Address, etc.
+import * as StaffMemberListModule from '../staff-member/StaffMemberList.js';
+// Note: StaffMember components are used inside StaffMemberList.StaffMemberRepeater
+// Users should import { StaffMember } from '@wix/headless-bookings/react' for StaffMember.Name, etc.
 import * as ServiceMediaModule from './ServiceMedia.js';
 var TestIds;
 (function (TestIds) {
@@ -46,6 +49,8 @@ var TestIds;
     TestIds["serviceScheduleFirstSessionStart"] = "service-schedule-first-session-start";
     TestIds["serviceScheduleLastSessionEnd"] = "service-schedule-last-session-end";
     TestIds["serviceScheduleSessionDuration"] = "service-schedule-session-duration";
+    // Conferencing component TestIds
+    TestIds["serviceAvailableOnline"] = "service-available-online";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
@@ -467,6 +472,7 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  * 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.
+ * Internally uses StaffMemberList.Root for consistent staff member handling.
  *
  * @component
  * @example
@@ -475,12 +481,7 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  * <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>
- *       )}
+ *       <StaffMember.Name />
  *     </Service.StaffMembers.StaffMemberRepeater>
  *   </Service.StaffMembers.List>
  * </Service.StaffMembers>
@@ -490,32 +491,28 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  *   <ul className="staff-list">
  *     <Service.StaffMembers.List>
  *       <Service.StaffMembers.StaffMemberRepeater>
- *         {({ staffMember }) => <li>{staffMember.name}</li>}
+ *         <li><StaffMember.Name /></li>
  *       </Service.StaffMembers.StaffMemberRepeater>
  *     </Service.StaffMembers.List>
  *   </ul>
  * </Service.StaffMembers>
  * ```
  */
-export const StaffMembersBase = React.forwardRef((props, ref) => {
+const StaffMembersBase = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...attributes } = props;
     return (_jsx(CoreService.Info, { children: ({ staff }) => {
             // Container level: don't render if no staff members
             if (!staff || staff.length === 0) {
                 return null;
             }
-            // Map staff to include required id field for GenericList
-            const items = staff.map((member, index) => ({
-                ...member,
-                id: member._id || String(index),
-            }));
-            return (_jsx(GenericList.Root, { items: items, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(StaffMemberListModule.Root, { staffMemberListConfig: { staffMembers: staff }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...attributes, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: children }) }) }));
         } }));
 });
 StaffMembersBase.displayName = 'Service.StaffMembers';
 /**
  * List container for staff members with empty state support (List Container Level).
  * Renders emptyState when no staff members, otherwise renders children.
+ * Internally delegates to StaffMemberList.StaffMembers.
  *
  * @component
  * @example
@@ -527,42 +524,33 @@ StaffMembersBase.displayName = 'Service.StaffMembers';
  */
 export const StaffMembersList = React.forwardRef((props, ref) => {
     const { children, emptyState, className, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
+    return (_jsx(StaffMemberListModule.StaffMembers, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
 });
 StaffMembersList.displayName = 'Service.StaffMembers.List';
 /**
- * Repeater component that renders staff member name for each staff member.
- * Supports asChild pattern for custom rendering.
+ * Repeater component that renders StaffMember.Root for each staff member.
+ * Internally delegates to StaffMemberList.StaffMemberRepeater.
+ * Children are rendered inside each StaffMember.Root context.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage - renders staff member names
+ * // Standard usage - renders StaffMember.Root for each staff member
  * <Service.StaffMembers.StaffMemberRepeater>
- *   <span className="staff-badge">👤</span>
+ *   <StaffMember.Name />
  * </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>
- *   )}
+ * // With custom styling
+ * <Service.StaffMembers.StaffMemberRepeater>
+ *   <div className="staff-card">
+ *     <StaffMember.Name className="font-bold" />
+ *   </div>
  * </Service.StaffMembers.StaffMemberRepeater>
  * ```
  */
 export const StaffMemberRepeater = React.forwardRef((props, ref) => {
-    const { children, asChild } = props;
-    // Custom itemWrapper that renders staff member name
-    const staffMemberItemWrapper = ({ item: member, children: itemChildren, }) => {
-        return (_jsxs(React.Fragment, { children: [_jsx("span", { "data-testid": TestIds.serviceStaffMemberRepeater, children: member.name }), itemChildren] }, member.id));
-    };
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, asChild: asChild, children: children }));
+    const { children } = props;
+    return (_jsx(StaffMemberListModule.StaffMemberRepeater, { ref: ref, children: children }));
 });
 StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
 /**
@@ -1097,6 +1085,37 @@ export const DefaultCapacity = React.forwardRef((props, ref) => {
         } }));
 });
 DefaultCapacity.displayName = 'Service.DefaultCapacity';
+/**
+ * Displays whether the service is available online (conferencing enabled).
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: service.conferencing.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays label only when available online
+ * <Service.AvailableOnline label="Available Online" className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component
+ * <Service.AvailableOnline asChild>
+ *   {({ availableOnline }) => availableOnline ? (
+ *     <span className="badge bg-green-500">Online</span>
+ *   ) : null}
+ * </Service.AvailableOnline>
+ * ```
+ */
+export const AvailableOnline = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreService.Service, { children: ({ service }) => {
+            const availableOnline = service.conferencing?.enabled ?? false;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceAvailableOnline, customElement: children, customElementProps: { availableOnline }, children: availableOnline && label ? _jsx("span", { children: label }) : null }));
+        } }));
+});
+AvailableOnline.displayName = 'Service.AvailableOnline';
 // Create Locations with nested components
 export const Locations = Object.assign(LocationsBase, {
     List: LocationsList,

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

@@ -0,0 +1,119 @@
+/**
+ * StaffMember - Headless component for displaying staff member information
+ * Provides components for displaying staff member name
+ *
+ * @module React/StaffMember
+ */
+import React from 'react';
+import * as CoreStaffMember from '../core/staff-member/StaffMember.js';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+export { useStaffMemberContext } from '../core/staff-member/StaffMember.js';
+export type { StaffMemberData, StaffMemberRenderProps, } from '../core/staff-member/StaffMember.js';
+/**
+ * Props for StaffMember.Root component
+ */
+export interface RootProps {
+    /** Raw staff member data */
+    staffMember?: CoreStaffMember.StaffMemberData;
+    /** Use asChild pattern */
+    asChild?: boolean;
+    /** Children - ReactNode or render function with all StaffMemberRenderProps */
+    children?: React.ReactNode | AsChildChildren<CoreStaffMember.StaffMemberRenderProps>;
+    /** CSS class name */
+    className?: string;
+    /** Data attributes */
+    [key: `data-${string}`]: string | undefined;
+}
+/**
+ * Root component that provides staff member context and handles data parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With staff member data
+ * <StaffMember.Root staffMember={staffMemberData}>
+ *   <StaffMember.Name className="font-bold" />
+ * </StaffMember.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access all staff member data
+ * <StaffMember.Root staffMember={staffMember} asChild>
+ *   {({ name, rawStaffMember }) => (
+ *     <div>
+ *       <span>{name}</span>
+ *     </div>
+ *   )}
+ * </StaffMember.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMember.Name component
+ */
+export interface NameProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        name: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the staff member name.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Name className="font-bold" />
+ *
+ * // With asChild
+ * <StaffMember.Name asChild>
+ *   {({ name }) => <h3>{name || 'Unknown Staff'}</h3>}
+ * </StaffMember.Name>
+ * ```
+ */
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMember.Raw component
+ */
+export interface RawProps {
+    children: (props: CoreStaffMember.StaffMemberRenderProps) => React.ReactNode;
+}
+/**
+ * Exposes all raw staff member data via render prop.
+ * Use only when you need full access to staff member data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Raw>
+ *   {({ rawStaffMember, name }) => (
+ *     <pre>{JSON.stringify(rawStaffMember, null, 2)}</pre>
+ *   )}
+ * </StaffMember.Raw>
+ * ```
+ */
+export declare const Raw: React.FC<RawProps>;
+/**
+ * Props for StaffMember.Actions.Select component
+ */
+export interface SelectProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        onClick: () => void;
+        selected: boolean;
+        staffMember: CoreStaffMember.StaffMemberData | null;
+    }>;
+    /** Callback fired after staff member is selected - receives the staff member */
+    onClicked?: (staffMember: CoreStaffMember.StaffMemberData) => void;
+    /** Label for the button */
+    label?: string;
+    className?: string;
+}
+/**
+ * Actions namespace for staff member-related actions
+ */
+export declare const Actions: {
+    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StaffMember - Headless component for displaying staff member information
+ * Provides components for displaying staff member name
+ *
+ * @module React/StaffMember
+ */
+import React from 'react';
+import * as CoreStaffMember from '../core/staff-member/StaffMember.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+// Re-export useStaffMemberContext from core
+export { useStaffMemberContext } from '../core/staff-member/StaffMember.js';
+// ==========================================
+// TestIds Enum
+// ==========================================
+var TestIds;
+(function (TestIds) {
+    TestIds["staffMemberRoot"] = "staff-member-root";
+    TestIds["staffMemberName"] = "staff-member-name";
+    TestIds["staffMemberRaw"] = "staff-member-raw";
+    TestIds["staffMemberActionSelect"] = "staff-member-action-select";
+})(TestIds || (TestIds = {}));
+// ==========================================
+// Type Definitions
+// ==========================================
+// Use the core's context hook
+const useStaffMemberContext = CoreStaffMember.useStaffMemberContext;
+// ==========================================
+// Root Component
+// ==========================================
+/**
+ * Root component that provides staff member context and handles data parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With staff member data
+ * <StaffMember.Root staffMember={staffMemberData}>
+ *   <StaffMember.Name className="font-bold" />
+ * </StaffMember.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access all staff member data
+ * <StaffMember.Root staffMember={staffMember} asChild>
+ *   {({ name, rawStaffMember }) => (
+ *     <div>
+ *       <span>{name}</span>
+ *     </div>
+ *   )}
+ * </StaffMember.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { staffMember, asChild, children, className, ...attrs } = props;
+    // Extract data-* attributes
+    const dataAttrs = Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('data-')));
+    return (_jsx(CoreStaffMember.Root, { staffMember: staffMember, children: _jsx(CoreStaffMember.Data, { children: (renderProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberRoot, customElement: children, customElementProps: renderProps, ...dataAttrs, children: children })) }) }));
+});
+Root.displayName = 'StaffMember.Root';
+/**
+ * Displays the staff member name.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Name className="font-bold" />
+ *
+ * // With asChild
+ * <StaffMember.Name asChild>
+ *   {({ name }) => <h3>{name || 'Unknown Staff'}</h3>}
+ * </StaffMember.Name>
+ * ```
+ */
+export const Name = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { name } = useStaffMemberContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberName, customElement: children, customElementProps: { name }, ...attrs, children: name ? _jsx("span", { children: name }) : null }));
+});
+Name.displayName = 'StaffMember.Name';
+/**
+ * Exposes all raw staff member data via render prop.
+ * Use only when you need full access to staff member data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Raw>
+ *   {({ rawStaffMember, name }) => (
+ *     <pre>{JSON.stringify(rawStaffMember, null, 2)}</pre>
+ *   )}
+ * </StaffMember.Raw>
+ * ```
+ */
+export const Raw = (props) => {
+    const context = useStaffMemberContext();
+    return _jsx(_Fragment, { children: props.children(context) });
+};
+Raw.displayName = 'StaffMember.Raw';
+/**
+ * Selection action component for choosing a staff member.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Actions.Select label="Choose Staff Member" />
+ *
+ * // With onClicked callback
+ * <StaffMember.Actions.Select
+ *   label="Select"
+ *   onClicked={(staffMember) => console.log('Selected:', staffMember.name)}
+ * />
+ *
+ * // With asChild
+ * <StaffMember.Actions.Select asChild>
+ *   {({ onClick, selected }) => (
+ *     <Button onClick={onClick} variant={selected ? 'primary' : 'outline'}>
+ *       {selected ? 'Selected' : 'Select'}
+ *     </Button>
+ *   )}
+ * </StaffMember.Actions.Select>
+ * ```
+ */
+const Select = React.forwardRef((props, ref) => {
+    const { asChild, children, onClicked, label = 'Select', className, ...attrs } = props;
+    return (_jsx(CoreStaffMember.Actions, { children: ({ select, selected, rawStaffMember }) => {
+            const handleClick = () => {
+                select();
+                if (onClicked && rawStaffMember) {
+                    onClicked(rawStaffMember);
+                }
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberActionSelect, "data-selected": selected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    selected,
+                    staffMember: rawStaffMember,
+                }, ...attrs, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+        } }));
+});
+Select.displayName = 'StaffMember.Actions.Select';
+/**
+ * Actions namespace for staff member-related actions
+ */
+export const Actions = {
+    Select,
+};