@neuctra/ui 0.2.2 → 0.2.3

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,88 @@
+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, }) => {
+    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]);
+    /* ------------------------------ Early Return ----------------------------- */
+    if (!isOpen)
+        return null;
+    /* ------------------------------- Base Styles ----------------------------- */
+    const baseOverlay = {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "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: "#fff",
+        borderRadius: 12,
+        width: "90vw",
+        maxWidth: 700,
+        maxHeight: "90vh",
+        overflowY: "auto",
+        padding: 24,
+        boxShadow: "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: "#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.transform = "scale(1.1)";
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.color = "#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] }) }));
+};

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { Container } from "./Container";
+/** 🎨 Preset Variants */
+const variantStyles = {
+    light: { background: "#ffffff", color: "#111827" },
+    dark: { background: "#0f172a", color: "#f9fafb" },
+    gradient: {
+        background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+        color: "#ffffff",
+    },
+    transparent: { background: "transparent", color: "#111827" },
+    primary: { background: "#3b82f6", color: "#ffffff" },
+};
+/** 🧩 Utility: Resolve responsive props safely */
+function resolveResponsive(prop, screen, fallback) {
+    if (prop == null)
+        return fallback;
+    if (typeof prop !== "object")
+        return prop;
+    return prop[screen] ?? fallback;
+}
+/** 📱 Determine current breakpoint */
+function getScreenSize(width) {
+    if (width < 768)
+        return "sm";
+    if (width < 1024)
+        return "md";
+    return "lg";
+}
+/**
+ * 🧱 Section Component
+ * A flexible layout wrapper that supports responsive backgrounds,
+ * adaptive padding, and variant-based theming.
+ */
+export const Section = ({ title, subtitle, variant = "light", background, overlay, color, paddingY = 60, paddingX = 20, size = "xl", height = "auto", align = "center", borderRadius = 0, className = "", style, children, }) => {
+    const [screenSize, setScreenSize] = useState("lg");
+    useEffect(() => {
+        const updateSize = () => setScreenSize(getScreenSize(window.innerWidth));
+        updateSize();
+        window.addEventListener("resize", updateSize);
+        return () => window.removeEventListener("resize", updateSize);
+    }, []);
+    const resolvedVariant = resolveResponsive(variant, screenSize, "light");
+    const theme = variantStyles[resolvedVariant];
+    const resolvedStyles = useMemo(() => {
+        const bg = resolveResponsive(background, screenSize, theme.background);
+        const textColor = resolveResponsive(color, screenSize, theme.color);
+        const overlayColor = resolveResponsive(overlay, screenSize);
+        const py = resolveResponsive(paddingY, screenSize, 60);
+        const px = resolveResponsive(paddingX, screenSize, 20);
+        const alignText = resolveResponsive(align, screenSize, "center");
+        const h = resolveResponsive(height, screenSize, "auto");
+        const radius = resolveResponsive(borderRadius, screenSize, 0);
+        return {
+            position: "relative",
+            background: bg,
+            color: textColor,
+            paddingTop: typeof py === "number" ? `${py}px` : py,
+            paddingBottom: typeof py === "number" ? `${py}px` : py,
+            paddingLeft: typeof px === "number" ? `${px}px` : px,
+            paddingRight: typeof px === "number" ? `${px}px` : px,
+            textAlign: alignText,
+            height: h,
+            borderRadius: typeof radius === "number" ? `${radius}px` : radius,
+            boxSizing: "border-box",
+            overflow: "hidden",
+            ...style,
+        };
+    }, [
+        background,
+        color,
+        overlay,
+        paddingY,
+        paddingX,
+        align,
+        height,
+        borderRadius,
+        theme,
+        screenSize,
+        style,
+    ]);
+    const resolvedOverlay = resolveResponsive(overlay, screenSize);
+    return (_jsxs("section", { style: resolvedStyles, className: className, children: [resolvedOverlay && (_jsx("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: resolvedOverlay,
+                    pointerEvents: "none",
+                } })), _jsxs(Container, { size: resolveResponsive(size, screenSize, "xl"), className: "relative z-10", children: [(title || subtitle) && (_jsxs("header", { style: { marginBottom: 32 }, children: [title && (_jsx("h2", { style: {
+                                    fontSize: "2rem",
+                                    fontWeight: 700,
+                                    marginBottom: subtitle ? 8 : 0,
+                                }, children: title })), subtitle && (_jsx("p", { style: {
+                                    fontSize: "1.125rem",
+                                    color: resolvedVariant === "dark"
+                                        ? "rgba(255,255,255,0.7)"
+                                        : "rgba(0,0,0,0.6)",
+                                }, children: subtitle }))] })), children] })] }));
+};
+export default Section;

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

