@neuctra/ui 0.2.5 → 0.2.7

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

@@ -1,9 +1,8 @@
+"use client";
 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, }) => {
+import { useState, useRef, useEffect, memo, } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+export const Accordion = memo(({ items, allowMultiple = false, defaultOpen = [], borderColor = "#e5e7eb", backgroundColor = "#fff", textColor = "#111827", hoverBgColor = "#f3f4f6", hoverTextColor = "#111827", contentBgColor = "#fff", contentTextColor = "#374151", paddingY = "1rem", paddingX = "1rem", marginY = "0.5rem", 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(() => {
@@ -24,49 +23,49 @@ export const Accordion = memo(({ items, allowMultiple = false, defaultOpen = [],
                 ? []
                 : [index]);
     };
-    return (_jsx("div", { className: className, style: { width: "100%", ...style }, children: items.map((item, index) => {
+    // Helper to normalize CSS values (number -> px)
+    const toCssValue = (value) => value !== undefined
+        ? typeof value === "number"
+            ? `${value}px`
+            : value
+        : undefined;
+    return (_jsx("div", { className: `space-y-2 ${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`,
+            return (_jsxs("div", { className: "border shadow-sm overflow-hidden transition-all duration-300", style: {
+                    borderColor,
+                    borderRadius: toCssValue(borderRadius),
+                    margin: `${toCssValue(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",
+                }, children: [_jsxs("button", { onClick: () => toggleItem(index), className: "w-full flex justify-between items-center transition-colors duration-300", style: {
                             backgroundColor,
                             color: textColor,
-                            padding: `${paddingY} ${paddingX}`,
+                            padding: `${toCssValue(paddingY)} ${toCssValue(paddingX)}`,
                             fontWeight,
-                            fontSize,
+                            fontSize: toCssValue(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) => {
+                        }, children: [_jsx("span", { children: item.title }), _jsx("span", { style: { fontSize: toCssValue(iconSize) }, children: isOpen
+                                    ? iconOpen || _jsx(ChevronUp, { size: 16 })
+                                    : iconClose || _jsx(ChevronDown, { size: 16 }) })] }), _jsx("div", { ref: (el) => {
                             contentRefs.current[index] = el;
-                        }, style: {
-                            overflow: "hidden",
+                        }, className: "overflow-hidden transition-all duration-300", style: {
                             maxHeight: isOpen
-                                ? `${contentRefs.current[index]?.scrollHeight}px`
+                                ? `${contentRefs.current[index]?.scrollHeight ?? 0}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,
+                                padding: toCssValue(contentPadding),
+                                fontSize: toCssValue(contentFontSize),
                                 fontWeight: contentFontWeight,
                             }, children: item.content }) })] }, index));
         }) }));

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

@@ -1,141 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 }),
-    },
-};
-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" };
-    }
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from "react";
+import { X, Info, CheckCircle, AlertCircle, AlertTriangle } from "lucide-react";
+const ToastContext = createContext(undefined);
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context)
+        throw new Error("useToast must be used within ToastProvider");
+    return context;
 };
