import React$1 from 'react'; import * as achievements_engine from 'achievements-engine'; import { AchievementSnapshot, ImportOptions, ImportResult, AchievementEngine, AchievementStorage as AchievementStorage$1, AsyncAchievementStorage as AsyncAchievementStorage$1, StorageType, RestApiStorageConfig, EventMapping, AchievementError } from 'achievements-engine'; export { AchievementBuilder, AchievementEngine, AchievementEngineApi, AchievementError, AchievementSnapshot, AchievementUnlockedEvent, AchievementUpdateResult, AsyncStorageAdapter, AwardDetails, ConfigurationError, EngineConfig, EngineEvent, ErrorEvent, EventMapping, ExportedData, ImportOptions, ImportResult, ImportValidationError, IndexedDBStorage, LocalStorage, MemoryStorage, MetricUpdatedEvent, MetricUpdater, OfflineQueueStorage, RestApiStorage, RestApiStorageConfig, StateChangedEvent, StorageError, StorageQuotaError, StorageType, SyncError, UnsubscribeFn, createConfigHash, exportAchievementData, importAchievementData, isAchievementError, isRecoverableError, isSimpleConfig, normalizeAchievements } from 'achievements-engine'; /** * Notification component interface * Displays achievement unlock notifications */ interface NotificationProps { achievement: AchievementWithStatus; onClose?: () => void; duration?: number; position?: NotificationPosition; theme?: string; icons?: Record; /** * Position in the active notification stack. * Built-in notifications use this to avoid overlap when multiple * achievements unlock from the same update. */ stackIndex?: number; } type NotificationComponent = React$1.FC; /** * Modal component interface * Displays list of achievements (locked/unlocked) */ interface ModalProps { isOpen: boolean; onClose: () => void; achievements: AchievementWithStatus[]; icons?: Record; theme?: string; hideScrollbar?: boolean; density?: AchievementUIDensity; backdropBlur?: AchievementUIBackdropBlur; } type ModalComponent = React$1.FC; type ConfettiShape = 'square' | 'circle' | 'star'; interface ConfettiOptions { /** * Duration in milliseconds before the built-in confetti marker is removed. * Custom confetti components receive this value through `duration`. */ duration?: number; particleCount?: number; colors?: string[]; shapes?: ConfettiShape[]; spread?: number; startVelocity?: number; gravity?: number; scalar?: number; zIndex?: number; } /** * Confetti component interface * Displays celebration animation */ interface ConfettiProps extends ConfettiOptions { show: boolean; } type ConfettiComponent = React$1.FC; /** * Notification positioning options */ type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; /** * Theme configuration interface * Defines styling for all UI components */ interface ThemeConfig { name: string; notification: { background: string; textColor: string; accentColor: string; borderRadius: string; boxShadow: string; fontSize?: { header?: string; title?: string; description?: string; }; }; modal: { overlayColor: string; background: string; textColor: string; accentColor: string; borderRadius: string; headerFontSize?: string; achievementCardBorderRadius?: string; achievementLayout?: 'horizontal' | 'badge'; }; confetti: ConfettiOptions & { colors: string[]; particleCount: number; }; } /** * UI Configuration for AchievementProvider * Allows customization of all UI components */ interface UIConfig { /** * Custom notification component * If not provided, uses the built-in notification component. */ NotificationComponent?: NotificationComponent; /** * Custom modal component used by AchievementsWidget and AchievementsModal. * If not provided, uses the built-in AchievementsModal implementation. */ ModalComponent?: ModalComponent; /** * Custom confetti component * If not provided, uses the built-in confetti component. */ ConfettiComponent?: ConfettiComponent; /** * Built-in theme name. * Built-in themes: 'modern' (default), 'minimal', 'gamified' */ theme?: string; /** * Notification positioning * @default 'top-center' */ notificationPosition?: NotificationPosition; /** * Duration in milliseconds before built-in unlock notifications dismiss. * Custom notification components receive this value through `duration`. * @default 5000 */ notificationDuration?: number; /** * Enable/disable notifications * @default true */ enableNotifications?: boolean; /** * Enable/disable confetti animations * @default true */ enableConfetti?: boolean; /** * Built-in confetti configuration. Ignored when `enableConfetti` is false. * Custom confetti components receive these values as props. */ confetti?: ConfettiOptions; } type AchievementMetricValue = number | string | boolean | Date | null | undefined; type AchievementMetricArrayValue = AchievementMetricValue | AchievementMetricValue[]; interface AchievementMetrics { [key: string]: AchievementMetricValue[]; } interface AchievementDetails { achievementId: string; achievementTitle: string; achievementDescription: string; achievementIconKey?: string; confetti?: AchievementConfetti; } interface AchievementWithStatus extends AchievementDetails { isUnlocked: boolean; } type AchievementConfetti = false | ConfettiOptions; type AchievementUIDensity = 'comfortable' | 'compact'; type AchievementUIBackdropBlur = number | string; interface AchievementCondition { isConditionMet: (value: AchievementMetricArrayValue, state: AchievementState) => boolean; achievementDetails: AchievementDetails | AchievementWithStatus; } interface AchievementConfiguration { [key: string]: AchievementCondition[]; } interface SimpleAchievementDetails { title: string; description?: string; icon?: string; confetti?: AchievementConfetti; } interface CustomAchievementDetails extends SimpleAchievementDetails { condition: (metrics: Record) => boolean; } interface SimpleAchievementConfig { [metric: string]: { [threshold: string]: SimpleAchievementDetails | CustomAchievementDetails; }; } type AchievementConfigurationType = AchievementConfiguration | SimpleAchievementConfig; interface InitialAchievementMetrics { [key: string]: AchievementMetricValue; } interface AchievementState { metrics: AchievementMetrics; unlockedAchievements: string[]; } interface AchievementStorage { getMetrics(): AchievementMetrics; setMetrics(metrics: AchievementMetrics): void; getUnlockedAchievements(): string[]; setUnlockedAchievements(achievements: string[]): void; clear(): void; } interface AsyncAchievementStorage { getMetrics(): Promise; setMetrics(metrics: AchievementMetrics): Promise; getUnlockedAchievements(): Promise; setUnlockedAchievements(achievements: string[]): Promise; clear(): Promise; } type AnyAchievementStorage = AchievementStorage | AsyncAchievementStorage; declare function isAsyncStorage(storage: AnyAchievementStorage): storage is AsyncAchievementStorage; /** * @deprecated This type is outdated and will be removed in 5.0. * Use AchievementContextType from 'react-achievements' instead. * * This legacy interface does not include the 'engine' property. * * @example * ```typescript * // Old (deprecated) * import { AchievementContextValue } from 'react-achievements'; * * // New (recommended) * import { AchievementContextType } from 'react-achievements'; * ``` */ interface AchievementContextValue { updateMetrics: (metrics: AchievementMetrics | ((prev: AchievementMetrics) => AchievementMetrics)) => void; unlockedAchievements: string[]; resetStorage: () => void; } interface StylesProps { badgesButton?: React.CSSProperties; badgesModal?: { overlay?: React.CSSProperties; content?: React.CSSProperties; header?: React.CSSProperties; closeButton?: React.CSSProperties; achievementList?: React.CSSProperties; achievementItem?: React.CSSProperties; achievementTitle?: React.CSSProperties; achievementDescription?: React.CSSProperties; achievementIcon?: React.CSSProperties; lockIcon?: React.CSSProperties; lockedAchievementItem?: React.CSSProperties; }; levelProgress?: { container?: React.CSSProperties; header?: React.CSSProperties; levelLabel?: React.CSSProperties; valueText?: React.CSSProperties; progressTrack?: React.CSSProperties; progressBar?: React.CSSProperties; progressText?: React.CSSProperties; }; } interface AchievementContextType { update: (metrics: Record) => void; achievements: { unlocked: string[]; all: Record; }; snapshot: AchievementSnapshot; reset: () => void; getState: () => { metrics: Record; unlocked: string[]; }; exportData: () => string; importData: (jsonString: string, options?: ImportOptions) => ImportResult; getAllAchievements: () => AchievementWithStatus[]; engine: AchievementEngine; icons: Record; /** * @deprecated Use provider props or the presence of an injected engine directly. * This compatibility flag will be removed in 5.0. */ _isLegacyPattern: boolean; } declare const AchievementContext: React$1.Context; interface AchievementProviderProps { achievements?: AchievementConfigurationType; storage?: AchievementStorage$1 | AsyncAchievementStorage$1 | StorageType; restApiConfig?: RestApiStorageConfig; eventMapping?: EventMapping; engine?: AchievementEngine; children: React$1.ReactNode; icons?: Record; onError?: (error: AchievementError) => void; /** * @deprecated Built-in UI is the default in the web provider. This prop is a * no-op and will be removed in 5.0. */ useBuiltInUI?: boolean; } declare const AchievementProvider$1: React$1.FC; interface AchievementsListRenderItemProps { achievement: AchievementWithStatus; isLocked: boolean; icon: string; index: number; density: AchievementUIDensity; } interface AchievementsListProps { achievements?: AchievementWithStatus[]; showLocked?: boolean; showUnlockConditions?: boolean; icons?: Record; styles?: StylesProps['badgesModal']; emptyState?: React$1.ReactNode; className?: string; density?: AchievementUIDensity; renderAchievement?: (props: AchievementsListRenderItemProps) => React$1.ReactNode; } declare const AchievementsList: React$1.FC; type AchievementsWidgetPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; type AchievementsWidgetPlacement = 'fixed' | 'inline'; interface AchievementsWidgetTriggerButtonProps extends React$1.ButtonHTMLAttributes { 'data-placement': AchievementsWidgetPlacement; 'data-testid': string; } interface AchievementsWidgetTriggerProps { open: () => void; label: string; unlockedCount: number; totalCount: number; unlockedAchievements: AchievementWithStatus[]; allAchievements: AchievementWithStatus[]; buttonProps: AchievementsWidgetTriggerButtonProps; } interface AchievementsWidgetProps { position?: AchievementsWidgetPosition; placement?: AchievementsWidgetPlacement; showAllAchievements?: boolean; showUnlockConditions?: boolean; showCount?: boolean; icons?: Record; theme?: string; density?: AchievementUIDensity; label?: string; icon?: React$1.ReactNode; triggerClassName?: string; renderTrigger?: (props: AchievementsWidgetTriggerProps) => React$1.ReactNode; buttonStyles?: React$1.CSSProperties; modalStyles?: StylesProps['badgesModal']; modalTitle?: React$1.ReactNode; emptyState?: React$1.ReactNode; renderAchievement?: AchievementsListProps['renderAchievement']; hideModalScrollbar?: boolean; modalBackdropBlur?: AchievementUIBackdropBlur; } declare const AchievementsWidget: React$1.FC; interface AchievementsModalProps { isOpen: boolean; onClose: () => void; achievements?: AchievementWithStatus[]; title?: React$1.ReactNode; styles?: StylesProps['badgesModal']; icons?: Record; showLocked?: boolean; showUnlockConditions?: boolean; emptyState?: React$1.ReactNode; renderAchievement?: AchievementsListProps['renderAchievement']; theme?: string; hideScrollbar?: boolean; density?: AchievementUIDensity; backdropBlur?: AchievementUIBackdropBlur; } declare const AchievementsModal: React$1.FC; interface BadgesButtonProps { onClick: () => void; /** * Position for fixed placement mode * Only used when placement='fixed' */ position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; /** * Placement mode * - 'fixed': Traditional floating button with fixed positioning * - 'inline': Regular component that can be placed in drawers, nav bars, etc. * @default 'fixed' */ placement?: 'fixed' | 'inline'; styles?: React$1.CSSProperties; unlockedAchievements: AchievementDetails[]; /** * Theme name for styling (matches notification/modal theme) * @default 'modern' */ theme?: string; } /** * @deprecated Use `AchievementsWidget` for new integrations. This v3 * compatibility wrapper will be removed in 5.0. */ declare const BadgesButton: React$1.FC; interface BadgesModalProps { isOpen: boolean; onClose: () => void; achievements: AchievementDetails[]; styles?: StylesProps['badgesModal']; icons?: Record; showAllAchievements?: boolean; showUnlockConditions?: boolean; allAchievements?: AchievementWithStatus[]; } /** * @deprecated Use `AchievementsModal`, `AchievementsWidget`, or * `AchievementsList` for new integrations. This v3 compatibility wrapper will * be removed in 5.0. */ declare const BadgesModal: React$1.FC; interface BadgesButtonWithModalProps { unlockedAchievements: AchievementDetails[]; position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; placement?: 'fixed' | 'inline'; showAllAchievements?: boolean; allAchievements?: AchievementWithStatus[]; showUnlockConditions?: boolean; icons?: Record; theme?: string; buttonStyles?: React$1.CSSProperties; modalStyles?: StylesProps['badgesModal']; } /** * @deprecated Use `AchievementsWidget` for new integrations. This v3 * compatibility wrapper will be removed in 5.0. */ declare const BadgesButtonWithModal: React$1.FC; interface ConfettiWrapperProps { show: boolean; } /** * @deprecated Use the provider `ui.ConfettiComponent` option or the built-in * confetti default. This v3 compatibility wrapper will be removed in 5.0. */ declare const ConfettiWrapper: React$1.FC; interface LevelProgressProps { level: number | string; currentXP: number; nextLevelXP: number; label?: string; valueLabel?: string; showValues?: boolean; showPercent?: boolean; theme?: string; styles?: StylesProps['levelProgress']; className?: string; } declare const LevelProgress: React$1.FC; interface WebAchievementProviderProps extends AchievementProviderProps { icons?: Record; ui?: UIConfig; /** * @deprecated Built-in UI is the default in v4. This prop is a no-op and will * be removed in 5.0. */ useBuiltInUI?: boolean; } declare const AchievementProvider: React$1.FC; declare const useAchievements: () => AchievementContextType; /** * A simplified hook for achievement tracking. * Provides the v4 happy path for direct metric updates plus explicit state names. */ declare const useSimpleAchievements: () => { track: (metric: string, value: any) => void; increment: (metric: string, amount?: number) => achievements_engine.AchievementUpdateResult; trackMultiple: (metrics: Record) => void; unlockedIds: string[]; unlockedAchievements: achievements_engine.AchievementWithStatus[]; allAchievements: achievements_engine.AchievementWithStatus[]; unlockedCount: number; totalCount: number; metrics: achievements_engine.AchievementMetrics; reset: () => void; getState: () => { metrics: Record; unlocked: string[]; }; exportData: () => string; importData: (jsonString: string, options?: achievements_engine.ImportOptions) => achievements_engine.ImportResult; getAllAchievements: () => achievements_engine.AchievementWithStatus[]; /** * @deprecated Use `unlockedIds` instead. This alias will be removed in 5.0. */ unlocked: string[]; /** * @deprecated Use `allAchievements` instead. This alias will be removed in 5.0. */ all: achievements_engine.AchievementWithStatus[]; }; declare const useAchievementState: () => { unlockedIds: string[]; unlockedAchievements: achievements_engine.AchievementWithStatus[]; allAchievements: achievements_engine.AchievementWithStatus[]; unlockedCount: number; totalCount: number; metrics: achievements_engine.AchievementMetrics; }; /** * Access the active AchievementEngine instance. * * In v4 this works with both provider-created engines (`achievements` prop) and * injected engines (`engine` prop). */ declare const useAchievementEngine: () => AchievementEngine; declare const defaultStyles: Required; declare const defaultAchievementIcons: { default: string; loading: string; error: string; success: string; trophy: string; star: string; }; /** * Built-in notification component * Modern, theme-aware achievement notification with smooth animations */ declare const BuiltInNotification: React$1.FC; /** * Built-in modal component * Modern, theme-aware achievement modal with smooth animations */ declare const BuiltInModal: React$1.FC; /** * Built-in confetti component * Canvas-based confetti animation powered by canvas-confetti. */ declare const BuiltInConfetti: React$1.FC; /** * Hook to track window dimensions * Replacement for react-use's useWindowSize * * @returns Object with width and height properties * * @example * ```tsx * const { width, height } = useWindowSize(); * console.log(`Window size: ${width}x${height}`); * ``` */ declare function useWindowSize(): { width: number; height: number; }; export { AchievementCondition, AchievementConfetti, AchievementConfiguration, AchievementConfigurationType, AchievementContext, AchievementContextType, AchievementContextValue, AchievementDetails, AchievementMetricArrayValue, AchievementMetricValue, AchievementMetrics, AchievementProvider, WebAchievementProviderProps as AchievementProviderProps, AchievementState, AchievementStorage, AchievementUIBackdropBlur, AchievementUIDensity, AchievementWithStatus, AchievementsList, AchievementsListProps, AchievementsListRenderItemProps, AchievementsModal, AchievementsModalProps, AchievementsWidget, AchievementsWidgetPlacement, AchievementsWidgetPosition, AchievementsWidgetProps, AchievementsWidgetTriggerButtonProps, AchievementsWidgetTriggerProps, AnyAchievementStorage, AsyncAchievementStorage, BadgesButton, BadgesButtonWithModal, BadgesModal, BuiltInConfetti, BuiltInModal, BuiltInNotification, ConfettiComponent, ConfettiOptions, ConfettiProps, ConfettiShape, ConfettiWrapper, CustomAchievementDetails, AchievementProvider$1 as HeadlessAchievementProvider, InitialAchievementMetrics, LevelProgress, ModalComponent, ModalProps, NotificationComponent, NotificationPosition, NotificationProps, SimpleAchievementConfig, SimpleAchievementDetails, StylesProps, ThemeConfig, UIConfig, defaultAchievementIcons, defaultStyles, isAsyncStorage, useAchievementEngine, useAchievementState, useAchievements, useSimpleAchievements, useWindowSize };