@neuctra/ui 0.2.8 → 0.2.10

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

@@ -1,25 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-/* -------------------------------------------------------------------------- */
-/*                               🔘 Button                                    */
-/* -------------------------------------------------------------------------- */
-export const Button = forwardRef(({ children, iconBefore, iconAfter, loading = false, loadingText = "Loading...", fullWidth = false, variant = "default", size = "md", disabled, className, type = "button", // ✅ important fix
-...props }, ref) => {
-    const isDisabled = disabled || loading;
-    /** 📏 Sizes */
-    const sizeClasses = {
-        sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-sm",
-        lg: "h-12 px-6 text-base",
-    };
-    /** 🎨 Variants */
-    const variantClasses = {
-        default: "bg-blue-600 text-white hover:bg-blue-600/90",
-        outline: "border border-zinc-300 text-zinc-900 hover:bg-zinc-100 dark:border-zinc-700 dark:text-white dark:hover:bg-zinc-800",
-        ghost: "text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800",
-    };
-    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, className: clsx("inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-blue-500/30", "active:scale-[0.98]", sizeClasses[size], variantClasses[variant], fullWidth && "w-full", isDisabled && "opacity-60 cursor-not-allowed pointer-events-none", className), ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" }), _jsx("span", { children: loadingText })] })) : (_jsxs(_Fragment, { children: [iconBefore && _jsx("span", { className: "flex", children: iconBefore }), _jsx("span", { children: children }), iconAfter && _jsx("span", { className: "flex", children: iconAfter })] })) }));
-});
-Button.displayName = "Button";

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

@@ -1,63 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
-import clsx from "clsx";
-export const CheckboxGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className, customIcon, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", iconUncheckedBorderColor = "#9ca3af", textColor = "#374151", errorStyle, darkMode = false, }) => {
-    const containerRef = useRef(null);
-    const [focusedIndex, setFocusedIndex] = useState(null);
-    const handleChange = (value) => {
-        if (!onChange || disabled || readOnly)
-            return;
-        const updatedValues = selectedValues.includes(value)
-            ? selectedValues.filter((v) => v !== value)
-            : [...selectedValues, value];
-        onChange(updatedValues);
-    };
-    // Keyboard navigation (space/enter toggle)
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const handleKeyDown = (e) => {
-            if (disabled)
-                return;
-            if (focusedIndex === null)
-                return;
-            const currentIndex = focusedIndex;
-            if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-                e.preventDefault();
-                setFocusedIndex((currentIndex + 1) % options.length);
-            }
-            if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
-                e.preventDefault();
-                setFocusedIndex((currentIndex - 1 + options.length) % options.length);
-            }
-            if (e.key === " " || e.key === "Enter") {
-                e.preventDefault();
-                handleChange(options[currentIndex].value);
-            }
-        };
-        container.addEventListener("keydown", handleKeyDown);
-        return () => container.removeEventListener("keydown", handleKeyDown);
-    }, [focusedIndex, options, selectedValues, disabled]);
-    return (_jsxs("div", { ref: containerRef, role: "group", "aria-disabled": disabled, "aria-invalid": !!error, tabIndex: 0, className: clsx("flex flex-col gap-2", className), style: { ...style }, children: [options.map((option, index) => {
-                const isChecked = selectedValues.includes(option.value);
-                const isFocused = focusedIndex === index;
-                return (_jsxs("label", { className: clsx("flex items-center justify-between cursor-pointer select-none transition-opacity", disabled ? "opacity-50 cursor-not-allowed" : "opacity-100", isFocused ? "ring-2 ring-blue-400" : ""), style: { ...labelStyle }, onFocus: () => setFocusedIndex(index), children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: "checkbox", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => handleChange(option.value), style: { display: "none" } }), customIcon ? (customIcon(isChecked)) : (_jsx("span", { style: {
-                                display: "inline-flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                width: iconSize,
-                                height: iconSize,
-                                borderRadius: 4,
-                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
-                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
-                                transition: "all 0.25s ease",
-                            }, children: isChecked && (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", style: { width: iconSize * 0.6, height: iconSize * 0.6 }, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) }))] }, option.value));
-            }), error && (_jsx("p", { role: "alert", style: {
-                    color: "#dc2626",
-                    fontSize: 12,
-                    marginTop: 4,
-                    ...errorStyle,
-                }, children: error }))] }));
-};

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-const sizeMap = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
-    "2xl": "max-w-2xl",
-    full: "w-full",
-};
-const paddingMap = {
-    none: "p-0",
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8",
-    xl: "p-12",
-};
-/**
- * 🧱 Container Component
- * Fully responsive, Tailwind-first layout wrapper
- */
-export const Container = ({ size = "lg", padding = "md", center = true, className = "", children, }) => {
-    const classes = clsx("w-full box-border", sizeMap[size], paddingMap[padding], center && "mx-auto", className);
-    return _jsx("div", { className: classes, children: children });
-};
-export default Container;

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

@@ -1,43 +0,0 @@
-"use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
-import { X } from "lucide-react";
-export const DrawerButton = ({ label = "Open Drawer", icon, iconPosition = "left", onClick, className = "", }) => {
-    return (_jsxs("button", { type: "button", onClick: onClick, className: `inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 ${className}`, children: [icon && iconPosition === "left" && icon, label, icon && iconPosition === "right" && icon] }));
-};
-export const Drawer = ({ open, onClose, position = "right", size = "320px", children, showCloseButton = true, className = "", overlayClassName = "", closeButtonClassName = "", }) => {
-    const [mounted, setMounted] = useState(open);
-    useEffect(() => {
-        if (open)
-            setMounted(true);
-        else
-            setTimeout(() => setMounted(false), 300); // smooth exit
-    }, [open]);
-    const transform = useMemo(() => {
-        if (open)
-            return "translate(0,0)";
-        switch (position) {
-            case "left":
-                return "translateX(-100%)";
-            case "right":
-                return "translateX(100%)";
-            case "top":
-                return "translateY(-100%)";
-            case "bottom":
-                return "translateY(100%)";
-            default:
-                return "translate(0,0)";
-        }
-    }, [open, position]);
-    if (!mounted && !open)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: onClose, className: `fixed inset-0 bg-black/50 transition-opacity ${open ? "opacity-100" : "opacity-0"} ${overlayClassName}` }), _jsxs("div", { className: `fixed bg-white shadow-lg flex flex-col transition-transform duration-300 ${className}`, style: {
-                    width: position === "left" || position === "right" ? size : "100%",
-                    height: position === "top" || position === "bottom" ? size : "100%",
-                    top: position === "bottom" || position === "top" ? (position === "bottom" ? "auto" : 0) : 0,
-                    bottom: position === "bottom" ? 0 : "auto",
-                    left: position === "left" ? 0 : position === "right" ? "auto" : 0,
-                    right: position === "right" ? 0 : position === "left" ? "auto" : 0,
-                    transform,
-                }, children: [showCloseButton && (_jsx("button", { onClick: onClose, className: `absolute top-4 right-4 p-1 rounded-full hover:bg-gray-200 transition-colors ${closeButtonClassName}`, "aria-label": "Close drawer", children: _jsx(X, { size: 20 }) })), _jsx("div", { className: "flex-1 overflow-auto p-4", children: children })] })] }));
-};

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

