@gamifyio/react 0.1.2 → 0.1.4

package/dist/index.d.cts

@@ -569,28 +569,18 @@ interface AffiliateStatsProps {
     };
     /** Auto-refresh stats on mount */
     autoRefresh?: boolean;
+    /** Show tier badge with commission rate (default: true) */
+    showTierBadge?: boolean;
+    /** Show referral code with copy button (default: true) */
+    showReferralCode?: boolean;
+    /** Show earnings breakdown section (default: true) */
+    showEarningsBreakdown?: 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;
+declare const AffiliateStats: React.FC<AffiliateStatsProps>;
 /**
  * Props for Leaderboard component
  */
@@ -605,6 +595,12 @@ interface LeaderboardProps {
     currentUserId?: string;
     /** Custom empty state message */
     emptyMessage?: string;
+    /** Show medal icons for top 3 positions (default: true) */
+    showMedals?: boolean;
+    /** Show tier info with percentage (default: true) */
+    showTierInfo?: boolean;
+    /** Show earnings column (default: true) */
+    showEarnings?: boolean;
     /** Theme customization */
     theme?: {
         rowBackground?: string;
@@ -619,27 +615,7 @@ interface LeaderboardProps {
     /** 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;
+declare const Leaderboard: React.FC<LeaderboardProps>;
 /**
  * Props for ReferralLink component
  */
@@ -662,6 +638,16 @@ interface ReferralLinkProps {
     shareText?: string;
     /** Show share button on mobile */
     showShareButton?: boolean;
+    /** Show referrer attribution section (default: true) */
+    showReferrerAttribution?: boolean;
+    /** Current referrer code (who referred this user) */
+    referrerCode?: string | null;
+    /** Callback when referrer is set */
+    onSetReferrer?: (code: string) => void;
+    /** Callback to detect referrer from URL */
+    onDetectFromUrl?: () => void;
+    /** Callback when referrer is cleared */
+    onClearReferrer?: () => void;
     /** Theme customization */
     theme?: {
         inputBackground?: string;
@@ -675,25 +661,7 @@ interface ReferralLinkProps {
     /** 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;
+declare const ReferralLink: React.FC<ReferralLinkProps>;
 /**
  * Props for QuestProgress component
  */
@@ -706,6 +674,12 @@ interface QuestProgressProps {
     className?: string;
     /** Custom styles override */
     style?: React.CSSProperties;
+    /** Enable expandable accordion mode (default: true) */
+    expandable?: boolean;
+    /** Default expanded quest ID (defaults to first in-progress) */
+    defaultExpandedId?: string;
+    /** Show XP reward in header (default: true) */
+    showXpReward?: boolean;
     /** Callback when a quest is completed */
     onComplete?: (quest: QuestWithProgress) => void;
     /** Theme customization */
@@ -722,17 +696,7 @@ interface QuestProgressProps {
     /** 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;
+declare const QuestProgress: React.FC<QuestProgressProps>;
 /**
  * Props for StreakFlame component
  */
@@ -760,17 +724,7 @@ interface StreakFlameProps {
     /** 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;
+declare const StreakFlame: React.FC<StreakFlameProps>;
 /**
  * Props for BadgeGrid component
  */
@@ -785,7 +739,11 @@ interface BadgeGridProps {
     className?: string;
     /** Custom styles override */
     style?: React.CSSProperties;
-    /** Show stats header */
+    /** Show progress summary header (default: true) */
+    showProgressSummary?: boolean;
+    /** Show filter tabs (All/Earned/Locked) (default: true) */
+    showFilterTabs?: boolean;
+    /** @deprecated Use showProgressSummary instead */
     showStats?: boolean;
     /** Callback when a badge is clicked */
     onBadgeClick?: (badge: BadgeWithStatus) => void;
@@ -801,17 +759,7 @@ interface BadgeGridProps {
     /** 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;
+declare const BadgeGrid: React.FC<BadgeGridProps>;
 /**
  * Props for LevelProgress component
  */
@@ -835,17 +783,7 @@ interface LevelProgressProps {
     /** 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;
+declare const LevelProgress: React.FC<LevelProgressProps>;
 /**
  * Props for RewardStore component
  */
@@ -872,21 +810,6 @@ interface RewardStoreProps {
     /** 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;
+declare const RewardStore: React.FC<RewardStoreProps>;
 
 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 };

package/dist/index.d.ts

@@ -569,28 +569,18 @@ interface AffiliateStatsProps {
     };
     /** Auto-refresh stats on mount */
     autoRefresh?: boolean;
+    /** Show tier badge with commission rate (default: true) */
+    showTierBadge?: boolean;
+    /** Show referral code with copy button (default: true) */
+    showReferralCode?: boolean;
+    /** Show earnings breakdown section (default: true) */
+    showEarningsBreakdown?: 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;
+declare const AffiliateStats: React.FC<AffiliateStatsProps>;
 /**
  * Props for Leaderboard component
  */
@@ -605,6 +595,12 @@ interface LeaderboardProps {
     currentUserId?: string;
     /** Custom empty state message */
     emptyMessage?: string;
+    /** Show medal icons for top 3 positions (default: true) */
+    showMedals?: boolean;
+    /** Show tier info with percentage (default: true) */
+    showTierInfo?: boolean;
+    /** Show earnings column (default: true) */
+    showEarnings?: boolean;
     /** Theme customization */
     theme?: {
         rowBackground?: string;
@@ -619,27 +615,7 @@ interface LeaderboardProps {
     /** 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;
+declare const Leaderboard: React.FC<LeaderboardProps>;
 /**
  * Props for ReferralLink component
  */
@@ -662,6 +638,16 @@ interface ReferralLinkProps {
     shareText?: string;
     /** Show share button on mobile */
     showShareButton?: boolean;
+    /** Show referrer attribution section (default: true) */
+    showReferrerAttribution?: boolean;
+    /** Current referrer code (who referred this user) */
+    referrerCode?: string | null;
+    /** Callback when referrer is set */
+    onSetReferrer?: (code: string) => void;
+    /** Callback to detect referrer from URL */
+    onDetectFromUrl?: () => void;
+    /** Callback when referrer is cleared */
+    onClearReferrer?: () => void;
     /** Theme customization */
     theme?: {
         inputBackground?: string;
@@ -675,25 +661,7 @@ interface ReferralLinkProps {
     /** 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;
+declare const ReferralLink: React.FC<ReferralLinkProps>;
 /**
  * Props for QuestProgress component
  */
@@ -706,6 +674,12 @@ interface QuestProgressProps {
     className?: string;
     /** Custom styles override */
     style?: React.CSSProperties;
+    /** Enable expandable accordion mode (default: true) */
+    expandable?: boolean;
+    /** Default expanded quest ID (defaults to first in-progress) */
+    defaultExpandedId?: string;
+    /** Show XP reward in header (default: true) */
+    showXpReward?: boolean;
     /** Callback when a quest is completed */
     onComplete?: (quest: QuestWithProgress) => void;
     /** Theme customization */
@@ -722,17 +696,7 @@ interface QuestProgressProps {
     /** 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;
+declare const QuestProgress: React.FC<QuestProgressProps>;
 /**
  * Props for StreakFlame component
  */
@@ -760,17 +724,7 @@ interface StreakFlameProps {
     /** 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;
+declare const StreakFlame: React.FC<StreakFlameProps>;
 /**
  * Props for BadgeGrid component
  */
@@ -785,7 +739,11 @@ interface BadgeGridProps {
     className?: string;
     /** Custom styles override */
     style?: React.CSSProperties;
-    /** Show stats header */
+    /** Show progress summary header (default: true) */
+    showProgressSummary?: boolean;
+    /** Show filter tabs (All/Earned/Locked) (default: true) */
+    showFilterTabs?: boolean;
+    /** @deprecated Use showProgressSummary instead */
     showStats?: boolean;
     /** Callback when a badge is clicked */
     onBadgeClick?: (badge: BadgeWithStatus) => void;
@@ -801,17 +759,7 @@ interface BadgeGridProps {
     /** 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;
+declare const BadgeGrid: React.FC<BadgeGridProps>;
 /**
  * Props for LevelProgress component
  */
@@ -835,17 +783,7 @@ interface LevelProgressProps {
     /** 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;
+declare const LevelProgress: React.FC<LevelProgressProps>;
 /**
  * Props for RewardStore component
  */
@@ -872,21 +810,6 @@ interface RewardStoreProps {
     /** 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;
+declare const RewardStore: React.FC<RewardStoreProps>;
 
 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 };