@neuctra/ui 0.2.4 → 0.2.6

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

@@ -1,162 +1,98 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useState, forwardRef, } from "react";
-/* ----------------------
- * Default theme tokens
- * ---------------------*/
-const THEMES = {
-    light: {
-        controlBg: "#ffffff",
-        menuBg: "#ffffff",
-        textColor: "#111827",
-        placeholderColor: "#6b7280",
-        hoverBg: "#f9fafb",
-        selectedBg: "#eff6ff",
-        disabledBg: "#f3f4f6",
-        disabledTextColor: "#9ca3af",
-        borderColor: "#e5e7eb",
-        accentColor: "#3b82f6",
-    },
-    dark: {
-        controlBg: "#1f2937",
-        menuBg: "#111827",
-        textColor: "#f9fafb",
-        placeholderColor: "#9ca3af",
-        hoverBg: "#374151",
-        selectedBg: "#2563eb33",
-        disabledBg: "#374151",
-        disabledTextColor: "#6b7280",
-        borderColor: "#374151",
-        accentColor: "#60a5fa",
-    },
-    custom: {},
-};
-/* ----------------------
- * Component
- * ---------------------*/
-const DropdownInner = (props, ref) => {
-    const id = useId();
-    const { options, value, values, defaultValue, defaultValues, onChange, placeholder = "Select...", disabled = false, searchable = false, multiSelect = false, clearable = false, virtualized = false, width = "100%", dropdownMaxHeight = "320px", borderRadius = "8px", boxShadow = "0 8px 28px rgba(0,0,0,0.1)", borderColor, accentColor, theme = "light", menuBg, controlBg, textColor, hoverBg, selectedBg, disabledBg, disabledTextColor, placeholderColor, transitionDuration = "180ms", className, controlClassName, menuClassName, optionClassName, style, controlStyle, menuStyle, optionStyle, iconPrefix, iconSuffix, clearIcon = "×", dropdownIcon = "▾", checkIcon = "✓", } = props;
-    // merge theme colors
-    const themeVars = {
-        ...THEMES[theme],
-        ...(theme === "custom" ? {} : {}),
-    };
-    const colors = {
-        borderColor: borderColor ?? themeVars.borderColor,
-        accentColor: accentColor ?? themeVars.accentColor,
-        controlBg: controlBg ?? themeVars.controlBg,
-        menuBg: menuBg ?? themeVars.menuBg,
-        textColor: textColor ?? themeVars.textColor,
-        hoverBg: hoverBg ?? themeVars.hoverBg,
-        selectedBg: selectedBg ?? themeVars.selectedBg,
-        disabledBg: disabledBg ?? themeVars.disabledBg,
-        disabledTextColor: disabledTextColor ?? themeVars.disabledTextColor,
-        placeholderColor: placeholderColor ?? themeVars.placeholderColor,
-    };
-    /* ----------------- State ----------------- */
-    const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(defaultValues ?? (defaultValue ? [defaultValue] : []));
+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(() => {
-        if (value)
-            setSelected([value]);
-        if (values)
-            setSelected(values);
-    }, [value, values]);
-    const selectedOptions = useMemo(() => options.filter((o) => selected.includes(o.value)), [options, selected]);
-    const toggle = () => !disabled && setIsOpen((s) => !s);
-    const selectValue = (val) => {
-        if (multiSelect) {
-            const exists = selected.includes(val);
-            const next = exists
-                ? selected.filter((v) => v !== val)
-                : [...selected, val];
-            setSelected(next);
-            onChange?.(next);
-        }
-        else {
-            setSelected([val]);
-            onChange?.(val);
-            setIsOpen(false);
-        }
-    };
-    const clearSelection = (e) => {
-        e?.stopPropagation();
-        setSelected([]);
-        onChange?.(multiSelect ? [] : "");
+        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);
     };
