@bailierich/booking-components 2.0.0

package/dist/index-DAai7Glf.d.mts

@@ -0,0 +1,474 @@
+interface Service {
+    id: string;
+    name: string;
+    price: number;
+    duration: number;
+    description: string;
+    category?: string;
+    imageUrl?: string;
+}
+interface ServiceCategory {
+    id: string;
+    name: string;
+    description?: string;
+    services: Service[];
+}
+interface Addon {
+    id: string;
+    name: string;
+    price: number;
+    addonPrice?: number;
+    duration: number;
+    description: string;
+    imageUrl?: string;
+}
+interface OptInModule {
+    id: string;
+    label: string;
+    required: boolean;
+    formTitle?: string;
+    formFields?: FormField[];
+    renderCustomForm?: (onClose: () => void, onSubmitData: (data: any) => void, colors: {
+        primary: string;
+        secondary: string;
+        bookingText?: string;
+    }) => React.ReactNode;
+}
+interface FormField {
+    id: string;
+    label: string;
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'checkbox';
+    placeholder?: string;
+    required?: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+interface BookingData {
+    serviceId: string;
+    date: string;
+    time: string;
+    addonIds: string[];
+    contactInfo: ContactInfo;
+    optInData?: Record<string, any>;
+    paymentIntentId?: string;
+    totalPrice: number;
+    depositAmount: number;
+}
+interface ContactInfo {
+    name: string;
+    email: string;
+    phone: string;
+    notes?: string;
+}
+interface BackgroundConfig {
+    type: 'color' | 'gradient' | 'image';
+    value: string;
+}
+interface TransitionConfig {
+    style: 'slide' | 'fade';
+    speed: 'fast' | 'normal' | 'slow';
+}
+interface ProgressBarConfig {
+    style: 'dots' | 'bar' | 'minimal';
+}
+interface StepConfig {
+    enabled?: boolean;
+    settings?: Record<string, any>;
+}
+interface ServiceSelectionSettings {
+    headerContent?: {
+        value: string;
+    };
+    subheaderContent?: {
+        value: string;
+    };
+    serviceLayout?: 'grid' | 'list';
+    columns?: 1 | 2 | 3 | 4;
+    showPricing?: boolean;
+    showDuration?: boolean;
+    showDescription?: boolean;
+    enableCategories?: boolean;
+    categoryStyle?: 'dropdown' | 'tabs' | 'pills' | 'chips' | 'accordion';
+    defaultCategoryView?: 'all' | string;
+    policyImages?: PolicyImage[];
+    policyText?: string;
+    imageSpacing?: 'none' | 'small' | 'medium' | 'large';
+    imageBorderRadius?: string;
+}
+interface PolicyImage {
+    url: string;
+    alt?: string;
+}
+interface DateSelectionSettings {
+    headerContent?: {
+        value: string;
+    };
+    calendarView?: 'month' | 'week';
+    allowedDaysAhead?: number;
+    blockedDates?: string[];
+}
+interface TimeSelectionSettings {
+    headerContent?: {
+        value: string;
+    };
+    timeFormat?: '12h' | '24h';
+    showDuration?: boolean;
+    columns?: 2 | 3 | 4;
+    slotDuration?: number;
+}
+interface AddonSelectionSettings {
+    headerContent?: {
+        value: string;
+    };
+    subheaderContent?: {
+        value: string;
+    };
+    showPricing?: boolean;
+    showDuration?: boolean;
+}
+interface ContactFormSettings {
+    headerContent?: {
+        value: string;
+    };
+    requiredFields?: ('name' | 'email' | 'phone' | 'notes')[];
+    customFields?: FormField[];
+}
+interface DataProviders {
+    /** Fetch available services */
+    getServices: () => Promise<Service[]>;
+    /** Fetch available dates for a service */
+    getAvailableDates: (serviceId: string) => Promise<string[]>;
+    /** Fetch available time slots for a service on a specific date */
+    getAvailableTimes: (serviceId: string, date: string) => Promise<string[]>;
+    /** Fetch available add-ons for a service */
+    getAddons: (serviceId: string) => Promise<Addon[]>;
+    /** Optional: Fetch opt-in modules (custom forms) */
+    getOptInModules?: () => Promise<OptInModule[]>;
+    /** Optional: Fetch service categories */
+    getServiceCategories?: () => Promise<ServiceCategory[]>;
+}
+interface PaymentConfig {
+    squareApplicationId?: string;
+    squareLocationId?: string;
+    stripePublishableKey?: string;
+    depositPercentage?: number;
+    currency?: string;
+}
+interface BottomSheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    isRequired?: boolean;
+    maxHeight?: string;
+}
+interface StepComponentProps {
+    config: StepConfig;
+    colors: {
+        primary: string;
+        secondary: string;
+        bookingText?: string;
+    };
+    onNext: () => void;
+    onBack: () => void;
+}
+interface ServiceSelectionStepProps extends StepComponentProps {
+    services: Service[];
+    categories?: ServiceCategory[];
+    selectedService: string | null;
+    onServiceSelect: (serviceId: string) => void;
+}
+interface DateSelectionStepProps extends StepComponentProps {
+    availableDates: string[];
+    selectedDate: string | null;
+    onDateSelect: (date: string) => void;
+}
+interface TimeSelectionStepProps extends StepComponentProps {
+    availableTimes: string[];
+    selectedTime: string | null;
+    onTimeSelect: (time: string) => void;
+    serviceDuration?: number;
+}
+interface AddonSelectionStepProps extends StepComponentProps {
+    addons: Addon[];
+    selectedAddons: string[];
+    onAddonsChange: (addonIds: string[]) => void;
+}
+interface ContactFormStepProps extends StepComponentProps {
+    contactInfo: Partial<ContactInfo>;
+    onContactInfoChange: (info: Partial<ContactInfo>) => void;
+    optInModules?: OptInModule[];
+    onOptInData?: (moduleId: string, data: any) => void;
+}
+interface ConfirmationStepProps extends StepComponentProps {
+    bookingData: Partial<BookingData>;
+    service?: Service;
+    addons?: Addon[];
+    paymentProvider: 'square' | 'stripe';
+    paymentConfig: PaymentConfig;
+    onConfirm: () => Promise<void>;
+}
+interface CyclePhase {
+    phase: 'avoid' | 'caution' | 'optimal' | 'neutral' | 'unknown';
+    color: string;
+    bgColor: string;
+    label: string;
+    icon: string;
+    description: string;
+    daysSinceStart?: number;
+    confidence?: number;
+}
+interface CyclePhaseMap {
+    [dateString: string]: CyclePhase;
+}
+interface CycleClient {
+    id: string;
+    cycle_opt_in: boolean;
+    cycle_last_period_start?: string;
+    cycle_avg_days?: number;
+    cycle_period_len?: number;
+    [key: string]: any;
+}
+/** Function that fetches cycle phase data for a date range */
+type FetchCycleDataFn = (client: CycleClient, dateRange: string[]) => Promise<CyclePhaseMap>;
+/** Callback when a cycle warning should be shown */
+type CycleWarningCallback = (phase: CyclePhase, date: string) => void;
+interface HoldTimerConfig {
+    enabled: boolean;
+    duration: number;
+    warningThreshold: number;
+    maxExtensions: number;
+    extensionDuration: number;
+    showActions: boolean;
+    showWarning: boolean;
+}
+interface HoldStatus {
+    holdId: string;
+    holdKey: string;
+    date: string;
+    time: string;
+    serviceId: string;
+    createdAt: number;
+    expiresAt: number;
+    extensions: number;
+    maxExtensions: number;
+    canExtend: boolean;
+    status: 'active' | 'warning' | 'expired';
+}
+interface HoldManagerCallbacks {
+    /** Called when hold is created successfully */
+    onHoldCreated?: (hold: HoldStatus) => void;
+    /** Called when hold is extended */
+    onHoldExtended?: (hold: HoldStatus) => void;
+    /** Called when hold is released manually */
+    onHoldReleased?: (holdId: string) => void;
+    /** Called when entering warning threshold */
+    onHoldWarning?: (hold: HoldStatus) => void;
+    /** Called when hold expires */
+    onHoldExpired?: (hold: HoldStatus) => void;
+}
+/** Function that creates a hold on the backend */
+type CreateHoldFn = (data: {
+    date: string;
+    time: string;
+    serviceId: string;
+    serviceDuration: number;
+}) => Promise<HoldStatus>;
+/** Function that extends an existing hold */
+type ExtendHoldFn = (holdId: string) => Promise<HoldStatus>;
+/** Function that releases a hold */
+type ReleaseHoldFn = (holdId: string) => Promise<void>;
+type TransitionDirection = 'forward' | 'backward';
+interface AnimationVariants {
+    enter: (direction: TransitionDirection) => Record<string, any>;
+    center: Record<string, any>;
+    exit: (direction: TransitionDirection) => Record<string, any>;
+}
+
+/**
+ * Animation duration calculator based on speed and reduced motion preference
+ */
+declare function getAnimationDuration(speed: 'fast' | 'normal' | 'slow', reducedMotion?: boolean): number;
+/**
+ * Slide animation variants for step transitions
+ */
+declare function getSlideVariants(slideDistance?: number): AnimationVariants;
+/**
+ * Fade animation variants for step transitions
+ */
+declare function getFadeVariants(): AnimationVariants;
+/**
+ * Get transition variants based on style preference
+ */
+declare function getTransitionVariants(style: 'slide' | 'fade', slideDistance?: number): AnimationVariants;
+/**
+ * Common animation configurations
+ */
+declare const animations: {
+    /**
+     * Smooth easing curve for natural motion
+     */
+    easing: readonly [0.4, 0, 0.2, 1];
+    /**
+     * Spring configuration for elastic animations
+     */
+    spring: {
+        type: "spring";
+        damping: number;
+        stiffness: number;
+    };
+    /**
+     * Stagger children animation
+     */
+    staggerChildren: {
+        staggerChildren: number;
+        delayChildren: number;
+    };
+    /**
+     * Card hover animation
+     */
+    cardHover: {
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+    /**
+     * Button hover animation
+     */
+    buttonHover: {
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+    /**
+     * Fade in animation
+     */
+    fadeIn: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+        };
+        exit: {
+            opacity: number;
+        };
+    };
+    /**
+     * Slide up animation (for bottom sheets)
+     */
+    slideUp: {
+        initial: {
+            y: string;
+        };
+        animate: {
+            y: number;
+        };
+        exit: {
+            y: string;
+        };
+    };
+    /**
+     * Scale in animation
+     */
+    scaleIn: {
+        initial: {
+            opacity: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            scale: number;
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+        };
+    };
+    /**
+     * Slide in from left
+     */
+    slideInLeft: {
+        initial: {
+            opacity: number;
+            x: number;
+        };
+        animate: {
+            opacity: number;
+            x: number;
+        };
+    };
+    /**
+     * Slide in from right
+     */
+    slideInRight: {
+        initial: {
+            opacity: number;
+            x: number;
+        };
+        animate: {
+            opacity: number;
+            x: number;
+        };
+    };
+    /**
+     * Backdrop animation
+     */
+    backdrop: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+        };
+        exit: {
+            opacity: number;
+        };
+    };
+};
+/**
+ * Accessibility: Check for reduced motion preference
+ */
+declare function shouldReduceMotion(): boolean;
+/**
+ * Create stagger animation for list items
+ */
+declare function createStaggerAnimation(itemCount: number, baseDelay?: number, delayIncrement?: number): {
+    initial: {
+        opacity: number;
+        y: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+    };
+    transition: {
+        duration: number;
+        delay: number;
+        ease: readonly [0.4, 0, 0.2, 1];
+    };
+}[];
+/**
+ * Utility to create entrance animation with delay
+ */
+declare function createEntranceAnimation(delay?: number, duration?: number): {
+    initial: {
+        opacity: number;
+        y: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+    };
+    transition: {
+        duration: number;
+        delay: number;
+        ease: readonly [0.4, 0, 0.2, 1];
+    };
+};
+
+export { type Addon as A, type BottomSheetProps as B, type CreateHoldFn as C, type DateSelectionSettings as D, type ExtendHoldFn as E, type FetchCycleDataFn as F, type TransitionDirection as G, type HoldTimerConfig as H, type AnimationVariants as I, getAnimationDuration as J, getSlideVariants as K, getFadeVariants as L, getTransitionVariants as M, animations as N, type OptInModule as O, type PaymentConfig as P, shouldReduceMotion as Q, type ReleaseHoldFn as R, type Service as S, type TimeSelectionSettings as T, createStaggerAnimation as U, createEntranceAnimation as V, type ServiceCategory as a, type ServiceSelectionSettings as b, type AddonSelectionSettings as c, type ContactInfo as d, type ContactFormSettings as e, type CyclePhase as f, type CycleClient as g, type CycleWarningCallback as h, type HoldStatus as i, type FormField as j, type BookingData as k, type BackgroundConfig as l, type TransitionConfig as m, type ProgressBarConfig as n, type StepConfig as o, type PolicyImage as p, type DataProviders as q, type StepComponentProps as r, type ServiceSelectionStepProps as s, type DateSelectionStepProps as t, type TimeSelectionStepProps as u, type AddonSelectionStepProps as v, type ContactFormStepProps as w, type ConfirmationStepProps as x, type CyclePhaseMap as y, type HoldManagerCallbacks as z };