@wix/headless-bookings 1.0.8 → 1.0.10

package/dist/services/index.js

@@ -6,8 +6,8 @@ export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
 export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
-export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from '../api/query-services/index.js';
-export { executeBookAction, canBook, buildBookingRequest, buildCartRequest, buildDayRangeCartRequest, buildDayRangeBookingRequest, createBookingsForCart, isDayRangeService, getDayRangeBounds, } from './booking/book-action/index.js';
+export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, AvailabilityLocationType, } from '../api/query-services/index.js';
+export { executeBookAction, canBook, buildBookingRequest, buildCartRequest, buildDayRangeBookingRequest, createBookingsForCart, isDayRangeService, getDayRangeBounds, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';
 export { PaymentService, PaymentServiceDefinition, loadPaymentConfig, } from './payment/payment.js';
 export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, getLocationById, } from './location-list/location-list.js';

package/dist/services/service-list/service-list.d.ts

@@ -1,22 +1,29 @@
 /**
  * ServiceList Service - Reactive service list data management
- * Handles querying and pagination of services list (NO selection management)
+ * Handles querying and pagination of services list (NO selection management).
+ *
+ * Availability is just part of the query: when the query options carry an
+ * `availabilityFilter`, the API layer queries services by real bookable
+ * availability (and each service gets an `available` flag); otherwise it runs the
+ * plain offset query. The service does not know or care which endpoint is used —
+ * that decision lives in {@link queryServices}.
  */
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
-import type { Service } from '@wix/auto_sdk_bookings_services';
-import type { QueryServicesRequest, PagingMetadata } from '../../api/query-services/index.js';
+import type { Sorting } from '@wix/auto_sdk_bookings_services';
+import type { QueryServicesRequest, PagingMetadata, ServiceWithAvailabilityItem, AvailabilityFilter } from '../../api/query-services/index.js';
 import { type Category } from '../../api/query-categories/index.js';
 import type { FilterOption, FilterValue as Filter } from '@wix/headless-components/react';
 /**
- * Query options without paging metadata (user-controlled request params)
- * Effect subscribes to changes in this signal to trigger re-fetches
+ * Query options without paging metadata (user-controlled request params).
+ * Includes `filter` (category/location) and `availabilityFilter`; the effect
+ * subscribes to changes in this signal to trigger re-fetches.
  */
 export type QueryOptions = Omit<QueryServicesRequest, 'pagingMetadata'>;
 /**
  * Configuration for the ServiceList service
  */
 export interface ServiceListServiceConfig {
-    services?: Service[];
+    services?: ServiceWithAvailabilityItem[];
     categories?: Category[];
     options?: QueryServicesRequest;
 }
