@neuctra/ui 0.2.4 → 0.2.6

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

@@ -1,66 +1,27 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from "react";
-export const Badge = memo(({ text, color = "#2563eb", textColor = "#fff", borderColor = "#2563eb", borderWidth = "0", icon, iconPosition = "left", rounded = false, borderRadius, fontSize = "13px", fontWeight = 500, horizontalPadding = "10px", verticalPadding = "4px", margin = "0", shadow = "0 1px 3px rgba(0,0,0,0.1)", notificationDot = false, dotColor = "#ef4444", count, pulse = false, style, className = "", onClick, }) => {
-    const baseStyle = {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: color,
-        color: textColor,
-        border: `${borderWidth} solid ${borderColor}`,
-        borderRadius: borderRadius || (rounded ? "9999px" : "6px"),
-        padding: `${verticalPadding} ${horizontalPadding}`,
-        fontSize,
-        fontWeight,
-        margin,
-        boxShadow: shadow,
-        position: "relative",
-        cursor: onClick ? "pointer" : "default",
-        userSelect: "none",
-        lineHeight: 1,
-        transition: "all 0.2s ease",
-        ...style,
+import clsx from "clsx";
+/* -------------------------------------------------------------------------- */
+/*                                🏷 Badge                                    */
+/* -------------------------------------------------------------------------- */
+export const Badge = memo(({ text, icon, iconPosition = "left", primaryTheme = true, primaryColor = "#3b82f6", size = "md", rounded = true, notificationDot = false, dotColor = "#ef4444", count, pulse = false, className, onClick, }) => {
+    /** 📏 Sizes */
+    const sizes = {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-3 py-1 text-xs",
+        lg: "px-4 py-1.5 text-sm",
     };
-    const dotStyle = {
-        position: "absolute",
-        top: "-4px",
-        right: "-4px",
-        height: "8px",
-        width: "8px",
-        backgroundColor: dotColor,
-        borderRadius: "50%",
-        animation: pulse ? "pulseAnim 1.2s infinite" : undefined,
-    };
-    const countStyle = {
-        position: "absolute",
-        top: "-8px",
-        right: "-8px",
-        backgroundColor: dotColor,
-        color: "#fff",
-        borderRadius: "50%",
-        minWidth: "18px",
-        height: "18px",
-        fontSize: "11px",
-        padding: "0 5px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        lineHeight: 1,
-    };
-    const iconStyle = {
-        display: "flex",
-        alignItems: "center",
-        margin: icon && text
-            ? iconPosition === "left"
-                ? "0 6px 0 0"
-                : "0 0 0 6px"
-            : 0,
-    };
-    return (_jsxs("span", { style: baseStyle, className: className, onClick: onClick, children: [notificationDot && _jsx("span", { style: dotStyle }), typeof count !== "undefined" && _jsx("span", { style: countStyle, children: count }), icon && iconPosition === "left" && _jsx("span", { style: iconStyle, children: icon }), text && _jsx("span", { children: text }), icon && iconPosition === "right" && _jsx("span", { style: iconStyle, children: icon }), _jsx("style", { children: `
-            @keyframes pulseAnim {
-              0% { transform: scale(1); opacity: 1; }
-              50% { transform: scale(1.5); opacity: 0.5; }
-              100% { transform: scale(1); opacity: 1; }
-            }
-          ` })] }));
+    /** 🎨 Theme */
+    const themeClasses = primaryTheme
+        ? "bg-[var(--primary)] text-white"
+        : "";
+    const dynamicStyle = !primaryTheme
+        ? {
+            backgroundColor: primaryColor,
+            color: "#fff",
+        }
+        : {};
+    return (_jsxs("span", { onClick: onClick, style: !primaryTheme ? dynamicStyle : undefined, className: clsx("relative inline-flex items-center justify-center gap-1 font-medium", "transition-all duration-200 select-none", rounded ? "rounded-full" : "rounded-md", sizes[size], themeClasses, onClick && "cursor-pointer hover:opacity-90", className), children: [notificationDot && (_jsx("span", { style: !primaryTheme ? { backgroundColor: dotColor } : undefined, className: clsx("absolute -top-1 -right-1 w-2 h-2 rounded-full", pulse && "animate-ping", primaryTheme ? "bg-red-500" : "") })), count !== undefined && (_jsx("span", { style: !primaryTheme ? { backgroundColor: dotColor } : undefined, className: clsx("absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 text-[10px]", "flex items-center justify-center rounded-full text-white", primaryTheme ? "bg-red-500" : ""), children: count })), icon && iconPosition === "left" && (_jsx("span", { className: "flex items-center", children: icon })), text && _jsx("span", { children: text }), icon && iconPosition === "right" && (_jsx("span", { className: "flex items-center", children: icon }))] }));
 });
+Badge.displayName = "Badge";

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

@@ -1,101 +1,28 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-/** 🌈 Default color palette */
-const defaultColors = {
-    light: {
-        default: "#111",
-        primary: "#2563eb",
-        success: "#16a34a",
-        danger: "#dc2626",
-        white: "#ffffff",
-        muted: "#6b7280",
-        border: "#d1d5db",
-        hover: "#1d4ed8",
-        text: "#ffffff",
-    },
-    dark: {
-        default: "#f8fafc",
-        primary: "#60a5fa",
-        success: "#22c55e",
-        danger: "#f87171",
-        white: "#ffffff",
-        muted: "#9ca3af",
-        border: "#374151",
-        hover: "#3b82f6",
-        text: "#000000",
-    },
-};
-/** 🎨 Adjust color shade utility */
-function adjustColor(color, amount) {
-    if (!color.startsWith("#") || color.length !== 7)
-        return color;
-    return ("#" +
-        color
-            .replace(/^#/, "")
-            .replace(/../g, (hex) => ("0" +
-            Math.min(255, Math.max(0, parseInt(hex, 16) + amount)).toString(16)).slice(-2)));
-}
-/** 💎 Minimal customizable Button */
-export const Button = ({ children, type = "button", onClick, iconBefore, iconAfter, className = "", style, fullWidth = false, disabled = false, loading = false, loadingText = "Loading...", darkMode = false, baseColor, size = "md", rounded = true, showBorder = false, // ✅ default: no border
- }) => {
-    const [hovered, setHovered] = useState(false);
-    /** 🧠 Theme system */
-    const theme = useMemo(() => {
-        if (!baseColor)
-            return defaultColors[darkMode ? "dark" : "light"];
-        const light = {
-            primary: baseColor,
-            hover: adjustColor(baseColor, -40),
-            text: "#ffffff",
-            border: adjustColor(baseColor, -60),
-        };
-        const dark = {
-            primary: adjustColor(baseColor, 60),
-            hover: adjustColor(baseColor, 80),
-            text: "#000000",
-            border: adjustColor(baseColor, 40),
-        };
-        return darkMode ? dark : light;
-    }, [baseColor, darkMode]);
+import { forwardRef } from "react";
+import clsx from "clsx";
+/* -------------------------------------------------------------------------- */
+/*                               🔘 Button                                    */
+/* -------------------------------------------------------------------------- */
+export const Button = forwardRef(({ children, iconBefore, iconAfter, loading = false, loadingText = "Loading...", fullWidth = false, primaryTheme = true, primaryColor = "#3b82f6", size = "md", disabled, className, ...props }, ref) => {
     /** 📏 Sizes */
-    const sizes = {
-        sm: { px: 16, py: 6, font: "0.85rem" },
-        md: { px: 24, py: 10, font: "1rem" },
-        lg: { px: 32, py: 14, font: "1.125rem" },
+    const sizeClasses = {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-5 py-2.5 text-sm",
+        lg: "px-6 py-3 text-base",
     };
-    const s = sizes[size];
-    /** 💅 Computed styles */
-    const buttonStyle = {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "8px",
-        padding: `${s.py}px ${s.px}px`,
-        fontSize: s.font,
-        fontWeight: 500,
-        borderRadius: rounded ? 8 : 3,
-        border: showBorder ? `1px solid ${theme.border}` : "none", // ✅ conditional border
-        width: fullWidth ? "100%" : "auto",
-        backgroundColor: hovered && !disabled ? theme.hover : theme.primary,
-        color: theme.text,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
-        transition: "all 0.25s ease-in-out",
-        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.15)",
-        ...style,
-    };
-    return (_jsxs("button", { type: type, className: className, style: buttonStyle, onClick: !disabled && !loading ? onClick : undefined, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), disabled: disabled, children: [loading ? (_jsxs(_Fragment, { children: [_jsx("span", { style: {
-                            width: "16px",
-                            height: "16px",
-                            border: "2px solid currentColor",
-                            borderTopColor: "transparent",
-                            borderRadius: "50%",
-                            animation: "spin 1s linear infinite",
-                        } }), _jsx("span", { children: loadingText })] })) : (_jsxs(_Fragment, { children: [iconBefore && _jsx("span", { children: iconBefore }), _jsx("span", { children: children }), iconAfter && _jsx("span", { children: iconAfter })] })), _jsx("style", { children: `
-          @keyframes spin {
-            to { transform: rotate(360deg); }
-          }
-        ` })] }));
-};
-export default Button;
+    /** 🎨 Theme styles */
+    const themeClasses = primaryTheme
+        ? "bg-[var(--primary)] text-white hover:bg-[var(--primary)]/90 focus:ring-[var(--primary)]/30"
+        : "";
+    /** 🎨 Dynamic fallback for non-primary theme */
+    const dynamicStyle = !primaryTheme
+        ? {
+            backgroundColor: primaryColor,
+            color: "#fff",
+        }
+        : {};
+    return (_jsx("button", { ref: ref, disabled: disabled || loading, style: !primaryTheme ? dynamicStyle : undefined, className: clsx("inline-flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-offset-1", sizeClasses[size], themeClasses, fullWidth && "w-full", (disabled || loading) && "opacity-60 cursor-not-allowed", className), ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" }), _jsx("span", { children: loadingText })] })) : (_jsxs(_Fragment, { children: [iconBefore && (_jsx("span", { className: "flex items-center justify-center", children: iconBefore })), _jsx("span", { children: children }), iconAfter && (_jsx("span", { className: "flex items-center justify-center", children: iconAfter }))] })) }));
+});
+Button.displayName = "Button";

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

@@ -1,26 +1,49 @@
 "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, }) => {
+import { useState, useEffect, useRef } from "react";
+import clsx from "clsx";
+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, darkMode = false, }) => {
+    const containerRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(null);
     const handleChange = (value) => {
-        if (!onChange)
+        if (!onChange || disabled || readOnly)
             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) => {
+    // Keyboard navigation (space/enter toggle)
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleKeyDown = (e) => {
+            if (disabled)
+                return;
+            if (focusedIndex === null)
+                return;
+            const currentIndex = focusedIndex;
+            if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+                e.preventDefault();
+                setFocusedIndex((currentIndex + 1) % options.length);
+            }
+            if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+                e.preventDefault();
+                setFocusedIndex((currentIndex - 1 + options.length) % options.length);
+            }
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                handleChange(options[currentIndex].value);
+            }
+        };
+        container.addEventListener("keydown", handleKeyDown);
+        return () => container.removeEventListener("keydown", handleKeyDown);
+    }, [focusedIndex, options, selectedValues, disabled]);
+    return (_jsxs("div", { ref: containerRef, role: "group", "aria-disabled": disabled, "aria-invalid": !!error, tabIndex: 0, className: clsx("flex flex-col gap-2", className), style: { ...style }, children: [options.map((option, index) => {
                 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: {
+                const isFocused = focusedIndex === index;
+                return (_jsxs("label", { className: clsx("flex items-center justify-between cursor-pointer select-none transition-opacity", disabled ? "opacity-50 cursor-not-allowed" : "opacity-100", isFocused ? "ring-2 ring-blue-400" : ""), style: { ...labelStyle }, onFocus: () => setFocusedIndex(index), 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",

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

@@ -1,45 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-/** Tailwind-like container widths */
-const containerWidths = {
-    sm: "640px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1280px",
-    "2xl": "1536px",
-    full: "100%",
+import clsx from "clsx";
+const sizeMap = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+    full: "w-full",
+};
+const paddingMap = {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+    xl: "p-12",
 };
 /**
  * 🧱 Container Component
- * A flexible, responsive layout wrapper inspired by Tailwind's container.
+ * Fully responsive, Tailwind-first layout wrapper
  */
-export const Container = ({ size = "lg", padding = 0, margin = "0 auto", backgroundColor = "transparent", center = true, width, height = "auto", borderRadius = 0, style, className = "", children, }) => {
-    const styles = useMemo(() => {
-        const computedPadding = typeof padding === "number" ? `${padding}px` : padding;
-        const computedMargin = center && margin === "0 auto" ? "0 auto" : margin;
-        const computedBorderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
-        return {
-            maxWidth: width ?? containerWidths[size],
-            margin: computedMargin,
-            padding: computedPadding,
-            backgroundColor,
-            height,
-            borderRadius: computedBorderRadius,
-            boxSizing: "border-box",
-            width: width ?? "100%",
-            ...style,
-        };
-    }, [
-        size,
-        padding,
-        margin,
-        backgroundColor,
-        width,
-        height,
-        borderRadius,
-        center,
-        style,
-    ]);
-    return (_jsx("div", { className: className, style: styles, children: children }));
+export const Container = ({ size = "lg", padding = "md", center = true, className = "", children, }) => {
+    const classes = clsx("w-full box-border", sizeMap[size], paddingMap[padding], center && "mx-auto", className);
+    return _jsx("div", { className: classes, children: children });
 };
 export default Container;

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

@@ -1,36 +1,21 @@
+"use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { X } from "lucide-react";
-export const DrawerButton = ({ label = "Open Drawer", icon, iconPosition = "left", onClick, color = "#2563eb", textColor = "#fff", borderRadius = "6px", padding = "10px 16px", fontSize = "14px", gap = "8px", style, className = "", }) => (_jsxs("button", { onClick: onClick, style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: color,
-        color: textColor,
-        border: "none",
-        borderRadius,
-        padding,
-        fontSize,
-        gap,
-        cursor: "pointer",
-        fontWeight: 500,
-        transition: "all 0.2s ease",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
-        ...style,
-    }, className: className, children: [icon && iconPosition === "left" && icon, label, icon && iconPosition === "right" && icon] }));
-export const Drawer = ({ open, onClose, position = "right", width = "320px", height = "320px", backgroundColor = "#fff", backdropColor = "rgba(0,0,0,0.5)", transitionDuration = 300, style, className = "", children, showCloseButton = true, closeIconColor = "#000", closeButtonStyle, }) => {
-    const [visible, setVisible] = useState(open);
-    // Handle mount/unmount delay for smooth fade-out
+export const DrawerButton = ({ label = "Open Drawer", icon, iconPosition = "left", onClick, className = "", }) => {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: `inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 ${className}`, children: [icon && iconPosition === "left" && icon, label, icon && iconPosition === "right" && icon] }));
+};
+export const Drawer = ({ open, onClose, position = "right", size = "320px", children, showCloseButton = true, className = "", overlayClassName = "", closeButtonClassName = "", }) => {
+    const [mounted, setMounted] = useState(open);
     useEffect(() => {
         if (open)
-            setVisible(true);
+            setMounted(true);
         else
-            setTimeout(() => setVisible(false), transitionDuration);
-    }, [open, transitionDuration]);
-    // Drawer transform direction
+            setTimeout(() => setMounted(false), 300); // smooth exit
+    }, [open]);
     const transform = useMemo(() => {
         if (open)
-            return "translate(0, 0)";
+            return "translate(0,0)";
         switch (position) {
             case "left":
                 return "translateX(-100%)";
@@ -41,54 +26,18 @@ export const Drawer = ({ open, onClose, position = "right", width = "320px", hei
             case "bottom":
                 return "translateY(100%)";
             default:
-                return "translate(0, 0)";
+                return "translate(0,0)";
         }
     }, [open, position]);
-    const drawerStyle = {
-        position: "fixed",
-        backgroundColor,
-        transition: `transform ${transitionDuration}ms ease, opacity ${transitionDuration}ms ease`,
-        transform,
-        opacity: open ? 1 : 0,
-        zIndex: 1001,
-        ...style,
-        ...(position === "left" || position === "right"
-            ? { top: 0, bottom: 0, [position]: 0, width, height: "100%" }
-            : { left: 0, right: 0, [position]: 0, height, width: "100%" }),
-    };
-    const overlayStyle = {
-        position: "fixed",
-        inset: 0,
-        backgroundColor: backdropColor,
-        opacity: open ? 1 : 0,
-        transition: `opacity ${transitionDuration}ms ease`,
-        zIndex: 1000,
-        display: visible ? "block" : "none",
-        pointerEvents: open ? "auto" : "none",
-    };
-    const defaultCloseButtonStyle = {
-        position: "absolute",
-        top: "12px",
-        right: "12px",
-        background: "none",
-        border: "none",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "transform 0.2s ease, opacity 0.2s ease",
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: overlayStyle, onClick: onClose }), _jsxs("div", { style: {
-                    ...drawerStyle,
-                    display: "flex",
-                    flexDirection: "column",
-                    visibility: visible ? "visible" : "hidden",
-                    pointerEvents: open ? "auto" : "none",
-                    boxShadow: "0 0 20px rgba(0,0,0,0.15)",
-                }, className: className, children: [showCloseButton && (_jsx("button", { onClick: onClose, style: { ...defaultCloseButtonStyle, ...closeButtonStyle }, "aria-label": "Close drawer", children: _jsx(X, { size: 22, color: closeIconColor }) })), _jsx("div", { style: {
-                            flex: 1,
-                            overflowY: "auto",
-                            padding: "16px",
-                            scrollbarWidth: "thin",
-                        }, children: children })] })] }));
+    if (!mounted && !open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: onClose, className: `fixed inset-0 bg-black/50 transition-opacity ${open ? "opacity-100" : "opacity-0"} ${overlayClassName}` }), _jsxs("div", { className: `fixed bg-white shadow-lg flex flex-col transition-transform duration-300 ${className}`, style: {
+                    width: position === "left" || position === "right" ? size : "100%",
+                    height: position === "top" || position === "bottom" ? size : "100%",
+                    top: position === "bottom" || position === "top" ? (position === "bottom" ? "auto" : 0) : 0,
+                    bottom: position === "bottom" ? 0 : "auto",
+                    left: position === "left" ? 0 : position === "right" ? "auto" : 0,
+                    right: position === "right" ? 0 : position === "left" ? "auto" : 0,
+                    transform,
+                }, children: [showCloseButton && (_jsx("button", { onClick: onClose, className: `absolute top-4 right-4 p-1 rounded-full hover:bg-gray-200 transition-colors ${closeButtonClassName}`, "aria-label": "Close drawer", children: _jsx(X, { size: 20 }) })), _jsx("div", { className: "flex-1 overflow-auto p-4", children: children })] })] }));
 };