@wix/headless-bookings 0.0.44 → 0.0.46

package/cjs/dist/__mocks__/booking.d.ts

@@ -1,9 +1,14 @@
-/**
- * Shared mock data for booking service tests
- */
 import type { Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
-import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig } from '../services/booking/booking.js';
+import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig, BookingService } from '../services/booking/booking.js';
+import type { Signal } from '@wix/services-definitions/core-services/signals';
+export declare function mockSignal<T>(initialValue: T): Signal<T>;
+export declare function createMockSignalsService(): {
+    signal: typeof mockSignal;
+    computed: <T>(fn: () => T) => Signal<T>;
+    effect: (fn: () => void) => void;
+};
+export declare function createMockBookingService(initialSelections?: ServiceSelection[]): BookingService;
 /**
  * Mock resource (staff member)
  */

package/cjs/dist/__mocks__/booking.js

@@ -1,7 +1,52 @@
-/**
- * Shared mock data for booking service tests
- */
 import { mockService, mockServiceClass } from './services.js';
+import { vi } from 'vitest';
+export function mockSignal(initialValue) {
+    let value = initialValue;
+    return {
+        get: () => value,
+        peek: () => value,
+        set: (newValue) => {
+            value = newValue;
+        },
+    };
+}
+export function createMockSignalsService() {
+    return {
+        signal: mockSignal,
+        computed: (fn) => mockSignal(fn()),
+        effect: vi.fn((fn) => {
+            fn();
+        }),
+    };
+}
+export function createMockBookingService(initialSelections = []) {
+    const serviceSelectionsSignal = mockSignal(initialSelections);
+    const locationSignal = mockSignal(null);
+    const timezoneSignal = mockSignal('UTC');
+    const formSubmissionSignal = mockSignal(null);
+    return {
+        serviceSelections: serviceSelectionsSignal,
+        location: locationSignal,
+        timezone: timezoneSignal,
+        formSubmission: formSubmissionSignal,
+        actions: {
+            updateItem: vi.fn(),
+            setItem: vi.fn(),
+            addItem: vi.fn(),
+            removeItem: vi.fn(),
+            clearItems: vi.fn(),
+            setResourceById: vi.fn(),
+            getResourceById: vi.fn(),
+            setLocation: vi.fn(),
+            clearLocation: vi.fn(),
+            setTimezone: vi.fn(),
+            setFormSubmission: vi.fn(),
+            clearFormSubmission: vi.fn(),
+            clearAll: vi.fn(),
+            book: vi.fn(),
+        },
+    };
+}
 /**
  * Mock resource (staff member)
  */

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

@@ -5,6 +5,7 @@ import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { ServiceServiceConfig } from '../services/service/service.js';
 import type { ServiceListServiceConfig } from '../services/service-list/service-list.js';
 import type { PagingMetadata } from '../api/query-services/index.js';
+import type { Category } from '../api/query-categories/index.js';
 /**
  * Booking app ID constant
  */
@@ -73,3 +74,23 @@ export declare const mockServiceConfig: ServiceServiceConfig;
  * Helper to create a large list of services for pagination tests
  */
 export declare function createLargeServiceList(count: number): Service[];
+/**
+ * Mock categories for filter tests
+ */
+export declare const mockCategories: Category[];
+/**
+ * Empty categories array
+ */
+export declare const mockEmptyCategories: Category[];
+/**
+ * Service list config with categories for filter testing
+ */
+export declare const mockServiceListConfigWithCategories: ServiceListServiceConfig;
+/**
+ * Service list config with categories and hasNext for pagination + filter testing
+ */
+export declare const mockServiceListConfigWithCategoriesAndMore: ServiceListServiceConfig;
+/**
+ * Empty service list config with categories
+ */
+export declare const mockEmptyServiceListConfigWithCategories: ServiceListServiceConfig;

package/cjs/dist/__mocks__/services.js

@@ -306,3 +306,57 @@ export function createLargeServiceList(count) {
         },
     }));
 }
+/**
+ * Mock categories for filter tests
+ */
+export const mockCategories = [
+    {
+        _id: 'category-1',
+        name: 'Wellness',
+    },
+    {
+        _id: 'category-2',
+        name: 'Fitness',
+    },
+    {
+        _id: 'category-3',
+        name: 'Beauty',
+    },
+];
+/**
+ * Empty categories array
+ */
+export const mockEmptyCategories = [];
+/**
+ * Service list config with categories for filter testing
+ */
+export const mockServiceListConfigWithCategories = {
+    services: mockServices,
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadata,
+    },
+};
+/**
+ * Service list config with categories and hasNext for pagination + filter testing
+ */
+export const mockServiceListConfigWithCategoriesAndMore = {
+    services: mockServices,
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataWithMore,
+    },
+};
+/**
+ * Empty service list config with categories
+ */
+export const mockEmptyServiceListConfigWithCategories = {
+    services: [],
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataEmpty,
+    },
+};

