@neuctra/ui 0.2.8 → 0.2.10

package/dist/src/components/basic/AudioGallery.js

@@ -1,425 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { Play, Pause, Volume2, VolumeX, RotateCcw, SkipBack, SkipForward, Heart, Music, Shuffle, } from "lucide-react";
-const defaultTracks = [
-    {
-        src: "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav",
-        title: "Morning Bell",
-        artist: "Nature Sounds",
-        duration: "0:15",
-        thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop",
-    },
-    {
-        src: "https://www.soundjay.com/buttons/sounds/button-4.wav",
-        title: "Digital Click",
-        artist: "Tech Audio",
-        duration: "0:05",
-        thumbnail: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=300&h=300&fit=crop",
-    },
-    {
-        src: "https://www.soundjay.com/buttons/sounds/button-10.wav",
-        title: "Soft Chime",
-        artist: "Ambient Studio",
-        duration: "0:08",
-        thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop",
-    },
-];
-export function AudioGallery({ tracks = defaultTracks, className = "", galleryTitle = "Audio Gallery", primaryColor = "#8b5cf6", backgroundColor = "#0f0f23", textColor = "#e4e4e7", secondaryColor = "#1a1a2e", border = 0, borderColor, maxWidth = 420, autoplay = false, loop = false, }) {
-    const [currentTrackIndex, setCurrentTrackIndex] = useState(null);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const [volume, setVolume] = useState(0.7);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [isLooping, setIsLooping] = useState(loop);
-    const [isShuffle, setIsShuffle] = useState(false);
-    const [isLiked, setIsLiked] = useState(false);
-    const [showVolumeSlider, setShowVolumeSlider] = useState(false);
-    const audioRef = useRef(null);
-    const playerRef = useRef(null);
-    const volumeTimeoutRef = useRef(null);
-    useEffect(() => {
-        if (audioRef.current) {
-            audioRef.current.volume = volume;
-        }
-    }, [volume]);
-    useEffect(() => {
-        if (audioRef.current) {
-            audioRef.current.loop = isLooping;
-        }
-    }, [isLooping]);
-    useEffect(() => {
-        if (currentTrackIndex === null && audioRef.current) {
-            audioRef.current.pause();
-            setIsPlaying(false);
-            setCurrentTime(0);
-            setDuration(0);
-        }
-    }, [currentTrackIndex]);
-    const playPauseTrack = (index) => {
-        if (currentTrackIndex === index) {
-            if (!audioRef.current)
-                return;
-            if (audioRef.current.paused) {
-                audioRef.current.play().catch(() => { });
-                setIsPlaying(true);
-            }
-            else {
-                audioRef.current.pause();
-                setIsPlaying(false);
-            }
-        }
-        else {
-            setCurrentTrackIndex(index);
-            setTimeout(() => {
-                if (audioRef.current) {
-                    audioRef.current.play().catch(() => { });
-                    setIsPlaying(true);
-                }
-            }, 100);
-        }
-    };
-    const handleTimeUpdate = () => {
-        if (!audioRef.current)
-            return;
-        setCurrentTime(audioRef.current.currentTime);
-        if (audioRef.current.duration) {
-            setDuration(audioRef.current.duration);
-        }
-    };
-    const handleSeek = (e) => {
-        if (!audioRef.current || !duration)
-            return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const clickPos = e.clientX - rect.left;
-        const percent = clickPos / rect.width;
-        const seekTime = percent * duration;
-        audioRef.current.currentTime = seekTime;
-        setCurrentTime(seekTime);
-    };
-    const handleVolumeChange = (e) => {
-        const rect = e.currentTarget.getBoundingClientRect();
-        const clickPos = e.clientX - rect.left;
-        const percent = clickPos / rect.width;
-        const newVolume = Math.max(0, Math.min(1, percent));
-        setVolume(newVolume);
-    };
-    const skip = (seconds) => {
-        if (audioRef.current && duration) {
-            let newTime = audioRef.current.currentTime + seconds;
-            newTime = Math.min(Math.max(newTime, 0), duration);
-            audioRef.current.currentTime = newTime;
-            setCurrentTime(newTime);
-        }
-    };
-    const nextTrack = () => {
-        if (currentTrackIndex === null)
-            return;
-        let nextIndex;
-        if (isShuffle) {
-            nextIndex = Math.floor(Math.random() * tracks.length);
-        }
-        else {
-            nextIndex = (currentTrackIndex + 1) % tracks.length;
-        }
-        playPauseTrack(nextIndex);
-    };
-    const prevTrack = () => {
-        if (currentTrackIndex === null)
-            return;
-        let prevIndex;
-        if (isShuffle) {
-            prevIndex = Math.floor(Math.random() * tracks.length);
-        }
-        else {
-            prevIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
-        }
-        playPauseTrack(prevIndex);
-    };
-    const toggleMute = () => {
-        setVolume((prev) => (prev > 0 ? 0 : 0.7));
-    };
-    const showVolume = () => {
-        setShowVolumeSlider(true);
-        if (volumeTimeoutRef.current) {
-            clearTimeout(volumeTimeoutRef.current);
-        }
-        volumeTimeoutRef.current = setTimeout(() => {
-            setShowVolumeSlider(false);
-        }, 3000);
-    };
-    const formatTime = (time) => {
-        if (isNaN(time))
-            return "0:00";
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-    };
-    const currentTrack = currentTrackIndex !== null ? tracks[currentTrackIndex] : null;
-    return (_jsxs("div", { className: className, style: {
-            maxWidth: `${maxWidth}px`,
-            margin: "20px auto",
-            background: `linear-gradient(145deg, ${backgroundColor}, ${secondaryColor})`,
-            color: textColor,
-            borderRadius: "24px",
-            padding: "24px 16px",
-            fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-            userSelect: "none",
-            backdropFilter: "blur(20px)",
-            border: `${border}px solid ${borderColor}40`,
-        }, children: [_jsxs("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "24px",
-                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [_jsx("div", { style: {
-                                    width: "40px",
-                                    height: "40px",
-                                    borderRadius: "12px",
-                                    background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                }, children: _jsx(Music, { size: 20, color: "white" }) }), _jsxs("div", { children: [_jsx("h2", { style: {
-                                            margin: 0,
-                                            fontSize: "1.25rem",
-                                            fontWeight: "700",
-                                            color: primaryColor, // fallback for browsers without WebkitTextFillColor
-                                        }, children: galleryTitle }), _jsxs("p", { style: { margin: 0, fontSize: "0.875rem", opacity: 0.7 }, children: [tracks.length, " tracks"] })] })] }), _jsx("button", { onClick: () => setIsShuffle(!isShuffle), style: {
-                            background: isShuffle ? primaryColor : "transparent",
-                            border: "none",
-                            borderRadius: "12px",
-                            padding: "8px",
-                            cursor: "pointer",
-                            transition: "all 0.3s ease",
-                            opacity: isShuffle ? 1 : 0.6,
-                        }, "aria-label": "Toggle Shuffle", children: _jsx(Shuffle, { size: 18, color: isShuffle ? "white" : textColor }) })] }), _jsx("div", { style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "8px",
-                    marginBottom: "20px",
-                    maxHeight: "240px",
-                    overflowY: "auto",
-                    paddingRight: "4px",
-                }, children: tracks.map((track, index) => {
-                    const isActive = currentTrackIndex === index;
-                    const isCurrentlyPlaying = isActive && isPlaying;
-                    return (_jsxs("div", { onClick: () => playPauseTrack(index), style: {
-                            display: "flex",
-                            alignItems: "center",
-                            padding: "12px 16px",
-                            borderRadius: "16px",
-                            background: isActive
-                                ? `linear-gradient(135deg, ${primaryColor}20, ${primaryColor}10)`
-                                : "rgba(255,255,255,0.05)",
-                            border: isActive
-                                ? `1px solid ${primaryColor}40`
-                                : "1px solid transparent",
-                            cursor: "pointer",
-                            transition: "all 0.3s ease",
-                            backdropFilter: isActive ? `blur(20px)` : "none",
-                        }, children: [_jsxs("div", { style: {
-                                    width: "48px",
-                                    height: "48px",
-                                    borderRadius: "12px",
-                                    background: track.thumbnail
-                                        ? `url(${track.thumbnail}) center/cover`
-                                        : primaryColor,
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    marginRight: "12px",
-                                    position: "relative",
-                                    overflow: "hidden",
-                                }, children: [!track.thumbnail && _jsx(Music, { size: 20, color: "white" }), isCurrentlyPlaying && (_jsx("div", { style: {
-                                            position: "absolute",
-                                            top: 0,
-                                            left: 0,
-                                            right: 0,
-                                            bottom: 0,
-                                            background: "rgba(0,0,0,0.6)",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                        }, children: _jsx("div", { style: {
-                                                width: "16px",
-                                                height: "16px",
-                                                display: "flex",
-                                                gap: "2px",
-                                                alignItems: "end",
-                                                justifyContent: "center",
-                                            }, children: [0, 1, 2].map((i) => (_jsx("div", { style: {
-                                                    width: "3px",
-                                                    background: "white",
-                                                    borderRadius: "2px",
-                                                    animation: `equalizer 1s ease-in-out infinite ${i * 0.2}s`,
-                                                    height: "12px",
-                                                } }, i))) }) }))] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
-                                            fontWeight: "600",
-                                            fontSize: "0.95rem",
-                                            color: isActive ? primaryColor : textColor,
-                                            whiteSpace: "nowrap",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                        }, children: track.title }), track.artist && (_jsx("div", { style: {
-                                            fontSize: "0.8rem",
-                                            opacity: 0.7,
-                                            whiteSpace: "nowrap",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                        }, children: track.artist }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [track.duration && (_jsx("span", { style: { fontSize: "0.8rem", opacity: 0.6 }, children: track.duration })), _jsx("div", { style: {
-                                            width: "32px",
-                                            height: "32px",
-                                            borderRadius: "8px",
-                                            background: isActive
-                                                ? primaryColor
-                                                : "rgba(255,255,255,0.1)",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                            transition: "all 0.3s ease",
-                                        }, children: isCurrentlyPlaying ? (_jsx(Pause, { size: 16, color: "white" })) : (_jsx(Play, { size: 16, color: "white" })) })] })] }, index));
-                }) }), currentTrack && (_jsxs("div", { ref: playerRef, style: {
-                    background: `linear-gradient(135deg, ${secondaryColor}, ${backgroundColor})`,
-                    borderRadius: "20px",
-                    padding: "20px",
-                    border: `1px solid ${primaryColor}40`,
-                    backdropFilter: "blur(20px)",
-                    position: "relative",
-                    overflow: "hidden",
-                }, children: [currentTrack.thumbnail && (_jsx("div", { style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            backgroundImage: `url(${currentTrack.thumbnail})`,
-                            backgroundSize: "cover",
-                            backgroundPosition: "center",
-                            filter: "blur(60px) opacity(0.1)",
-                            transform: "scale(1.1)",
-                        } })), _jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [_jsxs("div", { style: { textAlign: "center", marginBottom: "20px" }, children: [_jsx("h3", { style: {
-                                            margin: "0 0 4px 0",
-                                            fontSize: "1.1rem",
-                                            fontWeight: "700",
-                                            color: primaryColor,
-                                        }, children: currentTrack.title }), currentTrack.artist && (_jsx("p", { style: { margin: 0, opacity: 0.7, fontSize: "0.9rem" }, children: currentTrack.artist }))] }), _jsxs("div", { style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    gap: "20px",
-                                    marginBottom: "20px",
-                                }, children: [_jsx("button", { onClick: prevTrack, style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Previous Track", children: _jsx(SkipBack, { size: 20 }) }), _jsxs("button", { onClick: () => skip(-10), style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Skip back 10 seconds", children: [_jsx(SkipBack, { size: 16 }), _jsx("span", { style: { fontSize: "0.7rem", marginLeft: "2px" }, children: "10" })] }), _jsx("button", { onClick: () => {
-                                            if (!audioRef.current)
-                                                return;
-                                            if (isPlaying) {
-                                                audioRef.current.pause();
-                                                setIsPlaying(false);
-                                            }
-                                            else {
-                                                audioRef.current.play().catch(() => { });
-                                                setIsPlaying(true);
-                                            }
-                                        }, style: {
-                                            ...controlButtonStyle("#fff", primaryColor),
-                                            width: "60px",
-                                            height: "60px",
-                                            borderRadius: "50%",
-                                            boxShadow: `0 8px 25px ${primaryColor}40`,
-                                        }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { size: 24 }) : _jsx(Play, { size: 24 }) }), _jsxs("button", { onClick: () => skip(10), style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Skip forward 10 seconds", children: [_jsx("span", { style: { fontSize: "0.7rem", marginRight: "2px" }, children: "10" }), _jsx(SkipForward, { size: 16 })] }), _jsx("button", { onClick: nextTrack, style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Next Track", children: _jsx(SkipForward, { size: 20 }) })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("div", { style: {
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "space-between",
-                                            marginBottom: "8px",
-                                            fontSize: "0.8rem",
-                                            opacity: 0.7,
-                                        }, children: [_jsx("span", { children: formatTime(currentTime) }), _jsx("span", { children: formatTime(duration) })] }), _jsx("div", { onClick: handleSeek, style: {
-                                            height: "6px",
-                                            background: "rgba(255,255,255,0.2)",
-                                            borderRadius: "3px",
-                                            cursor: "pointer",
-                                            position: "relative",
-                                            overflow: "hidden",
-                                        }, children: _jsx("div", { style: {
-                                                width: `${(currentTime / duration) * 100 || 0}%`,
-                                                height: "100%",
-                                                background: `linear-gradient(90deg, ${primaryColor}, #ec4899)`,
-                                                borderRadius: "3px",
-                                                position: "relative",
-                                            }, children: _jsx("div", { style: {
-                                                    position: "absolute",
-                                                    right: "-6px",
-                                                    top: "50%",
-                                                    transform: "translateY(-50%)",
-                                                    width: "12px",
-                                                    height: "12px",
-                                                    background: primaryColor,
-                                                    borderRadius: "50%",
-                                                    boxShadow: `0 2px 8px ${primaryColor}60`,
-                                                } }) }) })] }), _jsxs("div", { style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
-                                }, children: [_jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsx("button", { onClick: () => setIsLiked(!isLiked), style: controlButtonStyle(isLiked ? "#ec4899" : textColor, "rgba(255,255,255,0.1)"), "aria-label": "Like", children: _jsx(Heart, { size: 16, fill: isLiked ? "#ec4899" : "none" }) }), _jsx("button", { onClick: () => setIsLooping(!isLooping), style: controlButtonStyle(isLooping ? primaryColor : textColor, "rgba(255,255,255,0.1)"), "aria-label": "Toggle Loop", children: _jsx(RotateCcw, { size: 16 }) })] }), _jsxs("div", { style: {
-                                            display: "flex",
-                                            alignItems: "center",
-                                            gap: "8px",
-                                            position: "relative",
-                                        }, children: [showVolumeSlider && (_jsx("div", { onClick: handleVolumeChange, style: {
-                                                    width: "80px",
-                                                    height: "4px",
-                                                    background: "rgba(255,255,255,0.2)",
-                                                    borderRadius: "2px",
-                                                    cursor: "pointer",
-                                                    position: "relative",
-                                                }, children: _jsx("div", { style: {
-                                                        width: `${volume * 100}%`,
-                                                        height: "100%",
-                                                        background: primaryColor,
-                                                        borderRadius: "2px",
-                                                    } }) })), _jsx("button", { onClick: toggleMute, onMouseEnter: showVolume, style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": volume > 0 ? "Mute" : "Unmute", children: volume > 0 ? _jsx(Volume2, { size: 16 }) : _jsx(VolumeX, { size: 16 }) })] })] })] }), _jsx("audio", { ref: audioRef, src: currentTrack.src, autoPlay: autoplay, loop: isLooping, onTimeUpdate: handleTimeUpdate, onEnded: () => {
-                            setIsPlaying(false);
-                            if (!isLooping) {
-                                nextTrack();
-                            }
-                        }, onLoadedMetadata: handleTimeUpdate, preload: "metadata", style: { display: "none" } })] })), _jsx("style", { children: `
-        @keyframes equalizer {
-          0%, 100% { height: 4px; }
-          50% { height: 12px; }
-        }
-        
-        /* Custom Scrollbar */
-        div::-webkit-scrollbar {
-          width: 4px;
-        }
-        
-        div::-webkit-scrollbar-track {
-          background: rgba(255,255,255,0.1);
-          border-radius: 2px;
-        }
-        
-        div::-webkit-scrollbar-thumb {
-          background: ${primaryColor};
-          border-radius: 2px;
-        }
-        
-        div::-webkit-scrollbar-thumb:hover {
-          background: ${primaryColor}dd;
-        }
-      ` })] }));
-}
-function controlButtonStyle(color, backgroundColor) {
-    return {
-        border: "none",
-        backgroundColor,
-        color,
-        cursor: "pointer",
-        padding: "10px",
-        borderRadius: "12px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "all 0.3s ease",
-        backdropFilter: "blur(10px)",
-    };
-}