@@ -1,98 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, forwardRef, useImperativeHandle, } from "react";
-import { ChevronDown } from "lucide-react";
-export const Dropdown = forwardRef((props, ref) => {
-    const { label, name = "", value, defaultValue, onChange, options = [], placeholder = "Select an option", required, disabled, error, success, helperText, labelIcon: LabelIcon, prefixIcon: PrefixIcon, variant = "dark", primaryTheme = true, primaryColor = "#3b82f6", containerClassName = "", labelClassName = "", triggerClassName = "", dropdownClassName = "", optionClassName = "", className = "", } = props;
-    const containerRef = useRef(null);
-    useImperativeHandle(ref, () => containerRef.current);
-    const [open, setOpen] = useState(false);
-    const [localValue, setLocalValue] = useState(defaultValue || "");
-    const currentValue = value !== undefined ? value : localValue;
-    const selectedOption = options.find((o) => o.value === currentValue);
-    /** Close outside */
-    useEffect(() => {
-        const handler = (e) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handler);
-        return () => document.removeEventListener("mousedown", handler);
-    }, []);
-    const handleSelect = (option) => {
-        setLocalValue(option.value);
-        onChange?.(name, option.value);
-        setOpen(false);
-    };
-    /** 🎨 Theme base */
-    const theme = {
-        dark: {
-            bg: "bg-zinc-900",
-            text: "text-white",
-            border: "border-zinc-800",
-            dropdown: "bg-black border-zinc-800",
-            option: "text-zinc-300 hover:bg-zinc-800",
-        },
-        light: {
-            bg: "bg-white",
-            text: "text-gray-900",
-            border: "border-gray-300",
-            dropdown: "bg-white border-gray-200",
-            option: "text-gray-700 hover:bg-gray-100",
-        },
-    }[variant];
-    /** 🎨 Dynamic styles */
-    const dynamicPrimary = !primaryTheme
-        ? { color: primaryColor }
-        : {};
-    const dynamicBorder = !primaryTheme
-        ? { borderColor: primaryColor }
-        : {};
-    const dynamicBgActive = !primaryTheme
-        ? { backgroundColor: `${primaryColor}20` } // light tint
-        : {};
-    /** Border state */
-    const borderState = error
-        ? "border-rose-500"
-        : success
-            ? "border-emerald-500"
-            : theme.border;
-    const paddingLeft = PrefixIcon ? "pl-12 pr-10" : "px-4";
-    return (_jsxs("div", { ref: containerRef, className: `w-full space-y-1 ${containerClassName} ${className}`, children: [label && (_jsxs("label", { className: `flex items-center gap-2 text-[13px] font-medium ${labelClassName}`, children: [LabelIcon && (_jsx(LabelIcon, { className: primaryTheme ? "w-4 h-4 text-[var(--primary)]" : "w-4 h-4", style: !primaryTheme ? dynamicPrimary : undefined })), label, required && _jsx("span", { className: "text-rose-500", children: "*" })] })), _jsxs("div", { className: "relative group", children: [PrefixIcon && (_jsx("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 z-10", children: _jsx(PrefixIcon, { className: primaryTheme
-                                ? "w-4 h-4 text-zinc-500 group-focus-within:text-[var(--primary)]"
-                                : "w-4 h-4 text-zinc-500", style: !primaryTheme ? dynamicPrimary : undefined }) })), _jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((p) => !p), style: !primaryTheme ? dynamicBorder : undefined, className: `
-              w-full py-2.5 rounded-lg text-left text-sm
-              border transition-all duration-200
-              ${theme.bg} ${theme.text}
-              ${paddingLeft}
-              ${borderState}
-              focus:ring-2
-              ${primaryTheme
-                            ? "focus:ring-[var(--primary)]/30 focus:border-[var(--primary)]"
-                            : ""}
-              disabled:opacity-50 disabled:cursor-not-allowed
-              ${triggerClassName}
-            `, children: [_jsx("span", { className: selectedOption ? theme.text : "text-zinc-500", children: selectedOption ? selectedOption.label : placeholder }), _jsx(ChevronDown, { className: `absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 transition-transform ${open ? "rotate-180" : ""} text-zinc-400` })] }), open && (_jsx("div", { className: `
-                absolute z-50 mt-2 w-full rounded-xl border shadow-xl overflow-hidden
-                ${theme.dropdown}
-                ${dropdownClassName}
-              `, children: _jsx("ul", { className: "max-h-60 overflow-y-auto", children: options.map((opt) => {
-                                const isActive = currentValue === opt.value;
-                                return (_jsxs("li", { onClick: () => handleSelect(opt), style: !primaryTheme && isActive ? dynamicBgActive : undefined, className: `
-                        px-4 py-3 cursor-pointer text-sm flex items-center gap-2
-                        ${isActive
-                                        ? primaryTheme
-                                            ? "bg-[var(--primary)]/15 text-[var(--primary)]"
-                                            : ""
-                                        : theme.option}
-                        ${optionClassName}
-                      `, children: [opt.icon && _jsx("span", { children: opt.icon }), opt.label] }, opt.value));
-                            }) }) }))] }), (helperText || error) && (_jsx("p", { className: `text-xs ${error
-                    ? "text-rose-500"
-                    : success
-                        ? "text-emerald-500"
-                        : "text-zinc-500"}`, children: typeof error === "string" ? error : helperText }))] }));
-});
-Dropdown.displayName = "Dropdown";

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

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-/**
- * Converts 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(" ");
-};
-export const FlexView = ({ direction = { sm: "column", md: "row" }, align = "center", justify = "between", wrap = "wrap", gap, padding, margin, className, children, }) => {
-    const classes = clsx("flex", toResponsiveClass("flex", direction), toResponsiveClass("items", align), toResponsiveClass("justify", justify), toResponsiveClass("flex", wrap), // wrap classes: flex-wrap, flex-nowrap, flex-wrap-reverse
-    gap ? toResponsiveClass("gap", gap) : "", padding ? toResponsiveClass("p", padding) : "", margin ? toResponsiveClass("m", margin) : "", className);
-    return _jsx("div", { className: classes, children: children });
-};

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

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-/**
- * Converts 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(" ");
-};
-export const GridView = ({ columns = { sm: 1, md: 2, lg: 3 }, gap = 4, padding = 4, alignItems = "stretch", justifyItems = "stretch", className, children, }) => {
-    const classes = clsx("grid", toResponsiveClass("grid-cols", columns), toResponsiveClass("gap", gap), toResponsiveClass("p", padding), alignItems !== "stretch" ? `items-${alignItems}` : "items-stretch", justifyItems !== "stretch" ? `justify-items-${justifyItems}` : "justify-items-stretch", className);
-    return _jsx("div", { className: classes, children: children });
-};

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

@@ -1,55 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-export const Image = ({ src, alt = "Image", title, width = "w-full", height = "h-auto", rounded = "rounded-lg", borderColor = "transparent", borderWidth = "0", shadow = false, opacity = 1, objectFit = "cover", overlayText, overlayColor = "rgba(0,0,0,0.5)", svgIcon, responsive = false, p, m, hoverScale = 1.05, hoverRotate = 0, hoverOpacity, hoverShadow = false, transitionDuration = "300ms", overflow = "hidden", className = "", style, onClick, onLoad, onError, }) => {
-    /** Base Tailwind classes */
-    const baseClasses = useMemo(() => {
-        const classes = [
-            "relative inline-block transition-all",
-            shadow ? "shadow-md" : "",
-            rounded,
-            p ?? "",
-            m ?? "",
-            responsive ? "w-full h-auto" : "",
-            className,
-        ];
-        return classes.join(" ");
-    }, [shadow, rounded, p, m, responsive, className]);
-    /** Inline styles for custom widths, hover, borders, etc. */
-    const inlineStyles = useMemo(() => ({
-        width: typeof width === "number" ? width : undefined,
-        height: typeof height === "number" ? height : undefined,
-        objectFit,
-        opacity,
-        borderColor,
-        borderWidth,
-        transition: `all ${transitionDuration} ease`,
-        ...style,
-    }), [width, height, objectFit, opacity, borderColor, borderWidth, transitionDuration, style]);
-    /** Overflow handling */
-    const overflowStyles = useMemo(() => {
-        switch (overflow) {
-            case "x":
-                return { overflowX: "hidden" };
-            case "y":
-                return { overflowY: "hidden" };
-            default:
-                return { overflow };
-        }
-    }, [overflow]);
-    /** Hover effects */
-    const handleMouseEnter = (e) => {
-        if (hoverOpacity !== undefined)
-            e.currentTarget.style.opacity = hoverOpacity.toString();
-        e.currentTarget.style.transform = `scale(${hoverScale}) rotate(${hoverRotate}deg)`;
-        if (hoverShadow)
-            e.currentTarget.style.boxShadow = "0 8px 20px rgba(0,0,0,0.3)";
-    };
-    const handleMouseLeave = (e) => {
-        e.currentTarget.style.opacity = opacity.toString();
-        e.currentTarget.style.transform = "scale(1) rotate(0deg)";
-        if (hoverShadow)
-            e.currentTarget.style.boxShadow = "";
-    };
-    return (_jsxs("div", { role: "img", "aria-label": alt, title: title || alt, onClick: onClick, className: baseClasses, style: { position: "relative", cursor: onClick ? "pointer" : "default", ...overflowStyles }, children: [svgIcon ? (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: svgIcon })) : (_jsx("img", { src: src, alt: alt, title: title || alt, loading: "lazy", style: inlineStyles, className: "block", onLoad: onLoad, onError: onError, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })), overlayText && (_jsx("div", { style: { backgroundColor: overlayColor }, className: "absolute inset-0 flex items-center justify-center text-white font-bold text-center p-4", children: overlayText }))] }));
-};

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

