@neuctra/ui 0.2.5 → 0.2.7

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

@@ -1,123 +1,82 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useImperativeHandle, forwardRef, } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useImperativeHandle, useRef, } from "react";
 import { Eye, EyeOff } from "lucide-react";
 export const Input = forwardRef((props, ref) => {
-    const { type = "text", label, placeholder = "", name = "", value, defaultValue, onChange, disabled = false, readOnly = false, required = false, error, success = false, autoFocus = false, iconLeft, iconRight, 
-    /** 🎨 Styling props */
-    labelColor = "#374151", placeholderColor = "#9ca3af", backgroundColor = "#ffffff", textColor = "#111827", borderColor = "#d1d5db", hoverBorderColor = "#9ca3af", focusBorderColor = "#2563eb", errorColor = "#dc2626", successColor = "#16a34a", iconColor = "#6b7280", shadow = "0 1px 2px rgba(0,0,0,0.05)", 
-    /** 📏 Layout + size */
-    size = "md", fontSize = "14px", fontFamily = "Inter, system-ui, sans-serif", radius = "8px", rows = 4, cols, maxLength, resize = true, showCharacterCount = true, paddingX, paddingY, className, style, } = props;
+    const { label, name = "", type = "text", placeholder = "", value, defaultValue, onChange, required, disabled, readOnly, error, success, helperText, icon: LabelIcon, prefix, prefixIcon: PrefixIcon, suffixIcon, min, max, step, rows = 4, primaryTheme = true, primaryColor = "#3b82f6", className = "", } = props;
     const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
     const [localValue, setLocalValue] = useState(defaultValue || "");
     const [visible, setVisible] = useState(false);
-    useImperativeHandle(ref, () => inputRef.current);
-    /** ✅ Make it controlled properly */
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        if (maxLength && newValue.length > maxLength)
-            return;
-        setLocalValue(newValue);
-        if (onChange)
-            onChange(name, newValue);
-    };
+    const hasPrefixIcon = Boolean(PrefixIcon);
+    const hasPrefixText = Boolean(prefix);
+    const hasPrefix = hasPrefixIcon || hasPrefixText;
     const currentValue = value !== undefined ? value : localValue;
-    /** 🎯 Dynamic border colors */
-    const currentBorderColor = error
-        ? errorColor
-        : success
-            ? successColor
-            : borderColor;
-    /** 🧠 Size tokens */
-    const sizes = {
-        sm: { paddingY: "6px", paddingX: "10px", font: "13px" },
-        md: { paddingY: "10px", paddingX: "14px", font: "14px" },
-        lg: { paddingY: "14px", paddingX: "18px", font: "16px" },
-    }[size];
-    const px = paddingX || sizes.paddingX;
-    const py = paddingY || sizes.paddingY;
-    /** 💅 Base input styles */
-    const baseInputStyle = {
-        width: "100%",
-        border: `1px solid ${currentBorderColor}`,
-        borderRadius: radius,
-        backgroundColor,
-        color: textColor,
-        fontFamily,
-        fontSize,
-        padding: `${py} ${px}`,
-        paddingLeft: iconLeft ? "40px" : px,
-        paddingRight: iconRight || type === "password" ? "40px" : px,
-        outline: "none",
-        transition: "border-color 0.25s ease, box-shadow 0.25s ease",
-        resize: type === "textarea" && !resize ? "none" : undefined,
-        boxShadow: shadow,
-        ...style,
-    };
-    /** 🧠 Placeholder dynamic color */
-    const dynamicPlaceholder = {
-        "::placeholder": {
-            color: placeholderColor,
-            opacity: 1,
-        },
+    const handleChange = (e) => {
+        const val = e.target.value;
+        setLocalValue(val);
+        onChange?.(name, val);
     };
-    /** 🎨 Dynamic border behavior */
-    const applyDynamicBorder = (el, color) => {
-        if (el)
-            el.style.borderColor = color;
+    const handleKeyDown = (e) => {
+        if (type === "number" && e.key === "-")
+            e.preventDefault();
     };
-    const commonEvents = {
-        onFocus: (e) => applyDynamicBorder(e.currentTarget, focusBorderColor),
-        onBlur: (e) => applyDynamicBorder(e.currentTarget, currentBorderColor),
-        onMouseEnter: (e) => applyDynamicBorder(e.currentTarget, hoverBorderColor),
-        onMouseLeave: (e) => applyDynamicBorder(e.currentTarget, currentBorderColor),
+    /** Padding logic */
+    const getPadding = () => {
+        if (!hasPrefix)
+            return "px-4";
+        if (hasPrefixIcon && hasPrefixText)
+            return "pl-20 pr-4";
+        if (hasPrefixText)
+            return "pl-14 pr-4";
+        if (hasPrefixIcon)
+            return "pl-10 pr-4";
+        return "px-4";
     };
-    return (_jsxs("div", { className: className, style: {
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            fontFamily,
-        }, children: [label && (_jsxs("label", { htmlFor: name, style: {
-                    marginBottom: 6,
-                    color: labelColor,
-                    fontWeight: 500,
-                    fontSize: "14px",
-                }, children: [label, required && _jsx("span", { style: { color: errorColor }, children: " *" })] })), _jsxs("div", { style: { position: "relative", width: "100%" }, children: [iconLeft && (_jsx("span", { style: {
-                            position: "absolute",
-                            left: 12,
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            color: iconColor,
-                            pointerEvents: "none",
-                        }, children: iconLeft })), type === "textarea" ? (_jsx("textarea", { ref: inputRef, name: name, value: currentValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, rows: rows, cols: cols, maxLength: maxLength, autoFocus: autoFocus, style: { ...baseInputStyle, ...dynamicPlaceholder }, onChange: handleChange, ...commonEvents })) : (_jsx("input", { ref: inputRef, id: name, type: type === "password"
+    /** 🔥 Theme Styles */
+    const dynamicFocusStyle = !primaryTheme
+        ? {
+            borderColor: primaryColor,
+            boxShadow: `0 0 0 1px ${primaryColor}`,
+        }
+        : {};
+    const dynamicColorStyle = !primaryTheme
+        ? { color: primaryColor }
+        : {};
+    /** Border */
+    const borderStyle = error
+        ? "border-red-500"
+        : success
+            ? "border-emerald-500"
+            : "border-zinc-300 dark:border-zinc-800";
+    return (_jsxs("div", { className: `w-full space-y-1 ${className}`, children: [label && (_jsxs("label", { className: "flex items-center gap-2 text-[12px] font-medium text-gray-700 dark:text-zinc-100", children: [LabelIcon && (_jsx(LabelIcon, { size: 16, className: primaryTheme ? "text-[var(--primary)]" : "", style: !primaryTheme ? dynamicColorStyle : undefined })), label, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [hasPrefix && (_jsxs("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3 gap-2 text-sm text-zinc-400 pointer-events-none", children: [PrefixIcon && _jsx(PrefixIcon, { size: 14 }), hasPrefixText && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-zinc-600 dark:text-zinc-200", children: prefix }), _jsx("span", { className: "h-4 w-px bg-zinc-300 dark:bg-zinc-700" })] }))] })), type === "textarea" ? (_jsx("textarea", { ref: inputRef, name: name, value: currentValue, onChange: handleChange, placeholder: placeholder, required: required, disabled: disabled, readOnly: readOnly, rows: rows, style: !primaryTheme ? dynamicFocusStyle : undefined, className: `
+              w-full rounded-lg text-sm
+              bg-white dark:bg-zinc-900 border
+              text-gray-900 dark:text-white
+              placeholder:text-zinc-400
+              py-2.5 outline-none
+              focus:ring-1
+              ${primaryTheme && "focus:ring-[var(--primary)] focus:border-[var(--primary)]"}
+              ${getPadding()}
+              ${borderStyle}
+            ` })) : (_jsx("input", { ref: inputRef, type: type === "password"
                             ? visible
                                 ? "text"
                                 : "password"
-                            : type, name: name, value: currentValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, autoFocus: autoFocus, style: { ...baseInputStyle, ...dynamicPlaceholder }, onChange: handleChange, ...commonEvents })), type === "password" && (_jsx("button", { type: "button", onClick: () => setVisible(!visible), style: {
-                            position: "absolute",
-                            right: 10,
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            background: "transparent",
-                            border: "none",
-                            cursor: "pointer",
-                            color: iconColor,
-                            padding: 0,
-                        }, children: visible ? _jsx(EyeOff, { size: 18 }) : _jsx(Eye, { size: 18 }) })), iconRight && type !== "password" && (_jsx("span", { style: {
-                            position: "absolute",
-                            right: 12,
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            color: iconColor,
-                            pointerEvents: "none",
-                        }, children: iconRight }))] }), type === "textarea" && showCharacterCount && maxLength && (_jsxs("div", { style: {
-                    textAlign: "right",
-                    fontSize: "12px",
-                    color: "#6b7280",
-                    marginTop: 4,
-                }, children: [currentValue.length, "/", maxLength] })), error && (_jsx("div", { style: {
-                    color: errorColor,
-                    fontSize: "12px",
-                    marginTop: 4,
-                }, children: error }))] }));
+                            : type, name: name, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, required: required, disabled: disabled, readOnly: readOnly, min: type === "number" ? min ?? 0 : undefined, max: max, step: step, style: !primaryTheme ? dynamicFocusStyle : undefined, className: `
+              w-full rounded-lg text-sm
+              bg-white dark:bg-zinc-900 border
+              text-gray-900 dark:text-white
+              placeholder:text-zinc-400
+              py-2.5 outline-none
+              focus:ring-1
+              disabled:opacity-50 disabled:cursor-not-allowed
+              ${primaryTheme && "focus:ring-[var(--primary)] focus:border-[var(--primary)]"}
+              ${getPadding()}
+              ${borderStyle}
+            ` })), type === "password" && (_jsx("button", { type: "button", onClick: () => setVisible(!visible), className: "absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400", children: visible ? _jsx(EyeOff, { size: 18 }) : _jsx(Eye, { size: 18 }) })), suffixIcon && type !== "password" && (_jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400", children: suffixIcon }))] }), (helperText || error) && (_jsx("p", { className: `text-xs ${error
+                    ? "text-red-500"
+                    : success
+                        ? "text-emerald-500"
+                        : "text-zinc-500"}`, children: error && typeof error === "string" ? error : helperText }))] }));
 });

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

@@ -1,71 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ListItem = ({ text, icon, onClick, subItems, bulletColor = "#2563eb", textColor = "#111827", fontSize = "15px", fontWeight = 500, spacing = "12px", isInline = false, }) => {
-    const itemContainerStyle = {
-        display: "flex",
-        flexDirection: "column",
-        gap: "6px",
-        marginBottom: isInline ? "0" : spacing,
-    };
-    const contentStyle = {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        fontSize,
-        fontWeight,
-        color: textColor,
-        cursor: onClick ? "pointer" : "default",
-        transition: "color 0.2s ease, transform 0.2s ease",
-    };
-    const bulletStyle = {
-        width: "8px",
-        height: "8px",
-        backgroundColor: bulletColor,
-        borderRadius: "50%",
-        flexShrink: 0,
-    };
-    const subListStyle = {
-        listStyleType: "disc",
-        paddingLeft: "20px",
-        margin: 0,
-    };
-    return (_jsxs("li", { style: itemContainerStyle, children: [_jsxs("div", { style: contentStyle, onClick: onClick, onMouseEnter: (e) => (e.currentTarget.style.color = bulletColor), onMouseLeave: (e) => (e.currentTarget.style.color = textColor), children: [icon ? (_jsx("span", { style: { fontSize: "16px", color: textColor }, children: icon })) : (!isInline && _jsx("span", { style: bulletStyle })), _jsx("span", { children: text })] }), subItems && subItems.length > 0 && (_jsx("ul", { style: subListStyle, children: subItems.map((sub, index) => (_jsx(ListItem, { ...sub, bulletColor: bulletColor, textColor: textColor, fontSize: fontSize, fontWeight: fontWeight, spacing: spacing, isInline: false }, index))) }))] }));
+import clsx from "clsx";
+const ListItem = ({ text, icon, onClick, subItems, isInline, isOrdered, primaryTheme = true, primaryColor = "#3b82f6", itemClassName, bulletClassName, }) => {
+    // ✅ Dynamic style for primary color
+    const dynamicStyle = !primaryTheme
+        ? { color: primaryColor }
+        : {};
+    const bulletStyle = !primaryTheme
+        ? { backgroundColor: primaryColor }
+        : {};
+    return (_jsxs("li", { className: clsx(!isInline && "mb-3"), children: [_jsxs("div", { onClick: onClick, style: !primaryTheme ? dynamicStyle : undefined, className: clsx("flex items-center gap-2 text-sm text-zinc-800 dark:text-zinc-200 transition-all", onClick &&
+                    (primaryTheme
+                        ? "cursor-pointer hover:text-[var(--primary)]"
+                        : "cursor-pointer"), itemClassName), children: [icon ? (_jsx("span", { className: "text-base", children: icon })) : (!isInline &&
+                        !isOrdered && (_jsx("span", { style: !primaryTheme ? bulletStyle : undefined, className: clsx("w-2 h-2 rounded-full", primaryTheme && "bg-[var(--primary)]", bulletClassName) }))), _jsx("span", { children: text })] }), subItems && subItems.length > 0 && (_jsx("ul", { className: clsx("pl-5 mt-2 space-y-2", isOrdered ? "list-decimal" : "list-none"), children: subItems.map((sub, i) => (_jsx(ListItem, { ...sub, isInline: false, isOrdered: isOrdered, primaryTheme: primaryTheme, primaryColor: primaryColor, itemClassName: itemClassName, bulletClassName: bulletClassName }, i))) }))] }));
 };
 /* -------------------------------------------------------------------------- */
 /*                                   📋 List                                  */
 /* -------------------------------------------------------------------------- */
-export const List = ({ title, titleIcon, items, type = "unordered", bulletColor = "#2563eb", textColor = "#111827", backgroundColor = "#fff", borderColor = "#e5e7eb", fontSize = "15px", fontWeight = 500, borderRadius = "12px", padding = "16px", spacing = "12px", className, style, }) => {
+export const List = ({ title, titleIcon, items, type = "unordered", primaryTheme = true, primaryColor = "#3b82f6", className, itemClassName, titleClassName, bulletClassName, }) => {
     const isOrdered = type === "ordered";
     const isInline = type === "inline";
-    const containerStyle = {
-        backgroundColor,
-        borderColor,
-        color: textColor,
-        borderWidth: borderColor ? "1px" : "0px",
-        borderStyle: "solid",
-        borderRadius,
-        padding,
-        ...style,
-    };
-    const listStyle = isInline
-        ? {
-            display: "flex",
-            gap: spacing,
-            paddingLeft: 0,
-            listStyleType: "none",
-            margin: 0,
-        }
-        : {
-            listStyleType: isOrdered ? "decimal" : "none",
-            paddingLeft: isOrdered ? "20px" : "0",
-            margin: 0,
-        };
     const ListTag = isOrdered ? "ol" : "ul";
-    return (_jsxs("div", { className: className, style: containerStyle, children: [title && (_jsxs("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    fontSize: "17px",
-                    fontWeight: 600,
-                    marginBottom: "10px",
-                    gap: "8px",
-                }, children: [titleIcon && _jsx("span", { style: { fontSize: "18px" }, children: titleIcon }), _jsx("span", { children: title })] })), _jsx(ListTag, { style: listStyle, children: items.map((item, index) => (_jsx(ListItem, { ...item, bulletColor: bulletColor, textColor: textColor, fontSize: fontSize, fontWeight: fontWeight, spacing: spacing, isInline: isInline }, index))) })] }));
+    return (_jsxs("div", { className: clsx("bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl p-4", className), children: [title && (_jsxs("div", { className: clsx("flex items-center gap-2 mb-3 text-base font-semibold text-zinc-900 dark:text-white", titleClassName), children: [titleIcon && _jsx("span", { children: titleIcon }), _jsx("span", { children: title })] })), _jsx(ListTag, { className: clsx(isInline
+                    ? "flex flex-wrap gap-4"
+                    : isOrdered
+                        ? "list-decimal pl-5 space-y-2"
+                        : "list-none p-0"), children: items.map((item, i) => (_jsx(ListItem, { ...item, isInline: isInline, isOrdered: isOrdered, primaryTheme: primaryTheme, primaryColor: primaryColor, itemClassName: itemClassName, bulletClassName: bulletClassName }, i))) })] }));
 };

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useCallback, } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { X } from "lucide-react";
-export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyle, modalStyle, closeButtonStyle, disableOverlayClose = false, transitionDuration = 200, className, darkMode = false, }) => {
+import clsx from "clsx";
+export const Modal = ({ isOpen, onClose, children, title, icon, ariaLabel, className, overlayClassName, contentClassName, closeButtonClassName, disableOverlayClose = false, darkMode = false, transitionDuration = 200, }) => {
     const modalRef = useRef(null);
-    /* ------------------------------ Escape Close ----------------------------- */
+    /* Escape key close */
     useEffect(() => {
         const handleEsc = (e) => {
             if (e.key === "Escape")
@@ -13,7 +14,7 @@ export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyl
             document.addEventListener("keydown", handleEsc);
         return () => document.removeEventListener("keydown", handleEsc);
     }, [isOpen, onClose]);
-    /* ------------------------------ Scroll Lock ------------------------------ */
+    /* Scroll lock */
     useEffect(() => {
         if (isOpen) {
             const prev = document.body.style.overflow;
@@ -23,64 +24,11 @@ export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyl
             };
         }
     }, [isOpen]);
-    /* ------------------------------ Click Outside ---------------------------- */
     const handleOverlayClick = useCallback(() => {
         if (!disableOverlayClose)
             onClose();
     }, [disableOverlayClose, onClose]);
     if (!isOpen)
         return null;
-    /* ------------------------------- Base Styles ----------------------------- */
-    const baseOverlay = {
-        position: "fixed",
-        inset: 0,
-        backgroundColor: darkMode ? "rgba(0,0,0,0.8)" : "rgba(0,0,0,0.6)",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 1000,
-        opacity: isOpen ? 1 : 0,
-        transition: `opacity ${transitionDuration}ms ease`,
-        ...overlayStyle,
-    };
-    const baseModal = {
-        position: "relative",
-        backgroundColor: darkMode ? "#1f1f1f" : "#fff",
-        color: darkMode ? "#f5f5f5" : "#111",
-        borderRadius: 12,
-        width: "90vw",
-        maxWidth: 700,
-        maxHeight: "90vh",
-        overflowY: "auto",
-        padding: 24,
-        boxShadow: darkMode
-            ? "0 10px 40px rgba(0,0,0,0.7)"
-            : "0 10px 40px rgba(0,0,0,0.25)",
-        transform: isOpen ? "scale(1)" : "scale(0.95)",
-        transition: `transform ${transitionDuration}ms ease, opacity ${transitionDuration}ms ease`,
-        ...modalStyle,
-    };
-    const baseCloseBtn = {
-        position: "absolute",
-        top: 16,
-        right: 16,
-        background: "transparent",
-        border: "none",
-        cursor: "pointer",
-        padding: 4,
-        color: darkMode ? "#f5f5f5" : "#444",
-        transition: "color 0.2s ease, transform 0.2s ease",
-        ...closeButtonStyle,
-    };
-    return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title || "Modal", style: baseOverlay, onClick: handleOverlayClick, className: className, children: _jsxs("div", { ref: modalRef, style: baseModal, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: onClose, "aria-label": "Close modal", style: baseCloseBtn, onMouseEnter: (e) => {
-                        e.currentTarget.style.color = darkMode ? "#fff" : "#000";
-                        e.currentTarget.style.transform = "scale(1.1)";
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.color = darkMode ? "#f5f5f5" : "#444";
-                        e.currentTarget.style.transform = "scale(1)";
-                    }, children: _jsx(X, { size: 24 }) }), title && (_jsx("h2", { style: {
-                        fontSize: "1.25rem",
-                        fontWeight: 600,
-                        marginBottom: "1rem",
-                    }, children: title })), children] }) }));
+    return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title || "Modal", className: clsx("fixed inset-0 flex items-center justify-center z-50 transition-opacity", darkMode ? "bg-black/80" : "bg-black/60", overlayClassName), style: { transitionDuration: `${transitionDuration}ms` }, onClick: handleOverlayClick, children: _jsxs("div", { ref: modalRef, className: clsx("relative w-[90vw] max-w-2xl max-h-[90vh] overflow-y-auto p-6 rounded-lg shadow-lg transition-transform", darkMode ? "bg-zinc-900 text-white" : "bg-white text-gray-900", "scale-100", contentClassName), style: { transitionDuration: `${transitionDuration}ms` }, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: onClose, "aria-label": "Close modal", className: clsx("absolute top-4 right-4 p-1 rounded-full hover:scale-110 transition-transform", darkMode ? "text-white hover:text-gray-200" : "text-gray-700 hover:text-gray-900", closeButtonClassName), children: _jsx(X, { size: 24 }) }), title && (_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [icon && _jsx("span", { className: "flex-shrink-0", children: icon }), _jsx("h2", { className: "text-xl font-semibold", children: title })] })), children] }) }));
 };

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

@@ -1,32 +1,49 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const RadioGroup = ({ name, options, selectedValue, onChange, disabled = false, readOnly = false, required = false, error, className = "", style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", iconUncheckedBorderColor = "#9ca3af", textColor = "#374151", errorStyle, }) => {
-    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 8, ...style }, role: "radiogroup", "aria-disabled": disabled, children: [options.map((option) => {
+import { useState, useEffect, useRef } from "react";
+import clsx from "clsx";
+export const RadioGroup = ({ name, options, selectedValue, onChange, disabled = false, readOnly = false, required = false, error, className, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", iconUncheckedBorderColor = "#9ca3af", textColor = "#374151", errorStyle, darkMode = false, }) => {
+    const containerRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    // Keyboard navigation
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleKeyDown = (e) => {
+            if (disabled)
+                return;
+            const currentIndex = focusedIndex ?? options.findIndex((o) => o.value === selectedValue) ?? 0;
+            if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+                e.preventDefault();
+                const nextIndex = (currentIndex + 1) % options.length;
+                onChange && onChange(options[nextIndex].value);
+                setFocusedIndex(nextIndex);
+            }
+            if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+                e.preventDefault();
+                const prevIndex = (currentIndex - 1 + options.length) % options.length;
+                onChange && onChange(options[prevIndex].value);
+                setFocusedIndex(prevIndex);
+            }
+        };
+        container.addEventListener("keydown", handleKeyDown);
+        return () => container.removeEventListener("keydown", handleKeyDown);
+    }, [focusedIndex, options, selectedValue, onChange, disabled]);
+    return (_jsxs("div", { ref: containerRef, role: "radiogroup", "aria-disabled": disabled, "aria-invalid": !!error, className: clsx("flex flex-col gap-2", className), style: { ...style }, tabIndex: 0, children: [options.map((option, index) => {
                 const isChecked = selectedValue === 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: "radio", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => onChange && onChange(option.value), style: { display: "none" } }), _jsx("span", { style: {
-                                display: "inline-flex",
-                                justifyContent: "center",
-                                alignItems: "center",
+                const isFocused = focusedIndex === index;
+                return (_jsxs("label", { className: clsx("flex items-center justify-between cursor-pointer select-none gap-2", disabled ? "opacity-50 cursor-not-allowed" : "opacity-100", isFocused ? "ring-2 ring-blue-400" : ""), style: { ...labelStyle }, children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: "radio", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => onChange && onChange(option.value), style: { display: "none" } }), _jsx("span", { className: clsx("inline-flex items-center justify-center rounded-full transition-all"), style: {
                                 width: iconSize,
                                 height: iconSize,
-                                borderRadius: "50%",
                                 border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
                                 backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
-                                transition: "all 0.25s ease",
+                                transition: "all 0.2s ease",
                             }, children: isChecked && (_jsx("span", { style: {
                                     width: iconSize / 2,
                                     height: iconSize / 2,
                                     borderRadius: "50%",
-                                    backgroundColor: "white",
+                                    backgroundColor: darkMode ? "#fff" : "#fff",
                                 } })) })] }, option.value));
             }), error && (_jsx("p", { role: "alert", style: {
                     color: "#dc2626",

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

@@ -1,75 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
-const getScreenSize = (width) => {
-    if (width < 768)
-        return "sm";
-    if (width < 1024)
-        return "md";
-    return "lg";
+import clsx from "clsx";
+/**
+ * Convert responsive prop to Tailwind class string
+ */
+const toResponsiveClass = (prefix, value) => {
+    if (value == null)
+        return "";
+    if (typeof value !== "object")
+        return `${prefix}-${value}`;
+    return Object.entries(value)
+        .map(([bp, val]) => `${bp}:${prefix}-${val}`)
+        .join(" ");
 };
-const resolveResponsive = (prop, screen, fallback) => {
-    if (prop == null)
-        return fallback;
-    if (typeof prop !== "object")
-        return prop;
-    return prop[screen] ?? fallback;
-};
-export const Stack = ({ direction = { sm: "vertical", md: "horizontal", lg: "horizontal" }, gap = 12, align = "center", justify = "flex-start", wrap = "nowrap", padding, margin, width = "100%", maxWidth, height = "auto", backgroundColor = "transparent", borderRadius, border, boxShadow, overflow, className, style, children, }) => {
-    const [screen, setScreen] = useState("lg");
-    useEffect(() => {
-        const updateScreen = () => setScreen(getScreenSize(window.innerWidth));
-        updateScreen();
-        window.addEventListener("resize", updateScreen);
-        return () => window.removeEventListener("resize", updateScreen);
-    }, []);
-    const computedStyle = useMemo(() => {
-        const toCssValue = (val) => typeof val === "number" ? `${val}px` : val;
-        const resolvedDir = resolveResponsive(direction, screen, "vertical");
-        const flexDir = resolvedDir === "vertical" ? "column" : "row";
-        return {
-            display: "flex",
-            flexDirection: flexDir,
-            alignItems: resolveResponsive(align, screen, "center"),
-            justifyContent: resolveResponsive(justify, screen, "flex-start"),
-            flexWrap: resolveResponsive(wrap, screen, "nowrap"),
-            gap: toCssValue(resolveResponsive(gap, screen, 12)),
-            padding: toCssValue(resolveResponsive(padding, screen, undefined)),
-            margin: toCssValue(resolveResponsive(margin, screen, undefined)),
-            width: resolveResponsive(width, screen, "100%"),
-            maxWidth: resolveResponsive(maxWidth, screen, undefined),
-            height: resolveResponsive(height, screen, undefined),
-            backgroundColor: resolveResponsive(backgroundColor, screen, undefined),
-            borderRadius: resolveResponsive(borderRadius, screen, undefined),
-            border: resolveResponsive(border, screen, undefined),
-            boxShadow: resolveResponsive(boxShadow, screen, undefined),
-            overflow: resolveResponsive(overflow, screen, undefined),
-            boxSizing: "border-box",
-            ...style,
-        };
-    }, [
-        direction,
-        gap,
-        align,
-        justify,
-        wrap,
-        padding,
-        margin,
-        width,
-        maxWidth,
-        height,
-        backgroundColor,
-        borderRadius,
-        border,
-        boxShadow,
-        overflow,
-        style,
-        screen,
-    ]);
-    return (_jsx("div", { className: className, style: computedStyle, children: children }));
-};
-export const HStack = (props) => {
-    return _jsx(Stack, { direction: "horizontal", ...props });
-};
-export const VStack = (props) => {
-    return _jsx(Stack, { direction: "vertical", ...props });
+export const Stack = ({ direction = { sm: "vertical", md: "horizontal" }, gap = 4, align = "center", justify = "start", wrap = "nowrap", className, children, }) => {
+    const classes = clsx("flex", toResponsiveClass("flex", direction), // flex-col or flex-row
+    toResponsiveClass("gap", gap), align !== "stretch" ? `items-${align}` : "items-stretch", justify !== "start" ? `justify-${justify}` : "justify-start", wrap !== "nowrap" ? `flex-${wrap}` : "flex-nowrap", className);
+    return _jsx("div", { className: classes, children: children });
 };
+/** Shortcuts for horizontal & vertical stacks */
+export const HStack = (props) => (_jsx(Stack, { direction: "horizontal", ...props }));
+export const VStack = (props) => (_jsx(Stack, { direction: "vertical", ...props }));

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

@@ -1,32 +1,58 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SwitchGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className = "", style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", switchBgColor = "#d1d5db", textColor = "#374151", errorStyle, }) => {
+import { useState, useEffect, useRef } from "react";
+import clsx from "clsx";
+export const SwitchGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", switchBgColor = "#d1d5db", 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
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleKeyDown = (e) => {
+            if (disabled)
+                return;
+            if (focusedIndex === null)
+                return;
+            const currentIndex = focusedIndex;
+            if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+                e.preventDefault();
+                const nextIndex = (currentIndex + 1) % options.length;
+                setFocusedIndex(nextIndex);
+            }
+            if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                e.preventDefault();
+                const prevIndex = (currentIndex - 1 + options.length) % options.length;
+                setFocusedIndex(prevIndex);
+            }
+            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" } }), _jsx("span", { style: {
-                                position: "relative",
+                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" } }), _jsx("span", { className: clsx("relative inline-flex rounded-full transition-colors"), style: {
                                 width: iconSize * 2,
                                 height: iconSize * 1.1,
-                                borderRadius: 9999,
-                                backgroundColor: isChecked ? iconCheckedBgColor : switchBgColor,
+                                backgroundColor: isChecked
+                                    ? iconCheckedBgColor
+                                    : switchBgColor,
                                 transition: "background-color 0.25s ease",
+                                borderRadius: 9999,
                             }, children: _jsx("span", { style: {
                                     position: "absolute",
                                     top: "50%",