@neuctra/ui 0.2.2 → 0.2.4

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RadioGroup = ({ name, options, selectedValue, onChange, disabled = false, readOnly = false, required = false, error, className = "", style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", iconUncheckedBorderColor = "#9ca3af", textColor = "#374151", errorStyle, }) => {
+    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 8, ...style }, role: "radiogroup", "aria-disabled": disabled, children: [options.map((option) => {
+                const isChecked = selectedValue === option.value;
+                return (_jsxs("label", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        cursor: disabled ? "not-allowed" : "pointer",
+                        opacity: disabled ? 0.6 : 1,
+                        gap: 8,
+                        userSelect: "none",
+                        ...labelStyle,
+                    }, children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: "radio", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => onChange && onChange(option.value), style: { display: "none" } }), _jsx("span", { style: {
+                                display: "inline-flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                width: iconSize,
+                                height: iconSize,
+                                borderRadius: "50%",
+                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
+                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
+                                transition: "all 0.25s ease",
+                            }, children: isChecked && (_jsx("span", { style: {
+                                    width: iconSize / 2,
+                                    height: iconSize / 2,
+                                    borderRadius: "50%",
+                                    backgroundColor: "white",
+                                } })) })] }, option.value));
+            }), error && (_jsx("p", { role: "alert", style: {
+                    color: "#dc2626",
+                    fontSize: 12,
+                    marginTop: 4,
+                    ...errorStyle,
+                }, children: error }))] }));
+};

package/dist/src/components/basic/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/SwitchGroup.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SwitchGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className = "", style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", switchBgColor = "#d1d5db", textColor = "#374151", errorStyle, }) => {
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        const updatedValues = selectedValues.includes(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        onChange(updatedValues);
+    };
+    return (_jsxs("div", { className: className, style: { display: "flex", flexDirection: "column", gap: 8, ...style }, role: "group", "aria-disabled": disabled, children: [options.map((option) => {
+                const isChecked = selectedValues.includes(option.value);
+                return (_jsxs("label", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        cursor: disabled ? "not-allowed" : "pointer",
+                        opacity: disabled ? 0.6 : 1,
+                        gap: 8,
+                        userSelect: "none",
+                        ...labelStyle,
+                    }, children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: "checkbox", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => handleChange(option.value), style: { display: "none" } }), _jsx("span", { style: {
+                                position: "relative",
+                                width: iconSize * 2,
+                                height: iconSize * 1.1,
+                                borderRadius: 9999,
+                                backgroundColor: isChecked ? iconCheckedBgColor : switchBgColor,
+                                transition: "background-color 0.25s ease",
+                            }, children: _jsx("span", { style: {
+                                    position: "absolute",
+                                    top: "50%",
+                                    left: isChecked
+                                        ? `calc(100% - ${iconSize - 4}px - 2px)`
+                                        : "2px",
+                                    transform: "translateY(-50%)",
+                                    width: iconSize - 4,
+                                    height: iconSize - 4,
+                                    borderRadius: "50%",
+                                    backgroundColor: "#fff",
+                                    boxShadow: "0 1px 2px rgba(0,0,0,0.3)",
+                                    transition: "left 0.25s ease",
+                                } }) })] }, option.value));
+            }), error && (_jsx("p", { role: "alert", style: {
+                    color: "#dc2626",
+                    fontSize: 12,
+                    marginTop: 4,
+                    ...errorStyle,
+                }, children: error }))] }));
+};

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 })] }));
+};

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