package/cjs/dist/__mocks__/time-slots.d.ts

@@ -0,0 +1,28 @@
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { TimeSlotListServiceConfig, TimeSlotListServiceAPI } from '../services/time-slot-list/time-slot-list.def.js';
+import type { BookingService } from '../services/booking/booking.js';
+export declare function createTimeSlotListService(overrides?: Partial<TimeSlotListServiceConfig>): {
+    service: TimeSlotListServiceAPI;
+    bookingService: BookingService;
+};
+export declare function createTimeSlot(overrides?: Partial<TimeSlot>): TimeSlot;
+export declare function createTimeSlots(count: number): TimeSlot[];
+export declare function createTimeSlotListConfig(overrides?: Partial<TimeSlotListServiceConfig>): TimeSlotListServiceConfig;
+export declare const mockTimeSlot: TimeSlot;
+export declare const mockTimeSlotMultipleStaff: TimeSlot;
+export declare const mockTimeSlotNotBookable: TimeSlot;
+export declare const mockTimeSlots: TimeSlot[];
+export declare const mockStartDate: Date;
+export declare const mockEndDate: Date;
+export declare const mockTimezone = "America/New_York";
+export declare const mockTimeSlotListConfig: TimeSlotListServiceConfig;
+export declare const mockEmptyTimeSlotListConfig: TimeSlotListServiceConfig;
+export declare const mockCursorPagingMetadataWithMore: {
+    cursors: {
+        next: string;
+    };
+};
+export declare const mockCursorPagingMetadataNoMore: {
+    cursors: {};
+};
+export declare function createMockTimeSlotListService(config?: Partial<TimeSlotListServiceConfig>): TimeSlotListServiceAPI;

package/cjs/dist/__mocks__/time-slots.js

@@ -0,0 +1,116 @@
+import { vi } from 'vitest';
+import { TimeSlotListService } from '../services/time-slot-list/time-slot-list.js';
+import { createMockBookingService, createMockSignalsService, mockSignal, } from './booking.js';
+export function createTimeSlotListService(overrides = {}) {
+    const config = createTimeSlotListConfig(overrides);
+    const mockBookingService = createMockBookingService();
+    const mockSignalsService = createMockSignalsService();
+    const getService = (definition) => {
+        const def = definition;
+        if (def.name === 'signals') {
+            return mockSignalsService;
+        }
+        if (def.name === 'booking') {
+            return mockBookingService;
+        }
+        throw new Error(`Unknown service: ${def.name}`);
+    };
+    const service = TimeSlotListService({
+        getService,
+        config,
+    });
+    return {
+        service,
+        bookingService: mockBookingService,
+    };
+}
+export function createTimeSlot(overrides = {}) {
+    return {
+        localStartDate: '2024-01-15T10:00:00',
+        localEndDate: '2024-01-15T11:00:00',
+        bookable: true,
+        totalCapacity: 10,
+        remainingCapacity: 5,
+        scheduleId: 'schedule-1',
+        location: { _id: 'loc-1', name: 'Main Office' },
+        availableResources: [{ resources: [{ _id: 'staff-1', name: 'John Doe' }] }],
+        ...overrides,
+    };
+}
+export function createTimeSlots(count) {
+    return Array.from({ length: count }, (_, i) => createTimeSlot({
+        localStartDate: `2024-01-15T${String(9 + (i % 8)).padStart(2, '0')}:00:00`,
+        localEndDate: `2024-01-15T${String(10 + (i % 8)).padStart(2, '0')}:00:00`,
+        scheduleId: `schedule-${i}`,
+    }));
+}
+export function createTimeSlotListConfig(overrides = {}) {
+    const { startDate = new Date('2024-01-15T00:00:00'), endDate = new Date('2024-01-22T00:00:00'), timezone = 'America/New_York', timeSlots, ...rest } = overrides;
+    return {
+        startDate,
+        endDate,
+        timezone,
+        ...rest,
+        ...(timeSlots !== undefined ? { timeSlots } : {}),
+    };
+}
+export const mockTimeSlot = createTimeSlot();
+export const mockTimeSlotMultipleStaff = createTimeSlot({
+    availableResources: [
+        {
+            resources: [
+                { _id: 'staff-1', name: 'John Doe' },
+                { _id: 'staff-2', name: 'Jane Smith' },
+            ],
+        },
+    ],
+});
+export const mockTimeSlotNotBookable = createTimeSlot({
+    localStartDate: '2024-01-15T14:00:00',
+    localEndDate: '2024-01-15T15:00:00',
+    bookable: false,
+    remainingCapacity: 0,
+    location: { _id: 'loc-2', name: 'Downtown Branch' },
+});
+export const mockTimeSlots = [
+    mockTimeSlot,
+    mockTimeSlotMultipleStaff,
+    mockTimeSlotNotBookable,
+];
+export const mockStartDate = new Date('2024-01-15T00:00:00');
+export const mockEndDate = new Date('2024-01-22T00:00:00');
+export const mockTimezone = 'America/New_York';
+export const mockTimeSlotListConfig = createTimeSlotListConfig({
+    timeSlots: mockTimeSlots,
+});
+export const mockEmptyTimeSlotListConfig = createTimeSlotListConfig();
+export const mockCursorPagingMetadataWithMore = {
+    cursors: { next: 'next-cursor-token' },
+};
+export const mockCursorPagingMetadataNoMore = { cursors: {} };
+export function createMockTimeSlotListService(config = {}) {
+    const timeSlotsSignal = mockSignal(config.timeSlots || []);
+    const isLoadingSignal = mockSignal(false);
+    const errorSignal = mockSignal(null);
+    const hasMoreSignal = mockSignal(false);
+    const dateRangeSignal = mockSignal({
+        start: config.startDate || mockStartDate,
+        end: config.endDate || mockEndDate,
+    });
+    return {
+        timeSlots: timeSlotsSignal,
+        isLoading: isLoadingSignal,
+        error: errorSignal,
+        hasMore: hasMoreSignal,
+        dateRange: dateRangeSignal,
+        actions: {
+            selectSlot: vi.fn(),
+            selectStaffMember: vi.fn(),
+            clearStaffSelection: vi.fn(),
+            loadMore: vi.fn(),
+            setDateRange: vi.fn((start, end) => {
+                dateRangeSignal.set({ start, end });
+            }),
+        },
+    };
+}

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