-    /* ----------------- Render ----------------- */
-    return (_jsxs("div", { ref: ref, className: className, style: {
-            position: "relative",
-            width,
-            fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
-            ...style,
-        }, children: [_jsxs("div", { className: controlClassName, role: "button", tabIndex: 0, onClick: toggle, style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    background: colors.controlBg,
-                    color: colors.textColor,
-                    padding: "0.5rem 0.75rem",
-                    border: `1px solid ${isOpen ? colors.accentColor : colors.borderColor}`,
-                    borderRadius,
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    boxShadow: isOpen ? `0 0 0 3px ${colors.accentColor}33` : undefined,
-                    transition: `all ${transitionDuration} ease`,
-                    ...controlStyle,
-                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [iconPrefix, selectedOptions.length ? (_jsx("span", { children: selectedOptions.map((s) => s.label).join(", ") })) : (_jsx("span", { style: { color: colors.placeholderColor }, children: placeholder }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [clearable && selected.length > 0 && (_jsx("button", { onClick: clearSelection, style: {
-                                    background: "transparent",
-                                    border: "none",
-                                    color: colors.textColor,
-                                    cursor: "pointer",
-                                }, children: clearIcon })), iconSuffix, _jsx("div", { style: {
-                                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-                                    transition: `transform ${transitionDuration}`,
-                                }, children: dropdownIcon })] })] }), isOpen && (_jsx("ul", { className: menuClassName, style: {
-                    position: "absolute",
-                    zIndex: 100,
-                    top: "calc(100% + 4px)",
-                    left: 0,
-                    right: 0,
-                    background: colors.menuBg,
-                    border: `1px solid ${colors.borderColor}`,
-                    borderRadius,
-                    boxShadow,
-                    maxHeight: dropdownMaxHeight,
-                    overflowY: "auto",
-                    transition: `opacity ${transitionDuration} ease`,
-                    ...menuStyle,
-                }, children: options.map((opt) => {
-                    const isSelected = selected.includes(opt.value);
-                    return (_jsxs("li", { onClick: () => !opt.disabled && selectValue(opt.value), className: optionClassName, style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
-                            padding: "0.5rem 0.75rem",
-                            background: opt.disabled
-                                ? colors.disabledBg
-                                : isSelected
-                                    ? colors.selectedBg
-                                    : "transparent",
-                            color: opt.disabled
-                                ? colors.disabledTextColor
-                                : colors.textColor,
-                            cursor: opt.disabled ? "not-allowed" : "pointer",
-                            borderRadius: 6,
-                            userSelect: "none",
-                            ...optionStyle,
-                        }, onMouseEnter: (e) => {
-                            if (!opt.disabled && !isSelected)
-                                e.currentTarget.style.backgroundColor = colors.hoverBg;
-                        }, onMouseLeave: (e) => {
-                            if (!opt.disabled && !isSelected)
-                                e.currentTarget.style.backgroundColor = "transparent";
-                        }, children: [multiSelect && (_jsx("span", { style: { width: 18, textAlign: "center" }, children: isSelected ? checkIcon : "○" })), opt.icon && _jsx("span", { children: opt.icon }), _jsxs("div", { style: { flex: 1 }, children: [opt.label, opt.description && (_jsx("div", { style: {
-                                            fontSize: 12,
-                                            color: colors.placeholderColor,
-                                            marginTop: 2,
-                                        }, children: opt.description }))] })] }, opt.value));
-                }) }))] }));
-};
-export const Dropdown = forwardRef(DropdownInner);
-export default Dropdown;
+    /** 🎨 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

@@ -0,0 +1,19 @@
+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,51 +1,18 @@
 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";
+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 = 16, padding = 0, alignItems = "stretch", justifyItems = "stretch", backgroundColor = "transparent", width = "100%", maxWidth = "100%", height = "auto", margin = 0, style, className = "", children, }) => {
-    const [screenSize, setScreenSize] = useState("lg");
-    useEffect(() => {
-        setScreenSize(getScreenSize(window.innerWidth));
-        const onResize = () => setScreenSize(getScreenSize(window.innerWidth));
-        window.addEventListener("resize", onResize);
-        return () => window.removeEventListener("resize", onResize);
-    }, []);
-    const resolvedColumns = useMemo(() => {
-        if (typeof columns === "number")
-            return columns;
-        return columns[screenSize] ?? 1;
-    }, [columns, screenSize]);
-    const styles = useMemo(() => ({
-        display: "grid",
-        gridTemplateColumns: `repeat(${resolvedColumns}, 1fr)`,
-        gap: typeof gap === "number" ? `${gap}px` : gap,
-        padding: typeof padding === "number" ? `${padding}px` : padding,
-        margin: typeof margin === "number" ? `${margin}px` : margin,
-        alignItems,
-        justifyItems,
-        backgroundColor,
-        width,
-        maxWidth,
-        height,
-        boxSizing: "border-box",
-        ...style,
-    }), [
-        resolvedColumns,
-        gap,
-        padding,
-        margin,
-        alignItems,
-        justifyItems,
-        backgroundColor,
-        width,
-        maxWidth,
-        height,
-        style,
-    ]);
-    return (_jsx("div", { style: styles, className: className, children: children }));
+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,56 +1,32 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-/**
- * ✅ Industry-Standard Image Component
- * - SEO & accessibility optimized
- * - Lazy loading & responsive
- * - Fully customizable styling
- * - Smooth hover transitions
- * - Overlay and SVG support
- */
-export const Image = ({ src, alt = "Image", title, width = "100%", height = "auto", borderRadius = "8px", borderColor = "transparent", borderStyle = "solid", borderWidth = "0px", shadow = false, boxShadow, opacity = 1, objectFit = "cover", overlayText, overlayColor = "rgba(0,0,0,0.5)", svgIcon, responsive = false, padding, margin, lazyLoad = true, hoverOpacity, hoverShadow = false, hoverScale = 1, hoverRotate = 0, transitionDuration = "0.3s", overflow = "hidden", className, style, onClick, onLoad, onError, }) => {
-    // ✅ Memoized base style for performance
-    const baseStyle = useMemo(() => ({
-        width: responsive ? "100%" : width,
-        height: responsive ? "auto" : height,
-        borderRadius,
-        border: `${borderWidth} ${borderStyle} ${borderColor}`,
+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,
-        boxShadow: shadow
-            ? boxShadow || "0 4px 12px rgba(0,0,0,0.15)"
-            : "none",
-        transition: `all ${transitionDuration} ease`,
-        display: "block",
-    }), [
-        responsive,
-        width,
-        height,
-        borderRadius,
         borderColor,
-        borderStyle,
         borderWidth,
-        objectFit,
-        opacity,
-        shadow,
-        boxShadow,
-        transitionDuration,
-    ]);
-    // ✅ Hover effects
-    const handleMouseEnter = useCallback((e) => {
-        e.currentTarget.style.opacity =
-            hoverOpacity !== undefined ? hoverOpacity.toString() : "1";
-        e.currentTarget.style.boxShadow = hoverShadow
-            ? "0 8px 20px rgba(0,0,0,0.3)"
-            : baseStyle.boxShadow || "none";
-        e.currentTarget.style.transform = `scale(${hoverScale}) rotate(${hoverRotate}deg)`;
-    }, [hoverOpacity, hoverShadow, hoverScale, hoverRotate, baseStyle.boxShadow]);
-    const handleMouseLeave = useCallback((e) => {
-        e.currentTarget.style.opacity = baseStyle.opacity?.toString() || "1";
-        e.currentTarget.style.boxShadow = baseStyle.boxShadow || "none";
-        e.currentTarget.style.transform = "scale(1) rotate(0deg)";
-    }, [baseStyle]);
-    // ✅ Overflow control
+        transition: `all ${transitionDuration} ease`,
+        ...style,
+    }), [width, height, objectFit, opacity, borderColor, borderWidth, transitionDuration, style]);
+    /** Overflow handling */
     const overflowStyles = useMemo(() => {
         switch (overflow) {
             case "x":
@@ -61,35 +37,19 @@ export const Image = ({ src, alt = "Image", title, width = "100%", height = "aut
                 return { overflow };
         }
     }, [overflow]);
-    return (_jsxs("div", { className: className, role: "img", "aria-label": alt, title: title || alt, onClick: onClick, style: {
-            width: responsive ? "100%" : width,
-            height: responsive ? "auto" : height,
-            padding,
-            margin,
-            position: "relative",
-            cursor: onClick ? "pointer" : "default",
-            display: "inline-block",
-            transition: `all ${transitionDuration} ease`,
-            ...overflowStyles,
-            ...style,
-        }, children: [svgIcon ? (_jsx("div", { style: {
-                    width: "100%",
-                    height: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: svgIcon })) : (_jsx("img", { src: src, alt: alt, title: title || alt, loading: lazyLoad ? "lazy" : "eager", style: baseStyle, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onLoad: onLoad, onError: onError, decoding: "async", fetchPriority: "high" })), overlayText && (_jsx("div", { style: {
-                    position: "absolute",
-                    inset: 0,
-                    backgroundColor: overlayColor,
-                    color: "#fff",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontWeight: "bold",
-                    fontSize: "1.1rem",
-                    textAlign: "center",
-                    padding: "1rem",
-                    boxSizing: "border-box",
-                }, children: overlayText }))] }));
+    /** 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 }))] }));
 };