@@ -0,0 +1,75 @@
+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 Stack = ({ direction = { sm: "vertical", md: "horizontal", lg: "horizontal" }, gap = 12, align = "center", justify = "flex-start", wrap = "nowrap", padding, margin, width = "100%", maxWidth, height = "auto", backgroundColor = "transparent", borderRadius, border, boxShadow, overflow, className, style, children, }) => {
+    const [screen, setScreen] = useState("lg");
+    useEffect(() => {
+        const updateScreen = () => setScreen(getScreenSize(window.innerWidth));
+        updateScreen();
+        window.addEventListener("resize", updateScreen);
+        return () => window.removeEventListener("resize", updateScreen);
+    }, []);
+    const computedStyle = useMemo(() => {
+        const toCssValue = (val) => typeof val === "number" ? `${val}px` : val;
+        const resolvedDir = resolveResponsive(direction, screen, "vertical");
+        const flexDir = resolvedDir === "vertical" ? "column" : "row";
+        return {
+            display: "flex",
+            flexDirection: flexDir,
+            alignItems: resolveResponsive(align, screen, "center"),
+            justifyContent: resolveResponsive(justify, screen, "flex-start"),
+            flexWrap: resolveResponsive(wrap, screen, "nowrap"),
+            gap: toCssValue(resolveResponsive(gap, screen, 12)),
+            padding: toCssValue(resolveResponsive(padding, screen, undefined)),
+            margin: toCssValue(resolveResponsive(margin, screen, undefined)),
+            width: resolveResponsive(width, screen, "100%"),
+            maxWidth: resolveResponsive(maxWidth, screen, undefined),
+            height: resolveResponsive(height, screen, undefined),
+            backgroundColor: resolveResponsive(backgroundColor, screen, undefined),
+            borderRadius: resolveResponsive(borderRadius, screen, undefined),
+            border: resolveResponsive(border, screen, undefined),
+            boxShadow: resolveResponsive(boxShadow, screen, undefined),
+            overflow: resolveResponsive(overflow, screen, undefined),
+            boxSizing: "border-box",
+            ...style,
+        };
+    }, [
+        direction,
+        gap,
+        align,
+        justify,
+        wrap,
+        padding,
+        margin,
+        width,
+        maxWidth,
+        height,
+        backgroundColor,
+        borderRadius,
+        border,
+        boxShadow,
+        overflow,
+        style,
+        screen,
+    ]);
+    return (_jsx("div", { className: className, style: computedStyle, children: children }));
+};
+export const HStack = (props) => {
+    return _jsx(Stack, { direction: "horizontal", ...props });
+};
+export const VStack = (props) => {
+    return _jsx(Stack, { direction: "vertical", ...props });
+};

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Table = ({ children, style, className }) => (_jsx("table", { className: className, style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        borderSpacing: 0,
+        ...style,
+    }, children: children }));
+export const THead = ({ children, style, className }) => (_jsx("thead", { className: className, style: {
+        backgroundColor: "#f9fafb",
+        borderBottom: "2px solid #e5e7eb",
+        ...style,
+    }, children: children }));
+export const TBody = ({ children, style, className }) => (_jsx("tbody", { className: className, style: style, children: children }));
+export const TRow = ({ children, style, className }) => (_jsx("tr", { className: className, style: {
+        borderBottom: "1px solid #e5e7eb",
+        transition: "background 0.2s ease",
+        ...style,
+    }, children: children }));
+export const TH = ({ children, style, className }) => (_jsx("th", { className: className, style: {
+        textAlign: "left",
+        padding: "12px 16px",
+        fontWeight: 600,
+        fontSize: "0.875rem",
+        color: "#374151",
+        ...style,
+    }, children: children }));
+export const TD = ({ children, style, className }) => (_jsx("td", { className: className, style: {
+        padding: "12px 16px",
+        fontSize: "0.875rem",
+        color: "#4b5563",
+        ...style,
+    }, children: children }));

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

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+/** 💎 Modern, Fully Customizable Tabs */
+export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "solid", fullWidth = false, gap = 8, radius = 8, padding = "12px 18px", transitionDuration = 200, elevation = 1, bordered = false, primaryColor = "#2563eb", backgroundColor = "transparent", textColor = "#374151", hoverColor = "#1d4ed8", activeColor = "#ffffff", borderColor = "#e5e7eb", disabledColor = "#9ca3af", responsiveBreakpoint = 768, showDrawerLabel = "Select Tab", drawerIcon = "☰", onTabChange, className = "", style, tabClassName = "", contentClassName = "", activeTabStyle, inactiveTabStyle, contentStyle, }) => {
+    const [active, setActive] = useState(defaultActive);
+    const [hovered, setHovered] = useState(null);
+    const [isMobile, setIsMobile] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const containerRef = useRef(null);
+    /** 📱 Responsive detection */
+    useEffect(() => {
+        const check = () => setIsMobile(window.innerWidth <= responsiveBreakpoint);
+        check();
+        window.addEventListener("resize", check);
+        return () => window.removeEventListener("resize", check);
+    }, [responsiveBreakpoint]);
+    /** 🎛 Handle tab change */
+    const handleChange = (i) => {
+        if (tabs[i].disabled)
+            return;
+        setActive(i);
+        onTabChange?.(i);
+        if (isMobile)
+            setDrawerOpen(false);
+    };
+    /** ⚡ Keyboard navigation */
+    const handleKeyDown = (e, i) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            handleChange((i + 1) % tabs.length);
+        }
+        else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            handleChange((i - 1 + tabs.length) % tabs.length);
+        }
+    };
+    /** 🎨 Base styles */
+    const baseTab = {
+        padding,
+        borderRadius: radius,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        justifyContent: "center",
+        fontWeight: 500,
+        transition: `all ${transitionDuration}ms ease`,
+        background: "transparent",
+        border: variant === "outline" ? `1px solid ${borderColor}` : "none",
+        borderBottom: variant === "underline" ? `2px solid transparent` : undefined,
+        color: textColor,
+        width: fullWidth ? "100%" : "auto",
+        userSelect: "none",
+    };
+    const activeTab = {
+        background: variant === "solid" ? primaryColor : "transparent",
+        color: activeColor,
+        borderBottom: variant === "underline" ? `2px solid ${primaryColor}` : undefined,
+        boxShadow: elevation > 0 ? `0 ${elevation}px ${elevation * 4}px ${primaryColor}33` : undefined,
+        ...activeTabStyle,
+    };
+    const inactiveTab = {
+        ...(variant === "outline"
+            ? { borderColor }
+            : variant === "underline"
+                ? { borderBottomColor: "transparent" }
+                : {}),
+        ...inactiveTabStyle,
+    };
+    const hoverTab = {
+        color: hoverColor,
+        background: variant === "solid"
+            ? `${primaryColor}11`
+            : variant === "outline"
+                ? `${primaryColor}11`
+                : "transparent",
+    };
+    const disabledTab = {
+        color: disabledColor,
+        cursor: "not-allowed",
+        opacity: 0.6,
+    };
+    const contentBox = {
+        flexGrow: 1,
+        borderTop: bordered && position === "top" ? `1px solid ${borderColor}` : undefined,
+        borderLeft: bordered && position === "left" ? `1px solid ${borderColor}` : undefined,
+        borderRight: bordered && position === "right" ? `1px solid ${borderColor}` : undefined,
+        borderRadius: radius,
+        ...contentStyle,
+    };
+    /** 🧱 Layout */
+    const isVertical = position === "left" || position === "right";
+    const layoutDir = isVertical ? "row" : "column";
+    return (_jsxs("div", { ref: containerRef, className: `modern-tabs ${className}`, style: {
+            display: "flex",
+            flexDirection: isVertical ? (position === "right" ? "row-reverse" : "row") : "column",
+            background: backgroundColor,
+            border: bordered ? `1px solid ${borderColor}` : undefined,
+            borderRadius: radius,
+            overflow: "hidden",
+            ...style,
+        }, children: [_jsx("style", { children: `
+          @keyframes tab-fade {
+            from { opacity: 0; transform: translateY(5px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+          .modern-tabs__content {
+            animation: tab-fade ${transitionDuration}ms ease;
+          }
+        ` }), isMobile ? (_jsxs("div", { style: { width: "100%", padding: 8 }, children: [_jsxs("button", { onClick: () => setDrawerOpen(!drawerOpen), style: {
+                            ...baseTab,
+                            ...activeTab,
+                            justifyContent: "space-between",
+                            width: "100%",
+                            fontSize: 16,
+                        }, children: [showDrawerLabel, _jsx("span", { children: drawerIcon })] }), drawerOpen && (_jsx("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            marginTop: 8,
+                            gap,
+                        }, children: tabs.map((tab, i) => {
+                            const isActive = i === active;
+                            const isHovered = hovered === i;
+                            const isDisabled = tab.disabled;
+                            return (_jsxs("button", { disabled: isDisabled, onClick: () => handleChange(i), onKeyDown: (e) => handleKeyDown(e, i), onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), className: tabClassName, style: {
+                                    ...baseTab,
+                                    ...(isActive ? activeTab : inactiveTab),
+                                    ...(isHovered && !isActive && !isDisabled ? hoverTab : {}),
+                                    ...(isDisabled ? disabledTab : {}),
+                                }, children: [tab.icon && _jsx("span", { children: tab.icon }), tab.label] }, i));
+                        }) }))] })) : (_jsx("div", { style: {
+                    display: "flex",
+                    flexDirection: isVertical ? "column" : "row",
+                    gap,
+                    padding: 8,
+                    minWidth: isVertical ? 200 : undefined,
+                }, children: tabs.map((tab, i) => {
+                    const isActive = i === active;
+                    const isHovered = hovered === i;
+                    const isDisabled = tab.disabled;
+                    return (_jsxs("button", { disabled: isDisabled, onClick: () => handleChange(i), onKeyDown: (e) => handleKeyDown(e, i), onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), className: tabClassName, style: {
+                            ...baseTab,
+                            ...(isActive ? activeTab : inactiveTab),
+                            ...(isHovered && !isActive && !isDisabled ? hoverTab : {}),
+                            ...(isDisabled ? disabledTab : {}),
+                        }, role: "tab", "aria-selected": isActive, children: [tab.icon && _jsx("span", { children: tab.icon }), tab.label] }, i));
+                }) })), _jsx("div", { className: `modern-tabs__content ${contentClassName}`, style: contentBox, role: "tabpanel", children: tabs[active]?.content })] }));
+};