@neuctra/ui 0.2.2 → 0.2.4

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

@@ -0,0 +1,162 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 [selected, setSelected] = useState(defaultValues ?? (defaultValue ? [defaultValue] : []));
+    useEffect(() => {
+        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) {
+            const exists = selected.includes(val);
+            const next = exists
+                ? selected.filter((v) => v !== val)
+                : [...selected, val];
+            setSelected(next);
+            onChange?.(next);
+        }
+        else {
+            setSelected([val]);
+            onChange?.(val);
+            setIsOpen(false);
+        }
+    };
+    const clearSelection = (e) => {
+        e?.stopPropagation();
+        setSelected([]);
+        onChange?.(multiSelect ? [] : "");
+    };
+    /* ----------------- Render ----------------- */
+    return (_jsxs("div", { ref: ref, className: className, style: {
+            position: "relative",
+            width,
+            fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+            ...style,
+        }, children: [_jsxs("div", { className: controlClassName, role: "button", tabIndex: 0, onClick: toggle, style: {
+                    display: "flex",
+                    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",
+                    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)",
+                                    transition: `transform ${transitionDuration}`,
+                                }, children: dropdownIcon })] })] }), isOpen && (_jsx("ul", { className: menuClassName, style: {
+                    position: "absolute",
+                    zIndex: 100,
+                    top: "calc(100% + 4px)",
+                    left: 0,
+                    right: 0,
+                    background: colors.menuBg,
+                    border: `1px solid ${colors.borderColor}`,
+                    borderRadius,
+                    boxShadow,
+                    maxHeight: dropdownMaxHeight,
+                    overflowY: "auto",
+                    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/Flexbox.js

@@ -0,0 +1,67 @@
+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";
+};
+const resolveResponsive = (prop, screen, fallback) => {
+    if (prop == null)
+        return fallback;
+    if (typeof prop !== "object")
+        return prop;
+    return prop[screen] ?? fallback;
+};
+export const Flexbox = ({ direction = { sm: "column", md: "row", lg: "row" }, align = "center", justify = "space-between", wrap = "wrap", gap = 16, padding, margin, backgroundColor = "transparent", width = "100%", maxWidth = "100%", height = "auto", borderRadius, border, boxShadow, overflow, children, style, className, }) => {
+    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;
+        return {
+            display: "flex",
+            flexDirection: resolveResponsive(direction, screen, "row"),
+            alignItems: resolveResponsive(align, screen, "center"),
+            justifyContent: resolveResponsive(justify, screen, "flex-start"),
+            flexWrap: resolveResponsive(wrap, screen, "wrap"),
+            gap: toCssValue(resolveResponsive(gap, screen, undefined)),
+            padding: toCssValue(resolveResponsive(padding, screen, undefined)),
+            margin: toCssValue(resolveResponsive(margin, screen, undefined)),
+            backgroundColor: resolveResponsive(backgroundColor, screen, undefined),
+            width: resolveResponsive(width, screen, "100%"),
+            maxWidth: resolveResponsive(maxWidth, screen, undefined),
+            height: resolveResponsive(height, 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,
+        align,
+        justify,
+        wrap,
+        gap,
+        padding,
+        margin,
+        backgroundColor,
+        width,
+        maxWidth,
+        height,
+        borderRadius,
+        border,
+        boxShadow,
+        overflow,
+        screen,
+        style,
+    ]);
+    return (_jsx("div", { className: className, style: computedStyle, children: children }));
+};

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

@@ -0,0 +1,51 @@
+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";
+};
+export const GridView = ({ columns = { sm: 1, md: 2, lg: 3 }, gap = 16, padding = 0, alignItems = "stretch", justifyItems = "stretch", backgroundColor = "transparent", width = "100%", maxWidth = "100%", height = "auto", margin = 0, style, className = "", children, }) => {
+    const [screenSize, setScreenSize] = useState("lg");
+    useEffect(() => {
+        setScreenSize(getScreenSize(window.innerWidth));
+        const onResize = () => setScreenSize(getScreenSize(window.innerWidth));
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    const resolvedColumns = useMemo(() => {
+        if (typeof columns === "number")
+            return columns;
+        return columns[screenSize] ?? 1;
+    }, [columns, screenSize]);
+    const styles = useMemo(() => ({
+        display: "grid",
+        gridTemplateColumns: `repeat(${resolvedColumns}, 1fr)`,
+        gap: typeof gap === "number" ? `${gap}px` : gap,
+        padding: typeof padding === "number" ? `${padding}px` : padding,
+        margin: typeof margin === "number" ? `${margin}px` : margin,
+        alignItems,
+        justifyItems,
+        backgroundColor,
+        width,
+        maxWidth,
+        height,
+        boxSizing: "border-box",
+        ...style,
+    }), [
+        resolvedColumns,
+        gap,
+        padding,
+        margin,
+        alignItems,
+        justifyItems,
+        backgroundColor,
+        width,
+        maxWidth,
+        height,
+        style,
+    ]);
+    return (_jsx("div", { style: styles, className: className, children: children }));
+};

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+/**
+ * ✅ Industry-Standard Image Component
+ * - SEO & accessibility optimized
+ * - Lazy loading & responsive
+ * - Fully customizable styling
+ * - Smooth hover transitions
+ * - Overlay and SVG support
+ */
+export const Image = ({ src, alt = "Image", title, width = "100%", height = "auto", borderRadius = "8px", borderColor = "transparent", borderStyle = "solid", borderWidth = "0px", shadow = false, boxShadow, opacity = 1, objectFit = "cover", overlayText, overlayColor = "rgba(0,0,0,0.5)", svgIcon, responsive = false, padding, margin, lazyLoad = true, hoverOpacity, hoverShadow = false, hoverScale = 1, hoverRotate = 0, transitionDuration = "0.3s", overflow = "hidden", className, style, onClick, onLoad, onError, }) => {
+    // ✅ Memoized base style for performance
+    const baseStyle = useMemo(() => ({
+        width: responsive ? "100%" : width,
+        height: responsive ? "auto" : height,
+        borderRadius,
+        border: `${borderWidth} ${borderStyle} ${borderColor}`,
+        objectFit,
+        opacity,
+        boxShadow: shadow
+            ? boxShadow || "0 4px 12px rgba(0,0,0,0.15)"
+            : "none",
+        transition: `all ${transitionDuration} ease`,
+        display: "block",
+    }), [
+        responsive,
+        width,
+        height,
+        borderRadius,
+        borderColor,
+        borderStyle,
+        borderWidth,
+        objectFit,
+        opacity,
+        shadow,
+        boxShadow,
+        transitionDuration,
+    ]);
+    // ✅ Hover effects
+    const handleMouseEnter = useCallback((e) => {
+        e.currentTarget.style.opacity =
+            hoverOpacity !== undefined ? hoverOpacity.toString() : "1";
+        e.currentTarget.style.boxShadow = hoverShadow
+            ? "0 8px 20px rgba(0,0,0,0.3)"
+            : baseStyle.boxShadow || "none";
+        e.currentTarget.style.transform = `scale(${hoverScale}) rotate(${hoverRotate}deg)`;
+    }, [hoverOpacity, hoverShadow, hoverScale, hoverRotate, baseStyle.boxShadow]);
+    const handleMouseLeave = useCallback((e) => {
+        e.currentTarget.style.opacity = baseStyle.opacity?.toString() || "1";
+        e.currentTarget.style.boxShadow = baseStyle.boxShadow || "none";
+        e.currentTarget.style.transform = "scale(1) rotate(0deg)";
+    }, [baseStyle]);
+    // ✅ Overflow control
+    const overflowStyles = useMemo(() => {
+        switch (overflow) {
+            case "x":
+                return { overflowX: "hidden" };
+            case "y":
+                return { overflowY: "hidden" };
+            default:
+                return { overflow };
+        }
+    }, [overflow]);
+    return (_jsxs("div", { className: className, role: "img", "aria-label": alt, title: title || alt, onClick: onClick, style: {
+            width: responsive ? "100%" : width,
+            height: responsive ? "auto" : height,
+            padding,
+            margin,
+            position: "relative",
+            cursor: onClick ? "pointer" : "default",
+            display: "inline-block",
+            transition: `all ${transitionDuration} ease`,
+            ...overflowStyles,
+            ...style,
+        }, children: [svgIcon ? (_jsx("div", { style: {
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: svgIcon })) : (_jsx("img", { src: src, alt: alt, title: title || alt, loading: lazyLoad ? "lazy" : "eager", style: baseStyle, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onLoad: onLoad, onError: onError, decoding: "async", fetchPriority: "high" })), overlayText && (_jsx("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    backgroundColor: overlayColor,
+                    color: "#fff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontWeight: "bold",
+                    fontSize: "1.1rem",
+                    textAlign: "center",
+                    padding: "1rem",
+                    boxSizing: "border-box",
+                }, children: overlayText }))] }));
+};

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useImperativeHandle, forwardRef, } 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 inputRef = useRef(null);
+    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 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,
+        },
+    };
+    /** 🎨 Dynamic border behavior */
+    const applyDynamicBorder = (el, color) => {
+        if (el)
+            el.style.borderColor = color;
+    };
+    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),
+    };
+    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"
+                            ? 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 }))] }));
+});

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

@@ -0,0 +1,71 @@
+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))) }))] }));
+};
+/* -------------------------------------------------------------------------- */
+/*                                   📋 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, }) => {
+    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))) })] }));
+};

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) => {
+    const modalRef = useRef(null);
+    /* ------------------------------ Escape Close ----------------------------- */
+    useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        if (isOpen)
+            document.addEventListener("keydown", handleEsc);
+        return () => document.removeEventListener("keydown", handleEsc);
+    }, [isOpen, onClose]);
+    /* ------------------------------ Scroll Lock ------------------------------ */
+    useEffect(() => {
+        if (isOpen) {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = prev;
+            };
+        }
+    }, [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] }) }));
+};