-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(false);
-    const [exiting, setExiting] = useState(false);
-    useEffect(() => {
-        setVisible(true);
-        if (duration) {
-            const timer = setTimeout(() => {
-                setExiting(true);
-                setTimeout(() => {
-                    setVisible(false);
-                    onClose?.();
-                }, parseInt(animationDuration));
-            }, duration);
-            return () => clearTimeout(timer);
+export const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = useState([]);
+    const removeToast = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const addToast = useCallback((toast) => {
+        const id = Date.now() + Math.random();
+        setToasts((prev) => [...prev, { ...toast, id }]);
+        if (toast.duration !== 0) {
+            setTimeout(() => removeToast(id), toast.duration ?? 4000);
         }
-    }, [duration, onClose, animationDuration]);
-    const { bg, border, iconColor, Icon } = typeStyles[type];
-    const positionStyle = getPositionStyle(position);
-    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 && !exiting ? 1 : 0,
-        transform: visible && !exiting
-            ? "translateY(0)"
-            : position.includes("bottom")
-                ? "translateY(20px)"
-                : "translateY(-20px)",
-        transition: `opacity ${animationDuration} ease, transform ${animationDuration} ease`,
-        fontWeight,
-        fontSize,
-        ...style,
-    }), [
-        visible,
-        exiting,
-        bg,
-        border,
-        borderColor,
-        borderRadius,
-        position,
-        shadow,
-        padding,
-        textColor,
-        maxWidth,
-        backgroundColor,
-        animationDuration,
-        style,
-        fontSize,
-        fontWeight,
-    ]);
-    if (!visible)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
-          @keyframes alert-slide-in-top {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-          }
-          @keyframes alert-slide-in-bottom {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-          }
-        ` }), _jsxs("div", { className: className, style: {
-                    ...containerStyle,
-                    animation: `${position.includes("bottom") ? "alert-slide-in-bottom" : "alert-slide-in-top"} ${animationDuration} ease`,
-                }, 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: () => {
-                            setExiting(true);
-                            setTimeout(() => {
-                                setVisible(false);
-                                onClose?.();
-                            }, parseInt(animationDuration));
-                        }, style: {
-                            background: "transparent",
-                            border: "none",
-                            color: "#6b7280",
-                            cursor: "pointer",
-                            marginLeft: "8px",
-                            padding: 0,
-                            lineHeight: 0,
-                        }, "aria-label": "Close alert", children: _jsx(X, { size: 16 }) }))] })] }));
+    }, [removeToast]);
+    return (_jsxs(ToastContext.Provider, { value: { addToast }, children: [children, _jsx("div", { className: "fixed top-5 right-5 flex flex-col gap-3 z-50", children: toasts.map((toast) => (_jsx(ToastItem, { toast: toast, onClose: () => removeToast(toast.id) }, toast.id))) })] }));
+};
+const typeStyles = {
+    success: { bg: "bg-green-50", border: "border-green-400", icon: _jsx(CheckCircle, { size: 20, className: "text-green-600" }) },
+    error: { bg: "bg-red-50", border: "border-red-400", icon: _jsx(AlertCircle, { size: 20, className: "text-red-600" }) },
+    warning: { bg: "bg-yellow-50", border: "border-yellow-400", icon: _jsx(AlertTriangle, { size: 20, className: "text-yellow-600" }) },
+    info: { bg: "bg-blue-50", border: "border-blue-400", icon: _jsx(Info, { size: 20, className: "text-blue-600" }) },
+};
+const ToastItem = ({ toast, onClose }) => {
+    const { title, description, type = "info" } = toast;
+    const { bg, border, icon } = typeStyles[type];
+    return (_jsxs("div", { className: `flex items-start gap-3 p-4 border-l-4 rounded shadow ${bg} ${border} animate-slide-in-right`, role: "alert", children: [_jsx("div", { children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [title && _jsx("div", { className: "font-semibold text-sm mb-1", children: title }), description && _jsx("div", { className: "text-sm text-gray-700", children: description })] }), _jsx("button", { onClick: onClose, className: "text-gray-500 hover:text-gray-700", children: _jsx(X, { size: 16 }) })] }));
 };
-Alert.displayName = "Alert";

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

@@ -1,13 +1,14 @@
+"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 = "#000000", primaryColor = "#10b981", secondaryColor = "#ffffff", borderRadius = "12px", padding = "16px", width = "100%", className, }) => {
+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.5);
+    const [volume, setVolume] = useState(0.7);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [isLooping, setIsLooping] = useState(loop);
     useEffect(() => {
@@ -31,13 +32,12 @@ export const AudioPlayer = ({ src, thumbnail, autoPlay = false, loop = false, ba
         setDuration(audioRef.current.duration);
     };
     const handleSeek = (e) => {
-        if (!audioRef.current || !e.currentTarget)
+        if (!audioRef.current)
             return;
         const rect = e.currentTarget.getBoundingClientRect();
         const percent = (e.clientX - rect.left) / rect.width;
-        const time = percent * duration;
-        audioRef.current.currentTime = time;
-        setCurrentTime(time);
+        audioRef.current.currentTime = percent * duration;
+        setCurrentTime(percent * duration);
     };
     const skip = (seconds) => {
         if (audioRef.current)
@@ -57,60 +57,74 @@ export const AudioPlayer = ({ src, thumbnail, autoPlay = false, loop = false, ba
         return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
     };
     return (_jsxs("div", { ref: playerRef, className: className, style: {
-            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
             width,
             backgroundColor,
             borderRadius,
-            color: secondaryColor,
-            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
-            overflow: "hidden",
             padding,
             boxSizing: "border-box",
-            maxWidth: "100%",
+            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: "100%",
+                    width: "60px",
+                    height: "60px",
+                    borderRadius: "50%",
                     objectFit: "cover",
-                    borderRadius,
-                    marginBottom: "16px",
-                    maxHeight: "150px",
+                    flexShrink: 0,
                 } })), _jsxs("div", { style: {
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "center",
-                    gap: "10px",
-                    flexShrink: 0,
-                    marginTop: "10px",
-                }, children: [_jsx("button", { onClick: () => skip(-10), "aria-label": "Skip Back 10s", children: _jsx(SkipBack, { size: 20 }) }), _jsx("button", { onClick: togglePlayPause, style: {
+                    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: "9999px",
+                            borderRadius: "50%",
                             padding: "10px",
-                            color: "#fff",
                             border: "none",
                             cursor: "pointer",
-                        }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }) }), _jsx("button", { onClick: () => skip(10), "aria-label": "Skip Forward 10s", children: _jsx(SkipForward, { size: 20 }) })] }), _jsxs("div", { style: {
-                    display: "flex",
-                    flexWrap: "wrap",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: "12px",
-                    width: "100%",
-                }, children: [_jsxs("div", { style: { flexShrink: 0, minWidth: "60px", textAlign: "center" }, children: [_jsx("span", { style: { fontSize: "14px", marginRight: "4px" }, children: formatTime(currentTime) }), _jsxs("span", { style: { fontSize: "14px", color: "#aaa" }, children: ["/ ", formatTime(duration)] })] }), _jsx("div", { onClick: handleSeek, style: {
+                            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: "8px",
+                            height: "6px",
                             background: "#444",
-                            borderRadius: "4px",
+                            borderRadius: "3px",
                             cursor: "pointer",
                             position: "relative",
-                            minWidth: "100px",
                         }, children: _jsx("div", { style: {
                                 width: `${(currentTime / duration) * 100 || 0}%`,
                                 height: "100%",
                                 background: primaryColor,
-                                borderRadius: "4px",
-                            } }) }), _jsxs("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "10px",
-                            flexShrink: 0,
-                        }, children: [_jsx("button", { onClick: () => setIsLooping(!isLooping), "aria-label": "Toggle Loop", children: _jsx(RotateCcw, { size: 18, color: isLooping ? primaryColor : undefined }) }), _jsx("button", { onClick: () => setVolume(volume > 0 ? 0 : 0.5), "aria-label": "Toggle Mute", children: volume > 0 ? _jsx(Volume2, { size: 18 }) : _jsx(VolumeX, { size: 18 }) }), _jsx("button", { onClick: toggleFullscreen, "aria-label": "Toggle Fullscreen", children: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }) })] })] })] }));
+                                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,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { User } from "lucide-react";
@@ -11,171 +12,57 @@ const sizeMap = {
     "2xl": 64,
 };
 const fontSizeMap = {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 16,
-    xl: 18,
-    "2xl": 20,
+    xs: "text-[10px]",
+    sm: "text-[12px]",
+    md: "text-[14px]",
+    lg: "text-[16px]",
+    xl: "text-[18px]",
+    "2xl": "text-[20px]",
 };
-const statusSizeMap = {
-    xs: 6,
-    sm: 8,
-    md: 10,
-    lg: 12,
-    xl: 14,
-    "2xl": 16,
+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",
 };
-// --- Helpers ---
-const getVariantStyles = (variant) => {
-    switch (variant) {
-        case "square":
-            return "0px";
-        case "rounded":
-            return "8px";
-        default:
-            return "50%";
-    }
+const variantMap = {
+    circular: "rounded-full",
+    rounded: "rounded-lg",
+    square: "rounded-none",
 };
-const getStatusPositionStyle = (position, offset) => {
-    switch (position) {
-        case "top-left":
-            return { top: 2, left: 2 };
-        case "top-right":
-            return { top: 2, right: 2 };
-        case "bottom-left":
-            return { bottom: 2, left: 2 };
-        default:
-            return { bottom: 2, right: 2 };
-    }
-};
-const getSpacingOffset = (spacing, dim) => {
-    switch (spacing) {
-        case "tight":
-            return -(dim * 0.5);
-        case "loose":
-            return -(dim * 0.15);
-        default:
-            return -(dim * 0.35);
-    }
+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, className = "", style, statusClassName = "", statusStyle, statusPosition = "bottom-right", fallback, ring = false, ringColor = "#3b82f6", onClick, }) => {
+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 [isHovered, setIsHovered] = useState(false);
-    const isResponsive = size === "responsive";
-    const dimension = !isResponsive ? sizeMap[size] : undefined;
-    const fontSize = !isResponsive ? fontSizeMap[size] : "clamp(10px, 2vw, 16px)";
-    const statusSize = !isResponsive ? statusSizeMap[size] : 10;
-    const borderRadius = getVariantStyles(variant);
-    const initials = fallback || alt
-        .split(" ")
-        .map((n) => n[0])
-        .join("")
-        .toUpperCase()
-        .slice(0, 2);
-    const statusColor = isOnline ? "#10b981" : isOffline ? "#6b7280" : "";
-    const statusLabel = isOnline ? "Online" : isOffline ? "Offline" : "";
-    const showImage = src && !imageError;
     const clickable = !!onClick;
-    return (_jsxs("div", { className: className, role: clickable ? "button" : "img", tabIndex: clickable ? 0 : -1, "aria-label": alt, onClick: onClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onKeyDown: (e) => {
+    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?.();
             }
-        }, style: {
-            position: "relative",
-            width: isResponsive ? "100%" : dimension,
-            height: isResponsive ? "100%" : dimension,
-            borderRadius,
-            overflow: "visible",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            cursor: clickable ? "pointer" : "default",
-            transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
-            transform: isHovered && clickable ? "scale(1.05)" : "scale(1)",
-            boxShadow: ring
-                ? `0 0 0 3px ${ringColor}22, 0 0 0 1px ${ringColor}`
-                : isHovered && clickable
-                    ? "0 6px 16px rgba(0, 0, 0, 0.15)"
-                    : "0 1px 3px rgba(0, 0, 0, 0.1)",
-            ...style,
-        }, children: [showImage ? (_jsx("img", { src: src, alt: alt, onError: () => setImageError(true), loading: "lazy", style: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                    borderRadius,
-                    transition: "opacity 0.3s ease-in-out",
-                } })) : (_jsx("div", { style: {
-                    width: "100%",
-                    height: "100%",
-                    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                    color: "#fff",
-                    fontSize,
-                    fontWeight: 600,
-                    borderRadius,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: initials || _jsx(User, { size: dimension ? dimension * 0.5 : 20 }) })), (isOnline || isOffline) && (_jsx("div", { className: statusClassName, "aria-label": statusLabel, title: statusLabel, style: {
-                    position: "absolute",
-                    width: statusSize,
-                    height: statusSize,
-                    borderRadius: "50%",
-                    backgroundColor: statusColor,
-                    border: "2px solid white",
-                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
-                    ...getStatusPositionStyle(statusPosition, statusSize),
+        }, 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,
                 } }))] }));
 };
-// --- AvatarGroup Component ---
-export const AvatarGroup = ({ avatars, max = 4, size = "md", className = "", style, spacing = "normal", direction = "left", }) => {
-    const isResponsive = size === "responsive";
-    const dimension = !isResponsive ? sizeMap[size] : 40;
-    const fontSize = !isResponsive ? fontSizeMap[size] : "clamp(10px, 2vw, 14px)";
-    const spacingOffset = getSpacingOffset(spacing, dimension);
-    const visibleAvatars = avatars.slice(0, max);
-    const extraCount = avatars.length - max;
-    return (_jsxs("div", { className: className, style: {
-            display: "flex",
-            alignItems: "center",
-            flexDirection: direction === "right" ? "row-reverse" : "row",
-            flexWrap: "wrap",
-            ...style,
-        }, role: "group", "aria-label": `Avatar group with ${avatars.length} members`, children: [visibleAvatars.map((avatar, i) => {
-                const isFirst = direction === "left" ? i === 0 : i === visibleAvatars.length - 1;
-                const zIndex = direction === "left" ? visibleAvatars.length - i : i + 1;
-                return (_jsx("div", { style: {
-                        marginLeft: direction === "left" && !isFirst ? spacingOffset : 0,
-                        marginRight: direction === "right" && !isFirst ? spacingOffset : 0,
-                        zIndex,
-                        position: "relative",
-                        transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.transform = `translateY(-3px) scale(1.05)`;
-                        e.currentTarget.style.zIndex = "100";
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.transform = "translateY(0) scale(1)";
-                        e.currentTarget.style.zIndex = zIndex.toString();
-                    }, children: _jsx(Avatar, { ...avatar, size: size }) }, i));
-            }), extraCount > 0 && (_jsxs("div", { style: {
-                    marginLeft: direction === "left" ? spacingOffset : 0,
-                    marginRight: direction === "right" ? spacingOffset : 0,
-                    width: dimension,
-                    height: dimension,
-                    borderRadius: "50%",
-                    background: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)",
-                    color: "#374151",
-                    fontSize,
-                    fontWeight: 600,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    border: "3px solid white",
-                    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-                    userSelect: "none",
-                }, title: `${extraCount} more members`, children: ["+", extraCount] }))] }));
-};