@neuctra/ui 0.2.2 → 0.2.4

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

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { User } from "lucide-react";
+// --- Base maps ---
+const sizeMap = {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 56,
+    "2xl": 64,
+};
+const fontSizeMap = {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 16,
+    xl: 18,
+    "2xl": 20,
+};
+const statusSizeMap = {
+    xs: 6,
+    sm: 8,
+    md: 10,
+    lg: 12,
+    xl: 14,
+    "2xl": 16,
+};
+// --- Helpers ---
+const getVariantStyles = (variant) => {
+    switch (variant) {
+        case "square":
+            return "0px";
+        case "rounded":
+            return "8px";
+        default:
+            return "50%";
+    }
+};
+const getStatusPositionStyle = (position, offset) => {
+    switch (position) {
+        case "top-left":
+            return { top: 2, left: 2 };
+        case "top-right":
+            return { top: 2, right: 2 };
+        case "bottom-left":
+            return { bottom: 2, left: 2 };
+        default:
+            return { bottom: 2, right: 2 };
+    }
+};
+const getSpacingOffset = (spacing, dim) => {
+    switch (spacing) {
+        case "tight":
+            return -(dim * 0.5);
+        case "loose":
+            return -(dim * 0.15);
+        default:
+            return -(dim * 0.35);
+    }
+};
+// --- Avatar Component ---
+export const Avatar = ({ src, alt = "User avatar", size = "md", variant = "circular", isOnline = false, isOffline = false, className = "", style, statusClassName = "", statusStyle, statusPosition = "bottom-right", fallback, ring = false, ringColor = "#3b82f6", onClick, }) => {
+    const [imageError, setImageError] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const isResponsive = size === "responsive";
+    const dimension = !isResponsive ? sizeMap[size] : undefined;
+    const fontSize = !isResponsive ? fontSizeMap[size] : "clamp(10px, 2vw, 16px)";
+    const statusSize = !isResponsive ? statusSizeMap[size] : 10;
+    const borderRadius = getVariantStyles(variant);
+    const initials = fallback || alt
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    const statusColor = isOnline ? "#10b981" : isOffline ? "#6b7280" : "";
+    const statusLabel = isOnline ? "Online" : isOffline ? "Offline" : "";
+    const showImage = src && !imageError;
+    const clickable = !!onClick;
+    return (_jsxs("div", { className: className, role: clickable ? "button" : "img", tabIndex: clickable ? 0 : -1, "aria-label": alt, onClick: onClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onKeyDown: (e) => {
+            if (clickable && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                onClick?.();
+            }
+        }, style: {
+            position: "relative",
+            width: isResponsive ? "100%" : dimension,
+            height: isResponsive ? "100%" : dimension,
+            borderRadius,
+            overflow: "visible",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            cursor: clickable ? "pointer" : "default",
+            transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+            transform: isHovered && clickable ? "scale(1.05)" : "scale(1)",
+            boxShadow: ring
+                ? `0 0 0 3px ${ringColor}22, 0 0 0 1px ${ringColor}`
+                : isHovered && clickable
+                    ? "0 6px 16px rgba(0, 0, 0, 0.15)"
+                    : "0 1px 3px rgba(0, 0, 0, 0.1)",
+            ...style,
+        }, children: [showImage ? (_jsx("img", { src: src, alt: alt, onError: () => setImageError(true), loading: "lazy", style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius,
+                    transition: "opacity 0.3s ease-in-out",
+                } })) : (_jsx("div", { style: {
+                    width: "100%",
+                    height: "100%",
+                    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                    color: "#fff",
+                    fontSize,
+                    fontWeight: 600,
+                    borderRadius,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: initials || _jsx(User, { size: dimension ? dimension * 0.5 : 20 }) })), (isOnline || isOffline) && (_jsx("div", { className: statusClassName, "aria-label": statusLabel, title: statusLabel, style: {
+                    position: "absolute",
+                    width: statusSize,
+                    height: statusSize,
+                    borderRadius: "50%",
+                    backgroundColor: statusColor,
+                    border: "2px solid white",
+                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
+                    ...getStatusPositionStyle(statusPosition, statusSize),
+                    ...statusStyle,
+                } }))] }));
+};
+// --- AvatarGroup Component ---
+export const AvatarGroup = ({ avatars, max = 4, size = "md", className = "", style, spacing = "normal", direction = "left", }) => {
+    const isResponsive = size === "responsive";
+    const dimension = !isResponsive ? sizeMap[size] : 40;
+    const fontSize = !isResponsive ? fontSizeMap[size] : "clamp(10px, 2vw, 14px)";
+    const spacingOffset = getSpacingOffset(spacing, dimension);
+    const visibleAvatars = avatars.slice(0, max);
+    const extraCount = avatars.length - max;
+    return (_jsxs("div", { className: className, style: {
+            display: "flex",
+            alignItems: "center",
+            flexDirection: direction === "right" ? "row-reverse" : "row",
+            flexWrap: "wrap",
+            ...style,
+        }, role: "group", "aria-label": `Avatar group with ${avatars.length} members`, children: [visibleAvatars.map((avatar, i) => {
+                const isFirst = direction === "left" ? i === 0 : i === visibleAvatars.length - 1;
+                const zIndex = direction === "left" ? visibleAvatars.length - i : i + 1;
+                return (_jsx("div", { style: {
+                        marginLeft: direction === "left" && !isFirst ? spacingOffset : 0,
+                        marginRight: direction === "right" && !isFirst ? spacingOffset : 0,
+                        zIndex,
+                        position: "relative",
+                        transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.transform = `translateY(-3px) scale(1.05)`;
+                        e.currentTarget.style.zIndex = "100";
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.transform = "translateY(0) scale(1)";
+                        e.currentTarget.style.zIndex = zIndex.toString();
+                    }, children: _jsx(Avatar, { ...avatar, size: size }) }, i));
+            }), extraCount > 0 && (_jsxs("div", { style: {
+                    marginLeft: direction === "left" ? spacingOffset : 0,
+                    marginRight: direction === "right" ? spacingOffset : 0,
+                    width: dimension,
+                    height: dimension,
+                    borderRadius: "50%",
+                    background: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)",
+                    color: "#374151",
+                    fontSize,
+                    fontWeight: 600,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    border: "3px solid white",
+                    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+                    userSelect: "none",
+                }, title: `${extraCount} more members`, children: ["+", extraCount] }))] }));
+};

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+export const Badge = memo(({ text, color = "#2563eb", textColor = "#fff", borderColor = "#2563eb", borderWidth = "0", icon, iconPosition = "left", rounded = false, borderRadius, fontSize = "13px", fontWeight = 500, horizontalPadding = "10px", verticalPadding = "4px", margin = "0", shadow = "0 1px 3px rgba(0,0,0,0.1)", notificationDot = false, dotColor = "#ef4444", count, pulse = false, style, className = "", onClick, }) => {
+    const baseStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: color,
+        color: textColor,
+        border: `${borderWidth} solid ${borderColor}`,
+        borderRadius: borderRadius || (rounded ? "9999px" : "6px"),
+        padding: `${verticalPadding} ${horizontalPadding}`,
+        fontSize,
+        fontWeight,
+        margin,
+        boxShadow: shadow,
+        position: "relative",
+        cursor: onClick ? "pointer" : "default",
+        userSelect: "none",
+        lineHeight: 1,
+        transition: "all 0.2s ease",
+        ...style,
+    };
+    const dotStyle = {
+        position: "absolute",
+        top: "-4px",
+        right: "-4px",
+        height: "8px",
+        width: "8px",
+        backgroundColor: dotColor,
+        borderRadius: "50%",
+        animation: pulse ? "pulseAnim 1.2s infinite" : undefined,
+    };
+    const countStyle = {
+        position: "absolute",
+        top: "-8px",
+        right: "-8px",
+        backgroundColor: dotColor,
+        color: "#fff",
+        borderRadius: "50%",
+        minWidth: "18px",
+        height: "18px",
+        fontSize: "11px",
+        padding: "0 5px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 1,
+    };
+    const iconStyle = {
+        display: "flex",
+        alignItems: "center",
+        margin: icon && text
+            ? iconPosition === "left"
+                ? "0 6px 0 0"
+                : "0 0 0 6px"
+            : 0,
+    };
+    return (_jsxs("span", { style: baseStyle, className: className, onClick: onClick, children: [notificationDot && _jsx("span", { style: dotStyle }), typeof count !== "undefined" && _jsx("span", { style: countStyle, children: count }), icon && iconPosition === "left" && _jsx("span", { style: iconStyle, children: icon }), text && _jsx("span", { children: text }), icon && iconPosition === "right" && _jsx("span", { style: iconStyle, children: icon }), _jsx("style", { children: `
+            @keyframes pulseAnim {
+              0% { transform: scale(1); opacity: 1; }
+              50% { transform: scale(1.5); opacity: 0.5; }
+              100% { transform: scale(1); opacity: 1; }
+            }
+          ` })] }));
+});

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+/** 🌈 Default color palette */
+const defaultColors = {
+    light: {
+        default: "#111",
+        primary: "#2563eb",
+        success: "#16a34a",
+        danger: "#dc2626",
+        white: "#ffffff",
+        muted: "#6b7280",
+        border: "#d1d5db",
+        hover: "#1d4ed8",
+        text: "#ffffff",
+    },
+    dark: {
+        default: "#f8fafc",
+        primary: "#60a5fa",
+        success: "#22c55e",
+        danger: "#f87171",
+        white: "#ffffff",
+        muted: "#9ca3af",
+        border: "#374151",
+        hover: "#3b82f6",
+        text: "#000000",
+    },
+};
+/** 🎨 Adjust color shade utility */
+function adjustColor(color, amount) {
+    if (!color.startsWith("#") || color.length !== 7)
+        return color;
+    return ("#" +
+        color
+            .replace(/^#/, "")
+            .replace(/../g, (hex) => ("0" +
+            Math.min(255, Math.max(0, parseInt(hex, 16) + amount)).toString(16)).slice(-2)));
+}
+/** 💎 Minimal customizable Button */
+export const Button = ({ children, type = "button", onClick, iconBefore, iconAfter, className = "", style, fullWidth = false, disabled = false, loading = false, loadingText = "Loading...", darkMode = false, baseColor, size = "md", rounded = true, showBorder = false, // ✅ default: no border
+ }) => {
+    const [hovered, setHovered] = useState(false);
+    /** 🧠 Theme system */
+    const theme = useMemo(() => {
+        if (!baseColor)
+            return defaultColors[darkMode ? "dark" : "light"];
+        const light = {
+            primary: baseColor,
+            hover: adjustColor(baseColor, -40),
+            text: "#ffffff",
+            border: adjustColor(baseColor, -60),
+        };
+        const dark = {
+            primary: adjustColor(baseColor, 60),
+            hover: adjustColor(baseColor, 80),
+            text: "#000000",
+            border: adjustColor(baseColor, 40),
+        };
+        return darkMode ? dark : light;
+    }, [baseColor, darkMode]);
+    /** 📏 Sizes */
+    const sizes = {
+        sm: { px: 16, py: 6, font: "0.85rem" },
+        md: { px: 24, py: 10, font: "1rem" },
+        lg: { px: 32, py: 14, font: "1.125rem" },
+    };
+    const s = sizes[size];
+    /** 💅 Computed styles */
+    const buttonStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px",
+        padding: `${s.py}px ${s.px}px`,
+        fontSize: s.font,
+        fontWeight: 500,
+        borderRadius: rounded ? 8 : 3,
+        border: showBorder ? `1px solid ${theme.border}` : "none", // ✅ conditional border
+        width: fullWidth ? "100%" : "auto",
+        backgroundColor: hovered && !disabled ? theme.hover : theme.primary,
+        color: theme.text,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        transition: "all 0.25s ease-in-out",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.15)",
+        ...style,
+    };
+    return (_jsxs("button", { type: type, className: className, style: buttonStyle, onClick: !disabled && !loading ? onClick : undefined, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), disabled: disabled, children: [loading ? (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                            width: "16px",
+                            height: "16px",
+                            border: "2px solid currentColor",
+                            borderTopColor: "transparent",
+                            borderRadius: "50%",
+                            animation: "spin 1s linear infinite",
+                        } }), _jsx("span", { children: loadingText })] })) : (_jsxs(_Fragment, { children: [iconBefore && _jsx("span", { children: iconBefore }), _jsx("span", { children: children }), iconAfter && _jsx("span", { children: iconAfter })] })), _jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })] }));
+};
+export default Button;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+const CardInner = ({ as, children, className = "", variant = "elevated", background = "#fff", textColor = "#000", borderRadius = 12, border, boxShadow, hoverShadow, padding = 16, margin, width, height, style = {}, hoverStyle = {}, onClick, ...rest }, ref) => {
+    const Component = as || "div";
+    // Default styling for known variants; unknown variants can be customized
+    const baseVariantStyles = {
+        elevated: {
+            boxShadow: boxShadow || "0 4px 12px rgba(0,0,0,0.08)",
+            border: border || "none",
+        },
+        outline: {
+            border: border || "1px solid rgba(0,0,0,0.1)",
+            boxShadow: "none",
+        },
+        flat: {
+            border: "none",
+            boxShadow: "none",
+        },
+    };
+    const cardStyle = {
+        background,
+        color: textColor,
+        borderRadius,
+        padding,
+        margin,
+        width,
+        height,
+        transition: "all 0.25s ease",
+        cursor: onClick ? "pointer" : undefined,
+        boxSizing: "border-box",
+        ...(baseVariantStyles[variant] || {}), // fallback if variant is custom
+        ...style,
+    };
+    const handleMouseEnter = (e) => {
+        Object.assign(e.currentTarget.style, hoverShadow ? { boxShadow: hoverShadow } : hoverStyle);
+    };
+    const handleMouseLeave = (e) => {
+        Object.assign(e.currentTarget.style, {
+            ...cardStyle,
+            ...(baseVariantStyles[variant] || {}),
+        });
+    };
+    return (_jsx(Component, { ref: ref, className: `ui-card ${className}`, style: cardStyle, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: children }));
+};
+const ForwardedCard = forwardRef(CardInner);
+const Card = Object.assign(ForwardedCard, { displayName: "Card" });
+export { Card };

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckboxGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className = "", customIcon, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", iconUncheckedBorderColor = "#9ca3af", textColor = "#374151", errorStyle, }) => {
+    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" } }), customIcon ? (customIcon(isChecked)) : (_jsx("span", { style: {
+                                display: "inline-flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                width: iconSize,
+                                height: iconSize,
+                                borderRadius: 4,
+                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
+                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
+                                transition: "all 0.25s ease",
+                            }, children: isChecked && (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", style: { width: iconSize * 0.6, height: iconSize * 0.6 }, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) }))] }, option.value));
+            }), error && (_jsx("p", { role: "alert", style: {
+                    color: "#dc2626",
+                    fontSize: 12,
+                    marginTop: 4,
+                    ...errorStyle,
+                }, children: error }))] }));
+};

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+/** Tailwind-like container widths */
+const containerWidths = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+    full: "100%",
+};
+/**
+ * 🧱 Container Component
+ * A flexible, responsive layout wrapper inspired by Tailwind's container.
+ */
+export const Container = ({ size = "lg", padding = 0, margin = "0 auto", backgroundColor = "transparent", center = true, width, height = "auto", borderRadius = 0, style, className = "", children, }) => {
+    const styles = useMemo(() => {
+        const computedPadding = typeof padding === "number" ? `${padding}px` : padding;
+        const computedMargin = center && margin === "0 auto" ? "0 auto" : margin;
+        const computedBorderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+        return {
+            maxWidth: width ?? containerWidths[size],
+            margin: computedMargin,
+            padding: computedPadding,
+            backgroundColor,
+            height,
+            borderRadius: computedBorderRadius,
+            boxSizing: "border-box",
+            width: width ?? "100%",
+            ...style,
+        };
+    }, [
+        size,
+        padding,
+        margin,
+        backgroundColor,
+        width,
+        height,
+        borderRadius,
+        center,
+        style,
+    ]);
+    return (_jsx("div", { className: className, style: styles, children: children }));
+};
+export default Container;

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