@idkwebsites/components 0.1.16 → 0.1.18

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { DehydratedState, DefaultOptions, QueryClient } from '@tanstack/react-query';
+import { Scissors } from 'lucide-react';
 
 interface PlatformProviderProps {
     apiKey: string;
@@ -201,6 +202,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;
@@ -267,7 +403,7 @@ interface ContactFormProps {
 }
 declare function ContactForm({ fields, formType, submitLabel, className, onSuccess, onError, }: ContactFormProps): react_jsx_runtime.JSX.Element;
 
-interface BookingWidgetProps {
+interface BookingWidgetProps$1 {
     className?: string;
     showStaffSelection?: boolean;
     onSuccess?: (booking: unknown) => void;
@@ -304,7 +440,34 @@ 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$1): react_jsx_runtime.JSX.Element;
+
+interface BookingWidgetProps {
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
+    navLinks?: {
+        label: string;
+        href: string;
+    }[];
+    /** Custom icon for the mobile menu open button (default: lucide Menu) */
+    menuIcon?: ReactNode;
+    /** Custom icon for the mobile menu close button (default: lucide X) */
+    closeIcon?: ReactNode;
+    /** Override the category → icon mapping (keyword → React component) */
+    categoryIcons?: Record<string, typeof Scissors>;
+    /** Override step titles for mobile flow */
+    stepTitles?: [string, string, string, string];
+    /**
+     * Link component for mobile nav. Defaults to a plain `<a>` tag.
+     * Next.js sites should pass `Link` from `next/link` for client-side navigation.
+     */
+    linkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        onClick?: () => void;
+        children: ReactNode;
+    }>;
+}
+declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;
@@ -352,4 +515,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, BookingWidgetPanel, type BookingWidgetProps, 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

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { DehydratedState, DefaultOptions, QueryClient } from '@tanstack/react-query';
+import { Scissors } from 'lucide-react';
 
 interface PlatformProviderProps {
     apiKey: string;
@@ -201,6 +202,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;
@@ -267,7 +403,7 @@ interface ContactFormProps {
 }
 declare function ContactForm({ fields, formType, submitLabel, className, onSuccess, onError, }: ContactFormProps): react_jsx_runtime.JSX.Element;
 
-interface BookingWidgetProps {
+interface BookingWidgetProps$1 {
     className?: string;
     showStaffSelection?: boolean;
     onSuccess?: (booking: unknown) => void;
@@ -304,7 +440,34 @@ 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$1): react_jsx_runtime.JSX.Element;
+
+interface BookingWidgetProps {
+    /** Navigation links shown in the mobile menu overlay. Omit to hide hamburger. */
+    navLinks?: {
+        label: string;
+        href: string;
+    }[];
+    /** Custom icon for the mobile menu open button (default: lucide Menu) */
+    menuIcon?: ReactNode;
+    /** Custom icon for the mobile menu close button (default: lucide X) */
+    closeIcon?: ReactNode;
+    /** Override the category → icon mapping (keyword → React component) */
+    categoryIcons?: Record<string, typeof Scissors>;
+    /** Override step titles for mobile flow */
+    stepTitles?: [string, string, string, string];
+    /**
+     * Link component for mobile nav. Defaults to a plain `<a>` tag.
+     * Next.js sites should pass `Link` from `next/link` for client-side navigation.
+     */
+    linkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        onClick?: () => void;
+        children: ReactNode;
+    }>;
+}
+declare function BookingWidgetPanel({ navLinks, menuIcon, closeIcon, categoryIcons, stepTitles, linkComponent: LinkComp, }?: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface AvailabilityPickerProps {
     serviceId: string;
@@ -352,4 +515,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, BookingWidgetPanel, type BookingWidgetProps, 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 };