@@ -35,10 +42,10 @@ export interface ServiceListActions {
  */
 export interface ServiceListServiceAPI {
     /** Reactive signal containing the list of services */
-    servicesSignal: Signal<Service[]>;
-    /** Reactive signal containing current query options (appId, filter, sort) - changes trigger re-fetch */
+    servicesSignal: Signal<ServiceWithAvailabilityItem[]>;
+    /** Reactive signal containing current query options (appId, filter, availabilityFilter, sort) - changes trigger re-fetch */
     queryOptionsSignal: Signal<QueryOptions>;
-    /** Reactive signal containing pagination metadata (limit, offset, count, hasNext) - updated after fetches */
+    /** Reactive signal containing pagination metadata (limit, offset/cursor, count, hasNext) - updated after fetches */
     pagingMetadataSignal: Signal<PagingMetadata>;
     /** Reactive signal indicating if services are currently being loaded */
     isLoadingSignal: Signal<boolean>;
@@ -50,6 +57,8 @@ export interface ServiceListServiceAPI {
     filterOptionsSignal: ReadOnlySignal<FilterOption[]>;
     /** Computed signal indicating if any filters are active (from queryOptionsSignal.filter) */
     isFilteredSignal: ReadOnlySignal<boolean>;
+    /** Computed signal indicating whether an availability filter is currently applied */
+    hasAvailabilityFilterSignal: ReadOnlySignal<boolean>;
     /** Computed signal containing effective filter (queryOptions.filter + location from BookingService) */
     effectiveFilterSignal: ReadOnlySignal<Filter | undefined>;
     /** Actions object containing query actions */
@@ -91,7 +100,6 @@ export declare const ServiceListServiceDefinition: string & {
  *   const services = serviceListService.servicesSignal.get();
  *   const isLoading = serviceListService.isLoadingSignal.get();
  *   const error = serviceListService.errorSignal.get();
- *   const pagingMetadata = serviceListService.pagingMetadataSignal.get();
  *   const hasMore = serviceListService.hasMoreServicesSignal.get();
  *
  *   if (isLoading) return <div>Loading services...</div>;
@@ -110,9 +118,6 @@ export declare const ServiceListServiceDefinition: string & {
  *           Load More
  *         </button>
  *       )}
- *       {pagingMetadata.hasNext && (
- *         <span>More services available</span>
- *       )}
  *     </div>
  *   );
  * }
@@ -135,36 +140,40 @@ export type ErrorServiceListServiceConfigResult = {
     error: Error;
 };
 /**
- * Load service list configuration for Server-Side Rendering (SSR).
- * This function is designed to be called during the build or server-side rendering phase
- * to pre-fetch services data before the React components are hydrated on the client.
- * The returned config includes paging metadata with hasNext flag indicating if more services are available.
+ * Options for {@link loadServiceListServiceInitialData}.
+ * Pass an `availabilityFilter` to load availability-aware services.
+ */
+export interface LoadServiceListServiceOptions {
+    appId?: string;
+    filter?: Filter;
+    pagingMetadata?: PagingMetadata;
+    sort?: Sorting[];
+    availabilityFilter?: AvailabilityFilter;
+}
+/**
+ * Loads service list configuration for SSR, pre-fetching services and categories.
+ * Pass an `availabilityFilter` to query availability-aware services.
  *
- * @param options - Query options following QueryServicesRequest type, or a URL string (to be implemented)
- * @returns A promise that resolves to either a success result with the config or an error result
+ * @param options - Query options.
+ * @returns A success result with the config, or an error result.
  *
  * @example
  * ```ts
- * // In an Astro page or API route
- * import { loadServiceListServiceInitialData } from '@wix/bookings/services';
- *
- * // Load with query options
- * const serviceListResult = await loadServiceListServiceInitialData({
+ * // Plain offset query
+ * const result = await loadServiceListServiceInitialData({
  *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
  *   pagingMetadata: { limit: 20, offset: 0 },
  * });
  *
- * if (serviceListResult.type === 'error') {
- *   console.error('Failed to load services:', serviceListResult.error);
- *   return Astro.redirect('/500');
- * }
- *
- * const serviceListConfig = serviceListResult.config;
- *
- * // Check if more services are available
- * if (serviceListConfig.options?.pagingMetadata?.hasNext) {
- *   // More services can be loaded
- * }
+ * // Availability-aware query (cursor paging + `available` flag)
+ * const availabilityResult = await loadServiceListServiceInitialData({
+ *   availabilityFilter: {
+ *     localStartDate: '2026-06-01T09:00:00',
+ *     localEndDate: '2026-06-07T17:00:00',
+ *     timeZone: 'America/New_York',
+ *   },
+ *   pagingMetadata: { limit: 20 },
+ * });
  * ```
  */
-export declare function loadServiceListServiceInitialData(options: QueryServicesRequest): Promise<SuccessServiceListServiceConfigResult | ErrorServiceListServiceConfigResult>;
+export declare function loadServiceListServiceInitialData(options: LoadServiceListServiceOptions): Promise<SuccessServiceListServiceConfigResult | ErrorServiceListServiceConfigResult>;

package/dist/services/service-list/service-list.js

@@ -1,17 +1,19 @@
 /**
  * ServiceList Service - Reactive service list data management
- * Handles querying and pagination of services list (NO selection management)
+ * Handles querying and pagination of services list (NO selection management).
+ *
+ * Availability is just part of the query: when the query options carry an
+ * `availabilityFilter`, the API layer queries services by real bookable
+ * availability (and each service gets an `available` flag); otherwise it runs the
+ * plain offset query. The service does not know or care which endpoint is used —
+ * that decision lives in {@link queryServices}.
  */
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { queryServices } from '../../api/query-services/index.js';
+import { queryServices, hasActiveAvailabilityFilter, } from '../../api/query-services/index.js';
 import { queryCategories, } from '../../api/query-categories/index.js';
 import { BookingServiceDefinition } from '../booking/booking.js';
-import { BOOKING_APP_ID } from '../constants.js';
-/**
- * Default query limit
- */
-const DEFAULT_QUERY_LIMIT = 100;
+import { BOOKING_APP_ID, DEFAULT_QUERY_LIMIT } from '../constants.js';
 /**
  * Service definition for the ServiceList service
  */
@@ -42,7 +44,6 @@ export const ServiceListServiceDefinition = defineService('service-list');
  *   const services = serviceListService.servicesSignal.get();
  *   const isLoading = serviceListService.isLoadingSignal.get();
  *   const error = serviceListService.errorSignal.get();
- *   const pagingMetadata = serviceListService.pagingMetadataSignal.get();
  *   const hasMore = serviceListService.hasMoreServicesSignal.get();
  *
  *   if (isLoading) return <div>Loading services...</div>;
@@ -61,9 +62,6 @@ export const ServiceListServiceDefinition = defineService('service-list');
  *           Load More
  *         </button>
  *       )}
