@neuctra/ui 0.2.2 → 0.2.4

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,141 @@
+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" };
+    }
+};
+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);
+        }
+    }, [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 }) }))] })] }));
+};
+Alert.displayName = "Alert";