@gamifyio/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,892 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import { GamifyConfig, Gamify, SessionResponse, CartItem, LoyaltyProfile, LoyaltyHistoryResponse, AffiliateStats as AffiliateStats$1, LeaderboardResponse, QuestWithProgress, StreakWithProgress, StreaksResponse, FreezeResponse, BadgeWithStatus, BadgesResponse, RewardItem, RedemptionResult, LeaderboardEntry } from '@gamifyio/core';
+export { AffiliateEarnings, AffiliateStats as AffiliateStatsData, AffiliateTier, AppliedEffect, BadgeRarity, BadgeWithStatus, BadgesResponse, CartItem, FreezeResponse, GamifyConfig, GamifyEvent, LeaderboardEntry, LeaderboardResponse, LoyaltyHistoryResponse, LoyaltyProfile, LoyaltyTier, LoyaltyTransaction, QuestStep, QuestWithProgress, QuestsResponse, RedemptionResult, RewardItem, RewardsStoreResponse, SessionResponse, StreakMilestone, StreakWithProgress, StreaksResponse, UserTraits } from '@gamifyio/core';
+
+/**
+ * Context value for Gamify React SDK
+ */
+interface GamifyContextValue {
+    /** The underlying Gamify client instance */
+    client: Gamify;
+    /** Track an event */
+    track: (eventType: string, properties?: Record<string, unknown>) => void;
+    /** Identify a user */
+    identify: (userId: string, traits?: Record<string, unknown>) => void;
+    /** Reset user identity */
+    reset: () => void;
+    /** Get current user ID */
+    getUserId: () => string | null;
+    /** Get anonymous ID */
+    getAnonymousId: () => string;
+}
+/**
+ * Props for GamifyProvider
+ */
+interface GamifyProviderProps {
+    /** Gamify SDK configuration */
+    config: GamifyConfig;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * GamifyProvider - Initializes and provides Gamify SDK to React components
+ *
+ * @example
+ * ```tsx
+ * <GamifyProvider config={{ apiKey: 'your-api-key' }}>
+ *   <App />
+ * </GamifyProvider>
+ * ```
+ */
+declare function GamifyProvider({ config, children }: GamifyProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useGamify - Hook to access Gamify SDK methods
+ *
+ * @throws Error if used outside of GamifyProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { track, identify } = useGamify();
+ *
+ *   const handleClick = () => {
+ *     track('button_click', { buttonId: 'submit' });
+ *   };
+ *
+ *   return <button onClick={handleClick}>Submit</button>;
+ * }
+ * ```
+ */
+declare function useGamify(): GamifyContextValue;
+/**
+ * useTrack - Hook for tracking events
+ *
+ * Returns a memoized track function that can be safely used in dependencies.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const track = useTrack();
+ *
+ *   useEffect(() => {
+ *     track('component_viewed', { componentName: 'MyComponent' });
+ *   }, [track]);
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useTrack(): (eventType: string, properties?: Record<string, unknown>) => void;
+/**
+ * useIdentify - Hook for identifying users
+ *
+ * Returns a memoized identify function.
+ *
+ * @example
+ * ```tsx
+ * function LoginButton() {
+ *   const identify = useIdentify();
+ *
+ *   const handleLogin = async (user: User) => {
+ *     await loginUser(user);
+ *     identify(user.id, { email: user.email, name: user.name });
+ *   };
+ *
+ *   return <button onClick={handleLogin}>Login</button>;
+ * }
+ * ```
+ */
+declare function useIdentify(): (userId: string, traits?: Record<string, unknown>) => void;
+interface SessionState {
+    session: SessionResponse | null;
+    loading: boolean;
+    error: string | null;
+}
+interface SessionActions {
+    updateCart: (items: CartItem[], coupons?: string[], currency?: string) => Promise<void>;
+    applyCoupon: (code: string) => Promise<void>;
+    complete: () => Promise<void>;
+    clearSession: () => void;
+    refresh: () => Promise<void>;
+}
+/**
+ * useSession - Hook for managing cart sessions with discounts
+ *
+ * @example
+ * ```tsx
+ * function CartPage() {
+ *   const { session, loading, updateCart, applyCoupon, complete } = useSession();
+ *
+ *   const handleAddItem = async (item: CartItem) => {
+ *     const items = [...(session?.items || []), item];
+ *     await updateCart(items);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       {loading && <Spinner />}
+ *       <p>Subtotal: ${session?.subtotal}</p>
+ *       <p>Discount: ${session?.discount}</p>
+ *       <p>Total: ${session?.total}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useSession(): SessionState & SessionActions;
+interface LoyaltyState {
+    profile: LoyaltyProfile | null;
+    history: LoyaltyHistoryResponse | null;
+    loading: boolean;
+    error: string | null;
+}
+interface LoyaltyActions {
+    refreshProfile: () => Promise<void>;
+    refreshHistory: (limit?: number, offset?: number) => Promise<void>;
+}
+/**
+ * useLoyalty - Hook for managing customer loyalty data
+ *
+ * @param options - Auto-refresh options
+ *
+ * @example
+ * ```tsx
+ * function LoyaltyDashboard() {
+ *   const { profile, history, loading, refreshProfile } = useLoyalty({
+ *     autoRefresh: true,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {loading && <Spinner />}
+ *       <p>Points: {profile?.points}</p>
+ *       <p>Tier: {profile?.tier?.name}</p>
+ *       <p>Next tier: {profile?.nextTier?.name} ({profile?.nextTier?.pointsNeeded} points needed)</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useLoyalty(options?: {
+    autoRefresh?: boolean;
+}): LoyaltyState & LoyaltyActions;
+interface ReferralState {
+    referrerCode: string | null;
+    hasReferrer: boolean;
+}
+interface ReferralActions {
+    setReferrer: (code: string) => void;
+    clearReferrer: () => void;
+    detectFromUrl: () => string | null;
+}
+/**
+ * useReferral - Hook for managing referral attribution
+ *
+ * Automatically detects `?ref=code` parameter from URLs and stores
+ * the referrer code in localStorage for attribution tracking.
+ *
+ * @example
+ * ```tsx
+ * function SignupPage() {
+ *   const { referrerCode, hasReferrer, setReferrer } = useReferral();
+ *
+ *   useEffect(() => {
+ *     if (hasReferrer) {
+ *       console.log('User was referred by:', referrerCode);
+ *     }
+ *   }, [hasReferrer, referrerCode]);
+ *
+ *   return (
+ *     <div>
+ *       {hasReferrer && <p>Thanks for using referral code: {referrerCode}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useReferral(): ReferralState & ReferralActions;
+interface AffiliateState {
+    stats: AffiliateStats$1 | null;
+    loading: boolean;
+    error: string | null;
+}
+interface AffiliateActions {
+    refreshStats: (forceRefresh?: boolean) => Promise<void>;
+}
+/**
+ * useAffiliateStats - Hook for fetching user affiliate statistics
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * function AffiliateDashboard() {
+ *   const { stats, loading, error, refreshStats } = useAffiliateStats({
+ *     autoRefresh: true,
+ *   });
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <Error message={error} />;
+ *
+ *   return (
+ *     <div>
+ *       <p>Your referral code: {stats?.referralCode}</p>
+ *       <p>Referrals: {stats?.referralCount}</p>
+ *       <p>Total earnings: ${(stats?.earnings.totalEarned ?? 0) / 100}</p>
+ *       <p>Current tier: {stats?.tier?.name ?? 'None'}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useAffiliateStats(options?: {
+    autoRefresh?: boolean;
+}): AffiliateState & AffiliateActions;
+interface LeaderboardState {
+    leaderboard: LeaderboardResponse | null;
+    loading: boolean;
+    error: string | null;
+}
+interface LeaderboardActions {
+    refresh: (limit?: number) => Promise<void>;
+}
+/**
+ * useLeaderboard - Hook for fetching affiliate leaderboard data
+ *
+ * @param limit - Number of entries to fetch (default: 10)
+ *
+ * @example
+ * ```tsx
+ * function LeaderboardPage() {
+ *   const { leaderboard, loading, error, refresh } = useLeaderboard(10);
+ *
+ *   useEffect(() => {
+ *     refresh();
+ *   }, [refresh]);
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <Error message={error} />;
+ *
+ *   return (
+ *     <ol>
+ *       {leaderboard?.entries.map((entry) => (
+ *         <li key={entry.userId}>
+ *           #{entry.rank} - {entry.displayName}: {entry.referralCount} referrals
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   );
+ * }
+ * ```
+ */
+declare function useLeaderboard(limit?: number): LeaderboardState & LeaderboardActions;
+interface QuestsState {
+    quests: QuestWithProgress[];
+    loading: boolean;
+    error: string | null;
+}
+interface QuestsActions {
+    refresh: () => Promise<void>;
+}
+/**
+ * useQuests - Hook for fetching user's quest progress
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * function QuestsPage() {
+ *   const { quests, loading, error, refresh } = useQuests({ autoRefresh: true });
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <Error message={error} />;
+ *
+ *   return (
+ *     <div>
+ *       {quests.map((quest) => (
+ *         <div key={quest.id}>
+ *           <h3>{quest.name}</h3>
+ *           <p>Progress: {quest.percentComplete}%</p>
+ *           <p>Status: {quest.status}</p>
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useQuests(options?: {
+    autoRefresh?: boolean;
+}): QuestsState & QuestsActions;
+interface StreaksState {
+    streaks: StreakWithProgress[];
+    stats: StreaksResponse['stats'] | null;
+    loading: boolean;
+    error: string | null;
+}
+interface StreaksActions {
+    refresh: () => Promise<void>;
+    freeze: (ruleId: string) => Promise<FreezeResponse | null>;
+}
+/**
+ * useStreaks - Hook for managing user's streak progress
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * function StreaksPage() {
+ *   const { streaks, stats, loading, freeze } = useStreaks({ autoRefresh: true });
+ *
+ *   return (
+ *     <div>
+ *       <p>Active streaks: {stats?.totalActive}</p>
+ *       {streaks.map((streak) => (
+ *         <div key={streak.id}>
+ *           <span>🔥 {streak.currentCount}</span>
+ *           <span>{streak.name}</span>
+ *           {streak.freezeInventory > 0 && (
+ *             <button onClick={() => freeze(streak.id)}>
+ *               Use Freeze ({streak.freezeInventory} left)
+ *             </button>
+ *           )}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useStreaks(options?: {
+    autoRefresh?: boolean;
+}): StreaksState & StreaksActions;
+interface BadgesState {
+    badges: BadgeWithStatus[];
+    stats: BadgesResponse['stats'] | null;
+    earned: BadgeWithStatus[];
+    locked: BadgeWithStatus[];
+    loading: boolean;
+    error: string | null;
+}
+interface BadgesActions {
+    refresh: (category?: string) => Promise<void>;
+}
+/**
+ * useBadges - Hook for fetching user's badge collection
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * function BadgesPage() {
+ *   const { badges, earned, locked, stats, loading } = useBadges({ autoRefresh: true });
+ *
+ *   return (
+ *     <div>
+ *       <p>Unlocked: {stats?.unlocked} / {stats?.total}</p>
+ *       <div className="grid">
+ *         {badges.map((badge) => (
+ *           <div key={badge.id} className={badge.isUnlocked ? '' : 'grayscale'}>
+ *             <img src={badge.iconUrl} alt={badge.name} />
+ *             <span>{badge.name}</span>
+ *             <span className={`rarity-${badge.rarity.toLowerCase()}`}>
+ *               {badge.rarity}
+ *             </span>
+ *           </div>
+ *         ))}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useBadges(options?: {
+    autoRefresh?: boolean;
+    category?: string;
+}): BadgesState & BadgesActions;
+interface RewardsState {
+    items: RewardItem[];
+    userPoints: number;
+    available: RewardItem[];
+    unavailable: RewardItem[];
+    loading: boolean;
+    error: string | null;
+}
+interface RewardsActions {
+    refresh: () => Promise<void>;
+    redeem: (itemId: string) => Promise<RedemptionResult | null>;
+}
+/**
+ * useRewards - Hook for fetching and redeeming rewards
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * function RewardsStore() {
+ *   const { items, userPoints, loading, redeem } = useRewards({ autoRefresh: true });
+ *
+ *   const handleRedeem = async (itemId: string) => {
+ *     const result = await redeem(itemId);
+ *     if (result?.success) {
+ *       alert('Reward redeemed!');
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Your points: {userPoints}</p>
+ *       <div className="grid">
+ *         {items.map((item) => (
+ *           <div key={item.id}>
+ *             <img src={item.imageUrl} alt={item.name} />
+ *             <span>{item.name}</span>
+ *             <span>{item.pointsCost} points</span>
+ *             <button
+ *               disabled={!item.isAvailable}
+ *               onClick={() => handleRedeem(item.id)}
+ *             >
+ *               {item.canAfford ? 'Redeem' : `Need ${item.pointsCost - userPoints} more`}
+ *             </button>
+ *           </div>
+ *         ))}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useRewards(options?: {
+    autoRefresh?: boolean;
+}): RewardsState & RewardsActions;
+
+/**
+ * Props for GamifyPageView component
+ */
+interface GamifyPageViewProps {
+    /** Custom page name (defaults to document.title or window.location.pathname) */
+    pageName?: string;
+    /** Additional properties to include with page view events */
+    properties?: Record<string, unknown>;
+    /** Track on route changes (for SPAs) - requires pathname prop */
+    pathname?: string;
+}
+/**
+ * GamifyPageView - Component for automatic page view tracking
+ *
+ * Place this component in your layout or page components to automatically
+ * track page views. For SPAs using Next.js App Router, pass the pathname
+ * from usePathname() to track route changes.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - tracks on mount
+ * function Page() {
+ *   return (
+ *     <>
+ *       <GamifyPageView />
+ *       <div>Page content</div>
+ *     </>
+ *   );
+ * }
+ *
+ * // With Next.js App Router
+ * 'use client';
+ * import { usePathname } from 'next/navigation';
+ *
+ * function Layout({ children }) {
+ *   const pathname = usePathname();
+ *   return (
+ *     <>
+ *       <GamifyPageView pathname={pathname} />
+ *       {children}
+ *     </>
+ *   );
+ * }
+ *
+ * // With custom properties
+ * function ProductPage({ productId }) {
+ *   return (
+ *     <>
+ *       <GamifyPageView
+ *         pageName="Product Detail"
+ *         properties={{ productId, category: 'electronics' }}
+ *       />
+ *       <div>Product content</div>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function GamifyPageView({ pageName, properties, pathname, }: GamifyPageViewProps): null;
+/**
+ * Props for GamifyTrackClick component
+ */
+interface GamifyTrackClickProps {
+    /** Event type to track */
+    eventType: string;
+    /** Properties to include with the event */
+    properties?: Record<string, unknown>;
+    /** Child element (must accept onClick) */
+    children: React.ReactElement<{
+        onClick?: (e: React.MouseEvent) => void;
+    }>;
+}
+/**
+ * GamifyTrackClick - Component wrapper for click tracking
+ *
+ * Wraps a child element and tracks clicks automatically.
+ *
+ * @example
+ * ```tsx
+ * <GamifyTrackClick
+ *   eventType="button_click"
+ *   properties={{ buttonId: 'subscribe', location: 'header' }}
+ * >
+ *   <button>Subscribe</button>
+ * </GamifyTrackClick>
+ * ```
+ */
+declare function GamifyTrackClick({ eventType, properties, children, }: GamifyTrackClickProps): React.ReactElement<{
+    onClick?: (e: React.MouseEvent) => void;
+}, string | React.JSXElementConstructor<any>>;
+/**
+ * Props for AffiliateStats component
+ */
+interface AffiliateStatsProps {
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Theme customization */
+    theme?: {
+        cardBackground?: string;
+        cardBorder?: string;
+        valueColor?: string;
+        labelColor?: string;
+    };
+    /** Auto-refresh stats on mount */
+    autoRefresh?: boolean;
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+}
+/**
+ * AffiliateStats - Display grid with affiliate statistics
+ *
+ * Shows referral count, clicks, and earnings in a card layout.
+ * Headless-first: unstyled by default but includes sensible defaults.
+ *
+ * @example
+ * ```tsx
+ * <AffiliateStats autoRefresh />
+ *
+ * // With custom theme
+ * <AffiliateStats
+ *   theme={{ cardBackground: '#1a1a1a', valueColor: '#fff' }}
+ * />
+ * ```
+ */
+declare function AffiliateStats({ className, style, theme, autoRefresh, renderLoading, renderError, }: AffiliateStatsProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+/**
+ * Props for Leaderboard component
+ */
+interface LeaderboardProps {
+    /** Number of entries to display (default: 10) */
+    limit?: number;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Current user ID for highlighting */
+    currentUserId?: string;
+    /** Custom empty state message */
+    emptyMessage?: string;
+    /** Theme customization */
+    theme?: {
+        rowBackground?: string;
+        highlightBackground?: string;
+        textColor?: string;
+        secondaryColor?: string;
+    };
+    /** Custom render for each row */
+    renderRow?: (entry: LeaderboardEntry, isCurrentUser: boolean) => React.ReactNode;
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+}
+/**
+ * Leaderboard - Ranked affiliate leaderboard display
+ *
+ * Shows ranked list of top affiliates with referral counts.
+ * Highlights the current user if their ID is provided.
+ *
+ * @example
+ * ```tsx
+ * <Leaderboard limit={10} currentUserId={userId} />
+ *
+ * // With custom render
+ * <Leaderboard
+ *   renderRow={(entry, isCurrent) => (
+ *     <div className={isCurrent ? 'highlight' : ''}>
+ *       #{entry.rank} - {entry.displayName}
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+declare function Leaderboard({ limit, className, style, currentUserId, emptyMessage, theme, renderRow, renderLoading, renderError, }: LeaderboardProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+/**
+ * Props for ReferralLink component
+ */
+interface ReferralLinkProps {
+    /** Base URL for referral link (defaults to current origin) */
+    baseUrl?: string;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Text for copy button */
+    copyButtonText?: string;
+    /** Text shown after copying */
+    copiedText?: string;
+    /** Text for share button (mobile only) */
+    shareButtonText?: string;
+    /** Share title */
+    shareTitle?: string;
+    /** Share text */
+    shareText?: string;
+    /** Show share button on mobile */
+    showShareButton?: boolean;
+    /** Theme customization */
+    theme?: {
+        inputBackground?: string;
+        inputBorder?: string;
+        inputColor?: string;
+        buttonBackground?: string;
+        buttonColor?: string;
+    };
+    /** Callback when link is copied */
+    onCopy?: (link: string) => void;
+    /** Callback when link is shared */
+    onShare?: (link: string) => void;
+}
+/**
+ * ReferralLink - Input field with user's referral code and copy/share buttons
+ *
+ * Displays the user's unique referral link with easy copy functionality.
+ * Includes native share button for mobile devices.
+ *
+ * @example
+ * ```tsx
+ * <ReferralLink />
+ *
+ * // With custom base URL
+ * <ReferralLink
+ *   baseUrl="https://myapp.com/signup"
+ *   shareTitle="Join my app!"
+ *   shareText="Sign up using my referral link"
+ * />
+ * ```
+ */
+declare function ReferralLink({ baseUrl, className, style, copyButtonText, copiedText, shareButtonText, shareTitle, shareText, showShareButton, theme, onCopy, onShare, }: ReferralLinkProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Props for QuestProgress component
+ */
+interface QuestProgressProps {
+    /** Specific quest ID to display (shows all if not provided) */
+    questId?: string;
+    /** Hide completed quests */
+    hideCompleted?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Callback when a quest is completed */
+    onComplete?: (quest: QuestWithProgress) => void;
+    /** Theme customization */
+    theme?: {
+        cardBackground?: string;
+        cardBorder?: string;
+        progressColor?: string;
+        textColor?: string;
+    };
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+    /** Custom render for each quest */
+    renderQuest?: (quest: QuestWithProgress) => React.ReactNode;
+}
+/**
+ * QuestProgress - Display quest progress with step checklist
+ *
+ * Shows quest name, description, progress bar, and step completion status.
+ *
+ * @example
+ * ```tsx
+ * <QuestProgress hideCompleted onComplete={(quest) => console.log('Completed:', quest.name)} />
+ * ```
+ */
+declare function QuestProgress({ questId, hideCompleted, className, style, onComplete, theme, renderLoading, renderError, renderQuest, }: QuestProgressProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+/**
+ * Props for StreakFlame component
+ */
+interface StreakFlameProps {
+    /** Specific streak rule ID to display */
+    ruleId?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show freeze button */
+    showFreezeButton?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Callback when freeze is used */
+    onFreeze?: (ruleId: string, remainingFreezes: number) => void;
+    /** Theme customization */
+    theme?: {
+        flameColor?: string;
+        countColor?: string;
+        cardBackground?: string;
+    };
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+}
+/**
+ * StreakFlame - Display streak counter with flame icon
+ *
+ * Shows current streak count with status indicator and optional freeze button.
+ *
+ * @example
+ * ```tsx
+ * <StreakFlame showFreezeButton onFreeze={(id, remaining) => console.log('Freeze used')} />
+ * ```
+ */
+declare function StreakFlame({ ruleId, size, showFreezeButton, className, style, onFreeze, theme, renderLoading, renderError, }: StreakFlameProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+/**
+ * Props for BadgeGrid component
+ */
+interface BadgeGridProps {
+    /** Show locked (unearned) badges */
+    showLocked?: boolean;
+    /** Filter by category */
+    category?: string;
+    /** Number of grid columns */
+    columns?: number;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Show stats header */
+    showStats?: boolean;
+    /** Callback when a badge is clicked */
+    onBadgeClick?: (badge: BadgeWithStatus) => void;
+    /** Theme customization */
+    theme?: {
+        cardBackground?: string;
+        cardBorder?: string;
+    };
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+    /** Custom render for each badge */
+    renderBadge?: (badge: BadgeWithStatus) => React.ReactNode;
+}
+/**
+ * BadgeGrid - Display badge collection in a grid
+ *
+ * Shows badges with unlock status, rarity indicators, and optional filtering.
+ *
+ * @example
+ * ```tsx
+ * <BadgeGrid showLocked showStats onBadgeClick={(badge) => showBadgeModal(badge)} />
+ * ```
+ */
+declare function BadgeGrid({ showLocked, category, columns, className, style, showStats, onBadgeClick, theme, renderLoading, renderError, renderBadge, }: BadgeGridProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+/**
+ * Props for LevelProgress component
+ */
+interface LevelProgressProps {
+    /** Show progress to next tier */
+    showNextTier?: boolean;
+    /** Show tier benefits */
+    showBenefits?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Theme customization */
+    theme?: {
+        cardBackground?: string;
+        progressGradient?: string;
+        textColor?: string;
+    };
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+}
+/**
+ * LevelProgress - Display tier/level progress
+ *
+ * Shows current tier, XP/points, and progress to next tier.
+ *
+ * @example
+ * ```tsx
+ * <LevelProgress showNextTier showBenefits />
+ * ```
+ */
+declare function LevelProgress({ showNextTier, showBenefits, className, style, theme, renderLoading, renderError, }: LevelProgressProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+/**
+ * Props for RewardStore component
+ */
+interface RewardStoreProps {
+    /** Show unavailable items */
+    showUnavailable?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+    /** Custom styles override */
+    style?: React.CSSProperties;
+    /** Show points header */
+    showPointsHeader?: boolean;
+    /** Callback when item is redeemed */
+    onRedeem?: (item: RewardItem, result: RedemptionResult) => void;
+    /** Theme customization */
+    theme?: {
+        cardBackground?: string;
+        buttonColor?: string;
+    };
+    /** Custom render for loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Custom render for error state */
+    renderError?: (error: string) => React.ReactNode;
+    /** Custom render for each item */
+    renderItem?: (item: RewardItem, onRedeem: () => void) => React.ReactNode;
+}
+/**
+ * RewardStore - Display reward catalog with redeem functionality
+ *
+ * Shows available rewards with point costs and redeem buttons.
+ *
+ * @example
+ * ```tsx
+ * <RewardStore
+ *   showPointsHeader
+ *   onRedeem={(item, result) => {
+ *     if (result.success) toast.success(`Redeemed ${item.name}!`);
+ *   }}
+ * />
+ * ```
+ */
+declare function RewardStore({ showUnavailable, className, style, showPointsHeader, onRedeem, theme, renderLoading, renderError, renderItem, }: RewardStoreProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { AffiliateStats, type AffiliateStatsProps, BadgeGrid, type BadgeGridProps, type GamifyContextValue, GamifyPageView, type GamifyPageViewProps, GamifyProvider, type GamifyProviderProps, GamifyTrackClick, type GamifyTrackClickProps, Leaderboard, type LeaderboardProps, LevelProgress, type LevelProgressProps, QuestProgress, type QuestProgressProps, ReferralLink, type ReferralLinkProps, RewardStore, type RewardStoreProps, StreakFlame, type StreakFlameProps, useAffiliateStats, useBadges, useGamify, useIdentify, useLeaderboard, useLoyalty, useQuests, useReferral, useRewards, useSession, useStreaks, useTrack };