package/dist/src/components/basic/AudioPlayer.js

@@ -1,130 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, RotateCcw, SkipBack, SkipForward, } from "lucide-react";
-export const AudioPlayer = ({ src, thumbnail, autoPlay = false, loop = false, backgroundColor = "#0a0a0a", primaryColor = "#10b981", secondaryColor = "#ffffff", borderRadius = "12px", padding = "12px", width = "100%", className, }) => {
-    const audioRef = useRef(null);
-    const playerRef = useRef(null);
-    const [isPlaying, setIsPlaying] = useState(autoPlay);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const [volume, setVolume] = useState(0.7);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [isLooping, setIsLooping] = useState(loop);
-    useEffect(() => {
-        if (audioRef.current)
-            audioRef.current.volume = volume;
-    }, [volume]);
-    useEffect(() => {
-        if (audioRef.current)
-            audioRef.current.loop = isLooping;
-    }, [isLooping]);
-    const togglePlayPause = () => {
-        if (!audioRef.current)
-            return;
-        isPlaying ? audioRef.current.pause() : audioRef.current.play();
-        setIsPlaying(!isPlaying);
-    };
-    const handleTimeUpdate = () => {
-        if (!audioRef.current)
-            return;
-        setCurrentTime(audioRef.current.currentTime);
-        setDuration(audioRef.current.duration);
-    };
-    const handleSeek = (e) => {
-        if (!audioRef.current)
-            return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const percent = (e.clientX - rect.left) / rect.width;
-        audioRef.current.currentTime = percent * duration;
-        setCurrentTime(percent * duration);
-    };
-    const skip = (seconds) => {
-        if (audioRef.current)
-            audioRef.current.currentTime += seconds;
-    };
-    const toggleFullscreen = () => {
-        if (!playerRef.current)
-            return;
-        isFullscreen
-            ? document.exitFullscreen?.()
-            : playerRef.current.requestFullscreen?.();
-        setIsFullscreen(!isFullscreen);
-    };
-    const formatTime = (time) => {
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-    };
-    return (_jsxs("div", { ref: playerRef, className: className, style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "12px",
-            width,
-            backgroundColor,
-            borderRadius,
-            padding,
-            boxSizing: "border-box",
-            color: secondaryColor,
-            boxShadow: "0 6px 16px rgba(0,0,0,0.2)",
-            flexWrap: "wrap",
-        }, children: [_jsx("audio", { ref: audioRef, src: src, autoPlay: autoPlay, loop: loop, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleTimeUpdate }), thumbnail && (_jsx("img", { src: thumbnail, alt: "Audio Thumbnail", style: {
-                    width: "60px",
-                    height: "60px",
-                    borderRadius: "50%",
-                    objectFit: "cover",
-                    flexShrink: 0,
-                } })), _jsxs("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "12px",
-                    flex: 1,
-                    minWidth: "0",
-                }, children: [_jsx("button", { onClick: () => skip(-10), style: {
-                            background: "transparent",
-                            border: "none",
-                            color: secondaryColor,
-                            cursor: "pointer",
-                        }, "aria-label": "Skip Back 10s", children: _jsx(SkipBack, { size: 20 }) }), _jsx("button", { onClick: togglePlayPause, style: {
-                            background: primaryColor,
-                            borderRadius: "50%",
-                            padding: "10px",
-                            border: "none",
-                            cursor: "pointer",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                        }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }) }), _jsx("button", { onClick: () => skip(10), style: {
-                            background: "transparent",
-                            border: "none",
-                            color: secondaryColor,
-                            cursor: "pointer",
-                        }, "aria-label": "Skip Forward 10s", children: _jsx(SkipForward, { size: 20 }) }), _jsx("div", { onClick: handleSeek, style: {
-                            flex: 1,
-                            height: "6px",
-                            background: "#444",
-                            borderRadius: "3px",
-                            cursor: "pointer",
-                            position: "relative",
-                        }, children: _jsx("div", { style: {
-                                width: `${(currentTime / duration) * 100 || 0}%`,
-                                height: "100%",
-                                background: primaryColor,
-                                borderRadius: "3px",
-                            } }) }), _jsxs("div", { style: { minWidth: "70px", textAlign: "right", fontSize: "0.8rem" }, children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("button", { onClick: () => setIsLooping(!isLooping), style: {
-                                    background: "transparent",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    color: isLooping ? primaryColor : secondaryColor,
-                                }, "aria-label": "Toggle Loop", children: _jsx(RotateCcw, { size: 18 }) }), _jsx("button", { onClick: () => setVolume(volume > 0 ? 0 : 0.7), style: {
-                                    background: "transparent",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    color: secondaryColor,
-                                }, "aria-label": "Toggle Mute", children: volume > 0 ? _jsx(Volume2, { size: 18 }) : _jsx(VolumeX, { size: 18 }) }), _jsx("button", { onClick: toggleFullscreen, style: {
-                                    background: "transparent",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    color: secondaryColor,
-                                }, "aria-label": "Toggle Fullscreen", children: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }) })] })] })] }));
-};

