@neuctra/ui 0.2.3 → 0.2.5

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

@@ -1,316 +1,162 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from "react";
-export const Dropdown = ({ options, value, defaultValue, onChange, placeholder = "Select an option", disabled = false, searchable = false, multiSelect = false, clearable = false, virtualized = false, optionHeight = 36, visibleOptions = 5, 
-// Styling defaults
-width = "100%", height = "auto", borderColor = "#d1d5db", focusBorderColor = "#2563eb", errorBorderColor = "#dc2626", backgroundColor = "#ffffff", textColor = "#111827", placeholderColor = "#9ca3af", hoverColor = "#f3f4f6", selectedColor = "#eff6ff", disabledColor = "#f3f4f6", padding = "0.5rem 0.75rem", margin = "0", borderRadius = "0.375rem", boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)", optionPadding = "0.5rem 0.75rem", optionGap = "0.5rem", transitionDuration = "200ms", dropdownMaxHeight = "300px", dropdownMinWidth = "100%", 
-// Custom classes
-className = "", dropdownClassName = "", optionClassName = "", inputClassName = "", 
-// Custom styles
-style, dropdownStyle, optionStyle, inputStyle, 
-// Icons
-iconPrefix, iconSuffix, clearIcon = "×", dropdownIcon = "▼", checkIcon = "✓", 
-// Accessibility
-ariaLabel, ariaLabelledby, ariaDescribedby, 
-// Callbacks
-onFocus, onBlur, onOpen, onClose, }) => {
-    const [selectedValues, setSelectedValues] = useState([]);
+import { useEffect, useId, useMemo, useState, forwardRef, } from "react";
+/* ----------------------
+ * Default theme tokens
+ * ---------------------*/
+const THEMES = {
+    light: {
+        controlBg: "#ffffff",
+        menuBg: "#ffffff",
+        textColor: "#111827",
+        placeholderColor: "#6b7280",
+        hoverBg: "#f9fafb",
+        selectedBg: "#eff6ff",
+        disabledBg: "#f3f4f6",
+        disabledTextColor: "#9ca3af",
+        borderColor: "#e5e7eb",
+        accentColor: "#3b82f6",
+    },
+    dark: {
+        controlBg: "#1f2937",
+        menuBg: "#111827",
+        textColor: "#f9fafb",
+        placeholderColor: "#9ca3af",
+        hoverBg: "#374151",
+        selectedBg: "#2563eb33",
+        disabledBg: "#374151",
+        disabledTextColor: "#6b7280",
+        borderColor: "#374151",
+        accentColor: "#60a5fa",
+    },
+    custom: {},
+};
+/* ----------------------
+ * Component
+ * ---------------------*/
+const DropdownInner = (props, ref) => {
+    const id = useId();
+    const { options, value, values, defaultValue, defaultValues, onChange, placeholder = "Select...", disabled = false, searchable = false, multiSelect = false, clearable = false, virtualized = false, width = "100%", dropdownMaxHeight = "320px", borderRadius = "8px", boxShadow = "0 8px 28px rgba(0,0,0,0.1)", borderColor, accentColor, theme = "light", menuBg, controlBg, textColor, hoverBg, selectedBg, disabledBg, disabledTextColor, placeholderColor, transitionDuration = "180ms", className, controlClassName, menuClassName, optionClassName, style, controlStyle, menuStyle, optionStyle, iconPrefix, iconSuffix, clearIcon = "×", dropdownIcon = "▾", checkIcon = "✓", } = props;
+    // merge theme colors
+    const themeVars = {
+        ...THEMES[theme],
+        ...(theme === "custom" ? {} : {}),
+    };
+    const colors = {
+        borderColor: borderColor ?? themeVars.borderColor,
+        accentColor: accentColor ?? themeVars.accentColor,
+        controlBg: controlBg ?? themeVars.controlBg,
+        menuBg: menuBg ?? themeVars.menuBg,
+        textColor: textColor ?? themeVars.textColor,
+        hoverBg: hoverBg ?? themeVars.hoverBg,
+        selectedBg: selectedBg ?? themeVars.selectedBg,
+        disabledBg: disabledBg ?? themeVars.disabledBg,
+        disabledTextColor: disabledTextColor ?? themeVars.disabledTextColor,
+        placeholderColor: placeholderColor ?? themeVars.placeholderColor,
+    };
+    /* ----------------- State ----------------- */
     const [isOpen, setIsOpen] = useState(false);
-    const [searchTerm, setSearchTerm] = useState("");
-    const [focusedIndex, setFocusedIndex] = useState(null);
-    const dropdownRef = useRef(null);
-    const inputRef = useRef(null);
-    const optionsRef = useRef([]);
-    // Initialize selected values
-    useEffect(() => {
-        if (value) {
-            setSelectedValues(multiSelect ? value.split(",") : [value]);
-        }
-        else if (defaultValue) {
-            setSelectedValues(multiSelect ? defaultValue.split(",") : [defaultValue]);
-        }
-        else {
-            setSelectedValues([]);
-        }
-    }, [value, defaultValue, multiSelect]);
-    // Filter options based on search term
-    const filteredOptions = searchable
-        ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
-        : options;
-    // Handle click outside
+    const [selected, setSelected] = useState(defaultValues ?? (defaultValue ? [defaultValue] : []));
     useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-                onClose?.();
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [onClose]);
-    // Keyboard navigation
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (!isOpen)
-                return;
-            switch (event.key) {
-                case "ArrowDown":
-                    event.preventDefault();
-                    setFocusedIndex((prev) => {
-                        const nextIndex = prev === null
-                            ? 0
-                            : Math.min(prev + 1, filteredOptions.length - 1);
-                        scrollToOption(nextIndex);
-                        return nextIndex;
-                    });
-                    break;
-                case "ArrowUp":
-                    event.preventDefault();
-                    setFocusedIndex((prev) => {
-                        const nextIndex = prev === null ? 0 : Math.max(prev - 1, 0);
-                        scrollToOption(nextIndex);
-                        return nextIndex;
-                    });
-                    break;
-                case "Enter":
-                    event.preventDefault();
-                    if (focusedIndex !== null) {
-                        handleSelect(filteredOptions[focusedIndex].value);
-                    }
-                    break;
-                case "Escape":
-                    event.preventDefault();
-                    setIsOpen(false);
-                    onClose?.();
-                    break;
-                case "Tab":
-                    setIsOpen(false);
-                    onClose?.();
-                    break;
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isOpen, focusedIndex, filteredOptions]);
-    const scrollToOption = useCallback((index) => {
-        optionsRef.current[index]?.scrollIntoView({
-            block: "nearest",
-            behavior: "smooth",
-        });
-    }, []);
-    const handleSelect = (value) => {
-        let newSelectedValues;
+        if (value)
+            setSelected([value]);
+        if (values)
+            setSelected(values);
+    }, [value, values]);
+    const selectedOptions = useMemo(() => options.filter((o) => selected.includes(o.value)), [options, selected]);
+    const toggle = () => !disabled && setIsOpen((s) => !s);
+    const selectValue = (val) => {
         if (multiSelect) {
-            newSelectedValues = selectedValues.includes(value)
-                ? selectedValues.filter((v) => v !== value)
-                : [...selectedValues, value];
+            const exists = selected.includes(val);
+            const next = exists
+                ? selected.filter((v) => v !== val)
+                : [...selected, val];
+            setSelected(next);
+            onChange?.(next);
         }
         else {
-            newSelectedValues = [value];
+            setSelected([val]);
+            onChange?.(val);
             setIsOpen(false);
-            onClose?.();
         }
-        setSelectedValues(newSelectedValues);
-        onChange?.(multiSelect ? newSelectedValues.join(",") : value);
     };
