@fanfare-io/fanfare-sdk-react 0.1.0

package/dist/internal-sdk.d.ts

@@ -0,0 +1,2 @@
+import { FanfareSDK } from '@fanfare-io/fanfare-sdk-core';
+export type AdapterRuntimeSDK = FanfareSDK;

package/dist/lib/animations.d.ts

@@ -0,0 +1,94 @@
+export type AnimationConfig = {
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    respectMotionPreference?: boolean;
+};
+export declare const defaultAnimationConfig: AnimationConfig;
+export declare const prefersReducedMotion: () => boolean;
+export declare const getAnimationDuration: (config?: AnimationConfig) => number;
+export declare const getAnimationDelay: (config?: AnimationConfig) => number;
+export declare const animationClasses: {
+    readonly fadeIn: "ff:animate-fade-in";
+    readonly fadeOut: "ff:animate-fade-out";
+    readonly slideIn: "ff:animate-slide-in";
+    readonly slideOut: "ff:animate-slide-out";
+    readonly scaleIn: "ff:animate-scale-in";
+    readonly scaleOut: "ff:animate-scale-out";
+    readonly accordionDown: "ff:animate-accordion-down";
+    readonly accordionUp: "ff:animate-accordion-up";
+    readonly celebration: "ff:animate-celebration";
+    readonly shake: "ff:animate-shake";
+    readonly pulseSuccess: "ff:animate-pulse-success";
+};
+export type AnimationType = keyof typeof animationClasses;
+export declare const getAnimationClass: (animation: AnimationType, config?: AnimationConfig) => string;
+export declare const createTransition: (properties?: string[], config?: AnimationConfig) => string;
+export declare const withAnimation: <T extends Record<string, unknown>>(baseProps: T, animation: AnimationType, config?: AnimationConfig) => T & {
+    className?: string;
+};
+export declare const fadeInOut: {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+    transition: {
+        duration: number;
+    };
+};
+/**
+ * Shared motion-prop pair for panel-level fade-in. Panels (distribution
+ * modules, OutcomePanel, GrantedPanel, etc.) all use the same fade in
+ * profile. `getPanelMotionProps()` picks the appropriate one based on
+ * `prefers-reduced-motion`.
+ */
+export declare const PANEL_FADE_IN_MOTION: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly transition: {
+        readonly duration: 0.25;
+        readonly ease: "easeOut";
+    };
+};
+export declare const INSTANT_MOTION: {
+    readonly initial: {
+        readonly opacity: 1;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly transition: {
+        readonly duration: 0;
+    };
+};
+export declare const getPanelMotionProps: () => {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly transition: {
+        readonly duration: 0.25;
+        readonly ease: "easeOut";
+    };
+} | {
+    readonly initial: {
+        readonly opacity: 1;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly transition: {
+        readonly duration: 0;
+    };
+};

package/dist/lib/appointment-format.d.ts

@@ -0,0 +1,35 @@
+import { AppointmentSlot } from '@fanfare-io/fanfare-sdk-core/appointments';
+/**
+ * Date / time formatting helpers shared across the appointment components.
+ * All helpers gracefully fall back to the input string when given an
+ * unparseable value or when `Intl.DateTimeFormat` throws on a bad
+ * `timeZone` (it raises `RangeError: Invalid time zone specified`).
+ */
+export declare function formatWeekday(value: string, timezone?: string): string;
+export declare function formatMonthDay(value: string, timezone?: string): string;
+export declare function formatTime(value: string, timezone?: string): string;
+export declare function formatDurationMinutes(start: string, end: string): number | null;
+/** Format the start time of an appointment slot, falling back to its id string. */
+export declare function formatSlotTime(slot: AppointmentSlot): string;
+/**
+ * Return the YYYY-MM-DD calendar date of `date` as seen in `timezone`.
+ *
+ * Used by the slot picker to bucket slots by day and to render the day strip.
+ * Falls back to UTC when no `timezone` is provided. `sv-SE` locale produces
+ * ISO-format output (YYYY-MM-DD), so we can use it as a TZ-shifted date key
+ * without parsing locale-specific separators.
+ */
+export declare function isoDateInTimezone(date: Date, timezone?: string): string;
+/**
+ * Add `days` calendar days to a YYYY-MM-DD ISO date string, returning the
+ * shifted YYYY-MM-DD. TZ-agnostic — calendar-day arithmetic only.
+ */
+export declare function addCalendarDays(isoDate: string, days: number): string;
+/**
+ * Format the weekday label (e.g. "Mon") for a YYYY-MM-DD calendar date.
+ * Uses noon UTC under the hood so a TZ offset can't push the formatter to
+ * the wrong weekday.
+ */
+export declare function weekdayLabel(isoDate: string): string;
+/** Day-of-month from a YYYY-MM-DD calendar date. */
+export declare function dayOfMonth(isoDate: string): number;

package/dist/lib/confetti.d.ts

@@ -0,0 +1,17 @@
+import { WidgetVariant } from '../theme';
+/**
+ * Trigger a celebration confetti effect.
+ * Respects reduced motion preferences and variant-specific styling.
+ *
+ * @param variant - The current theme variant
+ * @returns void
+ */
+export declare function triggerCelebration(variant: WidgetVariant): void;
+/**
+ * Trigger a burst of confetti from a specific element.
+ * Useful for button clicks or specific UI interactions.
+ *
+ * @param element - The element to burst from
+ * @param variant - The current theme variant
+ */
+export declare function triggerCelebrationFromElement(element: HTMLElement, variant: WidgetVariant): void;

package/dist/lib/currency.d.ts

@@ -0,0 +1,9 @@
+export type CurrencyFormatOptions = {
+    currencyCode?: string;
+    currencySymbol?: string;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+};
+export declare function getCurrencySymbol(currencyCode: string, locale?: string): string;
+export declare function formatMoney(amount: number, options?: CurrencyFormatOptions): string;

package/dist/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { animationClasses, createTransition, defaultAnimationConfig, getAnimationClass, getAnimationDelay, getAnimationDuration, prefersReducedMotion, withAnimation, } from './animations';
+export type { AnimationConfig, AnimationType } from './animations';
+export { formatMoney, getCurrencySymbol } from './currency';
+export type { CurrencyFormatOptions } from './currency';
+export { cn, extractAriaProps, extractDataProps, fanfareClass } from './utils';

package/dist/lib/phone-formatter-lite.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Minimal phone number utilities
+ * Shared by auth-input and phone-input components.
+ */
+/**
+ * Extract phone input characters while preserving the plus sign
+ * Keeps: digits, plus (at start only)
+ * Removes: all other characters
+ */
+export declare function extractPhoneInput(value: string): string;
+/**
+ * Format phone number as user types
+ * US numbers: (415) 407-9619
+ * US with country code: +1 (415) 407-9619
+ * International: +44 207 123 4567 (grouped by 3s)
+ */
+export declare function formatPhoneAsYouType(value: string): string;
+/**
+ * Convert phone input to E.164 format (+[country code][number])
+ * Returns null if the input cannot be converted to valid E.164
+ */
+export declare function toE164(value: string): string | null;
+/**
+ * Basic phone validation
+ */
+export declare function validatePhone(value: string): boolean;

package/dist/lib/use-grant-celebration.d.ts

@@ -0,0 +1,12 @@
+/**
+ * useGrantCelebration
+ *
+ * One-shot mount-time confetti for the "won" / granted lifecycle state of
+ * a distribution module. Each module's `won` branch wires this up against
+ * a ref to its hero element.
+ *
+ * Internally respects `prefersReducedMotion` (via triggerCelebrationFromElement)
+ * and the active theme variant (clean variant intentionally fires no confetti).
+ */
+import * as React from "react";
+export declare function useGrantCelebration<T extends HTMLElement>(ref: React.RefObject<T | null>): void;

package/dist/lib/utils.d.ts

@@ -0,0 +1,13 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function fanfareClass(...inputs: ClassValue[]): string;
+export declare const extractAriaProps: (props: {
+    [key: string]: unknown;
+}) => {
+    [key: string]: unknown;
+};
+export declare const extractDataProps: (props: {
+    [key: string]: unknown;
+}) => {
+    [key: string]: unknown;
+};

package/dist/provider.d.ts

@@ -0,0 +1,99 @@
+import { FanfareConfig } from '@fanfare-io/fanfare-sdk-core';
+import { default as React } from 'react';
+import { Locale, PartialTranslationMessages, TranslationMessageKey } from './i18n';
+interface RequiredFanfareConfig {
+    organizationId: string;
+    publishableKey: string;
+}
+export interface FanfareProviderProps extends FanfareConfig, RequiredFanfareConfig {
+    children: React.ReactNode;
+    /**
+     * Whether to automatically restore session on mount
+     * @default true
+     */
+    autoRestore?: boolean;
+    /**
+     * Whether to automatically resume operations after restore
+     * @default true
+     */
+    autoResume?: boolean;
+    /**
+     * Loading component to show while initializing
+     */
+    loadingComponent?: React.ReactNode;
+    /**
+     * Locale for translations
+     * @default "en"
+     */
+    locale?: Locale;
+    /**
+     * Custom translations to merge with or override defaults.
+     * Use this to customize button labels, messages, and other text.
+     *
+     * @example
+     * ```tsx
+     * <FanfareProvider
+     *   organizationId="org_123"
+     *   publishableKey="pk_live_xyz789"
+     *   translations={{
+     *     "queue.enter": "Join the Line",
+     *     "granted.cta": "Go to Checkout",
+     *   }}
+     * >
+     *   <App />
+     * </FanfareProvider>
+     * ```
+     */
+    translations?: PartialTranslationMessages<TranslationMessageKey>;
+}
+/**
+ * FanfareProvider - Provider component for the Fanfare SDK
+ *
+ * Initializes the Fanfare SDK and makes it available to all child components
+ * via React Context. Handles session restoration and automatic resumption of
+ * queue operations.
+ *
+ * This component must wrap your entire application or the parts that need
+ * access to Fanfare functionality.
+ *
+ * @param props - Provider configuration
+ * @returns A provider component that initializes and distributes the SDK
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <FanfareProvider
+ *   organizationId="org_123"
+ *   publishableKey="pk_live_xyz789"
+ * >
+ *   <App />
+ * </FanfareProvider>
+ * ```
+ *
+ * @example
+ * With custom loading component:
+ * ```tsx
+ * <FanfareProvider
+ *   organizationId="org_123"
+ *   publishableKey="pk_live_xyz789"
+ *   loadingComponent={<Spinner />}
+ * >
+ *   <App />
+ * </FanfareProvider>
+ * ```
+ *
+ * @example
+ * Disable auto-restore and auto-resume:
+ * ```tsx
+ * <FanfareProvider
+ *   organizationId="org_123"
+ *   publishableKey="pk_live_xyz789"
+ *   autoRestore={false}
+ *   autoResume={false}
+ * >
+ *   <App />
+ * </FanfareProvider>
+ * ```
+ */
+export declare function FanfareProvider({ children, autoRestore, autoResume, loadingComponent, locale, translations, organizationId, publishableKey, environment, apiUrl, credentials, debug, auth, logging, sync, features, beacon, }: FanfareProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};