@@ -9,6 +9,7 @@ export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, type CreateBookingOptions, type Booking, type CreateBookingRequest, type CreateBookingResponse, type ParticipantNotification, type ContactDetails, } from './create-booking/index.js';
 export { createCheckout, ChannelType, type CreateCheckoutRequest, type CreateCheckoutResponse, } from './create-checkout/index.js';
 export { queryLocations, type QueryLocationsResult, type LocationData, } from './query-locations/index.js';
+export { queryCategories, type QueryCategoriesResult, type Category, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/api/index.js

@@ -9,6 +9,7 @@ export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, } from './create-booking/index.js';
 export { createCheckout, ChannelType, } from './create-checkout/index.js';
 export { queryLocations, } from './query-locations/index.js';
+export { queryCategories, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/api/query-categories/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Query Categories API
+ * Fetches booking service categories from Wix Bookings
+ *
+ * @module API/QueryCategories
+ */
+import { categoriesV2 } from '@wix/bookings';
+/**
+ * Category type from the Wix Bookings Categories V2 API
+ */
+export type Category = categoriesV2.Category;
+/**
+ * Result from querying categories
+ */
+export interface QueryCategoriesResult {
+    /** Array of booking service categories */
+    categories: Category[];
+}
+/**
+ * Query all booking service categories.
+ * Returns an array of categories sorted by creation date (ascending).
+ *
+ * @returns Promise resolving to categories array
+ *
+ * @example
+ * ```ts
+ * const { categories } = await queryCategories();
+ *
+ * categories.forEach(category => {
+ *   console.log(category.name, category._id);
+ * });
+ * ```
+ */
+export declare function queryCategories(): Promise<QueryCategoriesResult>;

package/cjs/dist/api/query-categories/index.js

@@ -0,0 +1,28 @@
+/**
+ * Query Categories API
+ * Fetches booking service categories from Wix Bookings
+ *
+ * @module API/QueryCategories
+ */
+import { categoriesV2 } from '@wix/bookings';
+/**
+ * Query all booking service categories.
+ * Returns an array of categories sorted by creation date (ascending).
+ *
+ * @returns Promise resolving to categories array
+ *
+ * @example
+ * ```ts
+ * const { categories } = await queryCategories();
+ *
+ * categories.forEach(category => {
+ *   console.log(category.name, category._id);
+ * });
+ * ```
+ */
+export async function queryCategories() {
+    const result = await categoriesV2.queryCategories().find();
+    return {
+        categories: result.items || [],
+    };
+}

package/cjs/dist/api/query-services/index.js

@@ -74,8 +74,15 @@ const buildServicesQueryRequest = ({ appId, filters, paging, sort, }) => {
     if (filters?.serviceIds && filters.serviceIds.length > 0) {
         filter['_id'] = { $in: filters.serviceIds };
     }
-    // Add other filters as they are implemented in future phases
-    // categoryIds, locationIds, staffMemberIds to be added later
+    // Add categoryIds filter if provided
+    if (filters?.categoryIds && filters.categoryIds.length > 0) {
+        filter['category.id'] = { $in: filters.categoryIds };
+    }
+    // Add locationIds filter if provided
+    if (filters?.locationIds && filters.locationIds.length > 0) {
+        filter['locations.business.id'] = { $hasSome: filters.locationIds };
+    }
+    // staffMemberIds to be added later
     const query = {
         filter: Object.keys(filter).length > 0 ? filter : undefined,
         paging: paging || {

package/cjs/dist/react/core/service-list/ServiceListFilter.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Core ServiceListFilter Components
+ * Provides render props for filter data from ServiceListService and BookingService
+ */
+import React from 'react';
+import type { FilterOption } from '@wix/headless-components/react';
+import { type ServiceListFilters } from '../../../services/service-list/service-list.js';
+/**
+ * Render props for the Root component
+ */
+export interface RootRenderProps {
+    /** Filter options configuration derived from categories */
+    filterOptions: FilterOption[];
+    /** Current filter state */
+    currentFilter: ServiceListFilters | null;
+    /** Function to update filter (includes location from BookingService) */
+    updateFilter: (filter: ServiceListFilters) => void;
+    /** Function to clear all filters */
+    clearFilters: () => void;
+    /** Whether any filters are active */
+    isFiltered: boolean;
+}
+/**
+ * Props for the Root component
+ */
+export interface RootProps {
+    /** Render function that receives filter data */
+    children: (props: RootRenderProps) => React.ReactNode;
+}
+/**
+ * Core render props component that provides filter data from services.
+ * Reads categories from ServiceListService and location from BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceListFilter.Root>
+ *   {({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered }) => (
+ *     <Filter.Root
+ *       value={currentFilter}
+ *       onChange={updateFilter}
+ *       filterOptions={filterOptions}
+ *     >
+ *       <Filter.FilterOptions>
+ *         <Filter.FilterOptionRepeater>
+ *           <Filter.FilterOption.Label />
+ *           <Filter.FilterOption.SingleFilter />
+ *         </Filter.FilterOptionRepeater>
+ *       </Filter.FilterOptions>
+ *     </Filter.Root>
+ *   )}
+ * </ServiceListFilter.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;

package/cjs/dist/react/core/service-list/ServiceListFilter.js

@@ -0,0 +1,59 @@
+/**
+ * Core ServiceListFilter Components
+ * Provides render props for filter data from ServiceListService and BookingService
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceListServiceDefinition, } from '../../../services/service-list/service-list.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
+/**
+ * Core render props component that provides filter data from services.
+ * Reads categories from ServiceListService and location from BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceListFilter.Root>
+ *   {({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered }) => (
+ *     <Filter.Root
+ *       value={currentFilter}
+ *       onChange={updateFilter}
+ *       filterOptions={filterOptions}
+ *     >
+ *       <Filter.FilterOptions>
+ *         <Filter.FilterOptionRepeater>
+ *           <Filter.FilterOption.Label />
+ *           <Filter.FilterOption.SingleFilter />
+ *         </Filter.FilterOptionRepeater>
+ *       </Filter.FilterOptions>
+ *     </Filter.Root>
+ *   )}
+ * </ServiceListFilter.Root>
+ * ```
+ */
+export function Root(props) {
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const bookingService = useService(BookingServiceDefinition);
+    // Get reactive data from signals
+    const filterOptions = serviceListService.filterOptionsSignal.get();
+    const currentFilter = serviceListService.filterSignal.get();
+    const isFiltered = serviceListService.isFilteredSignal.get();
+    const selectedLocation = bookingService.location.get();
+    const updateFilter = (newFilter) => {
+        // Include locationId from BookingService in the filter
+        const locationId = selectedLocation?.business?._id;
+        serviceListService.actions.setFilter({
+            ...newFilter,
+            ...(locationId ? { locationIds: [locationId] } : {}),
+        });
+    };
+    const clearFilters = () => {
+        serviceListService.actions.resetFilter();
+    };
+    return props.children({
+        filterOptions,
+        currentFilter,
+        updateFilter,
+        clearFilters,
+        isFiltered,
+    });
+}

package/cjs/dist/react/service-list/ServiceList.d.ts

@@ -3,7 +3,7 @@
  * Provides components for displaying services list with pagination
  */
 import React from 'react';
-import { ListVariant, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
+import { ListVariant, GenericListLoadMoreRenderProps, Filter as FilterPrimitive } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { ServiceListServiceConfig } from '../../services/service-list/service-list.js';
 import type { Service as ServiceType } from '@wix/auto_sdk_bookings_services';
@@ -185,3 +185,64 @@ export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & R
 export declare const Actions: {
     LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Data available through asChild pattern
+ */
+export interface FilterAsChildProps {
+    /** Filter options configuration derived from categories */
+    filterOptions: FilterPrimitive.FilterOption[];
+    /** Current filter state */
+    currentFilter: FilterPrimitive.Filter;
+    /** Function to update filter */
+    updateFilter: (filter: FilterPrimitive.Filter) => void;
+    /** Function to clear all active filters */
+    clearFilters: () => void;
+    /** Whether any filters are currently active */
+    isFiltered: boolean;
+}
+/**
+ * Props for ServiceList Filter component
+ */
+export interface FilterProps {
+    /** Child components that will have access to filter functionality */
+    children: React.ReactNode | ((props: FilterAsChildProps) => React.ReactNode);
+    /** When true, the component will not render its own div wrapper */
+    asChild?: boolean;
+    /** CSS classes to apply to the filter container */
+    className?: string;
+}
+/**
+ * Filter component that provides filtering functionality for service lists.
+ * Integrates with ServiceListService for categories and BookingService for location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Filter } from '@wix/headless-components/react';
+ *
+ * <ServiceList.Filter className="filter-sidebar">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.SingleFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ *   <Filter.Filtered>
+ *     <Filter.Action.Clear label="Clear Filters" />
+ *   </Filter.Filtered>
+ * </ServiceList.Filter>
+ *
+ * // With asChild pattern
+ * <ServiceList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.SingleFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ServiceList.Filter>
+ * ```
+ */
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/service-list/ServiceList.js

@@ -4,8 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Provides components for displaying services list with pagination
  */
 import React from 'react';
-import { GenericList, } from '@wix/headless-components/react';
+import { GenericList, Filter as FilterPrimitive, } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreServiceList from '../core/service-list/ServiceList.js';
+import * as CoreServiceListFilter from '../core/service-list/ServiceListFilter.js';
 import * as Service from '../service/Service.js';
 /**
  * Booking app ID constant
@@ -17,6 +19,7 @@ var TestIds;
     TestIds["serviceListServices"] = "service-list-services";
     TestIds["serviceListService"] = "service-list-service";
     TestIds["serviceListLoadMore"] = "service-list-load-more";
+    TestIds["serviceListFilter"] = "service-list-filter";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ServiceList service context for rendering services lists.
@@ -170,3 +173,52 @@ LoadMore.displayName = 'ServiceList.Actions.LoadMore';
 export const Actions = {
     LoadMore,
 };
+/**
+ * Filter component that provides filtering functionality for service lists.
+ * Integrates with ServiceListService for categories and BookingService for location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Filter } from '@wix/headless-components/react';
+ *
+ * <ServiceList.Filter className="filter-sidebar">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.SingleFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ *   <Filter.Filtered>
+ *     <Filter.Action.Clear label="Clear Filters" />
+ *   </Filter.Filtered>
+ * </ServiceList.Filter>
+ *
+ * // With asChild pattern
+ * <ServiceList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.SingleFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ServiceList.Filter>
+ * ```
+ */
+export const Filter = React.forwardRef((props, ref) => {
+    const { children, asChild, className, ...otherProps } = props;
+    return (_jsx(CoreServiceListFilter.Root, { children: ({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered, }) => {
+            // Prepare asChildProps for function children
+            const asChildProps = {
+                filterOptions,
+                currentFilter: currentFilter,
+                updateFilter: (value) => updateFilter(value),
+                clearFilters,
+                isFiltered,
+            };
+            return (_jsx(FilterPrimitive.Root, { value: currentFilter, onChange: (value) => updateFilter(value), filterOptions: filterOptions, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceListFilter, "data-is-filtered": isFiltered, customElement: children, customElementProps: asChildProps, ...otherProps, children: children }) }));
+        } }));
+});
+Filter.displayName = 'ServiceList.Filter';