@neuctra/ui 0.2.1 → 0.2.3

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

@@ -0,0 +1,94 @@
+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, color = "#2563eb", textColor = "#fff", borderRadius = "6px", padding = "10px 16px", fontSize = "14px", gap = "8px", style, className = "", }) => (_jsxs("button", { onClick: onClick, style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: color,
+        color: textColor,
+        border: "none",
+        borderRadius,
+        padding,
+        fontSize,
+        gap,
+        cursor: "pointer",
+        fontWeight: 500,
+        transition: "all 0.2s ease",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+        ...style,
+    }, className: className, children: [icon && iconPosition === "left" && icon, label, icon && iconPosition === "right" && icon] }));
+export const Drawer = ({ open, onClose, position = "right", width = "320px", height = "320px", backgroundColor = "#fff", backdropColor = "rgba(0,0,0,0.5)", transitionDuration = 300, style, className = "", children, showCloseButton = true, closeIconColor = "#000", closeButtonStyle, }) => {
+    const [visible, setVisible] = useState(open);
+    // Handle mount/unmount delay for smooth fade-out
+    useEffect(() => {
+        if (open)
+            setVisible(true);
+        else
+            setTimeout(() => setVisible(false), transitionDuration);
+    }, [open, transitionDuration]);
+    // Drawer transform direction
+    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]);
+    const drawerStyle = {
+        position: "fixed",
+        backgroundColor,
+        transition: `transform ${transitionDuration}ms ease, opacity ${transitionDuration}ms ease`,
+        transform,
+        opacity: open ? 1 : 0,
+        zIndex: 1001,
+        ...style,
+        ...(position === "left" || position === "right"
+            ? { top: 0, bottom: 0, [position]: 0, width, height: "100%" }
+            : { left: 0, right: 0, [position]: 0, height, width: "100%" }),
+    };
+    const overlayStyle = {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: backdropColor,
+        opacity: open ? 1 : 0,
+        transition: `opacity ${transitionDuration}ms ease`,
+        zIndex: 1000,
+        display: visible ? "block" : "none",
+        pointerEvents: open ? "auto" : "none",
+    };
+    const defaultCloseButtonStyle = {
+        position: "absolute",
+        top: "12px",
+        right: "12px",
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s ease, opacity 0.2s ease",
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: overlayStyle, onClick: onClose }), _jsxs("div", { style: {
+                    ...drawerStyle,
+                    display: "flex",
+                    flexDirection: "column",
+                    visibility: visible ? "visible" : "hidden",
+                    pointerEvents: open ? "auto" : "none",
+                    boxShadow: "0 0 20px rgba(0,0,0,0.15)",
+                }, className: className, children: [showCloseButton && (_jsx("button", { onClick: onClose, style: { ...defaultCloseButtonStyle, ...closeButtonStyle }, "aria-label": "Close drawer", children: _jsx(X, { size: 22, color: closeIconColor }) })), _jsx("div", { style: {
+                            flex: 1,
+                            overflowY: "auto",
+                            padding: "16px",
+                            scrollbarWidth: "thin",
+                        }, children: children })] })] }));
+};

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

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+export const Dropdown = ({ options, value, defaultValue, onChange, placeholder = "Select an option", disabled = false, searchable = false, multiSelect = false, clearable = false, virtualized = false, optionHeight = 36, visibleOptions = 5, 
+// Styling defaults
+width = "100%", height = "auto", borderColor = "#d1d5db", focusBorderColor = "#2563eb", errorBorderColor = "#dc2626", backgroundColor = "#ffffff", textColor = "#111827", placeholderColor = "#9ca3af", hoverColor = "#f3f4f6", selectedColor = "#eff6ff", disabledColor = "#f3f4f6", padding = "0.5rem 0.75rem", margin = "0", borderRadius = "0.375rem", boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)", optionPadding = "0.5rem 0.75rem", optionGap = "0.5rem", transitionDuration = "200ms", dropdownMaxHeight = "300px", dropdownMinWidth = "100%", 
+// Custom classes
+className = "", dropdownClassName = "", optionClassName = "", inputClassName = "", 
+// Custom styles
+style, dropdownStyle, optionStyle, inputStyle, 
+// Icons
+iconPrefix, iconSuffix, clearIcon = "×", dropdownIcon = "▼", checkIcon = "✓", 
+// Accessibility
+ariaLabel, ariaLabelledby, ariaDescribedby, 
+// Callbacks
+onFocus, onBlur, onOpen, onClose, }) => {
+    const [selectedValues, setSelectedValues] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    const optionsRef = useRef([]);
+    // Initialize selected values
+    useEffect(() => {
+        if (value) {
+            setSelectedValues(multiSelect ? value.split(",") : [value]);
+        }
+        else if (defaultValue) {
+            setSelectedValues(multiSelect ? defaultValue.split(",") : [defaultValue]);
+        }
+        else {
+            setSelectedValues([]);
+        }
+    }, [value, defaultValue, multiSelect]);
+    // Filter options based on search term
+    const filteredOptions = searchable
+        ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
+        : options;
+    // Handle click outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                onClose?.();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [onClose]);
+    // Keyboard navigation
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isOpen)
+                return;
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    setFocusedIndex((prev) => {
+                        const nextIndex = prev === null
+                            ? 0
+                            : Math.min(prev + 1, filteredOptions.length - 1);
+                        scrollToOption(nextIndex);
+                        return nextIndex;
+                    });
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    setFocusedIndex((prev) => {
+                        const nextIndex = prev === null ? 0 : Math.max(prev - 1, 0);
+                        scrollToOption(nextIndex);
+                        return nextIndex;
+                    });
+                    break;
+                case "Enter":
+                    event.preventDefault();
+                    if (focusedIndex !== null) {
+                        handleSelect(filteredOptions[focusedIndex].value);
+                    }
+                    break;
+                case "Escape":
+                    event.preventDefault();
+                    setIsOpen(false);
+                    onClose?.();
+                    break;
+                case "Tab":
+                    setIsOpen(false);
+                    onClose?.();
+                    break;
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, focusedIndex, filteredOptions]);
+    const scrollToOption = useCallback((index) => {
+        optionsRef.current[index]?.scrollIntoView({
+            block: "nearest",
+            behavior: "smooth",
+        });
+    }, []);
+    const handleSelect = (value) => {
+        let newSelectedValues;
+        if (multiSelect) {
+            newSelectedValues = selectedValues.includes(value)
+                ? selectedValues.filter((v) => v !== value)
+                : [...selectedValues, value];
+        }
+        else {
+            newSelectedValues = [value];
+            setIsOpen(false);
+            onClose?.();
+        }
+        setSelectedValues(newSelectedValues);
+        onChange?.(multiSelect ? newSelectedValues.join(",") : value);
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        setSelectedValues([]);
+        onChange?.("");
+        setSearchTerm("");
+    };
+    const toggleDropdown = () => {
+        if (disabled)
+            return;
+        const newState = !isOpen;
+        setIsOpen(newState);
+        if (newState) {
+            onOpen?.();
+            if (searchable) {
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+        }
+        else {
+            onClose?.();
+        }
+    };
+    const selectedOption = options.find((option) => option.value === selectedValues[0]);
+    const selectedOptions = options.filter((option) => selectedValues.includes(option.value));
+    // Virtualization setup
+    const [startIndex, setStartIndex] = useState(0);
+    const visibleOptionCount = Math.min(visibleOptions, filteredOptions.length);
+    const endIndex = Math.min(startIndex + visibleOptionCount, filteredOptions.length);
+    const visibleOptionsList = virtualized
+        ? filteredOptions.slice(startIndex, endIndex)
+        : filteredOptions;
+    return (_jsxs("div", { ref: dropdownRef, className: `dropdown-container ${className}`, style: {
+            position: "relative",
+            width,
+            margin,
+            fontFamily: "'Inter', sans-serif",
+            ...style,
+        }, children: [_jsx("style", { children: `
+          .dropdown-container {
+            --border-color: ${borderColor};
+            --focus-border-color: ${focusBorderColor};
+            --error-border-color: ${errorBorderColor};
+            --bg-color: ${backgroundColor};
+            --text-color: ${textColor};
+            --placeholder-color: ${placeholderColor};
+            --hover-color: ${hoverColor};
+            --selected-color: ${selectedColor};
+            --disabled-color: ${disabledColor};
+            --transition-duration: ${transitionDuration};
+          }
+        ` }), _jsxs("div", { role: "button", onClick: toggleDropdown, "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: `dropdown-control ${inputClassName}`, style: {
+                    width: "100%",
+                    minHeight: height,
+                    padding,
+                    backgroundColor: disabled ? disabledColor : backgroundColor,
+                    color: textColor,
+                    borderWidth: "1px",
+                    borderStyle: "solid",
+                    borderColor: isOpen ? focusBorderColor : borderColor,
+                    borderRadius,
+                    boxShadow,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    opacity: disabled ? 0.7 : 1,
+                    transition: `all ${transitionDuration} ease-in-out`,
+                    textAlign: "left",
+                    ...inputStyle,
+                    ...(isOpen && {
+                        boxShadow: `0 0 0 1px ${focusBorderColor}`,
+                    }),
+                }, children: [_jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: optionGap,
+                            flex: 1,
+                            overflow: "hidden",
+                        }, children: [iconPrefix && (_jsx("span", { className: "dropdown-icon-prefix", style: { flexShrink: 0 }, children: iconPrefix })), multiSelect ? (_jsx("div", { style: {
+                                    display: "flex",
+                                    gap: "0.25rem",
+                                    flexWrap: "wrap",
+                                    flex: 1,
+                                    overflow: "hidden",
+                                }, children: selectedOptions.length > 0 ? (selectedOptions.map((option) => (_jsxs("span", { style: {
+                                        backgroundColor: selectedColor,
+                                        padding: "0.25rem 0.5rem",
+                                        borderRadius: "0.25rem",
+                                        fontSize: "0.875rem",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "0.25rem",
+                                        flexShrink: 0,
+                                    }, children: [option.icon && (_jsx("span", { style: { flexShrink: 0 }, children: option.icon })), _jsx("span", { style: {
+                                                whiteSpace: "nowrap",
+                                                overflow: "hidden",
+                                                textOverflow: "ellipsis",
+                                            }, children: option.label })] }, option.value)))) : (_jsx("span", { style: { color: placeholderColor }, children: placeholder })) })) : (_jsxs("span", { style: {
+                                    color: selectedOption ? textColor : placeholderColor,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: optionGap,
+                                }, children: [selectedOption?.icon && (_jsx("span", { style: { flexShrink: 0 }, children: selectedOption.icon })), selectedOption ? selectedOption.label : placeholder] }))] }), _jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.5rem",
+                            marginLeft: "0.5rem",
+                            flexShrink: 0,
+                        }, children: [clearable && selectedValues.length > 0 && (_jsx("span", { onClick: handleClear, style: {
+                                    cursor: disabled ? "not-allowed" : "pointer",
+                                    fontSize: "1rem",
+                                    color: textColor,
+                                    opacity: 0.7,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }, "aria-label": "Clear selection", children: clearIcon })), _jsx("span", { style: {
+                                    transition: `transform ${transitionDuration}`,
+                                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                                    fontSize: "0.75rem",
+                                    color: textColor,
+                                    opacity: 0.7,
+                                }, children: dropdownIcon })] })] }), isOpen && (_jsxs("div", { className: `dropdown-menu ${dropdownClassName}`, style: {
+                    position: "absolute",
+                    top: "100%",
+                    left: 0,
+                    zIndex: 1000,
+                    width: "100%",
+                    minWidth: dropdownMinWidth,
+                    maxHeight: dropdownMaxHeight,
+                    overflowY: "auto",
+                    backgroundColor,
+                    border: `1px solid ${borderColor}`,
+                    borderRadius,
+                    boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`,
+                    marginTop: "0.25rem",
+                    transition: `opacity ${transitionDuration}, transform ${transitionDuration}`,
+                    opacity: 0,
+                    transform: "translateY(-0.5rem)",
+                    animation: `dropdownFadeIn ${transitionDuration} ease-out forwards`,
+                    ...dropdownStyle,
+                }, role: "listbox", "aria-multiselectable": multiSelect, children: [searchable && (_jsx("div", { style: {
+                            padding: "0.5rem",
+                            borderBottom: `1px solid ${borderColor}`,
+                        }, children: _jsx("input", { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search...", style: {
+                                width: "100%",
+                                padding: "0.5rem 0.75rem",
+                                borderWidth: "1px",
+                                borderStyle: "solid",
+                                color: textColor,
+                                borderColor: isOpen ? focusBorderColor : borderColor,
+                                borderRadius: "0.25rem",
+                                outline: "none",
+                                transition: `border-color ${transitionDuration}`,
+                                ...(isOpen && {
+                                    boxShadow: `0 0 0 1px ${focusBorderColor}`,
+                                }),
+                            }, onFocus: onFocus, onBlur: onBlur }) })), _jsx("ul", { style: { margin: 0, padding: "0.25rem 0", listStyle: "none" }, children: filteredOptions.length > 0 ? (visibleOptionsList.map((option, index) => {
+                            const isSelected = selectedValues.includes(option.value);
+                            const isFocused = focusedIndex === (virtualized ? startIndex + index : index);
+                            const isDisabled = option.disabled;
+                            return (_jsxs("li", { ref: (el) => {
+                                    if (el) {
+                                        const refIndex = virtualized
+                                            ? startIndex + index
+                                            : index;
+                                        optionsRef.current[refIndex] = el;
+                                    }
+                                }, onClick: () => !isDisabled && handleSelect(option.value), onMouseEnter: () => !isDisabled &&
+                                    setFocusedIndex(virtualized ? startIndex + index : index), className: `dropdown-option ${optionClassName} ${isDisabled ? "disabled" : ""}`, style: {
+                                    padding: optionPadding,
+                                    cursor: isDisabled ? "not-allowed" : "pointer",
+                                    backgroundColor: isSelected
+                                        ? selectedColor
+                                        : isFocused
+                                            ? hoverColor
+                                            : backgroundColor,
+                                    color: isDisabled ? disabledColor : textColor,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: optionGap,
+                                    transition: `background-color ${transitionDuration}`,
+                                    ...optionStyle,
+                                }, role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: [multiSelect && (_jsx("span", { style: { flexShrink: 0 }, children: isSelected ? checkIcon : "○" })), option.icon && (_jsx("span", { style: { flexShrink: 0 }, children: option.icon })), _jsx("span", { style: { flex: 1 }, children: option.label })] }, option.value));
+                        })) : (_jsx("li", { style: {
+                                padding: optionPadding,
+                                color: placeholderColor,
+                                textAlign: "center",
+                            }, children: "No options found" })) }), virtualized && filteredOptions.length > visibleOptionCount && (_jsx("div", { style: {
+                            height: `${(filteredOptions.length - visibleOptionCount) * optionHeight}px`,
+                        } }))] })), _jsx("style", { children: `
+          @keyframes dropdownFadeIn {
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+        ` })] }));
+};

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+const getScreenSize = (width) => {
+    if (width < 768)
+        return "sm";
+    if (width < 1024)
+        return "md";
+    return "lg";
+};
+const resolveResponsive = (prop, screen, fallback) => {
+    if (prop == null)
+        return fallback;
+    if (typeof prop !== "object")
+        return prop;
+    return prop[screen] ?? fallback;
+};
+export const Flexbox = ({ direction = { sm: "column", md: "row", lg: "row" }, align = "center", justify = "space-between", wrap = "wrap", gap = 16, padding, margin, backgroundColor = "transparent", width = "100%", maxWidth = "100%", height = "auto", borderRadius, border, boxShadow, overflow, children, style, className, }) => {
+    const [screen, setScreen] = useState("lg");
+    useEffect(() => {
+        const updateScreen = () => setScreen(getScreenSize(window.innerWidth));
+        updateScreen();
+        window.addEventListener("resize", updateScreen);
+        return () => window.removeEventListener("resize", updateScreen);
+    }, []);
+    const computedStyle = useMemo(() => {
+        const toCssValue = (val) => typeof val === "number" ? `${val}px` : val;
+        return {
+            display: "flex",
+            flexDirection: resolveResponsive(direction, screen, "row"),
+            alignItems: resolveResponsive(align, screen, "center"),
+            justifyContent: resolveResponsive(justify, screen, "flex-start"),
+            flexWrap: resolveResponsive(wrap, screen, "wrap"),
+            gap: toCssValue(resolveResponsive(gap, screen, undefined)),
+            padding: toCssValue(resolveResponsive(padding, screen, undefined)),
+            margin: toCssValue(resolveResponsive(margin, screen, undefined)),
+            backgroundColor: resolveResponsive(backgroundColor, screen, undefined),
+            width: resolveResponsive(width, screen, "100%"),
+            maxWidth: resolveResponsive(maxWidth, screen, undefined),
+            height: resolveResponsive(height, screen, undefined),
+            borderRadius: resolveResponsive(borderRadius, screen, undefined),
+            border: resolveResponsive(border, screen, undefined),
+            boxShadow: resolveResponsive(boxShadow, screen, undefined),
+            overflow: resolveResponsive(overflow, screen, undefined),
+            boxSizing: "border-box",
+            ...style,
+        };
+    }, [
+        direction,
+        align,
+        justify,
+        wrap,
+        gap,
+        padding,
+        margin,
+        backgroundColor,
+        width,
+        maxWidth,
+        height,
+        borderRadius,
+        border,
+        boxShadow,
+        overflow,
+        screen,
+        style,
+    ]);
+    return (_jsx("div", { className: className, style: computedStyle, children: children }));
+};

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

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

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

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