@neuctra/ui 0.2.1 → 0.2.3

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, RotateCcw, SkipBack, SkipForward, } from "lucide-react";
+export const AudioPlayer = ({ src, thumbnail, autoPlay = false, loop = false, backgroundColor = "#000000", primaryColor = "#10b981", secondaryColor = "#ffffff", borderRadius = "12px", padding = "16px", width = "100%", className, }) => {
+    const audioRef = useRef(null);
+    const playerRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(0.5);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isLooping, setIsLooping] = useState(loop);
+    useEffect(() => {
+        if (audioRef.current)
+            audioRef.current.volume = volume;
+    }, [volume]);
+    useEffect(() => {
+        if (audioRef.current)
+            audioRef.current.loop = isLooping;
+    }, [isLooping]);
+    const togglePlayPause = () => {
+        if (!audioRef.current)
+            return;
+        isPlaying ? audioRef.current.pause() : audioRef.current.play();
+        setIsPlaying(!isPlaying);
+    };
+    const handleTimeUpdate = () => {
+        if (!audioRef.current)
+            return;
+        setCurrentTime(audioRef.current.currentTime);
+        setDuration(audioRef.current.duration);
+    };
+    const handleSeek = (e) => {
+        if (!audioRef.current || !e.currentTarget)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        const time = percent * duration;
+        audioRef.current.currentTime = time;
+        setCurrentTime(time);
+    };
+    const skip = (seconds) => {
+        if (audioRef.current)
+            audioRef.current.currentTime += seconds;
+    };
+    const toggleFullscreen = () => {
+        if (!playerRef.current)
+            return;
+        isFullscreen
+            ? document.exitFullscreen?.()
+            : playerRef.current.requestFullscreen?.();
+        setIsFullscreen(!isFullscreen);
+    };
+    const formatTime = (time) => {
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+    };
+    return (_jsxs("div", { ref: playerRef, className: className, style: {
+            position: "relative",
+            width,
+            backgroundColor,
+            borderRadius,
+            color: secondaryColor,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+            overflow: "hidden",
+            padding,
+            boxSizing: "border-box",
+            maxWidth: "100%",
+        }, children: [_jsx("audio", { ref: audioRef, src: src, autoPlay: autoPlay, loop: loop, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleTimeUpdate }), thumbnail && (_jsx("img", { src: thumbnail, alt: "Audio Thumbnail", style: {
+                    width: "100%",
+                    objectFit: "cover",
+                    borderRadius,
+                    marginBottom: "16px",
+                    maxHeight: "150px",
+                } })), _jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "10px",
+                    flexShrink: 0,
+                    marginTop: "10px",
+                }, children: [_jsx("button", { onClick: () => skip(-10), "aria-label": "Skip Back 10s", children: _jsx(SkipBack, { size: 20 }) }), _jsx("button", { onClick: togglePlayPause, style: {
+                            background: primaryColor,
+                            borderRadius: "9999px",
+                            padding: "10px",
+                            color: "#fff",
+                            border: "none",
+                            cursor: "pointer",
+                        }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }) }), _jsx("button", { onClick: () => skip(10), "aria-label": "Skip Forward 10s", children: _jsx(SkipForward, { size: 20 }) })] }), _jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "12px",
+                    width: "100%",
+                }, children: [_jsxs("div", { style: { flexShrink: 0, minWidth: "60px", textAlign: "center" }, children: [_jsx("span", { style: { fontSize: "14px", marginRight: "4px" }, children: formatTime(currentTime) }), _jsxs("span", { style: { fontSize: "14px", color: "#aaa" }, children: ["/ ", formatTime(duration)] })] }), _jsx("div", { onClick: handleSeek, style: {
+                            flex: 1,
+                            height: "8px",
+                            background: "#444",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                            position: "relative",
+                            minWidth: "100px",
+                        }, children: _jsx("div", { style: {
+                                width: `${(currentTime / duration) * 100 || 0}%`,
+                                height: "100%",
+                                background: primaryColor,
+                                borderRadius: "4px",
+                            } }) }), _jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            flexShrink: 0,
+                        }, children: [_jsx("button", { onClick: () => setIsLooping(!isLooping), "aria-label": "Toggle Loop", children: _jsx(RotateCcw, { size: 18, color: isLooping ? primaryColor : undefined }) }), _jsx("button", { onClick: () => setVolume(volume > 0 ? 0 : 0.5), "aria-label": "Toggle Mute", children: volume > 0 ? _jsx(Volume2, { size: 18 }) : _jsx(VolumeX, { size: 18 }) }), _jsx("button", { onClick: toggleFullscreen, "aria-label": "Toggle Fullscreen", children: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }) })] })] })] }));
+};

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,45 @@
+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 based on variant
+    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],
+        ...style,
+    };
+    return (_jsx(Component, { ref: ref, className: `ui-card ${className}`, style: cardStyle, onClick: onClick, onMouseEnter: (e) => {
+            Object.assign(e.currentTarget.style, hoverShadow ? { boxShadow: hoverShadow } : hoverStyle);
+        }, onMouseLeave: (e) => {
+            Object.assign(e.currentTarget.style, {
+                ...baseVariantStyles[variant],
+                ...style,
+            });
+        }, ...rest, children: children }));
+};
+const ForwardedCard = forwardRef(CardInner);
+const Card = Object.assign(ForwardedCard, { displayName: "Card" });
+export { Card };

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckRadio = ({ type = "checkbox", name, options, selectedValues, onChange, disabled = false, readOnly = false, required = false, error, className = "", customIcon, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", // blue-600
+iconUncheckedBorderColor = "#9ca3af", // gray-400
+switchBgColor = "#d1d5db", // gray-300
+textColor = "#374151", // gray-700
+errorStyle, }) => {
+    const isCheckbox = type === "checkbox";
+    const isRadio = type === "radio";
+    const isSwitch = type === "switch";
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        if (isCheckbox) {
+            const updatedValues = Array.isArray(selectedValues)
+                ? selectedValues.includes(value)
+                    ? selectedValues.filter((v) => v !== value)
+                    : [...selectedValues, value]
+                : [value];
+            onChange(updatedValues);
+        }
+        else {
+            onChange(value);
+        }
+    };
+    return (_jsxs("div", { className: className, style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+            ...style,
+        }, role: type, "aria-disabled": disabled, children: [options.map((option) => {
+                const isChecked = isCheckbox
+                    ? Array.isArray(selectedValues) && selectedValues.includes(option.value)
+                    : selectedValues === 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: isSwitch ? "checkbox" : type, name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => handleChange(option.value), style: { display: "none" } }), isSwitch ? (_jsx("span", { style: {
+                                position: "relative",
+                                width: iconSize * 2,
+                                height: iconSize * 1.1,
+                                borderRadius: 9999,
+                                backgroundColor: isChecked ? iconCheckedBgColor : switchBgColor,
+                                transition: "background 0.2s ease",
+                                flexShrink: 0,
+                            }, children: _jsx("span", { style: {
+                                    position: "absolute",
+                                    top: 2,
+                                    left: isChecked ? iconSize : 2,
+                                    width: iconSize - 4,
+                                    height: iconSize - 4,
+                                    borderRadius: "50%",
+                                    backgroundColor: "#fff",
+                                    transition: "left 0.2s ease",
+                                } }) })) : customIcon ? (customIcon(isChecked)) : (_jsxs("span", { style: {
+                                display: "inline-flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                width: iconSize,
+                                height: iconSize,
+                                borderRadius: isCheckbox ? 4 : "50%",
+                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
+                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
+                                transition: "all 0.2s ease",
+                                flexShrink: 0,
+                            }, children: [isChecked && isRadio && (_jsx("span", { style: {
+                                        width: iconSize / 2,
+                                        height: iconSize / 2,
+                                        borderRadius: "50%",
+                                        backgroundColor: "white",
+                                    } })), isChecked && isCheckbox && (_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;