@bailierich/booking-components 2.0.0

package/dist/index.d.mts

@@ -0,0 +1,1075 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { H as HoldTimerConfig, C as CreateHoldFn, E as ExtendHoldFn, R as ReleaseHoldFn, O as OptInModule, S as Service, a as ServiceCategory, b as ServiceSelectionSettings, D as DateSelectionSettings, T as TimeSelectionSettings, A as Addon, c as AddonSelectionSettings, d as ContactInfo, e as ContactFormSettings, P as PaymentConfig, f as CyclePhase, F as FetchCycleDataFn, g as CycleClient, h as CycleWarningCallback, B as BottomSheetProps, i as HoldStatus } from './index-DAai7Glf.mjs';
+export { v as AddonSelectionStepProps, I as AnimationVariants, l as BackgroundConfig, k as BookingData, x as ConfirmationStepProps, w as ContactFormStepProps, y as CyclePhaseMap, q as DataProviders, t as DateSelectionStepProps, j as FormField, z as HoldManagerCallbacks, p as PolicyImage, n as ProgressBarConfig, s as ServiceSelectionStepProps, r as StepComponentProps, o as StepConfig, u as TimeSelectionStepProps, m as TransitionConfig, G as TransitionDirection, N as animations, V as createEntranceAnimation, U as createStaggerAnimation, J as getAnimationDuration, L as getFadeVariants, K as getSlideVariants, M as getTransitionVariants, Q as shouldReduceMotion } from './index-DAai7Glf.mjs';
+import React$1 from 'react';
+
+interface LogoProps {
+    logoUrl?: string;
+    fallbackText?: string;
+    size?: 'small' | 'medium' | 'large';
+    alignment?: 'left' | 'center' | 'right';
+    colors: {
+        primary: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Logo({ logoUrl, fallbackText, size, alignment, colors, enableInlineEditing, sectionId }: LogoProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderProps {
+    name?: string;
+    title?: string;
+    bio?: string;
+    showName?: boolean;
+    showTitle?: boolean;
+    showBio?: boolean;
+    colors: {
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Header({ name, title, bio, showName, showTitle, showBio, colors, typography, enableInlineEditing, sectionId }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FeaturedLinkProps {
+    text?: string;
+    url?: string;
+    style?: 'gradient' | 'solid' | 'outline';
+    size?: 'small' | 'medium' | 'large';
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function FeaturedLink({ text, url, style, size, colors, enableInlineEditing, sectionId }: FeaturedLinkProps): react_jsx_runtime.JSX.Element;
+
+interface Link {
+    id: string;
+    label: string;
+    url: string;
+}
+interface LinkListProps {
+    links: Link[];
+    style?: 'pill' | 'square' | 'outline';
+    colors: {
+        primary: string;
+        linkBackground?: string;
+        linkText?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function LinkList({ links, style, colors, enableInlineEditing, sectionId }: LinkListProps): react_jsx_runtime.JSX.Element;
+
+interface SocialBarProps {
+    platforms: string[];
+    socialLinks?: Record<string, string>;
+    style?: 'filled' | 'outline' | 'ghost';
+    size?: 'small' | 'medium' | 'large';
+    position?: 'center' | 'left-vertical' | 'right-vertical';
+    invertIcons?: boolean;
+    colors: {
+        primary: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function SocialBar({ platforms, socialLinks, style, size, position, invertIcons, colors, enableInlineEditing, sectionId }: SocialBarProps): react_jsx_runtime.JSX.Element;
+
+interface HeroProps {
+    headline?: string;
+    subheadline?: string;
+    heroImage?: string;
+    ctaButton?: {
+        text: string;
+        url: string;
+    };
+    layout?: 'split' | 'full';
+    imagePosition?: 'left' | 'right';
+    contentDisplay?: 'side' | 'overlay';
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Hero({ headline, subheadline, heroImage, ctaButton, layout, imagePosition, contentDisplay, colors, typography, enableInlineEditing, sectionId }: HeroProps): react_jsx_runtime.JSX.Element;
+
+interface AboutProps {
+    title?: string;
+    content?: string;
+    image?: string;
+    layout?: 'centered' | 'split' | 'wide';
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function About({ title, content, image, layout, colors, typography, enableInlineEditing, sectionId }: AboutProps): react_jsx_runtime.JSX.Element;
+
+interface ServicePreview {
+    id: number;
+    name: string;
+    description: string;
+    price: number;
+    duration: number;
+}
+interface ServicesPreviewProps {
+    title?: string;
+    services?: ServicePreview[];
+    layout?: 'grid' | 'list' | 'carousel';
+    columns?: 2 | 3 | 4;
+    showPrices?: boolean;
+    showDuration?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function ServicesPreview({ title, services, layout, columns, showPrices, showDuration, colors, typography, enableInlineEditing, sectionId }: ServicesPreviewProps): react_jsx_runtime.JSX.Element;
+
+interface GalleryImage {
+    id: string | number;
+    url?: string;
+    alt?: string;
+}
+interface GalleryProps {
+    title?: string;
+    images?: GalleryImage[];
+    columns?: 2 | 3 | 4;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Gallery({ title, images, columns, colors, typography, enableInlineEditing, sectionId }: GalleryProps): react_jsx_runtime.JSX.Element;
+
+interface Testimonial {
+    id: string | number;
+    text: string;
+    author: string;
+    rating: number;
+}
+interface TestimonialsProps {
+    title?: string;
+    testimonials?: Testimonial[];
+    layout?: 'grid' | 'carousel';
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Testimonials({ title, testimonials, layout, colors, typography, enableInlineEditing, sectionId }: TestimonialsProps): react_jsx_runtime.JSX.Element;
+
+interface TeamMember {
+    id: string | number;
+    name: string;
+    role: string;
+    bio: string;
+    image?: string;
+}
+interface TeamProps {
+    title?: string;
+    members?: TeamMember[];
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Team({ title, members, colors, typography, enableInlineEditing, sectionId }: TeamProps): react_jsx_runtime.JSX.Element;
+
+interface ContactProps {
+    title?: string;
+    email?: string;
+    phone?: string;
+    address?: string;
+    showForm?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Contact({ title, email, phone, address, showForm, colors, typography, enableInlineEditing, sectionId }: ContactProps): react_jsx_runtime.JSX.Element;
+
+interface MinimalHeaderProps {
+    brandName?: string;
+    logoUrl?: string;
+    style?: 'logo' | 'text' | 'both';
+    alignment?: 'left' | 'center' | 'right';
+    sticky?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function MinimalHeader({ brandName, logoUrl, style, alignment, sticky, colors, typography, enableInlineEditing, sectionId }: MinimalHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface NavLink {
+    id: string;
+    label: string;
+    url: string;
+    linkType?: 'internal' | 'external';
+}
+interface MinimalNavigationProps {
+    links: NavLink[];
+    style?: 'horizontal' | 'vertical';
+    colors: {
+        text: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function MinimalNavigation({ links, style, colors, enableInlineEditing, sectionId }: MinimalNavigationProps): react_jsx_runtime.JSX.Element;
+
+interface MinimalFooterProps {
+    footerText?: string;
+    alignment?: 'left' | 'center' | 'right';
+    showSocial?: boolean;
+    showContact?: boolean;
+    showLinks?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function MinimalFooter({ footerText, alignment, showSocial, showContact, showLinks, colors, enableInlineEditing, sectionId }: MinimalFooterProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureContentProps {
+    headline?: string;
+    description?: string;
+    image?: string;
+    buttonText?: string;
+    buttonUrl?: string;
+    layout?: 'image-left' | 'image-right' | 'image-top';
+    showButton?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function FeatureContent({ headline, description, image, buttonText, buttonUrl, layout, showButton, colors, typography, enableInlineEditing, sectionId }: FeatureContentProps): react_jsx_runtime.JSX.Element;
+
+interface Comparison {
+    id: string | number;
+    title?: string;
+    beforeImage?: string;
+    afterImage?: string;
+}
+interface BeforeAfterProps {
+    title?: string;
+    comparisons?: Comparison[];
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function BeforeAfter({ title, comparisons, colors, typography, enableInlineEditing, sectionId }: BeforeAfterProps): react_jsx_runtime.JSX.Element;
+
+interface PricingPlan {
+    id: string | number;
+    name: string;
+    price: number;
+    features: string[];
+    featured?: boolean;
+}
+interface PricingTableProps {
+    title?: string;
+    plans?: PricingPlan[];
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function PricingTable({ title, plans, colors, typography, enableInlineEditing, sectionId }: PricingTableProps): react_jsx_runtime.JSX.Element;
+
+interface InstagramFeedProps {
+    username?: string;
+    colors: {
+        primary: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function InstagramFeed({ username, colors, enableInlineEditing, sectionId }: InstagramFeedProps): react_jsx_runtime.JSX.Element;
+
+interface CardLink {
+    id: string;
+    label: string;
+    url: string;
+}
+interface FixedInfoCardProps {
+    name?: string;
+    subheading?: string;
+    bio?: string;
+    links?: CardLink[];
+    bookingButtonText?: string;
+    bookingButtonUrl?: string;
+    showBookingButton?: boolean;
+    position?: 'bottom-left' | 'bottom-right' | 'bottom-center';
+    cardWidth?: 'small' | 'medium' | 'large';
+    cardColor?: string;
+    colors: {
+        primary: string;
+        text: string;
+        buttonText?: string;
+    };
+    typography: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function FixedInfoCard({ name, subheading, bio, links, bookingButtonText, bookingButtonUrl, showBookingButton, position, cardWidth, cardColor, colors, typography, enableInlineEditing, sectionId }: FixedInfoCardProps): react_jsx_runtime.JSX.Element;
+
+interface BookingConfig {
+    theme?: {
+        colors?: {
+            primary: string;
+            secondary: string;
+            text: string;
+            bookingText?: string;
+        };
+        typography?: {
+            headingFont?: string;
+            bodyFont?: string;
+            bodySize?: string;
+        };
+    };
+    bookingSettings?: any;
+}
+interface BookingSectionProps {
+    config: BookingConfig;
+    colors: {
+        primary: string;
+        secondary: string;
+        text: string;
+        bookingText?: string;
+    };
+    BookingFlowComponent?: React.ComponentType<any>;
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function BookingSection({ config, colors, BookingFlowComponent, enableInlineEditing, sectionId }: BookingSectionProps): react_jsx_runtime.JSX.Element;
+
+interface VideoSectionProps {
+    videoUrl: string;
+    aspectRatio?: '16:9' | '4:3' | '1:1' | '9:16';
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    allowFullScreen?: boolean;
+    coverImage?: string;
+    maxWidth?: 'full' | 'large' | 'medium' | 'small';
+    alignment?: 'left' | 'center' | 'right';
+    borderRadius?: number;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography?: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function VideoSection({ videoUrl, aspectRatio, autoplay, loop, muted, controls, allowFullScreen, coverImage, maxWidth, alignment, borderRadius, colors, enableInlineEditing, sectionId }: VideoSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ScrollingTextDividerProps {
+    text: string;
+    scrollDirection?: 'left' | 'right';
+    scrollSpeed?: 'slow' | 'medium' | 'fast' | number;
+    orientation?: 'horizontal' | 'diagonal-left' | 'diagonal-right';
+    dividerIcon?: 'bullet' | 'star' | 'diamond' | 'custom' | 'none';
+    customIcon?: string;
+    textSize?: 'small' | 'medium' | 'large' | 'xl';
+    textColor?: string;
+    fontWeight?: 'light' | 'normal' | 'bold';
+    backgroundColor?: string;
+    backgroundGradient?: string;
+    pauseOnHover?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography?: {
+        headingFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function ScrollingTextDivider({ text, scrollDirection, scrollSpeed, orientation, dividerIcon, customIcon, textSize, textColor, fontWeight, backgroundColor, backgroundGradient, pauseOnHover, colors, typography, enableInlineEditing, sectionId }: ScrollingTextDividerProps): react_jsx_runtime.JSX.Element;
+
+interface LocationMapProps {
+    address: string;
+    displayType?: 'map-only' | 'address-only' | 'both';
+    mapHeight?: 'small' | 'medium' | 'large';
+    mapStyle?: 'roadmap' | 'satellite';
+    zoom?: number;
+    showMarker?: boolean;
+    borderRadius?: number;
+    directionsButtonText?: string;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography?: {
+        headingFont?: string;
+        bodyFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function LocationMap({ address, displayType, mapHeight, mapStyle, zoom, showMarker, borderRadius, directionsButtonText, colors, typography, enableInlineEditing, sectionId }: LocationMapProps): react_jsx_runtime.JSX.Element;
+
+interface ImageSectionProps {
+    imageUrl: string;
+    altText?: string;
+    caption?: string;
+    maxWidth?: 'full' | 'large' | 'medium' | 'small';
+    alignment?: 'left' | 'center' | 'right';
+    aspectRatio?: 'auto' | '16:9' | '4:3' | '1:1' | '3:2';
+    borderRadius?: number;
+    linkUrl?: string;
+    openInNewTab?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography?: {
+        bodyFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function ImageSection({ imageUrl, altText, caption, maxWidth, alignment, aspectRatio, borderRadius, linkUrl, openInNewTab, colors, typography, enableInlineEditing, sectionId }: ImageSectionProps): react_jsx_runtime.JSX.Element;
+
+interface FAQItem {
+    question: string;
+    answer: string;
+}
+interface FAQSectionProps {
+    title?: string;
+    faqs: FAQItem[];
+    layout?: 'accordion' | 'stacked';
+    maxWidth?: 'full' | 'large' | 'medium' | 'small';
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography?: {
+        headingFont?: string;
+        bodyFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function FAQSection({ title, faqs, layout, maxWidth, colors, typography, enableInlineEditing, sectionId }: FAQSectionProps): react_jsx_runtime.JSX.Element;
+
+interface NavbarLink {
+    id: string;
+    label: string;
+    url: string;
+    linkType?: 'internal' | 'external';
+}
+interface NavbarProps {
+    brandName?: string;
+    logoUrl?: string;
+    showLogo?: boolean;
+    showBrandName?: boolean;
+    links: NavbarLink[];
+    ctaText?: string;
+    ctaUrl?: string;
+    sticky?: boolean;
+    transparentOnTop?: boolean;
+    colors: {
+        primary: string;
+        text: string;
+        buttonText?: string;
+    };
+    typography?: {
+        headingFont?: string;
+        bodyFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function Navbar({ brandName, logoUrl, showLogo, showBrandName, links, ctaText, ctaUrl, sticky, transparentOnTop, colors, typography, enableInlineEditing, sectionId }: NavbarProps): react_jsx_runtime.JSX.Element;
+
+interface TextSectionProps {
+    title?: string;
+    content: string;
+    alignment?: 'left' | 'center' | 'right';
+    maxWidth?: 'full' | 'large' | 'medium' | 'small';
+    textSize?: 'small' | 'medium' | 'large';
+    backgroundColor?: string;
+    textColor?: string;
+    paddingY?: 'none' | 'small' | 'medium' | 'large';
+    colors: {
+        primary: string;
+        text: string;
+    };
+    typography?: {
+        headingFont?: string;
+        bodyFont?: string;
+    };
+    enableInlineEditing?: boolean;
+    sectionId?: string;
+}
+declare function TextSection({ title, content, alignment, maxWidth, textSize, backgroundColor, textColor, paddingY, colors, typography, enableInlineEditing, sectionId }: TextSectionProps): react_jsx_runtime.JSX.Element;
+
+interface BookingFlowConfig {
+    steps: {
+        service_selection?: {
+            enabled: boolean;
+            settings?: any;
+        };
+        date_selection?: {
+            enabled: boolean;
+            settings?: any;
+        };
+        time_selection?: {
+            enabled: boolean;
+            settings?: any;
+        };
+        addon_selection?: {
+            enabled: boolean;
+            settings?: any;
+        };
+        contact_form?: {
+            enabled: boolean;
+            settings?: any;
+        };
+        confirmation?: {
+            enabled: boolean;
+            settings?: any;
+        };
+    };
+    progressBar?: {
+        style?: 'dots' | 'bar' | 'minimal';
+    };
+    transitions?: {
+        style?: 'slide' | 'fade';
+        speed?: 'fast' | 'normal' | 'slow';
+    };
+    background?: {
+        type: 'color' | 'gradient' | 'image';
+        value: string;
+    };
+}
+interface BookingFlowProps {
+    config: BookingFlowConfig;
+    colors: {
+        primary: string;
+        secondary: string;
+        text?: string;
+        bookingText?: string;
+    };
+    services?: any[];
+    categories?: any[];
+    dates?: string[];
+    times?: string[];
+    addons?: any[];
+    paymentProvider?: 'square' | 'stripe';
+    paymentConfig?: any;
+    isPreview?: boolean;
+    onComplete?: (bookingData: any) => void;
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    onServiceSelect?: (serviceId: string) => void;
+    onDateSelect?: (date: string) => void;
+    onContactInfoChange?: (contactInfo: any) => void;
+    validateStep?: (stepId: string, data: any) => boolean;
+    holdTimer?: {
+        enabled: boolean;
+        config: Partial<HoldTimerConfig>;
+        createHold: CreateHoldFn;
+        extendHold: ExtendHoldFn;
+        releaseHold: ReleaseHoldFn;
+    };
+    stepOrder?: string[];
+    optInModules?: OptInModule[];
+    onOptInData?: (moduleId: string, data: any) => void;
+    customPaymentForm?: React$1.ComponentType<any>;
+    cyclePhases?: Record<string, string>;
+}
+/**
+ * BookingFlow - Main orchestrator component for multi-step booking
+ *
+ * Manages flow state, navigation, and renders appropriate step components.
+ *
+ * @example
+ * ```tsx
+ * <BookingFlow
+ *   config={{
+ *     steps: {
+ *       service_selection: { enabled: true, settings: {} },
+ *       date_selection: { enabled: true, settings: {} },
+ *       time_selection: { enabled: true, settings: {} },
+ *       contact_form: { enabled: true, settings: {} }
+ *     },
+ *     progressBar: { style: 'dots' },
+ *     transitions: { style: 'slide', speed: 'normal' }
+ *   }}
+ *   colors={{ primary: '#BCB4FF', secondary: '#CAC426' }}
+ *   services={services}
+ *   onComplete={(data) => console.log('Booking complete!', data)}
+ * />
+ * ```
+ */
+declare function BookingFlow({ config, colors, services, categories, dates, times, addons, paymentProvider, paymentConfig, isPreview, onComplete, onStepChange, onServiceSelect, onDateSelect, onContactInfoChange, validateStep, holdTimer, stepOrder, optInModules, onOptInData, customPaymentForm, cyclePhases }: BookingFlowProps): react_jsx_runtime.JSX.Element;
+
+interface ServiceSelectionProps {
+    services: Service[];
+    categories?: ServiceCategory[];
+    selectedService: string | null;
+    onServiceSelect: (serviceId: string) => void;
+    settings: ServiceSelectionSettings;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+}
+declare function ServiceSelection({ services, categories, selectedService, onServiceSelect, settings, colors }: ServiceSelectionProps): react_jsx_runtime.JSX.Element;
+
+interface DateSelectionProps {
+    availableDates: string[];
+    selectedDate: string | null;
+    onDateSelect: (date: string) => void;
+    settings: DateSelectionSettings;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    cyclePhases?: Record<string, string>;
+    selectedService?: any;
+    addons?: any[];
+    selectedAddons?: string[];
+    onAddonsChange?: (addonIds: string[]) => void;
+    addonPlacement?: string;
+}
+declare function DateSelection({ availableDates, selectedDate, onDateSelect, settings, colors, cyclePhases, selectedService, addons, selectedAddons, onAddonsChange, addonPlacement }: DateSelectionProps): react_jsx_runtime.JSX.Element;
+
+interface TimeSelectionProps {
+    availableTimes: string[];
+    selectedTime: string | null;
+    onTimeSelect: (time: string) => void;
+    settings: TimeSelectionSettings;
+    serviceDuration?: number;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    selectedService?: any;
+    selectedDate?: string | null;
+    selectedAddons?: string[];
+    addons?: any[];
+}
+declare function TimeSelection({ availableTimes, selectedTime, onTimeSelect, settings, serviceDuration, colors, selectedService, selectedDate, selectedAddons, addons }: TimeSelectionProps): react_jsx_runtime.JSX.Element;
+
+interface AddonsSelectionProps {
+    addons: Addon[];
+    selectedAddons: string[];
+    onAddonsChange: (addonIds: string[]) => void;
+    settings: AddonSelectionSettings;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+}
+declare function AddonsSelection({ addons, selectedAddons, onAddonsChange, settings, colors }: AddonsSelectionProps): react_jsx_runtime.JSX.Element;
+
+interface ContactFormProps {
+    contactInfo: Partial<ContactInfo>;
+    onContactInfoChange: (info: Partial<ContactInfo>) => void;
+    settings: ContactFormSettings;
+    optInModules?: OptInModule[];
+    onOptInData?: (moduleId: string, data: any) => void;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    isPreview?: boolean;
+}
+declare function ContactForm({ contactInfo, onContactInfoChange, settings, optInModules, onOptInData, colors, isPreview }: ContactFormProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmationProps {
+    service?: Service;
+    addons?: Addon[];
+    selectedDate?: string;
+    selectedTime?: string;
+    paymentProvider: 'square' | 'stripe';
+    paymentConfig: PaymentConfig;
+    onConfirm: () => Promise<void>;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    isPreview?: boolean;
+}
+declare function Confirmation({ service, addons, selectedDate, selectedTime, paymentProvider, paymentConfig, onConfirm, colors, isPreview }: ConfirmationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Cycle phase definitions matching tenant backend
+ */
+declare const CYCLE_PHASES: Record<string, Omit<CyclePhase, 'daysSinceStart' | 'confidence'>>;
+interface CycleAwareDateSelectionProps {
+    availableDates: string[];
+    selectedDate: string | null;
+    onDateSelect: (date: string, cyclePhase?: CyclePhase) => void;
+    settings: DateSelectionSettings;
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    /** Tenant-provided function to fetch cycle data */
+    fetchCycleData?: FetchCycleDataFn;
+    /** Selected client (must have cycle_opt_in = true to show cycle features) */
+    selectedClient?: CycleClient;
+    /** Callback when a warning should be shown (e.g., avoid phase selected) */
+    onCycleWarning?: CycleWarningCallback;
+    /** Override to force enable/disable cycle features */
+    cycleAwareEnabled?: boolean;
+}
+/**
+ * CycleAwareDateSelection - Enhanced date picker with cycle phase indicators
+ *
+ * Wraps the base DateSelection component with cycle-aware features:
+ * - Visual indicators for each cycle phase
+ * - Color-coded calendar days
+ * - Legend explaining phases
+ * - Warnings for non-optimal dates
+ *
+ * @example
+ * ```tsx
+ * const fetchCycleData = async (client, dates) => {
+ *   const res = await fetch(`/api/cycle?clientId=${client.id}`);
+ *   const data = await res.json();
+ *   return transformToCyclePhases(data, dates);
+ * };
+ *
+ * <CycleAwareDateSelection
+ *   availableDates={dates}
+ *   selectedDate={selectedDate}
+ *   onDateSelect={(date, phase) => {
+ *     setSelectedDate(date);
+ *     if (phase?.phase === 'avoid') {
+ *       showWarning('This date may be uncomfortable');
+ *     }
+ *   }}
+ *   settings={settings}
+ *   colors={colors}
+ *   fetchCycleData={fetchCycleData}
+ *   selectedClient={client}
+ *   onCycleWarning={(phase, date) => console.log('Warning:', phase, date)}
+ * />
+ * ```
+ */
+declare function CycleAwareDateSelection({ availableDates, selectedDate, onDateSelect, settings, colors, fetchCycleData, selectedClient, onCycleWarning, cycleAwareEnabled }: CycleAwareDateSelectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * BottomSheet - Reusable slide-up modal component
+ *
+ * Perfect for custom forms, terms of service, or any content that needs
+ * to slide up from the bottom of the screen.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Color Consultation Form"
+ *   isRequired={false}
+ * >
+ *   <YourFormContent />
+ * </BottomSheet>
+ * ```
+ */
+declare function BottomSheet({ isOpen, onClose, title, children, isRequired, maxHeight }: BottomSheetProps): react_jsx_runtime.JSX.Element;
+
+interface HoldTimerProps {
+    /** Current hold status */
+    holdStatus: HoldStatus | null;
+    /** Configuration for timer behavior */
+    config?: Partial<HoldTimerConfig>;
+    /** Theme colors */
+    colors: {
+        primary: string;
+        secondary: string;
+        text?: string;
+    };
+    /** Callback when user clicks extend button */
+    onExtend?: () => void | Promise<void>;
+    /** Callback when user clicks release button */
+    onRelease?: () => void | Promise<void>;
+    /** Callback when timer enters warning state */
+    onWarning?: (timeRemaining: number) => void;
+    /** Callback when timer expires */
+    onExpired?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * HoldTimer - Countdown timer for time slot reservations
+ *
+ * Shows a countdown for how long a time slot is reserved, with
+ * visual warning states and optional extension/release actions.
+ *
+ * @example
+ * ```tsx
+ * <HoldTimer
+ *   holdStatus={activeHold}
+ *   config={{
+ *     duration: 600000, // 10 minutes
+ *     warningThreshold: 120000, // 2 minutes
+ *     maxExtensions: 2
+ *   }}
+ *   colors={{ primary: '#8B5CF6', secondary: '#EC4899' }}
+ *   onExtend={() => extendHold(activeHold.holdId)}
+ *   onRelease={() => releaseHold(activeHold.holdId)}
+ *   onExpired={() => {
+ *     // Handle expiration - usually go back to time selection
+ *     setSelectedTime(null);
+ *     setStep('time');
+ *   }}
+ * />
+ * ```
+ */
+declare function HoldTimer({ holdStatus, config: userConfig, colors, onExtend, onRelease, onWarning, onExpired, className }: HoldTimerProps): react_jsx_runtime.JSX.Element | null;
+
+interface SectionRendererProps {
+    section: {
+        id: string;
+        type: string;
+        settings: any;
+        enabled?: boolean;
+        position?: number;
+    };
+    theme: {
+        colors: {
+            primary: string;
+            secondary: string;
+            text: string;
+            bookingText?: string;
+            linkBackground?: string;
+            linkText?: string;
+            buttonText?: string;
+        };
+        typography: {
+            headingFont?: string;
+            bodyFont?: string;
+            bodySize?: string;
+        };
+    };
+    BookingFlowComponent?: React$1.ComponentType<any>;
+    config?: any;
+    enableInlineEditing?: boolean;
+}
+/**
+ * SectionRenderer - Universal renderer for all section types
+ *
+ * Maps section configuration objects to the appropriate component
+ * and passes through theme/styling props.
+ *
+ * @example
+ * ```tsx
+ * <SectionRenderer
+ *   section={{
+ *     id: 'hero-1',
+ *     type: 'hero',
+ *     settings: {
+ *       headline: 'Welcome',
+ *       subheadline: 'Transform your look',
+ *       heroImage: '/hero.jpg',
+ *       layout: 'split'
+ *     }
+ *   }}
+ *   theme={{
+ *     colors: { primary: '#BCB4FF', secondary: '#CAC426', text: '#000000' },
+ *     typography: { headingFont: 'Geist Sans' }
+ *   }}
+ * />
+ * ```
+ */
+declare function SectionRenderer({ section, theme, BookingFlowComponent, config, enableInlineEditing }: SectionRendererProps): react_jsx_runtime.JSX.Element;
+
+interface FormField$1 {
+    id: string;
+    label: string;
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'photo' | 'image';
+    placeholder?: string;
+    required: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+interface FormBlockData$1 {
+    id: string;
+    type: 'section' | 'text' | 'image';
+    title?: string;
+    description?: string;
+    content?: string;
+    alignment?: 'left' | 'center' | 'right';
+    imageUrl?: string;
+    fields?: FormField$1[];
+}
+interface FormSettings {
+    title: string;
+    description: string;
+    submitButtonText: string;
+    successMessage: string;
+    blocks: FormBlockData$1[];
+    styling?: {
+        alignment?: 'left' | 'center' | 'right';
+        fieldStyle?: 'outlined' | 'filled' | 'underlined' | 'minimal';
+        sectionBackground?: string;
+        fieldBorder?: string;
+        buttonColor?: string;
+        labelColor?: string;
+        textColor?: string;
+    };
+    notifications: {
+        enabled: boolean;
+        adminEmail: string;
+        emailSubject: string;
+    };
+}
+interface FormRendererProps {
+    form: {
+        id: string;
+        name: string;
+        slug: string;
+        type: string;
+        settings: FormSettings;
+    };
+    businessId: string;
+    onSuccess?: () => void;
+}
+declare function FormRenderer({ form, businessId, onSuccess }: FormRendererProps): react_jsx_runtime.JSX.Element;
+
+interface FormFieldData {
+    id: string;
+    label: string;
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'photo' | 'image';
+    placeholder?: string;
+    required: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+interface FormBlockData {
+    id: string;
+    type: 'section' | 'text' | 'image';
+    title?: string;
+    description?: string;
+    content?: string;
+    alignment?: 'left' | 'center' | 'right';
+    imageUrl?: string;
+    fields?: FormFieldData[];
+}
+interface FormBlockProps {
+    block: FormBlockData;
+    formData: Record<string, any>;
+    errors: Record<string, string>;
+    onChange: (fieldId: string, value: any, field: FormFieldData) => void;
+    businessId?: string;
+    formId?: string;
+    styling?: {
+        alignment?: 'left' | 'center' | 'right';
+        fieldStyle?: 'outlined' | 'filled' | 'underlined' | 'minimal';
+        sectionBackground?: string;
+        fieldBorder?: string;
+        buttonColor?: string;
+        labelColor?: string;
+        textColor?: string;
+    };
+    previewMode?: boolean;
+    onFieldReorder?: (blockId: string, oldIndex: number, newIndex: number) => void;
+}
+declare function FormBlock({ block, formData, errors, onChange, businessId, formId, styling, previewMode, onFieldReorder }: FormBlockProps): react_jsx_runtime.JSX.Element | null;
+
+interface FormField {
+    id: string;
+    label: string;
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'photo' | 'image';
+    required: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+interface ValidationResult {
+    isValid: boolean;
+    error?: string;
+}
+interface FormValidationResult {
+    isValid: boolean;
+    errors: Record<string, string>;
+}
+declare function validateField(value: any, field: FormField): ValidationResult;
+declare function validateForm(formData: Record<string, any>, fields: FormField[]): FormValidationResult;
+declare function sanitizeFormData(formData: Record<string, any>): Record<string, any>;
+
+export { About, type AboutProps, Addon, AddonSelectionSettings, AddonsSelection, BeforeAfter, type BeforeAfterProps, type BookingConfig, BookingFlow, type BookingFlowConfig, type BookingFlowProps, BookingSection, type BookingSectionProps, BottomSheet, BottomSheetProps, CYCLE_PHASES, type CardLink, type Comparison, Confirmation, Contact, ContactForm, ContactFormSettings, ContactInfo, type ContactProps, CreateHoldFn, CycleAwareDateSelection, type CycleAwareDateSelectionProps, CycleClient, CyclePhase, CycleWarningCallback, DateSelection, DateSelectionSettings, ExtendHoldFn, type FAQItem, FAQSection, type FAQSectionProps, FeatureContent, type FeatureContentProps, FeaturedLink, type FeaturedLinkProps, FetchCycleDataFn, FixedInfoCard, type FixedInfoCardProps, FormBlock, FormRenderer, Gallery, type GalleryImage, type GalleryProps, Header, type HeaderProps, Hero, type HeroProps, HoldStatus, HoldTimer, HoldTimerConfig, type HoldTimerProps, ImageSection, type ImageSectionProps, InstagramFeed, type InstagramFeedProps, type Link, LinkList, type LinkListProps, LocationMap, type LocationMapProps, Logo, type LogoProps, MinimalFooter, type MinimalFooterProps, MinimalHeader, type MinimalHeaderProps, MinimalNavigation, type MinimalNavigationProps, type NavLink, Navbar, type NavbarLink, type NavbarProps, OptInModule, PaymentConfig, type PricingPlan, PricingTable, type PricingTableProps, ReleaseHoldFn, ScrollingTextDivider, type ScrollingTextDividerProps, SectionRenderer, type SectionRendererProps, Service, ServiceCategory, ServiceSelection, ServiceSelectionSettings, ServicesPreview, type ServicesPreviewProps, SocialBar, type SocialBarProps, Team, type TeamMember, type TeamProps, type Testimonial, Testimonials, type TestimonialsProps, TextSection, type TextSectionProps, TimeSelection, TimeSelectionSettings, VideoSection, type VideoSectionProps, sanitizeFormData, validateField, validateForm };