package/dist/src/components/basic/Avatar.js

@@ -1,68 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { User } from "lucide-react";
-// --- Base maps ---
-const sizeMap = {
-    xs: 24,
-    sm: 32,
-    md: 40,
-    lg: 48,
-    xl: 56,
-    "2xl": 64,
-};
-const fontSizeMap = {
-    xs: "text-[10px]",
-    sm: "text-[12px]",
-    md: "text-[14px]",
-    lg: "text-[16px]",
-    xl: "text-[18px]",
-    "2xl": "text-[20px]",
-};
-const dimensionMap = {
-    xs: "w-6 h-6",
-    sm: "w-8 h-8",
-    md: "w-10 h-10",
-    lg: "w-12 h-12",
-    xl: "w-14 h-14",
-    "2xl": "w-16 h-16",
-};
-const variantMap = {
-    circular: "rounded-full",
-    rounded: "rounded-lg",
-    square: "rounded-none",
-};
-const statusPositionMap = {
-    "top-left": "top-0 left-0",
-    "top-right": "top-0 right-0",
-    "bottom-left": "bottom-0 left-0",
-    "bottom-right": "bottom-0 right-0",
-};
-// --- Avatar Component ---
-export const Avatar = ({ src, alt = "User avatar", size = "md", variant = "circular", isOnline = false, isOffline = false, fallback, ring = false, ringColor = "#3b82f6", onClick, statusPosition = "bottom-right", className = "", statusClassName = "", style, statusStyle, }) => {
-    const [imageError, setImageError] = useState(false);
-    const clickable = !!onClick;
-    const initials = fallback ||
-        alt
-            .split(" ")
-            .map((n) => n[0])
-            .join("")
-            .toUpperCase()
-            .slice(0, 2);
-    const statusColor = isOnline ? "bg-green-500" : isOffline ? "bg-gray-400" : "";
-    // Width/height for inline styles
-    const dimensionPx = sizeMap[size];
-    return (_jsxs("div", { role: clickable ? "button" : "img", tabIndex: clickable ? 0 : -1, "aria-label": alt, onClick: onClick, className: `relative inline-flex items-center justify-center overflow-hidden ${dimensionMap[size]} ${variantMap[variant]} transition-all duration-200 ${clickable ? "cursor-pointer hover:scale-105" : ""} ${ring ? "ring-2" : ""} ${className}`, style: {
-            ...style,
-            ...(ring ? { boxShadow: `0 0 0 2px ${ringColor}` } : {}),
-        }, onKeyDown: (e) => {
-            if (clickable && (e.key === "Enter" || e.key === " ")) {
-                e.preventDefault();
-                onClick?.();
-            }
-        }, children: [src && !imageError ? (_jsx("img", { src: src, alt: alt, onError: () => setImageError(true), className: `w-full h-full object-cover ${variantMap[variant]} transition-opacity duration-300` })) : (_jsx("div", { className: `w-full h-full flex items-center justify-center bg-gradient-to-tr from-purple-500 to-blue-500 text-white font-semibold ${fontSizeMap[size]} ${variantMap[variant]}`, children: initials || _jsx(User, { className: "text-white" }) })), (isOnline || isOffline) && (_jsx("span", { "aria-label": isOnline ? "Online" : "Offline", title: isOnline ? "Online" : "Offline", className: `absolute ${statusPositionMap[statusPosition]} ${statusColor} border-2 border-white rounded-full shadow-sm ${statusClassName}`, style: {
-                    width: dimensionPx / 3,
-                    height: dimensionPx / 3,
-                    ...statusStyle,
-                } }))] }));
-};

