react-achievements 3.5.0 → 3.6.1

package/dist/index.js

@@ -1,9 +1,6 @@
-import React, { createContext, useState, useRef, useEffect, useContext } from 'react';
+import React, { useState, useEffect, createContext, useRef, useContext } from 'react';
 import Modal from 'react-modal';
 import Confetti from 'react-confetti';
-import { useWindowSize } from 'react-use';
-import { toast, ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 
 const isDate = (value) => {
     return value instanceof Date;
@@ -861,6 +858,122 @@ class OfflineQueueStorage {
     }
 }
 
+/**
+ * Built-in theme presets
+ */
+const builtInThemes = {
+    /**
+     * Modern theme - Dark gradients with vibrant accents
+     * Inspired by contemporary achievement systems (Discord, Steam, Xbox)
+     */
+    modern: {
+        name: 'modern',
+        notification: {
+            background: 'linear-gradient(135deg, rgba(30, 30, 50, 0.98) 0%, rgba(50, 50, 70, 0.98) 100%)',
+            textColor: '#ffffff',
+            accentColor: '#4CAF50',
+            borderRadius: '12px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
+            fontSize: {
+                header: '12px',
+                title: '18px',
+                description: '14px',
+            },
+        },
+        modal: {
+            overlayColor: 'rgba(0, 0, 0, 0.85)',
+            background: 'linear-gradient(135deg, #1e1e32 0%, #323246 100%)',
+            textColor: '#ffffff',
+            accentColor: '#4CAF50',
+            borderRadius: '16px',
+            headerFontSize: '28px',
+        },
+        confetti: {
+            colors: ['#FFD700', '#4CAF50', '#2196F3', '#FF6B6B'],
+            particleCount: 50,
+            shapes: ['circle', 'square'],
+        },
+    },
+    /**
+     * Minimal theme - Clean, light design with subtle accents
+     * Perfect for professional or minimalist applications
+     */
+    minimal: {
+        name: 'minimal',
+        notification: {
+            background: 'rgba(255, 255, 255, 0.98)',
+            textColor: '#333333',
+            accentColor: '#4CAF50',
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            fontSize: {
+                header: '11px',
+                title: '16px',
+                description: '13px',
+            },
+        },
+        modal: {
+            overlayColor: 'rgba(0, 0, 0, 0.5)',
+            background: '#ffffff',
+            textColor: '#333333',
+            accentColor: '#4CAF50',
+            borderRadius: '12px',
+            headerFontSize: '24px',
+        },
+        confetti: {
+            colors: ['#4CAF50', '#2196F3'],
+            particleCount: 30,
+            shapes: ['circle'],
+        },
+    },
+    /**
+     * Gamified theme - Modern gaming aesthetic with sci-fi colors
+     * Dark navy backgrounds with cyan and orange accents (2024 gaming trend)
+     * Features square/badge-shaped achievement cards
+     */
+    gamified: {
+        name: 'gamified',
+        notification: {
+            background: 'linear-gradient(135deg, rgba(5, 8, 22, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%)',
+            textColor: '#22d3ee', // Bright cyan
+            accentColor: '#f97316', // Bright orange
+            borderRadius: '6px',
+            boxShadow: '0 8px 32px rgba(34, 211, 238, 0.4), 0 0 20px rgba(249, 115, 22, 0.3)',
+            fontSize: {
+                header: '13px',
+                title: '20px',
+                description: '15px',
+            },
+        },
+        modal: {
+            overlayColor: 'rgba(5, 8, 22, 0.85)',
+            background: 'linear-gradient(135deg, #0f172a 0%, #050816 100%)',
+            textColor: '#22d3ee', // Bright cyan
+            accentColor: '#f97316', // Bright orange
+            borderRadius: '8px',
+            headerFontSize: '32px',
+            achievementCardBorderRadius: '8px', // Square badge-like cards
+            achievementLayout: 'badge', // Use badge/grid layout instead of horizontal list
+        },
+        confetti: {
+            colors: ['#22d3ee', '#f97316', '#a855f7', '#eab308'], // Cyan, orange, purple, yellow
+            particleCount: 100,
+            shapes: ['circle', 'square'],
+        },
+    },
+};
+/**
+ * Retrieve a theme by name (internal use only)
+ * Only checks built-in themes
+ *
+ * @param name - Theme name (built-in only)
+ * @returns Theme configuration or undefined if not found
+ * @internal
+ */
+function getTheme(name) {
+    return builtInThemes[name];
+}
+
 const getPositionStyles = (position) => {
     const base = {
         position: 'fixed',
@@ -878,13 +991,34 @@ const getPositionStyles = (position) => {
             return Object.assign(Object.assign({}, base), { bottom: 0, right: 0 });
     }
 };
-const BadgesButton = ({ onClick, position, styles = {}, unlockedAchievements }) => {
-    const baseStyles = Object.assign(Object.assign({ backgroundColor: '#4CAF50', color: 'white', padding: '10px 20px', border: 'none', borderRadius: '20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '16px', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transition: 'transform 0.2s ease-in-out' }, getPositionStyles(position)), styles);
+const BadgesButton = ({ onClick, position = 'bottom-right', placement = 'fixed', styles = {}, unlockedAchievements, theme = 'modern', }) => {
+    // Get theme configuration for consistent styling
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const accentColor = themeConfig.notification.accentColor;
+    // Different styling for fixed vs inline placement
+    const baseStyles = placement === 'inline'
+        ? Object.assign({ 
+            // Inline mode: looks like a navigation item
+            backgroundColor: 'transparent', color: themeConfig.notification.textColor, padding: '12px 16px', border: 'none', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', fontSize: '15px', width: '100%', textAlign: 'left', transition: 'background-color 0.2s ease-in-out' }, styles) : Object.assign(Object.assign({ 
+        // Fixed mode: floating button
+        backgroundColor: accentColor, color: 'white', padding: '10px 20px', border: 'none', borderRadius: '20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '16px', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transition: 'transform 0.2s ease-in-out' }, getPositionStyles(position)), styles);
     return (React.createElement("button", { onClick: onClick, style: baseStyles, onMouseEnter: (e) => {
-            e.target.style.transform = 'scale(1.05)';
+            if (placement === 'inline') {
+                // Inline mode: subtle background color change
+                e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+            }
+            else {
+                // Fixed mode: scale transformation
+                e.target.style.transform = 'scale(1.05)';
+            }
         }, onMouseLeave: (e) => {
-            e.target.style.transform = 'scale(1)';
-        } },
+            if (placement === 'inline') {
+                e.target.style.backgroundColor = 'transparent';
+            }
+            else {
+                e.target.style.transform = 'scale(1)';
+            }
+        }, "data-placement": placement, "data-testid": "badges-button" },
         "\uD83C\uDFC6 Achievements (",
         unlockedAchievements.length,
         ")"));
@@ -1036,6 +1170,46 @@ const BadgesModal = ({ isOpen, onClose, achievements, styles = {}, icons = {}, s
         })())));
 };
 
+/**
+ * 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}`);
+ * ```
+ */
+function useWindowSize() {
+    const [size, setSize] = useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    });
+    useEffect(() => {
+        // Handle SSR - window may not be defined
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const handleResize = () => {
+            setSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        // Set initial size
+        handleResize();
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+        // Cleanup
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return size;
+}
+
 const ConfettiWrapper = ({ show }) => {
     const { width, height } = useWindowSize();
     if (!show)
@@ -1350,8 +1524,547 @@ function preserveMetrics(current, imported) {
     return preserved;
 }
 
+/**
+ * Built-in notification component
+ * Modern, theme-aware achievement notification with smooth animations
+ */
+const BuiltInNotification = ({ achievement, onClose, duration = 5000, position = 'top-center', theme = 'modern', }) => {
+    var _a, _b, _c;
+    const [isVisible, setIsVisible] = useState(false);
+    const [isExiting, setIsExiting] = useState(false);
+    //  Get theme configuration
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const { notification: themeStyles } = themeConfig;
+    useEffect(() => {
+        // Slide in animation
+        const showTimer = setTimeout(() => setIsVisible(true), 10);
+        // Auto-dismiss
+        const dismissTimer = setTimeout(() => {
+            setIsExiting(true);
+            setTimeout(() => onClose === null || onClose === void 0 ? void 0 : onClose(), 300);
+        }, duration);
+        return () => {
+            clearTimeout(showTimer);
+            clearTimeout(dismissTimer);
+        };
+    }, [duration, onClose]);
+    const getPositionStyles = () => {
+        const base = {
+            position: 'fixed',
+            zIndex: 9999,
+        };
+        switch (position) {
+            case 'top-center':
+                return Object.assign(Object.assign({}, base), { top: 20, left: '50%', transform: 'translateX(-50%)' });
+            case 'top-left':
+                return Object.assign(Object.assign({}, base), { top: 20, left: 20 });
+            case 'top-right':
+                return Object.assign(Object.assign({}, base), { top: 20, right: 20 });
+            case 'bottom-center':
+                return Object.assign(Object.assign({}, base), { bottom: 20, left: '50%', transform: 'translateX(-50%)' });
+            case 'bottom-left':
+                return Object.assign(Object.assign({}, base), { bottom: 20, left: 20 });
+            case 'bottom-right':
+                return Object.assign(Object.assign({}, base), { bottom: 20, right: 20 });
+            default:
+                return Object.assign(Object.assign({}, base), { top: 20, left: '50%', transform: 'translateX(-50%)' });
+        }
+    };
+    const containerStyles = Object.assign(Object.assign({}, getPositionStyles()), { background: themeStyles.background, borderRadius: themeStyles.borderRadius, boxShadow: themeStyles.boxShadow, padding: '16px 24px', minWidth: '320px', maxWidth: '500px', display: 'flex', alignItems: 'center', gap: '16px', opacity: isVisible && !isExiting ? 1 : 0, transform: position.startsWith('top')
+            ? `translateY(${isVisible && !isExiting ? '0' : '-20px'}) ${position.includes('center') ? 'translateX(-50%)' : ''}`
+            : `translateY(${isVisible && !isExiting ? '0' : '20px'}) ${position.includes('center') ? 'translateX(-50%)' : ''}`, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', pointerEvents: isVisible ? 'auto' : 'none' });
+    const iconStyles = {
+        fontSize: '48px',
+        lineHeight: 1,
+        flexShrink: 0,
+    };
+    const contentStyles = {
+        flex: 1,
+        color: themeStyles.textColor,
+        minWidth: 0,
+    };
+    const headerStyles = {
+        fontSize: ((_a = themeStyles.fontSize) === null || _a === void 0 ? void 0 : _a.header) || '12px',
+        textTransform: 'uppercase',
+        letterSpacing: '1px',
+        opacity: 0.8,
+        marginBottom: '4px',
+        color: themeStyles.accentColor,
+        fontWeight: 600,
+    };
+    const titleStyles = {
+        fontSize: ((_b = themeStyles.fontSize) === null || _b === void 0 ? void 0 : _b.title) || '18px',
+        fontWeight: 'bold',
+        marginBottom: '4px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    };
+    const descriptionStyles = {
+        fontSize: ((_c = themeStyles.fontSize) === null || _c === void 0 ? void 0 : _c.description) || '14px',
+        opacity: 0.9,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: 'vertical',
+    };
+    const closeButtonStyles = {
+        background: 'none',
+        border: 'none',
+        color: themeStyles.textColor,
+        fontSize: '24px',
+        cursor: 'pointer',
+        opacity: 0.6,
+        transition: 'opacity 0.2s',
+        padding: '4px',
+        flexShrink: 0,
+        lineHeight: 1,
+    };
+    return (React.createElement("div", { style: containerStyles, "data-testid": "built-in-notification" },
+        React.createElement("div", { style: iconStyles }, achievement.icon),
+        React.createElement("div", { style: contentStyles },
+            React.createElement("div", { style: headerStyles }, "Achievement Unlocked!"),
+            React.createElement("div", { style: titleStyles }, achievement.title),
+            achievement.description && (React.createElement("div", { style: descriptionStyles }, achievement.description))),
+        React.createElement("button", { onClick: () => {
+                setIsExiting(true);
+                setTimeout(() => onClose === null || onClose === void 0 ? void 0 : onClose(), 300);
+            }, style: closeButtonStyles, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.6'), "aria-label": "Close notification" }, "\u00D7")));
+};
+
+/**
+ * Built-in confetti component
+ * Lightweight CSS-based confetti animation
+ */
+const BuiltInConfetti = ({ show, duration = 5000, particleCount = 50, colors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'], }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const { width, height } = useWindowSize();
+    useEffect(() => {
+        if (show) {
+            setIsVisible(true);
+            const timer = setTimeout(() => setIsVisible(false), duration);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setIsVisible(false);
+        }
+    }, [show, duration]);
+    if (!isVisible)
+        return null;
+    const containerStyles = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 10001,
+        overflow: 'hidden',
+    };
+    // Generate particles
+    const particles = Array.from({ length: particleCount }, (_, i) => {
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        const startX = Math.random() * width;
+        const rotation = Math.random() * 360;
+        const fallDuration = 3 + Math.random() * 2; // 3-5 seconds
+        const delay = Math.random() * 0.5; // 0-0.5s delay
+        const shape = Math.random() > 0.5 ? 'circle' : 'square';
+        const particleStyles = {
+            position: 'absolute',
+            top: '-20px',
+            left: `${startX}px`,
+            width: '10px',
+            height: '10px',
+            backgroundColor: color,
+            borderRadius: shape === 'circle' ? '50%' : '0',
+            transform: `rotate(${rotation}deg)`,
+            animation: `confettiFall ${fallDuration}s linear ${delay}s forwards`,
+            opacity: 0.9,
+        };
+        return React.createElement("div", { key: i, style: particleStyles, "data-testid": "confetti-particle" });
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+          @keyframes confettiFall {
+            0% {
+              transform: translateY(0) rotate(0deg);
+              opacity: 1;
+            }
+            100% {
+              transform: translateY(${height + 50}px) rotate(720deg);
+              opacity: 0;
+            }
+          }
+        `),
+        React.createElement("div", { style: containerStyles, "data-testid": "built-in-confetti" }, particles)));
+};
+
+/**
+ * Legacy UI library detection system
+ * Attempts to dynamically import external UI libraries
+ * Shows deprecation warnings when detected
+ */
+let cachedLibraries = null;
+let detectionAttempted = false;
+let deprecationWarningShown = false;
+/**
+ * Attempts to dynamically import legacy UI libraries
+ * Uses try/catch to gracefully handle missing dependencies
+ * Caches result to avoid multiple import attempts
+ *
+ * @returns Promise resolving to LegacyLibraries object
+ */
+function detectLegacyLibraries() {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (detectionAttempted && cachedLibraries !== null) {
+            return cachedLibraries;
+        }
+        detectionAttempted = true;
+        const libraries = {};
+        // Try to import react-toastify
+        try {
+            const toastifyModule = yield import('react-toastify');
+            libraries.toast = toastifyModule.toast;
+            libraries.ToastContainer = toastifyModule.ToastContainer;
+        }
+        catch (_a) {
+            // Not installed, will use built-in notification
+        }
+        // Try to import react-modal
+        try {
+            const modalModule = yield import('react-modal');
+            libraries.Modal = modalModule.default;
+        }
+        catch (_b) {
+            // Not installed, will use built-in modal
+        }
+        // Try to import react-confetti
+        try {
+            const confettiModule = yield import('react-confetti');
+            libraries.Confetti = confettiModule.default;
+        }
+        catch (_c) {
+            // Not installed, will use built-in confetti
+        }
+        // Try to import react-use (only for useWindowSize)
+        try {
+            const reactUseModule = yield import('react-use');
+            libraries.useWindowSize = reactUseModule.useWindowSize;
+        }
+        catch (_d) {
+            // Not installed, will use built-in useWindowSize
+        }
+        cachedLibraries = libraries;
+        // Show deprecation warning if ANY legacy library is found
+        if (!deprecationWarningShown && Object.keys(libraries).length > 0) {
+            const foundLibraries = [];
+            if (libraries.toast)
+                foundLibraries.push('react-toastify');
+            if (libraries.Modal)
+                foundLibraries.push('react-modal');
+            if (libraries.Confetti)
+                foundLibraries.push('react-confetti');
+            if (libraries.useWindowSize)
+                foundLibraries.push('react-use');
+            console.warn(`[react-achievements] DEPRECATION WARNING: External UI dependencies (${foundLibraries.join(', ')}) are deprecated and will become fully optional in v4.0.0.\n\n` +
+                `The library now includes built-in UI components with modern design and theme support.\n\n` +
+                `To migrate:\n` +
+                `1. Add "useBuiltInUI={true}" to your AchievementProvider\n` +
+                `2. Test your application (UI will change to modern theme)\n` +
+                `3. Optionally customize with theme="minimal" or theme="gamified"\n` +
+                `4. Remove external dependencies from package.json\n\n` +
+                `To silence this warning, set useBuiltInUI={true} in AchievementProvider.\n\n` +
+                `Learn more: https://github.com/dave-b-b/react-achievements#migration-guide`);
+            deprecationWarningShown = true;
+        }
+        return libraries;
+    });
+}
+
+/**
+ * Built-in modal component
+ * Modern, theme-aware achievement modal with smooth animations
+ */
+const BuiltInModal = ({ isOpen, onClose, achievements, icons = {}, theme = 'modern', }) => {
+    // Merge custom icons with defaults
+    const mergedIcons = Object.assign(Object.assign({}, defaultAchievementIcons), icons);
+    // Get theme configuration
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const { modal: themeStyles } = themeConfig;
+    useEffect(() => {
+        if (isOpen) {
+            // Lock body scroll when modal is open
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            // Restore body scroll
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const overlayStyles = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: themeStyles.overlayColor,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+        animation: 'fadeIn 0.3s ease-in-out',
+    };
+    const modalStyles = {
+        background: themeStyles.background,
+        borderRadius: themeStyles.borderRadius,
+        padding: '32px',
+        maxWidth: '600px',
+        width: '90%',
+        maxHeight: '80vh',
+        overflow: 'auto',
+        boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+        animation: 'scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        position: 'relative',
+    };
+    const headerStyles = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '24px',
+    };
+    const titleStyles = {
+        margin: 0,
+        color: themeStyles.textColor,
+        fontSize: themeStyles.headerFontSize || '28px',
+        fontWeight: 'bold',
+    };
+    const closeButtonStyles = {
+        background: 'none',
+        border: 'none',
+        fontSize: '32px',
+        cursor: 'pointer',
+        color: themeStyles.textColor,
+        opacity: 0.6,
+        transition: 'opacity 0.2s',
+        padding: 0,
+        lineHeight: 1,
+    };
+    const isBadgeLayout = themeStyles.achievementLayout === 'badge';
+    const listStyles = isBadgeLayout
+        ? {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+            gap: '16px',
+        }
+        : {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+        };
+    const getAchievementItemStyles = (isUnlocked) => {
+        const baseStyles = {
+            borderRadius: themeStyles.achievementCardBorderRadius || '12px',
+            backgroundColor: isUnlocked
+                ? `${themeStyles.accentColor}1A` // 10% opacity
+                : 'rgba(255, 255, 255, 0.05)',
+            border: `2px solid ${isUnlocked ? themeStyles.accentColor : 'rgba(255, 255, 255, 0.1)'}`,
+            opacity: isUnlocked ? 1 : 0.5,
+            transition: 'all 0.2s',
+        };
+        if (isBadgeLayout) {
+            // Badge layout: vertical, centered, square-ish
+            return Object.assign(Object.assign({}, baseStyles), { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '20px 12px', aspectRatio: '1 / 1.1', minHeight: '160px' });
+        }
+        else {
+            // Horizontal layout (default)
+            return Object.assign(Object.assign({}, baseStyles), { display: 'flex', gap: '16px', padding: '16px' });
+        }
+    };
+    const getIconContainerStyles = (isUnlocked) => {
+        if (isBadgeLayout) {
+            return {
+                fontSize: '48px',
+                lineHeight: 1,
+                marginBottom: '8px',
+                opacity: isUnlocked ? 1 : 0.3,
+            };
+        }
+        return {
+            fontSize: '40px',
+            flexShrink: 0,
+            lineHeight: 1,
+            opacity: isUnlocked ? 1 : 0.3,
+        };
+    };
+    const contentStyles = isBadgeLayout
+        ? {
+            width: '100%',
+        }
+        : {
+            flex: 1,
+            minWidth: 0,
+        };
+    const achievementTitleStyles = isBadgeLayout
+        ? {
+            margin: '0 0 4px 0',
+            color: themeStyles.textColor,
+            fontSize: '14px',
+            fontWeight: 'bold',
+            lineHeight: '1.3',
+        }
+        : {
+            margin: '0 0 8px 0',
+            color: themeStyles.textColor,
+            fontSize: '18px',
+            fontWeight: 'bold',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        };
+    const achievementDescriptionStyles = isBadgeLayout
+        ? {
+            margin: 0,
+            color: themeStyles.textColor,
+            opacity: 0.7,
+            fontSize: '11px',
+            lineHeight: '1.3',
+        }
+        : {
+            margin: 0,
+            color: themeStyles.textColor,
+            opacity: 0.8,
+            fontSize: '14px',
+        };
+    const getLockIconStyles = () => {
+        if (isBadgeLayout) {
+            return {
+                position: 'absolute',
+                top: '8px',
+                right: '8px',
+                fontSize: '18px',
+                opacity: 0.6,
+            };
+        }
+        return {
+            fontSize: '24px',
+            flexShrink: 0,
+            opacity: 0.5,
+        };
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes scaleIn {
+            from {
+              transform: scale(0.9);
+              opacity: 0;
+            }
+            to {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+        `),
+        React.createElement("div", { style: overlayStyles, onClick: onClose, "data-testid": "built-in-modal-overlay" },
+            React.createElement("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), "data-testid": "built-in-modal" },
+                React.createElement("div", { style: headerStyles },
+                    React.createElement("h2", { style: titleStyles }, "\uD83C\uDFC6 Achievements"),
+                    React.createElement("button", { onClick: onClose, style: closeButtonStyles, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.6'), "aria-label": "Close modal" }, "\u00D7")),
+                React.createElement("div", { style: listStyles }, achievements.length === 0 ? (React.createElement("div", { style: { textAlign: 'center', padding: '40px 20px', color: themeStyles.textColor, opacity: 0.6 } }, "No achievements yet. Start exploring to unlock them!")) : (achievements.map((achievement) => {
+                    const icon = (achievement.achievementIconKey &&
+                        mergedIcons[achievement.achievementIconKey]) ||
+                        mergedIcons.default ||
+                        '⭐';
+                    return (React.createElement("div", { key: achievement.achievementId, style: Object.assign(Object.assign({}, getAchievementItemStyles(achievement.isUnlocked)), { position: isBadgeLayout ? 'relative' : 'static' }) },
+                        React.createElement("div", { style: getIconContainerStyles(achievement.isUnlocked) }, icon),
+                        React.createElement("div", { style: contentStyles },
+                            React.createElement("h3", { style: achievementTitleStyles }, achievement.achievementTitle),
+                            React.createElement("p", { style: achievementDescriptionStyles }, achievement.achievementDescription)),
+                        !achievement.isUnlocked && (React.createElement("div", { style: getLockIconStyles() }, "\uD83D\uDD12"))));
+                })))))));
+};
+
+/**
+ * Legacy library wrappers for backwards compatibility
+ * Wraps external UI libraries to match our component interfaces
+ */
+/**
+ * Wrapper for react-toastify toast notifications
+ * Falls back to built-in notification if not available
+ */
+const createLegacyToastNotification = (libraries) => {
+    return ({ achievement, onClose }) => {
+        const { toast } = libraries;
+        useEffect(() => {
+            if (!toast)
+                return;
+            // Call toast.success with achievement content
+            toast.success(React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                React.createElement("span", { style: { fontSize: '2em', marginRight: '10px' } }, achievement.icon),
+                React.createElement("div", null,
+                    React.createElement("div", { style: { fontSize: '12px', opacity: 0.8, marginBottom: '4px' } }, "Achievement Unlocked!"),
+                    React.createElement("div", { style: { fontWeight: 'bold', marginBottom: '4px' } }, achievement.title),
+                    achievement.description && (React.createElement("div", { style: { fontSize: '13px', opacity: 0.9 } }, achievement.description)))), {
+                position: 'top-right',
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                toastId: achievement.id,
+                onClose,
+            });
+        }, [achievement, toast, onClose]);
+        return null; // Toast handles its own rendering
+    };
+};
+/**
+ * Wrapper for react-confetti Confetti component
+ * Falls back to built-in confetti if not available
+ */
+const createLegacyConfettiWrapper = (libraries) => {
+    return ({ show, duration = 5000, particleCount = 200, colors }) => {
+        const { Confetti, useWindowSize: legacyUseWindowSize } = libraries;
+        // If Confetti not available, use built-in
+        if (!Confetti) {
+            return (React.createElement(BuiltInConfetti, { show: show, duration: duration, particleCount: particleCount, colors: colors }));
+        }
+        // Use react-confetti with react-use's useWindowSize if available
+        // Otherwise fall back to default dimensions
+        let width = 0;
+        let height = 0;
+        if (legacyUseWindowSize) {
+            const size = legacyUseWindowSize();
+            width = size.width;
+            height = size.height;
+        }
+        else if (typeof window !== 'undefined') {
+            width = window.innerWidth;
+            height = window.innerHeight;
+        }
+        if (!show)
+            return null;
+        return (React.createElement(Confetti, { width: width, height: height, numberOfPieces: particleCount, recycle: false, colors: colors, style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                zIndex: 10001,
+                pointerEvents: 'none',
+            } }));
+    };
+};
+
 const AchievementContext = createContext(undefined);
-const AchievementProvider = ({ achievements: achievementsConfig, storage = StorageType.Local, children, icons = {}, onError, restApiConfig, }) => {
+const AchievementProvider = ({ achievements: achievementsConfig, storage = StorageType.Local, children, icons = {}, onError, restApiConfig, ui = {}, useBuiltInUI = false, }) => {
     // Normalize the configuration to the complex format
     const achievements = normalizeAchievements(achievementsConfig);
     const [achievementState, setAchievementState] = useState({
@@ -1365,6 +2078,10 @@ const AchievementProvider = ({ achievements: achievementsConfig, storage = Stora
     const metricsUpdatedRef = useRef(false);
     const [showConfetti, setShowConfetti] = useState(false);
     const [_currentAchievement, setCurrentAchievement] = useState(null);
+    // NEW: UI component resolution state (v3.6.0)
+    const [legacyLibraries, setLegacyLibraries] = useState(null);
+    const [uiReady, setUiReady] = useState(useBuiltInUI); // Ready immediately if forcing built-in
+    const [currentNotification, setCurrentNotification] = useState(null);
     if (!storageRef.current) {
         if (typeof storage === 'string') {
             // StorageType enum
@@ -1446,6 +2163,30 @@ const AchievementProvider = ({ achievements: achievementsConfig, storage = Stora
             console.error('Error saving notified achievements', e);
         }
     };
+    // NEW: Detect legacy UI libraries on mount (v3.6.0)
+    useEffect(() => {
+        if (useBuiltInUI) {
+            // User explicitly wants built-in UI, skip detection
+            setUiReady(true);
+            return;
+        }
+        // Attempt to detect legacy libraries
+        detectLegacyLibraries().then((libs) => {
+            setLegacyLibraries(libs);
+            setUiReady(true);
+        });
+    }, [useBuiltInUI]);
+    // NEW: Resolve UI components based on detection and config (v3.6.0)
+    const NotificationComponent = ui.NotificationComponent ||
+        (useBuiltInUI ? BuiltInNotification :
+            legacyLibraries && Object.keys(legacyLibraries).length > 0 && legacyLibraries.toast
+                ? createLegacyToastNotification(legacyLibraries)
+                : BuiltInNotification);
+    const ConfettiComponentResolved = ui.ConfettiComponent ||
+        (useBuiltInUI ? BuiltInConfetti :
+            legacyLibraries && Object.keys(legacyLibraries).length > 0 && legacyLibraries.Confetti
+                ? createLegacyConfettiWrapper(legacyLibraries)
+                : BuiltInConfetti);
     useEffect(() => {
         if (!initialLoadRef.current) {
             const savedUnlocked = storageImpl.getUnlockedAchievements() || [];
@@ -1495,30 +2236,21 @@ const AchievementProvider = ({ achievements: achievementsConfig, storage = Stora
             const allUnlocked = [...achievementState.unlocked, ...newlyUnlockedAchievements];
             setAchievementState(prev => (Object.assign(Object.assign({}, prev), { unlocked: allUnlocked })));
             storageImpl.setUnlockedAchievements(allUnlocked);
-            if (achievementToShow) {
+            if (achievementToShow && (ui.enableNotifications !== false)) {
                 const achievement = achievementToShow;
-                // Show toast notification
+                // Get icon to display
                 let iconToDisplay = '🏆';
                 if (achievement.achievementIconKey && achievement.achievementIconKey in icons) {
                     iconToDisplay = icons[achievement.achievementIconKey];
                 }
-                const toastId = achievement.achievementId
-                    ? `achievement-${achievement.achievementId}`
-                    : `achievement-${Date.now()}`;
-                toast.success(React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                    React.createElement("span", { style: { fontSize: '2em', marginRight: '10px' } }, iconToDisplay),
-                    React.createElement("div", null,
-                        React.createElement("h4", { style: { margin: '0 0 8px 0' } }, "Achievement Unlocked! \uD83C\uDF89"),
-                        React.createElement("div", { style: { fontWeight: 'bold' } }, achievement.achievementTitle),
-                        React.createElement("div", { style: { color: '#666' } }, achievement.achievementDescription))), {
-                    position: "top-right",
-                    autoClose: 5000,
-                    hideProgressBar: false,
-                    closeOnClick: true,
-                    pauseOnHover: true,
-                    draggable: true,
-                    progress: undefined,
-                    toastId
+                // NEW: Use resolved notification component (v3.6.0)
+                setCurrentNotification({
+                    achievement: {
+                        id: achievement.achievementId || `achievement-${Date.now()}`,
+                        title: achievement.achievementTitle || 'Achievement Unlocked!',
+                        description: achievement.achievementDescription || '',
+                        icon: iconToDisplay,
+                    },
                 });
                 // Update seen achievements
                 if (achievement.achievementId) {
@@ -1643,8 +2375,8 @@ const AchievementProvider = ({ achievements: achievementsConfig, storage = Stora
             getAllAchievements,
         } },
         children,
-        React.createElement(ToastContainer, { position: "top-right", autoClose: 5000, hideProgressBar: false, newestOnTop: true, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }),
-        React.createElement(ConfettiWrapper, { show: showConfetti })));
+        uiReady && currentNotification && ui.enableNotifications !== false && (React.createElement(NotificationComponent, { achievement: currentNotification.achievement, onClose: () => setCurrentNotification(null), duration: 5000, position: ui.notificationPosition || 'top-center', theme: ui.theme || 'modern' })),
+        uiReady && ui.enableConfetti !== false && (React.createElement(ConfettiComponentResolved, { show: showConfetti, duration: 5000 }))));
 };
 
 const useAchievements = () => {
@@ -2011,5 +2743,5 @@ class AchievementBuilder {
     }
 }
 
-export { AchievementBuilder, AchievementContext, AchievementError, AchievementProvider, AsyncStorageAdapter, BadgesButton, BadgesModal, ConfettiWrapper, ConfigurationError, ImportValidationError, IndexedDBStorage, LocalStorage, MemoryStorage, OfflineQueueStorage, RestApiStorage, StorageError, StorageQuotaError, StorageType, SyncError, createConfigHash, defaultAchievementIcons, defaultStyles, exportAchievementData, importAchievementData, isAchievementError, isAsyncStorage, isRecoverableError, isSimpleConfig, normalizeAchievements, useAchievements, useSimpleAchievements };
+export { AchievementBuilder, AchievementContext, AchievementError, AchievementProvider, AsyncStorageAdapter, BadgesButton, BadgesModal, BuiltInConfetti, BuiltInModal, BuiltInNotification, ConfettiWrapper, ConfigurationError, ImportValidationError, IndexedDBStorage, LocalStorage, MemoryStorage, OfflineQueueStorage, RestApiStorage, StorageError, StorageQuotaError, StorageType, SyncError, createConfigHash, defaultAchievementIcons, defaultStyles, exportAchievementData, importAchievementData, isAchievementError, isAsyncStorage, isRecoverableError, isSimpleConfig, normalizeAchievements, useAchievements, useSimpleAchievements, useWindowSize };
 //# sourceMappingURL=index.js.map