@fanfare-io/fanfare-sdk-react 0.1.0

package/dist/components/compositions/journey-gate.d.ts

@@ -0,0 +1,48 @@
+import { AuthInputMode } from '../auth/auth-input';
+/**
+ * JourneyGate Component
+ *
+ * Handles auth and access code requirements before allowing journey progression.
+ * Renders appropriate form based on journey stage.
+ * Uses theme CSS variables for consistent styling.
+ */
+import * as React from "react";
+export type JourneyGateStage = "auth" | "access_code" | "loading" | "none";
+export interface JourneyGateProps {
+    /** Current gate stage */
+    stage: JourneyGateStage;
+    /** Callback when credential is submitted (for auth) */
+    onAuthSubmit?: (credential: string, type: AuthInputMode) => Promise<void>;
+    /** Callback when OTP is verified (for auth) */
+    onAuthVerify?: (otp: string) => Promise<void>;
+    /** Callback when auth is skipped */
+    onAuthSkip?: () => void;
+    /** Callback when auth completes successfully */
+    onAuthSuccess?: () => void;
+    /** Callback when access code is submitted */
+    onAccessCodeSubmit?: (code: string) => Promise<void>;
+    /** Callback when access code is skipped */
+    onAccessCodeSkip?: () => void;
+    /** Whether auth can be skipped */
+    allowAuthSkip?: boolean;
+    /** Whether access code can be skipped */
+    allowAccessCodeSkip?: boolean;
+    /** Auth form title */
+    authTitle?: string;
+    /** Auth form description */
+    authDescription?: string;
+    /** Access code form title */
+    accessCodeTitle?: string;
+    /** Access code form description */
+    accessCodeDescription?: string;
+    /** When the upcoming sequence opens — drives the countdown shown above the form. */
+    startsAt?: Date;
+    /** Additional class name */
+    className?: string;
+    /** Children to render when stage is "none" */
+    children?: React.ReactNode;
+}
+export declare function JourneyGate({ stage, onAuthSubmit, onAuthVerify, onAuthSkip, onAuthSuccess, onAccessCodeSubmit, onAccessCodeSkip, allowAuthSkip, allowAccessCodeSkip, authTitle, authDescription, accessCodeTitle, accessCodeDescription, startsAt, className, children, }: JourneyGateProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace JourneyGate {
+    var displayName: string;
+}

package/dist/components/compositions/outcome-panel.d.ts

@@ -0,0 +1,11 @@
+import { OutcomeReason } from '../module';
+export interface OutcomePanelProps {
+    outcomeReason: OutcomeReason;
+    onReenter?: () => Promise<void>;
+    isReentering?: boolean;
+    className?: string;
+}
+export declare function OutcomePanel({ outcomeReason, onReenter, isReentering, className }: OutcomePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace OutcomePanel {
+    var displayName: string;
+}

package/dist/components/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fanfare SDK React Components
+ *
+ * Component hierarchy:
+ * - Primitives: Atomic building blocks (Button, Input, Card, etc.)
+ * - Auth: Authentication inputs (EmailInput, OTPInput, AuthForm, etc.)
+ * - Compositions: Reusable sections (JourneyGate, EndedModule, etc.)
+ * - Widgets: Complete experiences (ExperienceWidget, etc.)
+ *
+ * @packageDocumentation
+ */
+export * from './auth';
+export * from './compositions';
+export * from './primitives';
+export * from './widgets';

package/dist/components/journey/experience-journey-controller.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { UseExperienceJourneyResult } from '../../hooks/use-experience-journey';
+export interface ExperienceJourneyControllerProps {
+    experienceId: string;
+    autoStart?: boolean;
+    children: (journey: UseExperienceJourneyResult) => ReactNode;
+}
+/**
+ * Thin wrapper around useExperienceJourney that exposes the journey state
+ * and actions via a render prop. This component does not render any UI
+ * itself; it is intended as a building block for higher-level journey
+ * components and stories.
+ */
+export declare function ExperienceJourneyController({ experienceId, autoStart, children }: ExperienceJourneyControllerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/journey/experience-journey-skeleton.d.ts

@@ -0,0 +1,21 @@
+import { JourneyView } from '@fanfare-io/fanfare-sdk-core/experiences';
+import { ReactNode } from 'react';
+export interface ExperienceJourneySkeletonProps {
+    experienceId: string;
+    autoStart?: boolean;
+    /**
+     * Optional render prop for custom header content; receives the current view.
+     */
+    renderHeader?: (view: JourneyView | null) => ReactNode;
+}
+/**
+ * Minimal, unstyled skeleton component that wires the ExperienceJourney
+ * state machine into a very basic control surface. Intended for use as
+ * scaffolding when building higher-level, styled components.
+ *
+ * It:
+ * - Shows the current status, journeyStage, and sequence phase.
+ * - Surfaces view-derived actions and snapshot details for inspection.
+ * - Provides buttons for common journey actions when they are available.
+ */
+export declare function ExperienceJourneySkeleton({ experienceId, autoStart, renderHeader }: ExperienceJourneySkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/module/alert-panel.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const containerVariants: (props?: ({
+    tone?: "success" | "danger" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, Omit<VariantProps<typeof containerVariants>, "tone"> {
+    tone?: "danger" | "success";
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const AlertPanel: React.ForwardRefExoticComponent<AlertPanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/module/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Module Kit
+ *
+ * Shared composition primitives for in-experience panel bodies.
+ * Distribution modules and other panels compose PanelLayout + slots +
+ * Badge + Countdown + Button + optional InfoPanel.
+ *
+ * @packageDocumentation
+ */
+export { PanelBody, PanelFooter, PanelLayout } from './panel-layout';
+export type { PanelBodyProps, PanelFooterProps, PanelLayoutProps } from './panel-layout';
+export { PanelHeading } from './panel-heading';
+export type { PanelHeadingProps, PanelHeadingVariant } from './panel-heading';
+export { InfoPanel } from './info-panel';
+export type { InfoPanelProps } from './info-panel';
+export { AlertPanel } from './alert-panel';
+export type { AlertPanelProps } from './alert-panel';
+export { normalizeOutcomeReason } from './outcome-reason';
+export type { OutcomeReason } from './outcome-reason';

package/dist/components/module/info-panel.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const infoPanelVariants: (props?: ({
+    styleVariant?: "default" | "rounded" | "retro" | "clean" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InfoPanelProps extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof infoPanelVariants>, "styleVariant"> {
+}
+export declare const InfoPanel: React.ForwardRefExoticComponent<InfoPanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/module/outcome-reason.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Outcome-reason taxonomy (UI-facing)
+ *
+ * Distribution modules render an outcome state when a user can't proceed —
+ * because the admission grant expired, they weren't selected, the window
+ * closed, etc. This union is the *module-facing* taxonomy, narrower than
+ * the freeform strings the journey machine emits.
+ *
+ * `normalizeOutcomeReason` maps every known machine code (and any
+ * already-normalized UI value) to a member of the union. Unknown values
+ * fall back to `"ended"`.
+ *
+ *   journey machine code  ->  UI outcome reason
+ *   ----------------------------------------------
+ *   expired               ->  expired
+ *   queue_denied          ->  not_selected
+ *   draw_denied           ->  not_selected
+ *   timed_release_denied  ->  sold_out
+ *   already_completed     ->  ended
+ *   closed                ->  ended
+ *   unknown / other       ->  ended
+ *
+ * Static story lanes pass UI values directly (e.g. `"outbid"`); those
+ * pass through unchanged.
+ */
+export type OutcomeReason = "expired" | "not_selected" | "sold_out" | "outbid" | "reserve_not_met" | "ended";
+export declare function normalizeOutcomeReason(reason: string | undefined): OutcomeReason;

package/dist/components/module/panel-heading.d.ts

@@ -0,0 +1,34 @@
+/**
+ * PanelHeading
+ *
+ * Opinionated header for in-experience panels. Renders an optional status
+ * badge, title, and description in a consistent vertical stack. Self-renders
+ * with `data-slot="panel-header"` so PanelLayout treats it as the header
+ * without callers needing to wrap it.
+ *
+ *   <PanelLayout>
+ *     <PanelHeading
+ *       variant="success"
+ *       label="In Queue"
+ *       title="You're in line"
+ *       description="We'll let you know when it's your turn."
+ *     />
+ *     <PanelBody>...</PanelBody>
+ *   </PanelLayout>
+ *
+ * `variant` drives the badge color/intent. The set is intentionally smaller
+ * than Badge's full union — callers express intent (success/danger/etc.)
+ * rather than picking a one-off accent.
+ *
+ * For headers that need more than this primitive offers, render
+ * `<div data-slot="panel-header" />` with custom markup.
+ */
+import * as React from "react";
+export type PanelHeadingVariant = "default" | "secondary" | "success" | "warning" | "danger" | "outline";
+export interface PanelHeadingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: PanelHeadingVariant;
+    label?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const PanelHeading: React.ForwardRefExoticComponent<PanelHeadingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/module/panel-layout.d.ts

@@ -0,0 +1,28 @@
+import { CardProps } from '../primitives/card';
+/**
+ * PanelLayout + slots
+ *
+ * Shared layout primitive for every in-experience panel. PanelLayout owns
+ * the Card chrome AND the inter-slot spacing — it wraps the heading + body
+ * slots in a padded stack with a consistent gap, so individual slots don't
+ * have to ship their own padding.
+ *
+ *   <PanelLayout>
+ *     <PanelHeading variant="..." label="..." title="..." />
+ *     <PanelBody>... main content ...</PanelBody>
+ *     <PanelFooter />  // optional — defaults to "Powered by Fanfare"
+ *   </PanelLayout>
+ *
+ * PanelFooter is rendered outside the padded stack (own row with border-t).
+ * If no PanelFooter is passed, the default branded footer is auto-appended.
+ *
+ * For panels that need a fully custom header instead of PanelHeading, render
+ * `<div data-slot="panel-header" />` with the desired markup.
+ */
+import * as React from "react";
+export type PanelBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const PanelBody: React.ForwardRefExoticComponent<PanelBodyProps & React.RefAttributes<HTMLDivElement>>;
+export type PanelFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const PanelFooter: React.ForwardRefExoticComponent<PanelFooterProps & React.RefAttributes<HTMLDivElement>>;
+export type PanelLayoutProps = CardProps;
+export declare const PanelLayout: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/primitives/badge.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "success" | "warning" | "danger" | "outline" | null | undefined;
+    solid?: boolean | null | undefined;
+    styleVariant?: "default" | "rounded" | "retro" | "clean" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "solid" | "styleVariant"> {
+    /**
+     * Whether to use a solid filled background.
+     * - `true`: Filled background with contrasting foreground color
+     * - `false`: Transparent background with text color and colored dot indicator
+     * - `undefined` (default): Automatically determined by theme variant
+     */
+    solidBackground?: boolean;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { badgeVariants };

package/dist/components/primitives/button.d.ts

@@ -0,0 +1,23 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "icon" | null | undefined;
+    styleVariant?: "default" | "rounded" | "retro" | "clean" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonStatus {
+    success: () => void;
+    failure: () => void;
+}
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, "styleVariant"> {
+    /** Show loading spinner and disable button */
+    loading?: boolean;
+    /** Render as child element (for composition) */
+    asChild?: boolean;
+    /** Imperative handle for showing transient success/failure status */
+    statusRef?: React.Ref<ButtonStatus>;
+    /** Optional class for the inner content wrapper */
+    contentClassName?: string;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { buttonVariants };

package/dist/components/primitives/card.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const cardVariants: (props?: ({
+    variant?: "default" | "outlined" | "elevated" | null | undefined;
+    styleVariant?: "default" | "rounded" | "retro" | "clean" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof cardVariants>, "styleVariant"> {
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export { cardVariants };
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/primitives/countdown.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Countdown Component
+ *
+ * Displays time remaining until a target date.
+ * Automatically updates every second.
+ *
+ * Two layouts:
+ * - "swiss" (default): Prominent display with animated digits and labels above
+ * - "compact": Simple text-based countdown that inherits parent styling
+ */
+export type CountdownSize = "default" | "hero";
+export type CountdownTone = "calm" | "warning" | "critical";
+export interface CountdownProps {
+    /** Target date/time to count down to */
+    targetDate: Date | string | number;
+    /** Callback when countdown reaches zero */
+    onComplete?: () => void;
+    /** Label to show when expired */
+    expiredLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show days in countdown */
+    showDays?: boolean;
+    /** Show hours in countdown */
+    showHours?: boolean;
+    /** Show minutes in countdown */
+    showMinutes?: boolean;
+    /** Show seconds in countdown */
+    showSeconds?: boolean;
+    /** Layout: "swiss" for prominent animated display, "compact" for simple text */
+    layout?: "swiss" | "compact";
+    /** Size: "default" (compact display) or "hero" (52px monospace, urgency-driver). */
+    size?: CountdownSize;
+    /**
+     * Presentational urgency tone. Caller derives from phase + time-remaining and passes it.
+     * - calm: foreground color (default)
+     * - warning: warning token color
+     * - critical: danger token color (in retro, also flips the unit container bg)
+     */
+    tone?: CountdownTone;
+}
+export declare function Countdown({ targetDate, onComplete, expiredLabel, className, showDays, showHours, showMinutes, showSeconds, layout, size, tone, }: CountdownProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/primitives/fade-presence.d.ts

@@ -0,0 +1,28 @@
+/**
+ * FadePresence
+ *
+ * Fade in/out for an element whose mount/unmount is gated by a boolean.
+ * Use this for conditional content that should animate when it appears or
+ * disappears (alerts, hint rows, optional callouts). For content that swaps
+ * between values, use `<Transition transitionKey={...}>` instead.
+ *
+ *   <FadePresence show={!!error}>
+ *     <AlertPanel tone="danger" title={error} />
+ *   </FadePresence>
+ */
+import * as React from "react";
+export interface FadePresenceProps {
+    /** When true, the children mount and fade in. When false, they fade out and unmount. */
+    show: boolean;
+    /**
+     * Distinguishes this presence from siblings if multiple FadePresences share a
+     * parent and you need framer to treat them independently.
+     */
+    presenceKey?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function FadePresence({ show, presenceKey, children, className }: FadePresenceProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FadePresence {
+    var displayName: string;
+}

package/dist/components/primitives/fanfare-logo.d.ts

@@ -0,0 +1,12 @@
+/**
+ * FanfareLogo Component
+ *
+ * The Fanfare wordmark logo with gradient styling.
+ * Used for branding in auth forms, footers, etc.
+ */
+import * as React from "react";
+export interface FanfareLogoProps extends React.SVGAttributes<SVGSVGElement> {
+    /** Additional class name */
+    className?: string;
+}
+export declare const FanfareLogo: React.ForwardRefExoticComponent<FanfareLogoProps & React.RefAttributes<SVGSVGElement>>;

package/dist/components/primitives/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Primitive Components
+ *
+ * Atomic, reusable building blocks that form the foundation of all widgets.
+ * These components use theme CSS variables and accept className for customization.
+ *
+ * @packageDocumentation
+ */
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';
+export { Button } from './button';
+export type { ButtonProps } from './button';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
+export type { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, } from './card';
+export { Countdown } from './countdown';
+export type { CountdownProps } from './countdown';
+export { FanfareLogo } from './fanfare-logo';
+export type { FanfareLogoProps } from './fanfare-logo';
+export { Input } from './input';
+export type { InputProps } from './input';
+export { Progress } from './progress';
+export type { ProgressProps } from './progress';
+export { Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton';
+export { Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';
+export { Transition } from './transition';
+export type { TransitionMode, TransitionProps } from './transition';
+export { FadePresence } from './fade-presence';
+export type { FadePresenceProps } from './fade-presence';

package/dist/components/primitives/input.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Input Component
+ *
+ * Text input with error state support, optional inline/floating label,
+ * and inline error display.
+ *
+ * The input automatically adapts to the current theme variant:
+ * - default/rounded variants: Uses inline label and error by default
+ * - retro/clean variants: Uses external label and error by default
+ *
+ * @example
+ * // Default behavior - adapts to theme variant
+ * <Input label="Email" error={errors.email} />
+ *
+ * @example
+ * // Force inline label regardless of variant
+ * <Input label="Email" inlineLabel={true} />
+ */
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Label text for the input */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /**
+     * Visual error state without inline text. Use when the message is rendered
+     * elsewhere (e.g. an AlertPanel under the input) but the field should still
+     * show its red border / invalid styling.
+     */
+    hasError?: boolean;
+    /**
+     * Whether to use inline (floating) label style.
+     * - `true`: Floating label that moves up when focused/filled
+     * - `false`: External label above the input
+     * - `undefined` (default): Automatically determined by theme variant
+     */
+    inlineLabel?: boolean;
+    /**
+     * Whether to display error inline (inside the input).
+     * - `true`: Error appears inside the input (top-right)
+     * - `false`: Error appears below the input
+     * - `undefined` (default): Automatically determined by theme variant
+     */
+    inlineError?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/primitives/progress.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Progress Component
+ *
+ * Visual progress indicator bar.
+ * Uses theme CSS variables for consistent styling.
+ */
+import * as React from "react";
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Current progress value (0-100) */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Show percentage text */
+    showLabel?: boolean;
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/primitives/skeleton.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Skeleton Component
+ *
+ * Loading placeholder with shimmer animation.
+ * Uses theme CSS variables for consistent styling.
+ */
+import * as React from "react";
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/primitives/spinner.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    styleVariant?: "default" | "rounded" | "retro" | "clean" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement>, Omit<VariantProps<typeof spinnerVariants>, "styleVariant"> {
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+export { spinnerVariants };

package/dist/components/primitives/transition.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Transition Component
+ *
+ * A reusable wrapper for animating content changes with enter/exit animations.
+ * Adapts animation style based on the current theme variant.
+ * Supports layout animations for smooth height transitions.
+ */
+import * as React from "react";
+export type TransitionMode = "fade" | "slide" | "scale" | "none";
+export interface TransitionProps {
+    children: React.ReactNode;
+    /** Key to trigger re-animation when content changes */
+    transitionKey: string | number;
+    /** Override variant-specific animation mode */
+    mode?: TransitionMode;
+    /** Enable layout animations for height changes */
+    layout?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Transition wrapper that animates content enter/exit with variant-specific styles.
+ *
+ * @example
+ * ```tsx
+ * <Transition transitionKey={step}>
+ *   {step === "credential" ? <AuthInput /> : <OTPInput />}
+ * </Transition>
+ * ```
+ */
+export declare function Transition({ children, transitionKey, mode, layout, className }: TransitionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Transition {
+    var displayName: string;
+}

package/dist/components/shadow-dom-preview.d.ts

@@ -0,0 +1,43 @@
+import { BrandTheme } from '@fanfare-io/fanfare-sdk-core/theme';
+import { Locale, PartialTranslationMessages, TranslationMessageKey } from '@fanfare-io/fanfare-sdk-i18n';
+import { CSSProperties, ReactNode } from 'react';
+import { WidgetVariant } from '../theme/theme.types';
+export interface ShadowDOMPreviewProps {
+    /** Child components to render inside the shadow DOM */
+    children: ReactNode;
+    /** Theme configuration to apply */
+    theme?: BrandTheme | null;
+    /** Widget variant (layout/density) */
+    variant?: WidgetVariant;
+    /** Locale for translations */
+    locale?: Locale;
+    /** Custom translations to apply */
+    translations?: PartialTranslationMessages<TranslationMessageKey>;
+    /** Additional CSS class for the host element */
+    className?: string;
+    /** Additional inline styles for the host element */
+    style?: CSSProperties;
+}
+/**
+ * Renders children inside an isolated Shadow DOM with SDK styles.
+ *
+ * This component creates a Shadow DOM boundary that:
+ * - Prevents admin/host styles from leaking into the preview
+ * - Prevents SDK styles from leaking out to the host page
+ * - Injects SDK Tailwind CSS (with `ff:` prefix) into the shadow root
+ * - Re-establishes i18n and theme context inside the shadow boundary
+ *
+ * Use this when previewing SDK components in environments that have
+ * different Tailwind configurations (like the admin dashboard).
+ *
+ * @example
+ * ```tsx
+ * <ShadowDOMPreview theme={{ primary: "#7c3aed" }}>
+ *   <UpcomingModule title="Coming Soon" description="Stay tuned!" />
+ * </ShadowDOMPreview>
+ * ```
+ */
+export declare function ShadowDOMPreview({ children, theme, variant, locale, translations, className, style, }: ShadowDOMPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ShadowDOMPreview {
+    var displayName: string;
+}

package/dist/components/widgets/appointment/appointment-booking-details.d.ts

@@ -0,0 +1,18 @@
+import { AppointmentDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
+export interface AppointmentBookingDetailsProps {
+    booking: NonNullable<AppointmentDisplayState["booking"]>;
+    /** Appointment timezone — used to format date/time in the appointment's local zone, not the viewer's. */
+    timezone?: string;
+    /** When true, hides reschedule/cancel actions — used for completed appointments. */
+    readOnly?: boolean;
+    onCancel(): Promise<void>;
+    onStartReschedule(): void;
+    onAddToCalendar?(): void;
+    onJoinCall?(): void;
+    isCancelling: boolean;
+    cancelError?: string | null;
+}
+export declare function AppointmentBookingDetails({ booking, timezone, readOnly, onCancel, onStartReschedule, onAddToCalendar, onJoinCall, isCancelling, cancelError, }: AppointmentBookingDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppointmentBookingDetails {
+    var displayName: string;
+}

package/dist/components/widgets/appointment/appointment-checked-in-view.d.ts

@@ -0,0 +1,12 @@
+import { AppointmentDisplayState } from '@fanfare-io/fanfare-sdk-core/internals';
+export interface AppointmentCheckedInViewProps {
+    booking: NonNullable<AppointmentDisplayState["booking"]>;
+    /** Appointment timezone — used to format the start time in the appointment's local zone. */
+    timezone?: string;
+    onJoinCall?(): void;
+    onShowPass?(): void;
+}
+export declare function AppointmentCheckedInView({ booking, timezone, onJoinCall, onShowPass }: AppointmentCheckedInViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppointmentCheckedInView {
+    var displayName: string;
+}