@neuctra/ui 0.2.3 → 0.2.5

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = {
@@ -27,7 +27,6 @@ const typeStyles = {
         Icon: _jsx(Info, { size: 20 }),
     },
 };
-/** 📍 Dynamic position styles */
 const getPositionStyle = (position) => {
     const base = {
         position: "fixed",
@@ -50,22 +49,24 @@ const getPositionStyle = (position) => {
             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 */
+    const [visible, setVisible] = useState(false);
+    const [exiting, setExiting] = useState(false);
     useEffect(() => {
+        setVisible(true);
         if (duration) {
             const timer = setTimeout(() => {
-                setVisible(false);
-                onClose?.();
+                setExiting(true);
+                setTimeout(() => {
+                    setVisible(false);
+                    onClose?.();
+                }, parseInt(animationDuration));
             }, duration);
             return () => clearTimeout(timer);
         }
-    }, [duration, onClose]);
+    }, [duration, onClose, animationDuration]);
     const { bg, border, iconColor, Icon } = typeStyles[type];
     const positionStyle = getPositionStyle(position);
-    /** Combine computed and custom styles */
     const containerStyle = useMemo(() => ({
         ...positionStyle,
         display: "flex",
@@ -79,18 +80,19 @@ export const Alert = ({ title, description, type = "info", dismissible = true, d
         padding,
         maxWidth,
         width: "calc(100% - 2.5rem)",
-        opacity: visible ? 1 : 0,
-        transform: visible
-            ? position.includes("bottom")
-                ? "translateY(0)"
-                : "translateY(0)"
+        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,
@@ -103,24 +105,37 @@ export const Alert = ({ title, description, type = "info", dismissible = true, d
         backgroundColor,
         animationDuration,
         style,
+        fontSize,
+        fontWeight,
     ]);
     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 }) }))] }));
+    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";

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from "react";
 const CardInner = ({ as, children, className = "", variant = "elevated", background = "#fff", textColor = "#000", borderRadius = 12, border, boxShadow, hoverShadow, padding = 16, margin, width, height, style = {}, hoverStyle = {}, onClick, ...rest }, ref) => {
     const Component = as || "div";
-    // Default styling based on variant
+    // Default styling for known variants; unknown variants can be customized
     const baseVariantStyles = {
         elevated: {
             boxShadow: boxShadow || "0 4px 12px rgba(0,0,0,0.08)",
@@ -28,17 +28,19 @@ const CardInner = ({ as, children, className = "", variant = "elevated", backgro
         transition: "all 0.25s ease",
         cursor: onClick ? "pointer" : undefined,
         boxSizing: "border-box",
-        ...baseVariantStyles[variant],
+        ...(baseVariantStyles[variant] || {}), // fallback if variant is custom
         ...style,
     };
-    return (_jsx(Component, { ref: ref, className: `ui-card ${className}`, style: cardStyle, onClick: onClick, onMouseEnter: (e) => {
-            Object.assign(e.currentTarget.style, hoverShadow ? { boxShadow: hoverShadow } : hoverStyle);
-        }, onMouseLeave: (e) => {
-            Object.assign(e.currentTarget.style, {
-                ...baseVariantStyles[variant],
-                ...style,
-            });
-        }, ...rest, children: children }));
+    const handleMouseEnter = (e) => {
+        Object.assign(e.currentTarget.style, hoverShadow ? { boxShadow: hoverShadow } : hoverStyle);
+    };
+    const handleMouseLeave = (e) => {
+        Object.assign(e.currentTarget.style, {
+            ...cardStyle,
+            ...(baseVariantStyles[variant] || {}),
+        });
+    };
+    return (_jsx(Component, { ref: ref, className: `ui-card ${className}`, style: cardStyle, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: children }));
 };
 const ForwardedCard = forwardRef(CardInner);
 const Card = Object.assign(ForwardedCard, { displayName: "Card" });

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckboxGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className = "", customIcon, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", iconUncheckedBorderColor = "#9ca3af", textColor = "#374151", errorStyle, }) => {
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        const updatedValues = selectedValues.includes(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        onChange(updatedValues);
+    };
+    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 8, ...style }, role: "group", "aria-disabled": disabled, children: [options.map((option) => {
+                const isChecked = selectedValues.includes(option.value);
+                return (_jsxs("label", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        cursor: disabled ? "not-allowed" : "pointer",
+                        opacity: disabled ? 0.6 : 1,
+                        gap: 8,
+                        userSelect: "none",
+                        ...labelStyle,
+                    }, children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: "checkbox", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => handleChange(option.value), style: { display: "none" } }), customIcon ? (customIcon(isChecked)) : (_jsx("span", { style: {
+                                display: "inline-flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                width: iconSize,
+                                height: iconSize,
+                                borderRadius: 4,
+                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
+                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
+                                transition: "all 0.25s ease",
+                            }, children: isChecked && (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", style: { width: iconSize * 0.6, height: iconSize * 0.6 }, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) }))] }, option.value));
+            }), error && (_jsx("p", { role: "alert", style: {
+                    color: "#dc2626",
+                    fontSize: 12,
+                    marginTop: 4,
+                    ...errorStyle,
+                }, children: error }))] }));
+};