package/dist/src/components/basic/Badge.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import clsx from "clsx";
-/* -------------------------------------------------------------------------- */
-/*                                🏷 Badge                                    */
-/* -------------------------------------------------------------------------- */
-export const Badge = memo(({ text, icon, iconPosition = "left", primaryTheme = true, primaryColor = "#3b82f6", size = "md", rounded = true, notificationDot = false, dotColor = "#ef4444", count, pulse = false, className, onClick, }) => {
-    /** 📏 Sizes */
-    const sizes = {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-3 py-1 text-xs",
-        lg: "px-4 py-1.5 text-sm",
-    };
-    /** 🎨 Theme */
-    const themeClasses = primaryTheme
-        ? "bg-[var(--primary)] text-white"
-        : "";
-    const dynamicStyle = !primaryTheme
-        ? {
-            backgroundColor: primaryColor,
-            color: "#fff",
-        }
-        : {};
-    return (_jsxs("span", { onClick: onClick, style: !primaryTheme ? dynamicStyle : undefined, className: clsx("relative inline-flex items-center justify-center gap-1 font-medium", "transition-all duration-200 select-none", rounded ? "rounded-full" : "rounded-md", sizes[size], themeClasses, onClick && "cursor-pointer hover:opacity-90", className), children: [notificationDot && (_jsx("span", { style: !primaryTheme ? { backgroundColor: dotColor } : undefined, className: clsx("absolute -top-1 -right-1 w-2 h-2 rounded-full", pulse && "animate-ping", primaryTheme ? "bg-red-500" : "") })), count !== undefined && (_jsx("span", { style: !primaryTheme ? { backgroundColor: dotColor } : undefined, className: clsx("absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 text-[10px]", "flex items-center justify-center rounded-full text-white", primaryTheme ? "bg-red-500" : ""), children: count })), icon && iconPosition === "left" && (_jsx("span", { className: "flex items-center", children: icon })), text && _jsx("span", { children: text }), icon && iconPosition === "right" && (_jsx("span", { className: "flex items-center", children: icon }))] }));
-});
-Badge.displayName = "Badge";