@neuctra/ui 0.2.2 → 0.2.3

package/dist/src/components/avatar/AvatarGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AvatarGroup = ({ avatars, size = "medium", maxVisible = 3, className = "", }) => {
+    const avatarSizes = {
+        small: "w-8 h-8",
+        medium: "w-12 h-12",
+        large: "w-16 h-16",
+    };
+    return (_jsxs("div", { className: "flex -space-x-2", children: [avatars.slice(0, maxVisible).map((src, index) => (_jsx("img", { src: src, className: `rounded-full border-2 border-white object-cover ${avatarSizes[size]} ${className}` }, index))), avatars.length > maxVisible && (_jsxs("span", { className: `rounded-full border-2 border-white bg-gray-500 text-white flex items-center justify-center ${avatarSizes[size]}`, children: ["+", avatars.length - maxVisible] }))] }));
+};

package/dist/src/components/avatar/AvatarWithStatus.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export const AvatarWithStatus = ({ src, alt = "User Avatar", status = "online", size = "medium", className = "", }) => {
+    const [imageError, setImageError] = useState(false);
+    const avatarSizes = {
+        small: { size: "w-8 h-8", statusSize: "w-2 h-2" },
+        medium: { size: "w-12 h-12", statusSize: "w-3 h-3" },
+        large: { size: "w-16 h-16", statusSize: "w-4 h-4" },
+    };
+    const statusColors = {
+        online: "bg-green-500",
+        offline: "bg-gray-400",
+        away: "bg-yellow-500",
+        busy: "bg-red-500",
+    };
+    return (_jsxs("div", { className: `relative inline-block ${avatarSizes[size].size}`, children: [src && !imageError ? (_jsx("img", { src: src, alt: alt, "aria-label": alt, className: `rounded-full object-cover ${avatarSizes[size].size} ${className}`, onError: () => setImageError(true) })) : (_jsx("svg", { "aria-label": "Placeholder for user avatar" // Added for accessibility
+                , className: `rounded-full bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400 ${avatarSizes[size].size}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9c0-3 3-5 7-5s7 2 7 5v1H5v-1z", clipRule: "evenodd" }) })), _jsx("span", { className: `z-[1000] w-full h-full absolute bottom-0 right-0 border-2 border-white rounded-full ${statusColors[status]} ${avatarSizes[size].statusSize}` })] }));
+};

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, memo } from "react";
+/**
+ * 🧠 Industry-standard, minimal, and fully customizable Accordion
+ */
+export const Accordion = memo(({ items, allowMultiple = false, defaultOpen = [], borderColor = "#e5e7eb", backgroundColor = "#fff", textColor = "#111827", hoverBgColor = "#f9fafb", hoverTextColor = "#111827", contentBgColor = "#fff", contentTextColor = "#374151", paddingY = "1rem", paddingX = "1rem", marginY = "0.75rem", borderRadius = "0.5rem", contentPadding = "1rem", fontSize = "1rem", fontWeight = 600, contentFontSize = "0.95rem", contentFontWeight = 400, iconOpen = "−", iconClose = "+", iconSize = "1.25rem", transitionDuration = "300ms", shadow = "0 1px 4px rgba(0,0,0,0.08)", className = "", style, }) => {
+    const [openIndexes, setOpenIndexes] = useState(defaultOpen);
+    const contentRefs = useRef([]);
+    useEffect(() => {
+        contentRefs.current.forEach((el, index) => {
+            if (el) {
+                el.style.maxHeight = openIndexes.includes(index)
+                    ? `${el.scrollHeight}px`
+                    : "0px";
+            }
+        });
+    }, [openIndexes]);
+    const toggleItem = (index) => {
+        setOpenIndexes((prev) => allowMultiple
+            ? prev.includes(index)
+                ? prev.filter((i) => i !== index)
+                : [...prev, index]
+            : prev.includes(index)
+                ? []
+                : [index]);
+    };
+    return (_jsx("div", { className: className, style: { width: "100%", ...style }, children: items.map((item, index) => {
+            const isOpen = openIndexes.includes(index);
+            return (_jsxs("div", { style: {
+                    border: `1px solid ${borderColor}`,
+                    borderRadius,
+                    margin: `${marginY} 0`,
+                    boxShadow: shadow,
+                    overflow: "hidden",
+                    transition: `all ${transitionDuration} ease`,
+                }, children: [_jsxs("button", { onClick: () => toggleItem(index), style: {
+                            width: "100%",
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            backgroundColor,
+                            color: textColor,
+                            padding: `${paddingY} ${paddingX}`,
+                            fontWeight,
+                            fontSize,
+                            cursor: "pointer",
+                            border: "none",
+                            outline: "none",
+                            transition: `all ${transitionDuration}`,
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = hoverBgColor;
+                            e.currentTarget.style.color = hoverTextColor;
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = backgroundColor;
+                            e.currentTarget.style.color = textColor;
+                        }, children: [_jsx("span", { children: item.title }), _jsx("span", { style: { fontSize: iconSize }, children: isOpen ? iconOpen : iconClose })] }), _jsx("div", { ref: (el) => {
+                            contentRefs.current[index] = el;
+                        }, style: {
+                            overflow: "hidden",
+                            maxHeight: isOpen
+                                ? `${contentRefs.current[index]?.scrollHeight}px`
+                                : "0px",
+                            transition: `max-height ${transitionDuration} ease-in-out`,
+                        }, children: _jsx("div", { style: {
+                                borderTop: `1px solid ${borderColor}`,
+                                backgroundColor: contentBgColor,
+                                color: contentTextColor,
+                                padding: contentPadding,
+                                fontSize: contentFontSize,
+                                fontWeight: contentFontWeight,
+                            }, children: item.content }) })] }, index));
+        }) }));
+});
+Accordion.displayName = "Accordion";

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from "react";
+import { X, Info, CheckCircle, AlertCircle, AlertTriangle, } from "lucide-react";
+const typeStyles = {
+    success: {
+        bg: "#ecfdf5",
+        border: "#34d399",
+        iconColor: "#059669",
+        Icon: _jsx(CheckCircle, { size: 20 }),
+    },
+    error: {
+        bg: "#fef2f2",
+        border: "#f87171",
+        iconColor: "#dc2626",
+        Icon: _jsx(AlertCircle, { size: 20 }),
+    },
+    warning: {
+        bg: "#fffbeb",
+        border: "#facc15",
+        iconColor: "#d97706",
+        Icon: _jsx(AlertTriangle, { size: 20 }),
+    },
+    info: {
+        bg: "#eff6ff",
+        border: "#3b82f6",
+        iconColor: "#2563eb",
+        Icon: _jsx(Info, { size: 20 }),
+    },
+};
+/** 📍 Dynamic position styles */
+const getPositionStyle = (position) => {
+    const base = {
+        position: "fixed",
+        zIndex: 9999,
+        pointerEvents: "auto",
+    };
+    switch (position) {
+        case "top-left":
+            return { ...base, top: "1.25rem", left: "1.25rem" };
+        case "top-center":
+            return { ...base, top: "1.25rem", left: "50%", transform: "translateX(-50%)" };
+        case "top-right":
+            return { ...base, top: "1.25rem", right: "1.25rem" };
+        case "bottom-left":
+            return { ...base, bottom: "1.25rem", left: "1.25rem" };
+        case "bottom-center":
+            return { ...base, bottom: "1.25rem", left: "50%", transform: "translateX(-50%)" };
+        case "bottom-right":
+        default:
+            return { ...base, bottom: "1.25rem", right: "1.25rem" };
+    }
+};
+/** 🎯 Production-grade Alert Component */
+export const Alert = ({ title, description, type = "info", dismissible = true, duration, onClose, icon, actionButton, position = "top-right", backgroundColor, borderColor, textColor = "#111827", borderRadius = "0.75rem", shadow = "0 4px 14px rgba(0,0,0,0.1)", padding = "1rem", fontSize = "0.95rem", fontWeight = 500, descriptionColor = "#374151", animationDuration = "300ms", maxWidth = "480px", className = "", style, }) => {
+    const [visible, setVisible] = useState(true);
+    /** Auto-dismiss after duration */
+    useEffect(() => {
+        if (duration) {
+            const timer = setTimeout(() => {
+                setVisible(false);
+                onClose?.();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, onClose]);
+    const { bg, border, iconColor, Icon } = typeStyles[type];
+    const positionStyle = getPositionStyle(position);
+    /** Combine computed and custom styles */
+    const containerStyle = useMemo(() => ({
+        ...positionStyle,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "0.75rem",
+        backgroundColor: backgroundColor ?? bg,
+        borderLeft: `4px solid ${borderColor ?? border}`,
+        borderRadius,
+        color: textColor,
+        boxShadow: shadow,
+        padding,
+        maxWidth,
+        width: "calc(100% - 2.5rem)",
+        opacity: visible ? 1 : 0,
+        transform: visible
+            ? position.includes("bottom")
+                ? "translateY(0)"
+                : "translateY(0)"
+            : position.includes("bottom")
+                ? "translateY(20px)"
+                : "translateY(-20px)",
+        transition: `opacity ${animationDuration} ease, transform ${animationDuration} ease`,
+        ...style,
+    }), [
+        visible,
+        bg,
+        border,
+        borderColor,
+        borderRadius,
+        position,
+        shadow,
+        padding,
+        textColor,
+        maxWidth,
+        backgroundColor,
+        animationDuration,
+        style,
+    ]);
+    if (!visible)
+        return null;
+    return (_jsxs("div", { className: className, style: containerStyle, role: "alert", children: [_jsx("div", { style: { color: iconColor, marginTop: "2px" }, children: icon || Icon }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [title && (_jsx("div", { style: { fontWeight: 600, fontSize, marginBottom: "4px" }, children: title })), description && (_jsx("div", { style: {
+                            fontSize: "0.875rem",
+                            color: descriptionColor,
+                            lineHeight: 1.4,
+                        }, children: description })), actionButton && (_jsx("div", { style: { marginTop: "8px" }, children: actionButton }))] }), dismissible && (_jsx("button", { onClick: () => {
+                    setVisible(false);
+                    onClose?.();
+                }, style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "#6b7280",
+                    cursor: "pointer",
+                    marginLeft: "8px",
+                    padding: 0,
+                    lineHeight: 0,
+                }, "aria-label": "Close alert", children: _jsx(X, { size: 16 }) }))] }));
+};
+Alert.displayName = "Alert";

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

@@ -0,0 +1,425 @@
+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)",
+    };
+}