@@ -0,0 +1,117 @@
+import React, { useMemo } from "react";
+/** 🎨 Utility: generate lighter/darker shades */
+function adjustColor(color, amount) {
+    return ("#" +
+        color
+            .replace(/^#/, "")
+            .replace(/../g, (hex) => ("0" +
+            Math.min(255, Math.max(0, parseInt(hex, 16) + amount)).toString(16)).slice(-2)));
+}
+/** 🌈 Default color palettes */
+const defaultColors = {
+    light: {
+        default: "#111",
+        primary: "#2563eb",
+        secondary: "#64748b",
+        success: "#16a34a",
+        danger: "#dc2626",
+        white: "#ffffff",
+        muted: "#6b7280",
+    },
+    dark: {
+        default: "#f8fafc",
+        primary: "#60a5fa",
+        secondary: "#94a3b8",
+        success: "#22c55e",
+        danger: "#f87171",
+        white: "#ffffff",
+        muted: "#9ca3af",
+    },
+};
+/** 💬 Main Component (HTML-only tags) */
+export function Text({ as, children, color = "default", size = "md", weight = "normal", align = "left", transform = "none", italic = false, underline = false, strikethrough = false, truncate = false, selectable = true, hoverable = false, onClick, darkMode = false, baseColor, className = "", style = {}, ...rest }) {
+    // element type as provided (constrained to HTML tags)
+    const Element = (as || "p");
+    /** 🎨 Dynamic color palette generation */
+    const theme = useMemo(() => {
+        if (!baseColor)
+            return defaultColors[darkMode ? "dark" : "light"];
+        const lightMode = {
+            default: "#111",
+            primary: baseColor,
+            secondary: adjustColor(baseColor, -50),
+            success: adjustColor(baseColor, -30),
+            danger: "#dc2626",
+            white: "#ffffff",
+            muted: "#6b7280",
+        };
+        const darkModeTheme = {
+            default: "#f8fafc",
+            primary: adjustColor(baseColor, 80),
+            secondary: adjustColor(baseColor, 120),
+            success: adjustColor(baseColor, 100),
+            danger: "#f87171",
+            white: "#ffffff",
+            muted: "#9ca3af",
+        };
+        return darkMode ? darkModeTheme : lightMode;
+    }, [baseColor, darkMode]);
+    /** 📏 Font sizes */
+    const sizes = {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.25rem",
+        xl: "1.5rem",
+        "2xl": "2rem",
+    };
+    /** 💅 Computed styles */
+    const computedStyle = {
+        color: theme[color] || color,
+        fontSize: sizes[size] || size,
+        fontWeight: weight,
+        textAlign: align,
+        textTransform: transform,
+        fontStyle: italic ? "italic" : "normal",
+        textDecoration: underline ? "underline" : strikethrough ? "line-through" : "none",
+        userSelect: selectable ? "text" : "none",
+        overflow: truncate ? "hidden" : undefined,
+        whiteSpace: truncate ? "nowrap" : undefined,
+        textOverflow: truncate ? "ellipsis" : undefined,
+        cursor: onClick ? "pointer" : "default",
+        transition: "all 0.25s ease-in-out",
+        ...style,
+    };
+    /** 🧠 Hover events (narrow to HTMLElement at runtime) */
+    const handleMouseEnter = (e) => {
+        if (!hoverable)
+            return;
+        const target = e.currentTarget;
+        if (target instanceof HTMLElement) {
+            target.style.opacity = "0.8";
+        }
+    };
+    const handleMouseLeave = (e) => {
+        if (!hoverable)
+            return;
+        const target = e.currentTarget;
+        if (target instanceof HTMLElement) {
+            target.style.opacity = "1";
+        }
+    };
+    /**
+     * Build props object. We cast only once to the correct intrinsic props type.
+     * This prevents TypeScript from having to compute giant unions for event types.
+     */
+    const props = {
+        className,
+        style: computedStyle,
+        onClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...rest,
+    };
+    // Use React.createElement to avoid JSX generic complexity
+    return React.createElement(Element, props, children);
+}
+export default Text;

package/dist/src/index.js

@@ -0,0 +1,46 @@
+import "./style.css"; // 🔹 Global styles import (keep this as the only CSS import)
+// ==============================
+// ✅ BASIC COMPONENT EXPORTS
+// ==============================
+// Alerts & Notifications
+export { Alert } from "./components/basic/Alert"; // ✅ Finalized
+// Accordions
+export { Accordion } from "./components/basic/Accordation"; // ✅ Finalized
+// Avatars
+export { Avatar, AvatarGroup } from "./components/basic/Avatar"; // ✅ Finalized
+// Audio Components
+export { AudioPlayer } from "./components/basic/AudioPlayer"; // ✅ Finalized
+export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
+// Badges
+export { Badge } from "./components/basic/Badge"; // ✅ Finalized
+// Buttons
+export { Button } from "./components/basic/Button"; // ✅ Finalized
+// Cards
+export { Card } from "./components/basic/Card"; // ✅ Finalized
+// ✅ Checkbox, Radio & Switch Components
+export { CheckboxGroup } from "./components/basic/CheckboxGroup";
+export { RadioGroup } from "./components/basic/RadioGroup";
+export { SwitchGroup } from "./components/basic/SwitchGroup";
+// Containers & Layout
+export { Container } from "./components/basic/Container"; // ✅ Finalized
+export { Flexbox } from "./components/basic/Flexbox"; // ✅ Finalized
+export { Stack, HStack, VStack } from "./components/basic/Stack"; // ✅ Finalized
+export { GridView } from "./components/basic/GridView"; // ✅ Finalized
+// Drawers
+export { Drawer, DrawerButton } from "./components/basic/Drawer"; // ✅ Finalized
+// Dropdowns
+export { Dropdown } from "./components/basic/DropDown"; // ✅ Finalized
+// Forms & Inputs
+export { Input } from "./components/basic/Input"; // ✅ Finalized
+// Images
+export { Image } from "./components/basic/Image"; // ✅ Finalized
+// Lists
+export { List } from "./components/basic/List"; // ✅ Finalized
+// Modals
+export { Modal } from "./components/basic/Modal"; // ✅ Finalized
+// Tables
+export { Table, TBody, TD, THead, TH, TRow } from "./components/basic/Table"; // ✅ Finalized
+// Tabs
+export { Tabs } from "./components/basic/Tabs"; // ✅ Finalized
+// Text
+export { Text } from "./components/basic/Text"; // ✅ Finalized

package/dist/types/src/components/basic/Accordation.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface AccordionItem {
+    title: string;
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** Allow multiple open items */
+    allowMultiple?: boolean;
+    /** Default open indexes */
+    defaultOpen?: number[];
+    /** Appearance */
+    borderColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    hoverBgColor?: string;
+    hoverTextColor?: string;
+    contentBgColor?: string;
+    contentTextColor?: string;
+    /** Layout & spacing */
+    paddingY?: string | number;
+    paddingX?: string | number;
+    marginY?: string | number;
+    borderRadius?: string | number;
+    contentPadding?: string | number;
+    /** Typography */
+    fontSize?: string | number;
+    fontWeight?: string | number;
+    contentFontSize?: string | number;
+    contentFontWeight?: string | number;
+    /** Icon customization */
+    iconOpen?: React.ReactNode;
+    iconClose?: React.ReactNode;
+    iconSize?: string | number;
+    /** Motion & style */
+    transitionDuration?: string;
+    shadow?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 🧠 Industry-standard, minimal, and fully customizable Accordion
+ */
+export declare const Accordion: React.FC<AccordionProps>;