@@ -1,82 +0,0 @@
-"use client";
-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 { 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);
-    const hasPrefixIcon = Boolean(PrefixIcon);
-    const hasPrefixText = Boolean(prefix);
-    const hasPrefix = hasPrefixIcon || hasPrefixText;
-    const currentValue = value !== undefined ? value : localValue;
-    const handleChange = (e) => {
-        const val = e.target.value;
-        setLocalValue(val);
-        onChange?.(name, val);
-    };
-    const handleKeyDown = (e) => {
-        if (type === "number" && e.key === "-")
-            e.preventDefault();
-    };
-    /** 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";
-    };
-    /** 🔥 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, 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,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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", primaryTheme = true, primaryColor = "#3b82f6", className, itemClassName, titleClassName, bulletClassName, }) => {
-    const isOrdered = type === "ordered";
-    const isInline = type === "inline";
-    const ListTag = isOrdered ? "ol" : "ul";
-    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,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useCallback } from "react";
-import { X } from "lucide-react";
-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 key 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]);
-    const handleOverlayClick = useCallback(() => {
-        if (!disableOverlayClose)
-            onClose();
-    }, [disableOverlayClose, onClose]);
-    if (!isOpen)
-        return null;
-    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,54 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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;
-                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,
-                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
-                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
-                                transition: "all 0.2s ease",
-                            }, children: isChecked && (_jsx("span", { style: {
-                                    width: iconSize / 2,
-                                    height: iconSize / 2,
-                                    borderRadius: "50%",
-                                    backgroundColor: darkMode ? "#fff" : "#fff",
-                                } })) })] }, option.value));
-            }), error && (_jsx("p", { role: "alert", style: {
-                    color: "#dc2626",
-                    fontSize: 12,
-                    marginTop: 4,
-                    ...errorStyle,
-                }, children: error }))] }));
-};

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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(" ");
-};
-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 }));