@idkwebsites/components 0.1.15 → 0.1.17

package/dist/index.d.cts

@@ -201,6 +201,141 @@ declare function useCancelBooking(): _tanstack_react_query.UseMutationResult<{
 }, Error, BookingCancelInput, unknown>;
 declare function useBookingLookup(uid?: string, enabled?: boolean): _tanstack_react_query.UseQueryResult<BookingLookup, Error>;
 
+type Step = "service" | "staff" | "time" | "details" | "done";
+interface UseBookingWidgetOptions {
+    /** Pre-fetched services — skips the API call when provided. */
+    services?: Service[];
+    /** Query params forwarded to `useServices` when services are not pre-fetched. */
+    servicesQuery?: ServicesQueryParams;
+    /** Query params forwarded to `useTeam`. */
+    teamQuery?: TeamQueryParams;
+    /** Client-side filter applied to the services list. */
+    serviceFilter?: (service: Service) => boolean;
+    /** Client-side filter applied to the staff list. */
+    teamFilter?: (member: StaffMember) => boolean;
+    /** Enable the staff-selection step. Default `true`. */
+    showStaffSelection?: boolean;
+    /** Automatically advance when user selects a card. Default `false`. */
+    autoAdvanceOnSelect?: boolean;
+    /** Scroll the widget container into view on step change. Default `true`. */
+    scrollToStep?: boolean;
+    /** Pixel offset for scroll-into-view. Default `96`. */
+    scrollOffset?: number;
+    /** Ref to the widget container element. Used for scroll-to-top. */
+    widgetRef?: React.RefObject<HTMLElement | null>;
+    /** Called after a booking is created successfully. */
+    onSuccess?: (booking: unknown) => void;
+    /** Number of days to fetch at a time in list date picker. Default `7`. */
+    availabilityDays?: number;
+    /** Enable prev/next date paging. Default `true`. */
+    enableDatePaging?: boolean;
+    /** Date picker mode: `"list"` or `"calendar"`. Default `"list"`. */
+    datePickerMode?: "list" | "calendar";
+    /** Calendar variant. Default `"default"`. */
+    calendarVariant?: "default" | "compact";
+    /** Max months in advance. Default `3`. */
+    maxAdvanceMonths?: number;
+    /** Weekday numbers (0-6) to disable. Default `[]`. */
+    disabledWeekdays?: number[];
+    /** Show "Fully booked" labels on calendar days. Default `true`. */
+    showFullyBookedLabel?: boolean;
+    /** Enable search input for service filtering. Default `true`. */
+    enableServiceSearch?: boolean;
+    /** Enable category filter dropdown. Default `false`. */
+    enableCategoryFilter?: boolean;
+    /** Max items per page for services before "show more". Default `10`. */
+    servicePageSize?: number;
+    /** Max items per page for staff before "show more". Default `8`. */
+    staffPageSize?: number;
+    /** Show "Any Available" option for staff. Default `true`. */
+    showAnyStaffOption?: boolean;
+}
+interface UseBookingWidgetReturn {
+    step: Step;
+    /** 1-based step number for progress display. */
+    stepNumber: number;
+    totalSteps: number;
+    selectedService: Service | null;
+    selectedStaff: StaffMember | null;
+    selectedDate: string | null;
+    selectedTime: string | null;
+    selectedEndTime: string | null;
+    details: {
+        name: string;
+        email: string;
+        phone: string;
+        notes: string;
+    };
+    servicesList: Service[];
+    filteredServices: Service[];
+    pagedServices: Service[];
+    hasMoreServices: boolean;
+    categories: string[];
+    staffOptions: StaffMember[];
+    pagedStaff: StaffMember[];
+    hasMoreStaff: boolean;
+    availabilityDates: AvailabilityDate[];
+    availabilityByDate: Map<string, AvailabilityDate>;
+    timeZone: string;
+    timeZoneLabel: string;
+    calendarMonth: Date;
+    calendarDays: Array<{
+        date: string;
+        isCurrentMonth: boolean;
+    }>;
+    hasBlockedInCalendarView: boolean;
+    maxAdvanceDate: Date | null;
+    maxAdvanceMonthStart: Date | null;
+    monthOptions: Array<{
+        value: string;
+        label: string;
+        date: Date;
+    }>;
+    isServicesLoading: boolean;
+    isAvailabilityLoading: boolean;
+    isSubmitting: boolean;
+    bookingError: string | null;
+    requiresStaff: boolean;
+    canSkipStaff: boolean;
+    serviceSearch: string;
+    categoryFilter: string;
+    servicePage: number;
+    staffPage: number;
+    availabilityStartDate: string;
+    formatDateLabel: (date: string) => string;
+    formatDateHeading: (date: string) => string;
+    formatTimeLabel: (iso: string) => string;
+    formatDuration: (minutes: number) => string;
+    setServiceSearch: (value: string) => void;
+    setCategoryFilter: (value: string) => void;
+    loadMoreServices: () => void;
+    loadMoreStaff: () => void;
+    selectService: (service: Service) => void;
+    selectStaff: (staff: StaffMember | null) => void;
+    selectDate: (date: string) => void;
+    selectTime: (time: string, endTime: string) => void;
+    setDetails: React.Dispatch<React.SetStateAction<{
+        name: string;
+        email: string;
+        phone: string;
+        notes: string;
+    }>>;
+    goToServiceStep: () => void;
+    continueFromService: () => void;
+    continueFromStaff: () => void;
+    continueFromTime: () => void;
+    submitBooking: (event?: React.FormEvent) => Promise<void>;
+    goBack: () => void;
+    reset: () => void;
+    scrollToTop: () => void;
+    handlePrevDates: () => void;
+    handleNextDates: () => void;
+    handlePrevMonth: () => void;
+    handleNextMonth: () => void;
+    handleMonthSelect: (value: string) => void;
+}
+declare function useBookingWidget(options?: UseBookingWidgetOptions): UseBookingWidgetReturn;
+
 interface ServicesListProps {
     layout?: 'grid' | 'list';
     columns?: number;
@@ -304,7 +439,7 @@ interface BookingWidgetProps {
     disabledWeekdays?: number[];
     showFullyBookedLabel?: boolean;
 }
-declare function BookingWidget({ className, showStaffSelection, onSuccess, services, servicesQuery, teamQuery, serviceFilter, teamFilter, title, subtitle, autoAdvanceOnSelect, scrollToStep, scrollOffset, enableServiceSearch, serviceSearchPlaceholder, enableCategoryFilter, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, servicePageSize, showServicePagination, staffLayout, staffColumns, showAnyStaffOption, staffPageSize, showStaffPagination, timeLayout, availabilityDays: availabilityDaysProp, enableDatePaging, datePickerMode, calendarVariant, maxAdvanceMonths, disabledWeekdays, showFullyBookedLabel, }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidget({ className, title, subtitle, serviceSearchPlaceholder, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, showServicePagination, staffLayout, staffColumns, showStaffPagination, timeLayout, showFullyBookedLabel, calendarVariant, enableServiceSearch, enableCategoryFilter, enableDatePaging, disabledWeekdays, ...hookProps }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;
@@ -352,4 +487,4 @@ interface TimePickerProps {
 }
 declare function TimePicker({ slots, selectedTime, onSelect, className, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
-export { AvailabilityPicker, type AvailabilityResult, type BookingCancelInput, type BookingCreateInput, type BookingLookup, BookingWidget, ContactForm, type ContactSubmissionInput, DatePicker, PlatformProvider, type Service, ServiceCard, ServicePicker, ServicesList, type ServicesQueryParams, type StaffMember, StaffPicker, TeamGrid, TeamMember, type TeamQueryParams, type TenantInfo, TimePicker, useAvailability, useBookingLookup, useCancelBooking, useCreateBooking, useServices, useTeam, useTenant };
+export { AvailabilityPicker, type AvailabilityResult, type BookingCancelInput, type BookingCreateInput, type BookingLookup, BookingWidget, ContactForm, type ContactSubmissionInput, DatePicker, PlatformProvider, type Service, ServiceCard, ServicePicker, ServicesList, type ServicesQueryParams, type StaffMember, StaffPicker, TeamGrid, TeamMember, type TeamQueryParams, type TenantInfo, TimePicker, type UseBookingWidgetOptions, type UseBookingWidgetReturn, useAvailability, useBookingLookup, useBookingWidget, useCancelBooking, useCreateBooking, useServices, useTeam, useTenant };

package/dist/index.d.ts

@@ -201,6 +201,141 @@ declare function useCancelBooking(): _tanstack_react_query.UseMutationResult<{
 }, Error, BookingCancelInput, unknown>;
 declare function useBookingLookup(uid?: string, enabled?: boolean): _tanstack_react_query.UseQueryResult<BookingLookup, Error>;
 
+type Step = "service" | "staff" | "time" | "details" | "done";
+interface UseBookingWidgetOptions {
+    /** Pre-fetched services — skips the API call when provided. */
+    services?: Service[];
+    /** Query params forwarded to `useServices` when services are not pre-fetched. */
+    servicesQuery?: ServicesQueryParams;
+    /** Query params forwarded to `useTeam`. */
+    teamQuery?: TeamQueryParams;
+    /** Client-side filter applied to the services list. */
+    serviceFilter?: (service: Service) => boolean;
+    /** Client-side filter applied to the staff list. */
+    teamFilter?: (member: StaffMember) => boolean;
+    /** Enable the staff-selection step. Default `true`. */
+    showStaffSelection?: boolean;
+    /** Automatically advance when user selects a card. Default `false`. */
+    autoAdvanceOnSelect?: boolean;
+    /** Scroll the widget container into view on step change. Default `true`. */
+    scrollToStep?: boolean;
+    /** Pixel offset for scroll-into-view. Default `96`. */
+    scrollOffset?: number;
+    /** Ref to the widget container element. Used for scroll-to-top. */
+    widgetRef?: React.RefObject<HTMLElement | null>;
+    /** Called after a booking is created successfully. */
+    onSuccess?: (booking: unknown) => void;
+    /** Number of days to fetch at a time in list date picker. Default `7`. */
+    availabilityDays?: number;
+    /** Enable prev/next date paging. Default `true`. */
+    enableDatePaging?: boolean;
+    /** Date picker mode: `"list"` or `"calendar"`. Default `"list"`. */
+    datePickerMode?: "list" | "calendar";
+    /** Calendar variant. Default `"default"`. */
+    calendarVariant?: "default" | "compact";
+    /** Max months in advance. Default `3`. */
+    maxAdvanceMonths?: number;
+    /** Weekday numbers (0-6) to disable. Default `[]`. */
+    disabledWeekdays?: number[];
+    /** Show "Fully booked" labels on calendar days. Default `true`. */
+    showFullyBookedLabel?: boolean;
+    /** Enable search input for service filtering. Default `true`. */
+    enableServiceSearch?: boolean;
+    /** Enable category filter dropdown. Default `false`. */
+    enableCategoryFilter?: boolean;
+    /** Max items per page for services before "show more". Default `10`. */
+    servicePageSize?: number;
+    /** Max items per page for staff before "show more". Default `8`. */
+    staffPageSize?: number;
+    /** Show "Any Available" option for staff. Default `true`. */
+    showAnyStaffOption?: boolean;
+}
+interface UseBookingWidgetReturn {
+    step: Step;
+    /** 1-based step number for progress display. */
+    stepNumber: number;
+    totalSteps: number;
+    selectedService: Service | null;
+    selectedStaff: StaffMember | null;
+    selectedDate: string | null;
+    selectedTime: string | null;
+    selectedEndTime: string | null;
+    details: {
+        name: string;
+        email: string;
+        phone: string;
+        notes: string;
+    };
+    servicesList: Service[];
+    filteredServices: Service[];
+    pagedServices: Service[];
+    hasMoreServices: boolean;
+    categories: string[];
+    staffOptions: StaffMember[];
+    pagedStaff: StaffMember[];
+    hasMoreStaff: boolean;
+    availabilityDates: AvailabilityDate[];
+    availabilityByDate: Map<string, AvailabilityDate>;
+    timeZone: string;
+    timeZoneLabel: string;
+    calendarMonth: Date;
+    calendarDays: Array<{
+        date: string;
+        isCurrentMonth: boolean;
+    }>;
+    hasBlockedInCalendarView: boolean;
+    maxAdvanceDate: Date | null;
+    maxAdvanceMonthStart: Date | null;
+    monthOptions: Array<{
+        value: string;
+        label: string;
+        date: Date;
+    }>;
+    isServicesLoading: boolean;
+    isAvailabilityLoading: boolean;
+    isSubmitting: boolean;
+    bookingError: string | null;
+    requiresStaff: boolean;
+    canSkipStaff: boolean;
+    serviceSearch: string;
+    categoryFilter: string;
+    servicePage: number;
+    staffPage: number;
+    availabilityStartDate: string;
+    formatDateLabel: (date: string) => string;
+    formatDateHeading: (date: string) => string;
+    formatTimeLabel: (iso: string) => string;
+    formatDuration: (minutes: number) => string;
+    setServiceSearch: (value: string) => void;
+    setCategoryFilter: (value: string) => void;
+    loadMoreServices: () => void;
+    loadMoreStaff: () => void;
+    selectService: (service: Service) => void;
+    selectStaff: (staff: StaffMember | null) => void;
+    selectDate: (date: string) => void;
+    selectTime: (time: string, endTime: string) => void;
+    setDetails: React.Dispatch<React.SetStateAction<{
+        name: string;
+        email: string;
+        phone: string;
+        notes: string;
+    }>>;
+    goToServiceStep: () => void;
+    continueFromService: () => void;
+    continueFromStaff: () => void;
+    continueFromTime: () => void;
+    submitBooking: (event?: React.FormEvent) => Promise<void>;
+    goBack: () => void;
+    reset: () => void;
+    scrollToTop: () => void;
+    handlePrevDates: () => void;
+    handleNextDates: () => void;
+    handlePrevMonth: () => void;
+    handleNextMonth: () => void;
+    handleMonthSelect: (value: string) => void;
+}
+declare function useBookingWidget(options?: UseBookingWidgetOptions): UseBookingWidgetReturn;
+
 interface ServicesListProps {
     layout?: 'grid' | 'list';
     columns?: number;
@@ -304,7 +439,7 @@ interface BookingWidgetProps {
     disabledWeekdays?: number[];
     showFullyBookedLabel?: boolean;
 }
-declare function BookingWidget({ className, showStaffSelection, onSuccess, services, servicesQuery, teamQuery, serviceFilter, teamFilter, title, subtitle, autoAdvanceOnSelect, scrollToStep, scrollOffset, enableServiceSearch, serviceSearchPlaceholder, enableCategoryFilter, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, servicePageSize, showServicePagination, staffLayout, staffColumns, showAnyStaffOption, staffPageSize, showStaffPagination, timeLayout, availabilityDays: availabilityDaysProp, enableDatePaging, datePickerMode, calendarVariant, maxAdvanceMonths, disabledWeekdays, showFullyBookedLabel, }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidget({ className, title, subtitle, serviceSearchPlaceholder, categoryLabel, serviceListMaxHeight, serviceLayout, serviceColumns, showServicePagination, staffLayout, staffColumns, showStaffPagination, timeLayout, showFullyBookedLabel, calendarVariant, enableServiceSearch, enableCategoryFilter, enableDatePaging, disabledWeekdays, ...hookProps }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;
@@ -352,4 +487,4 @@ interface TimePickerProps {
 }
 declare function TimePicker({ slots, selectedTime, onSelect, className, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
-export { AvailabilityPicker, type AvailabilityResult, type BookingCancelInput, type BookingCreateInput, type BookingLookup, BookingWidget, ContactForm, type ContactSubmissionInput, DatePicker, PlatformProvider, type Service, ServiceCard, ServicePicker, ServicesList, type ServicesQueryParams, type StaffMember, StaffPicker, TeamGrid, TeamMember, type TeamQueryParams, type TenantInfo, TimePicker, useAvailability, useBookingLookup, useCancelBooking, useCreateBooking, useServices, useTeam, useTenant };
+export { AvailabilityPicker, type AvailabilityResult, type BookingCancelInput, type BookingCreateInput, type BookingLookup, BookingWidget, ContactForm, type ContactSubmissionInput, DatePicker, PlatformProvider, type Service, ServiceCard, ServicePicker, ServicesList, type ServicesQueryParams, type StaffMember, StaffPicker, TeamGrid, TeamMember, type TeamQueryParams, type TenantInfo, TimePicker, type UseBookingWidgetOptions, type UseBookingWidgetReturn, useAvailability, useBookingLookup, useBookingWidget, useCancelBooking, useCreateBooking, useServices, useTeam, useTenant };