- *       {pagingMetadata.hasNext && (
- *         <span>More services available</span>
- *       )}
  *     </div>
  *   );
  * }
@@ -81,17 +79,19 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
     // Initialize services signal - use empty array if not provided
     const initialServices = config.services || [];
     const servicesSignal = signalsService.signal(initialServices);
-    // Initialize query options based on mode:
-    // - If services provided: reset to defaults (appId only) - showcase mode
-    // - If no services: use full queryOptions from config - query mode
-    const initialQueryOptions = hasInitialServices
-        ? { appId } // Reset to defaults when services are provided
-        : {
-            appId,
-            filter: config.options?.filter,
-            sort: config.options?.sort,
-        };
-    // Initialize paging metadata separately (response data - doesn't trigger effect)
+    // Build query options from config. The filter/availabilityFilter/sort must
+    // be preserved even when services are prefetched (e.g. SSR), so loadMore
+    // keeps querying the same way and stays in availability mode. A pure
+    // showcase config (services without options) naturally yields just
+    // { appId } since these fields are absent.
+    const initialQueryOptions = {
+        appId,
+        filter: config.options?.filter,
+        availabilityFilter: config.options?.availabilityFilter,
+        sort: config.options?.sort,
+    };
+    // Initialize paging metadata separately (response data - doesn't trigger effect).
+    // Carries either offset (plain mode) or cursor (availability mode).
     const initialPagingMetadata = config.options
         ?.pagingMetadata || {
         limit: DEFAULT_QUERY_LIMIT,
@@ -155,6 +155,10 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             return true;
         });
     });
+    // Computed signal indicating whether an availability filter is currently
+    // applied. Reuses the same predicate as the API dispatch so the two can't
+    // drift. Exposed for the availability filter UI (follow-up PR).
+    const hasAvailabilityFilterSignal = signalsService.computed(() => hasActiveAvailabilityFilter(queryOptionsSignal.get().availabilityFilter));
     // Computed signal for effective filter - combines queryOptions.filter with location from BookingService
     const effectiveFilterSignal = signalsService.computed(() => {
         const filter = queryOptionsSignal.get().filter;
@@ -171,23 +175,21 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
                 : {}),
         };
     });