-    const handleClear = (e) => {
-        e.stopPropagation();
-        setSelectedValues([]);
-        onChange?.("");
-        setSearchTerm("");
+    const clearSelection = (e) => {
+        e?.stopPropagation();
+        setSelected([]);
+        onChange?.(multiSelect ? [] : "");
     };
-    const toggleDropdown = () => {
-        if (disabled)
-            return;
-        const newState = !isOpen;
-        setIsOpen(newState);
-        if (newState) {
-            onOpen?.();
-            if (searchable) {
-                setTimeout(() => inputRef.current?.focus(), 0);
-            }
-        }
-        else {
-            onClose?.();
-        }
-    };
-    const selectedOption = options.find((option) => option.value === selectedValues[0]);
-    const selectedOptions = options.filter((option) => selectedValues.includes(option.value));
-    // Virtualization setup
-    const [startIndex, setStartIndex] = useState(0);
-    const visibleOptionCount = Math.min(visibleOptions, filteredOptions.length);
-    const endIndex = Math.min(startIndex + visibleOptionCount, filteredOptions.length);
-    const visibleOptionsList = virtualized
-        ? filteredOptions.slice(startIndex, endIndex)
-        : filteredOptions;
-    return (_jsxs("div", { ref: dropdownRef, className: `dropdown-container ${className}`, style: {
+    /* ----------------- Render ----------------- */
+    return (_jsxs("div", { ref: ref, className: className, style: {
             position: "relative",
             width,
-            margin,
-            fontFamily: "'Inter', sans-serif",
+            fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
             ...style,
-        }, children: [_jsx("style", { children: `
-          .dropdown-container {
-            --border-color: ${borderColor};
-            --focus-border-color: ${focusBorderColor};
-            --error-border-color: ${errorBorderColor};
-            --bg-color: ${backgroundColor};
-            --text-color: ${textColor};
-            --placeholder-color: ${placeholderColor};
-            --hover-color: ${hoverColor};
-            --selected-color: ${selectedColor};
-            --disabled-color: ${disabledColor};
-            --transition-duration: ${transitionDuration};
-          }
-        ` }), _jsxs("div", { role: "button", onClick: toggleDropdown, "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: `dropdown-control ${inputClassName}`, style: {
-                    width: "100%",
-                    minHeight: height,
-                    padding,
-                    backgroundColor: disabled ? disabledColor : backgroundColor,
-                    color: textColor,
-                    borderWidth: "1px",
-                    borderStyle: "solid",
-                    borderColor: isOpen ? focusBorderColor : borderColor,
-                    borderRadius,
-                    boxShadow,
+        }, children: [_jsxs("div", { className: controlClassName, role: "button", tabIndex: 0, onClick: toggle, style: {
                     display: "flex",
-                    alignItems: "center",
                     justifyContent: "space-between",
+                    alignItems: "center",
+                    background: colors.controlBg,
+                    color: colors.textColor,
+                    padding: "0.5rem 0.75rem",
+                    border: `1px solid ${isOpen ? colors.accentColor : colors.borderColor}`,
+                    borderRadius,
                     cursor: disabled ? "not-allowed" : "pointer",
-                    opacity: disabled ? 0.7 : 1,
-                    transition: `all ${transitionDuration} ease-in-out`,
-                    textAlign: "left",
-                    ...inputStyle,
-                    ...(isOpen && {
-                        boxShadow: `0 0 0 1px ${focusBorderColor}`,
-                    }),
-                }, children: [_jsxs("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: optionGap,
-                            flex: 1,
-                            overflow: "hidden",
-                        }, children: [iconPrefix && (_jsx("span", { className: "dropdown-icon-prefix", style: { flexShrink: 0 }, children: iconPrefix })), multiSelect ? (_jsx("div", { style: {
-                                    display: "flex",
-                                    gap: "0.25rem",
-                                    flexWrap: "wrap",
-                                    flex: 1,
-                                    overflow: "hidden",
-                                }, children: selectedOptions.length > 0 ? (selectedOptions.map((option) => (_jsxs("span", { style: {
-                                        backgroundColor: selectedColor,
-                                        padding: "0.25rem 0.5rem",
-                                        borderRadius: "0.25rem",
-                                        fontSize: "0.875rem",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: "0.25rem",
-                                        flexShrink: 0,
-                                    }, children: [option.icon && (_jsx("span", { style: { flexShrink: 0 }, children: option.icon })), _jsx("span", { style: {
-                                                whiteSpace: "nowrap",
-                                                overflow: "hidden",
-                                                textOverflow: "ellipsis",
-                                            }, children: option.label })] }, option.value)))) : (_jsx("span", { style: { color: placeholderColor }, children: placeholder })) })) : (_jsxs("span", { style: {
-                                    color: selectedOption ? textColor : placeholderColor,
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: optionGap,
-                                }, children: [selectedOption?.icon && (_jsx("span", { style: { flexShrink: 0 }, children: selectedOption.icon })), selectedOption ? selectedOption.label : placeholder] }))] }), _jsxs("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "0.5rem",
-                            marginLeft: "0.5rem",
-                            flexShrink: 0,
-                        }, children: [clearable && selectedValues.length > 0 && (_jsx("span", { onClick: handleClear, style: {
-                                    cursor: disabled ? "not-allowed" : "pointer",
-                                    fontSize: "1rem",
-                                    color: textColor,
-                                    opacity: 0.7,
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                }, "aria-label": "Clear selection", children: clearIcon })), _jsx("span", { style: {
-                                    transition: `transform ${transitionDuration}`,
+                    boxShadow: isOpen ? `0 0 0 3px ${colors.accentColor}33` : undefined,
+                    transition: `all ${transitionDuration} ease`,
+                    ...controlStyle,
+                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [iconPrefix, selectedOptions.length ? (_jsx("span", { children: selectedOptions.map((s) => s.label).join(", ") })) : (_jsx("span", { style: { color: colors.placeholderColor }, children: placeholder }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [clearable && selected.length > 0 && (_jsx("button", { onClick: clearSelection, style: {
+                                    background: "transparent",
+                                    border: "none",
+                                    color: colors.textColor,
+                                    cursor: "pointer",
+                                }, children: clearIcon })), iconSuffix, _jsx("div", { style: {
                                     transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-                                    fontSize: "0.75rem",
-                                    color: textColor,
-                                    opacity: 0.7,
-                                }, children: dropdownIcon })] })] }), isOpen && (_jsxs("div", { className: `dropdown-menu ${dropdownClassName}`, style: {
+                                    transition: `transform ${transitionDuration}`,
+                                }, children: dropdownIcon })] })] }), isOpen && (_jsx("ul", { className: menuClassName, style: {
                     position: "absolute",
-                    top: "100%",
+                    zIndex: 100,
+                    top: "calc(100% + 4px)",
                     left: 0,
-                    zIndex: 1000,
-                    width: "100%",
-                    minWidth: dropdownMinWidth,
+                    right: 0,
+                    background: colors.menuBg,
+                    border: `1px solid ${colors.borderColor}`,
+                    borderRadius,
+                    boxShadow,
                     maxHeight: dropdownMaxHeight,
                     overflowY: "auto",
-                    backgroundColor,
-                    border: `1px solid ${borderColor}`,
-                    borderRadius,
-                    boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`,
-                    marginTop: "0.25rem",
-                    transition: `opacity ${transitionDuration}, transform ${transitionDuration}`,
-                    opacity: 0,
-                    transform: "translateY(-0.5rem)",
-                    animation: `dropdownFadeIn ${transitionDuration} ease-out forwards`,
-                    ...dropdownStyle,
-                }, role: "listbox", "aria-multiselectable": multiSelect, children: [searchable && (_jsx("div", { style: {
-                            padding: "0.5rem",
-                            borderBottom: `1px solid ${borderColor}`,
-                        }, children: _jsx("input", { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search...", style: {
-                                width: "100%",
-                                padding: "0.5rem 0.75rem",
-                                borderWidth: "1px",
-                                borderStyle: "solid",
-                                color: textColor,
-                                borderColor: isOpen ? focusBorderColor : borderColor,
-                                borderRadius: "0.25rem",
-                                outline: "none",
-                                transition: `border-color ${transitionDuration}`,
-                                ...(isOpen && {
-                                    boxShadow: `0 0 0 1px ${focusBorderColor}`,
-                                }),
-                            }, onFocus: onFocus, onBlur: onBlur }) })), _jsx("ul", { style: { margin: 0, padding: "0.25rem 0", listStyle: "none" }, children: filteredOptions.length > 0 ? (visibleOptionsList.map((option, index) => {
-                            const isSelected = selectedValues.includes(option.value);
-                            const isFocused = focusedIndex === (virtualized ? startIndex + index : index);
-                            const isDisabled = option.disabled;
-                            return (_jsxs("li", { ref: (el) => {
-                                    if (el) {
-                                        const refIndex = virtualized
-                                            ? startIndex + index
-                                            : index;
-                                        optionsRef.current[refIndex] = el;
-                                    }
-                                }, onClick: () => !isDisabled && handleSelect(option.value), onMouseEnter: () => !isDisabled &&
-                                    setFocusedIndex(virtualized ? startIndex + index : index), className: `dropdown-option ${optionClassName} ${isDisabled ? "disabled" : ""}`, style: {
-                                    padding: optionPadding,
-                                    cursor: isDisabled ? "not-allowed" : "pointer",
-                                    backgroundColor: isSelected
-                                        ? selectedColor
-                                        : isFocused
-                                            ? hoverColor
-                                            : backgroundColor,
-                                    color: isDisabled ? disabledColor : textColor,
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: optionGap,
-                                    transition: `background-color ${transitionDuration}`,
-                                    ...optionStyle,
-                                }, role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: [multiSelect && (_jsx("span", { style: { flexShrink: 0 }, children: isSelected ? checkIcon : "○" })), option.icon && (_jsx("span", { style: { flexShrink: 0 }, children: option.icon })), _jsx("span", { style: { flex: 1 }, children: option.label })] }, option.value));
-                        })) : (_jsx("li", { style: {
-                                padding: optionPadding,
-                                color: placeholderColor,
-                                textAlign: "center",
-                            }, children: "No options found" })) }), virtualized && filteredOptions.length > visibleOptionCount && (_jsx("div", { style: {
-                            height: `${(filteredOptions.length - visibleOptionCount) * optionHeight}px`,
-                        } }))] })), _jsx("style", { children: `
-          @keyframes dropdownFadeIn {
-            to {
-              opacity: 1;
-              transform: translateY(0);
-            }
-          }
-        ` })] }));
+                    transition: `opacity ${transitionDuration} ease`,
+                    ...menuStyle,
+                }, children: options.map((opt) => {
+                    const isSelected = selected.includes(opt.value);
+                    return (_jsxs("li", { onClick: () => !opt.disabled && selectValue(opt.value), className: optionClassName, style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "0.5rem 0.75rem",
+                            background: opt.disabled
+                                ? colors.disabledBg
+                                : isSelected
+                                    ? colors.selectedBg
+                                    : "transparent",
+                            color: opt.disabled
+                                ? colors.disabledTextColor
+                                : colors.textColor,
+                            cursor: opt.disabled ? "not-allowed" : "pointer",
+                            borderRadius: 6,
+                            userSelect: "none",
+                            ...optionStyle,
+                        }, onMouseEnter: (e) => {
+                            if (!opt.disabled && !isSelected)
+                                e.currentTarget.style.backgroundColor = colors.hoverBg;
+                        }, onMouseLeave: (e) => {
+                            if (!opt.disabled && !isSelected)
+                                e.currentTarget.style.backgroundColor = "transparent";
+                        }, children: [multiSelect && (_jsx("span", { style: { width: 18, textAlign: "center" }, children: isSelected ? checkIcon : "○" })), opt.icon && _jsx("span", { children: opt.icon }), _jsxs("div", { style: { flex: 1 }, children: [opt.label, opt.description && (_jsx("div", { style: {
+                                            fontSize: 12,
+                                            color: colors.placeholderColor,
+                                            marginTop: 2,
+                                        }, children: opt.description }))] })] }, opt.value));
+                }) }))] }));
 };
+export const Dropdown = forwardRef(DropdownInner);
+export default Dropdown;

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

@@ -1,10 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useCallback, } from "react";
 import { X } from "lucide-react";
-/* -------------------------------------------------------------------------- */
-/*                                   Modal                                    */
-/* -------------------------------------------------------------------------- */
-export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyle, modalStyle, closeButtonStyle, disableOverlayClose = false, transitionDuration = 200, className, }) => {
+export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyle, modalStyle, closeButtonStyle, disableOverlayClose = false, transitionDuration = 200, className, darkMode = false, }) => {
     const modalRef = useRef(null);
     /* ------------------------------ Escape Close ----------------------------- */
     useEffect(() => {
@@ -31,14 +28,13 @@ export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyl
         if (!disableOverlayClose)
             onClose();
     }, [disableOverlayClose, onClose]);
-    /* ------------------------------ Early Return ----------------------------- */
     if (!isOpen)
         return null;
     /* ------------------------------- Base Styles ----------------------------- */
     const baseOverlay = {
         position: "fixed",
         inset: 0,
-        backgroundColor: "rgba(0,0,0,0.6)",
+        backgroundColor: darkMode ? "rgba(0,0,0,0.8)" : "rgba(0,0,0,0.6)",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
@@ -49,14 +45,17 @@ export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyl
     };
     const baseModal = {
         position: "relative",
-        backgroundColor: "#fff",
+        backgroundColor: darkMode ? "#1f1f1f" : "#fff",
+        color: darkMode ? "#f5f5f5" : "#111",
         borderRadius: 12,
         width: "90vw",
         maxWidth: 700,
         maxHeight: "90vh",
         overflowY: "auto",
         padding: 24,
-        boxShadow: "0 10px 40px rgba(0,0,0,0.25)",
+        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,
@@ -69,16 +68,15 @@ export const Modal = ({ isOpen, onClose, children, ariaLabel, title, overlayStyl
         border: "none",
         cursor: "pointer",
         padding: 4,
-        color: "#444",
+        color: darkMode ? "#f5f5f5" : "#444",
         transition: "color 0.2s ease, transform 0.2s ease",
         ...closeButtonStyle,
     };
-    /* ----------------------------- Render Content ---------------------------- */
     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 = "#000";
+                        e.currentTarget.style.color = darkMode ? "#fff" : "#000";
                         e.currentTarget.style.transform = "scale(1.1)";
                     }, onMouseLeave: (e) => {
-                        e.currentTarget.style.color = "#444";
+                        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",

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

@@ -0,0 +1,37 @@
+"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) => {
+                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",
+                                width: iconSize,
+                                height: iconSize,
+                                borderRadius: "50%",
+                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
+                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
+                                transition: "all 0.25s ease",
+                            }, children: isChecked && (_jsx("span", { style: {
+                                    width: iconSize / 2,
+                                    height: iconSize / 2,
+                                    borderRadius: "50%",
+                                    backgroundColor: "white",
+                                } })) })] }, option.value));
+            }), error && (_jsx("p", { role: "alert", style: {
+                    color: "#dc2626",
+                    fontSize: 12,
+                    marginTop: 4,
+                    ...errorStyle,
+                }, children: error }))] }));
+};

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

@@ -0,0 +1,50 @@
+"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, }) => {
+    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" } }), _jsx("span", { style: {
+                                position: "relative",
+                                width: iconSize * 2,
+                                height: iconSize * 1.1,
+                                borderRadius: 9999,
+                                backgroundColor: isChecked ? iconCheckedBgColor : switchBgColor,
+                                transition: "background-color 0.25s ease",
+                            }, children: _jsx("span", { style: {
+                                    position: "absolute",
+                                    top: "50%",
+                                    left: isChecked
+                                        ? `calc(100% - ${iconSize - 4}px - 2px)`
+                                        : "2px",
+                                    transform: "translateY(-50%)",
+                                    width: iconSize - 4,
+                                    height: iconSize - 4,
+                                    borderRadius: "50%",
+                                    backgroundColor: "#fff",
+                                    boxShadow: "0 1px 2px rgba(0,0,0,0.3)",
+                                    transition: "left 0.25s ease",
+                                } }) })] }, option.value));
+            }), error && (_jsx("p", { role: "alert", style: {
+                    color: "#dc2626",
+                    fontSize: 12,
+                    marginTop: 4,
+                    ...errorStyle,
+                }, children: error }))] }));
+};