-    // Initial fetch - runs once on client when no prefetched data
-    // Fetches both services AND categories in parallel
+    // Initial fetch - runs once on client when no prefetched data.
+    // Fetches both services AND categories in parallel.
     if (typeof window !== 'undefined' && !hasInitialServices) {
-        const initialQueryOptions = queryOptionsSignal.peek();
-        const currentPaging = pagingMetadataSignal.peek();
-        // Use effectiveFilterSignal.peek() to get the computed filter value
-        const effectiveFilter = effectiveFilterSignal.peek();
+        const options = queryOptionsSignal.peek();
         isLoadingSignal.set(true);
         Promise.allSettled([
             queryServices({
-                appId: initialQueryOptions.appId,
-                filter: effectiveFilter,
+                appId: options.appId,
+                filter: effectiveFilterSignal.peek(),
+                availabilityFilter: options.availabilityFilter,
                 pagingMetadata: {
-                    limit: currentPaging.limit,
+                    limit: pagingMetadataSignal.peek().limit,
                     offset: 0,
                 },
-                sort: initialQueryOptions.sort,
+                sort: options.sort,
             }),
             !hasInitialCategories ? queryCategories() : Promise.resolve(null),
         ])
@@ -211,37 +213,34 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             isLoadingSignal.set(false);
         });
     }
-    // Reactive effect - only handles query/filter changes (not initial fetch)
-    // IMPORTANT: Subscribes to effectiveFilterSignal which includes queryOptions.filter + location
+    // Re-fetch when query options or the effective filter (filter + location) change.
     if (typeof window !== 'undefined') {
         let isFirstEffectRun = true;
         signalsService.effect(async () => {
-            // CRITICAL: Read queryOptionsSignal and effectiveFilterSignal to establish dependencies
-            // effectiveFilterSignal already subscribes to bookingService.location internally
-            const queryOptions = queryOptionsSignal.get();
+            // Read both signals to establish dependencies.
+            const options = queryOptionsSignal.get();
             const effectiveFilter = effectiveFilterSignal.get();
-            // Skip first run - initial fetch is handled separately above
+            // Skip first run - initial fetch is handled separately above.
             if (isFirstEffectRun) {
                 isFirstEffectRun = false;
                 return;
             }
-            // Read paging metadata outside of dependency tracking for the fetch
-            const currentPaging = pagingMetadataSignal.peek();
             try {
                 isLoadingSignal.set(true);
                 servicesSignal.set([]);
                 errorSignal.set(null);
+                // Reset to the first page when query options change.
                 const result = await queryServices({
-                    appId: queryOptions.appId,
+                    appId: options.appId,
                     filter: effectiveFilter,
+                    availabilityFilter: options.availabilityFilter,
                     pagingMetadata: {
-                        limit: currentPaging.limit,
-                        offset: 0, // Reset to first page when query options change
+                        limit: pagingMetadataSignal.peek().limit,
+                        offset: 0,
                     },
-                    sort: queryOptions.sort,
+                    sort: options.sort,
                 });
                 servicesSignal.set(result.services);
-                // Update ONLY pagingMetadataSignal (not queryOptionsSignal) to avoid re-triggering effect
                 pagingMetadataSignal.set(result.pagingMetadata);
             }
             catch (error) {
@@ -252,29 +251,25 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             }
         });
     }
-    const loadMoreCursor = async (count) => {
-        const currentQueryOptions = queryOptionsSignal.get();
-        // Calculate next page offset based on current services count
-        const currentServicesCount = servicesSignal.get().length;
-        const nextOffset = currentServicesCount;
-        const nextPaging = {
-            limit: count || DEFAULT_QUERY_LIMIT,
-            offset: nextOffset,
-        };
-        // Get effective filter from computed signal (includes location from BookingService)
-        const effectiveFilter = effectiveFilterSignal.get();
+    const loadMore = async (count) => {
+        const options = queryOptionsSignal.peek();
+        const currentPaging = pagingMetadataSignal.peek();
         try {
             isLoadingSignal.set(true);
             errorSignal.set(null);
             const result = await queryServices({
-                appId: currentQueryOptions.appId,
-                filter: effectiveFilter,
-                pagingMetadata: nextPaging,
-                sort: currentQueryOptions.sort,
+                appId: options.appId,
+                filter: effectiveFilterSignal.peek(),
+                availabilityFilter: options.availabilityFilter,
+                pagingMetadata: {
+                    limit: count ?? currentPaging.limit ?? DEFAULT_QUERY_LIMIT,
+                    // Offset (plain mode) and cursor (availability mode) — queryServices uses what it needs.
+                    offset: servicesSignal.peek().length,
+                    cursor: currentPaging.cursor,
+                },
+                sort: options.sort,
             });
-            // Append new services to existing ones
             servicesSignal.set([...servicesSignal.get(), ...result.services]);
-            // Update ONLY pagingMetadataSignal (not queryOptionsSignal)
             pagingMetadataSignal.set(result.pagingMetadata);
         }
         catch (error) {
@@ -293,101 +288,81 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
         categoriesSignal,
         filterOptionsSignal,
         isFilteredSignal,
+        hasAvailabilityFilterSignal,
         effectiveFilterSignal,
         actions: {
-            loadMore: async (count) => {
-                await loadMoreCursor(count);
-            },
+            loadMore,
             setQueryOptions: (options) => {
-                // Reset services and paging when query options change
+                // Reset services and paging when query options change.
                 servicesSignal.set([]);
                 pagingMetadataSignal.set({
                     limit: pagingMetadataSignal.get().limit || DEFAULT_QUERY_LIMIT,
                     offset: 0,
                     count: 0,
                     hasNext: false,
+                    cursor: undefined,
                 });
                 queryOptionsSignal.set(options);
             },
             setFilter: (filter) => {
-                // Update query options with new filter (triggers re-fetch via effectiveFilterSignal)
-                const currentOptions = queryOptionsSignal.get();
-                queryOptionsSignal.set({
-                    ...currentOptions,
-                    filter,
-                });
+                queryOptionsSignal.set({ ...queryOptionsSignal.get(), filter });
             },
             resetFilter: () => {
-                // Clear filter from query options (triggers re-fetch)
-                const currentOptions = queryOptionsSignal.get();
                 queryOptionsSignal.set({
-                    ...currentOptions,
+                    ...queryOptionsSignal.get(),
                     filter: undefined,
                 });
             },
             resetFilterField: (fieldName) => {
-                // Reset a specific filter field
-                const currentFilter = queryOptionsSignal.get().filter || {};
-                const newFilter = { ...currentFilter };
-                // Remove the specific field
+                const newFilter = { ...(queryOptionsSignal.get().filter || {}) };
                 delete newFilter[fieldName];
-                // Update query options with new filter (triggers re-fetch)
-                const currentOptions = queryOptionsSignal.get();
                 queryOptionsSignal.set({
-                    ...currentOptions,
+                    ...queryOptionsSignal.get(),
                     filter: Object.keys(newFilter).length > 0 ? newFilter : undefined,
                 });
             },
         },
-        hasMoreServicesSignal: signalsService.computed(() => {
-            const paging = pagingMetadataSignal.get();
-            // Use hasNext flag from pagingMetadata to determine if more services are available
-            return paging.hasNext ?? false;
-        }),
+        hasMoreServicesSignal: signalsService.computed(() => pagingMetadataSignal.get().hasNext ?? false),
     };
 });
 /**
- * Load service list configuration for Server-Side Rendering (SSR).
- * This function is designed to be called during the build or server-side rendering phase
- * to pre-fetch services data before the React components are hydrated on the client.
- * The returned config includes paging metadata with hasNext flag indicating if more services are available.
+ * Loads service list configuration for SSR, pre-fetching services and categories.
+ * Pass an `availabilityFilter` to query availability-aware services.
  *
- * @param options - Query options following QueryServicesRequest type, or a URL string (to be implemented)
- * @returns A promise that resolves to either a success result with the config or an error result
+ * @param options - Query options.
+ * @returns A success result with the config, or an error result.
  *
  * @example
  * ```ts
- * // In an Astro page or API route
- * import { loadServiceListServiceInitialData } from '@wix/bookings/services';
- *
- * // Load with query options
- * const serviceListResult = await loadServiceListServiceInitialData({
+ * // Plain offset query
+ * const result = await loadServiceListServiceInitialData({
  *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
  *   pagingMetadata: { limit: 20, offset: 0 },
  * });
  *
- * if (serviceListResult.type === 'error') {
- *   console.error('Failed to load services:', serviceListResult.error);
- *   return Astro.redirect('/500');
- * }
- *
- * const serviceListConfig = serviceListResult.config;
- *
- * // Check if more services are available
- * if (serviceListConfig.options?.pagingMetadata?.hasNext) {
- *   // More services can be loaded
- * }
+ * // Availability-aware query (cursor paging + `available` flag)
+ * const availabilityResult = await loadServiceListServiceInitialData({
+ *   availabilityFilter: {
+ *     localStartDate: '2026-06-01T09:00:00',
+ *     localEndDate: '2026-06-07T17:00:00',
+ *     timeZone: 'America/New_York',
+ *   },
+ *   pagingMetadata: { limit: 20 },
+ * });
  * ```
  */
 export async function loadServiceListServiceInitialData(options) {
     try {
-        // Fetch services and categories in parallel; categories failure is non-fatal
+        const appId = options.appId ?? BOOKING_APP_ID;
+        // Fetch services and categories in parallel; categories failure is non-fatal.
+        // queryServices picks the endpoint by the presence of availabilityFilter.
         const [servicesResult, categoriesResult] = await Promise.all([
             queryServices({
-                appId: options.appId,
+                appId,
                 filter: options.filter,
                 pagingMetadata: options.pagingMetadata,
                 sort: options.sort,
+                availabilityFilter: options.availabilityFilter,
             }),
             queryCategories().catch(() => null),
         ]);
@@ -397,7 +372,10 @@ export async function loadServiceListServiceInitialData(options) {
                 services: servicesResult.services,
                 categories: categoriesResult?.categories ?? [],
                 options: {
-                    ...options,
+                    appId,
+                    filter: options.filter,
+                    sort: options.sort,
+                    availabilityFilter: options.availabilityFilter,
                     pagingMetadata: servicesResult.pagingMetadata,
                 },
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -8,6 +8,8 @@
     "build": "npm run build:esm && npm run build:cjs",
     "build:esm": "tsc -p tsconfig.json",
     "build:cjs": "tsc -p tsconfig.cjs.json",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "test": "vitest",
     "lint:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
     "lint:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
@@ -36,6 +38,7 @@
   "dependencies": {
     "@wix/auto_sdk_bookings_availability-time-slots": "^1.0.244",
     "@wix/auto_sdk_bookings_bookings": "^1.0.192",
+    "@wix/auto_sdk_bookings_catalog-search": "^1.0.0",
     "@wix/auto_sdk_bookings_event-time-slots": "^1.0.112",
     "@wix/auto_sdk_bookings_pricing": "^1.0.87",
     "@wix/auto_sdk_bookings_services": "^1.0.226",
@@ -43,23 +46,35 @@
     "@wix/forms": "^1.0.384",
     "@wix/headless-media": "0.0.25",
     "@wix/headless-utils": "0.0.12",
+    "@wix/sdk-runtime": "^1.0.12",
+    "@wix/sdk-types": "^1.17.7",
     "@wix/services-definitions": "^1.0.1",
     "@wix/services-manager-react": "^1.0.3",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/addon-interactions": "^8.6.0",
+    "@storybook/addon-links": "^8.6.0",
+    "@storybook/blocks": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@storybook/test": "^8.6.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "@vitest/ui": "^3.1.4",
     "@wix/cjs-esm-build-verifier": "1.0.0",
     "@wix/headless-components": "0.0.0",
     "jsdom": "^26.1.0",
     "prettier": "^3.4.2",
+    "storybook": "^8.6.0",
     "typescript": "^5.8.3",
+    "vite": "^6.3.1",
     "vitest": "^3.1.4"
   },
   "peerDependencies": {
@@ -76,5 +91,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "fd8f02351f0165bcc83688ccbf4bafc628fde453ffb4fc6e0ead24dc"
+  "falconPackageHash": "982db1d1e4f6337441d55feaf920c8b04f62f86edf8adc4b7d268a60"
 }