uiplex 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1097 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const Button = ({ children, variant = "primary", size = "md", colorScheme = "", disabled = false, loading = false, leftIcon, rightIcon, onClick, className = "", style, ...props }) => {
+    const buttonClasses = [
+        "ui-button",
+        `ui-button--${variant}`,
+        `ui-button--${size}`,
+        `ui-button--${colorScheme}`,
+        loading && "ui-button--loading",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const isDisabled = disabled || loading;
+    return (jsxRuntime.jsxs("button", { className: buttonClasses, disabled: isDisabled, onClick: onClick, style: style, ...props, children: [loading && (jsxRuntime.jsx("svg", { className: "ui-button__spinner", viewBox: "0 0 24 24", children: jsxRuntime.jsxs("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none", strokeDasharray: "31.416", strokeDashoffset: "31.416", children: [jsxRuntime.jsx("animate", { attributeName: "stroke-dasharray", dur: "2s", values: "0 31.416;15.708 15.708;0 31.416", repeatCount: "indefinite" }), jsxRuntime.jsx("animate", { attributeName: "stroke-dashoffset", dur: "2s", values: "0;-15.708;-31.416", repeatCount: "indefinite" })] }) })), !loading && leftIcon && (jsxRuntime.jsx("span", { className: "ui-button__left-icon", children: leftIcon })), jsxRuntime.jsx("span", { className: "ui-button__content", children: children }), !loading && rightIcon && (jsxRuntime.jsx("span", { className: "ui-button__right-icon", children: rightIcon }))] }));
+};
+
+const Loader = ({ width, height, isCentered = false, className = "", size = "md", variant = "spinner", }) => {
+    const loaderClasses = [
+        "ui-loader",
+        `ui-loader--${size}`,
+        `ui-loader--${variant}`,
+        isCentered && "ui-loader--centered",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const getSize = () => {
+        if (width && height)
+            return { width, height };
+        const sizeMap = {
+            xs: { width: 16, height: 16 },
+            sm: { width: 24, height: 24 },
+            md: { width: 32, height: 32 },
+            lg: { width: 44, height: 44 },
+        };
+        return sizeMap[size];
+    };
+    const { width: finalWidth, height: finalHeight } = getSize();
+    const renderLoader = () => {
+        switch (variant) {
+            case "dots":
+                return (jsxRuntime.jsxs("div", { className: "ui-loader__dots", children: [jsxRuntime.jsx("div", { className: "ui-loader__dot" }), jsxRuntime.jsx("div", { className: "ui-loader__dot" }), jsxRuntime.jsx("div", { className: "ui-loader__dot" })] }));
+            case "pulse":
+                return (jsxRuntime.jsx("div", { className: "ui-loader__pulse", style: { width: finalWidth, height: finalHeight } }));
+            case "spinner":
+            default:
+                return (jsxRuntime.jsx("svg", { className: "ui-loader__spinner", width: finalWidth, height: finalHeight, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("circle", { cx: "12", cy: "12", r: "10", stroke: "#fbbf24", strokeWidth: "3", fill: "none", strokeDasharray: "31.416", strokeDashoffset: "31.416", children: [jsxRuntime.jsx("animate", { attributeName: "stroke-dasharray", dur: "1s", values: "0 31.416;15.708 15.708;0 31.416", repeatCount: "indefinite" }), jsxRuntime.jsx("animate", { attributeName: "stroke-dashoffset", dur: "1s", values: "0;-15.708;-31.416", repeatCount: "indefinite" })] }) }));
+        }
+    };
+    return jsxRuntime.jsx("div", { className: loaderClasses, children: renderLoader() });
+};
+
+const Radio = ({ id, name, value, checked = false, disabled = false, label, description, size = "md", colorScheme = "blue", onChange, className = "", }) => {
+    const radioId = id || `${name}-${value}`;
+    const radioClasses = [
+        "ui-radio",
+        `ui-radio--${size}`,
+        `ui-radio--${colorScheme}`,
+        disabled && "ui-radio--disabled",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const handleChange = (event) => {
+        if (!disabled && onChange) {
+            onChange(event.target.value);
+        }
+    };
+    return (jsxRuntime.jsxs("label", { className: radioClasses, children: [jsxRuntime.jsx("input", { type: "radio", id: radioId, name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange, className: "ui-radio__input" }), jsxRuntime.jsx("span", { className: "ui-radio__checkmark" }), (label || description) && (jsxRuntime.jsxs("div", { className: "ui-radio__content", children: [label && jsxRuntime.jsx("span", { className: "ui-radio__label", children: label }), description && (jsxRuntime.jsx("span", { className: "ui-radio__description", children: description }))] }))] }));
+};
+const RadioGroup = ({ name, value, options, disabled = false, size = "md", colorScheme = "blue", onChange, className = "", orientation = "vertical", }) => {
+    const groupClasses = [
+        "ui-radio-group",
+        `ui-radio-group--${orientation}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { className: groupClasses, children: options.map((option, index) => (jsxRuntime.jsx(Radio, { name: name, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: onChange }, `${name}-${option.value}-${index}`))) }));
+};
+
+const Text = ({ as = "p", size = "md", weight = "regular", color = "primary", align = "left", className = "", children, style, ...props }) => {
+    const Component = as;
+    const classes = [
+        "ui-text",
+        `ui-text--${size}`,
+        `ui-text--${weight}`,
+        `ui-text--${color}`,
+        `ui-text--align-${align}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx(Component, { className: classes, style: style, ...props, children: children }));
+};
+
+const ModalOverlay = ({ onClick, className = "", }) => {
+    return (jsxRuntime.jsx("div", { className: `ui-modal-overlay ${className}`, onClick: onClick, "aria-hidden": "true" }));
+};
+const ModalContent = ({ children, className = "", size = "md", isCentered = true, }) => {
+    const contentClasses = [
+        "ui-modal-content",
+        `ui-modal-content--${size}`,
+        isCentered && "ui-modal-content--centered",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return jsxRuntime.jsx("div", { className: contentClasses, children: children });
+};
+const ModalHeader = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-modal-header ${className}`, children: children });
+};
+const ModalBody = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-modal-body ${className}`, children: children });
+};
+const ModalFooter = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-modal-footer ${className}`, children: children });
+};
+const ModalCloseButton = ({ onClose, className = "", }) => {
+    return (jsxRuntime.jsx("button", { className: `ui-modal-close-button ${className}`, onClick: onClose, "aria-label": "Close modal", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+const Modal = ({ isOpen, onClose, children, size = "md", closeOnOverlayClick = true, closeOnEsc = true, isCentered = true, }) => {
+    const modalRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEsc = (e) => {
+            if (closeOnEsc && e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleEsc);
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.removeEventListener("keydown", handleEsc);
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, closeOnEsc, onClose]);
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "ui-modal", ref: modalRef, children: [jsxRuntime.jsx(ModalOverlay, { onClick: handleOverlayClick }), jsxRuntime.jsx(ModalContent, { size: size, isCentered: isCentered, children: children })] }));
+};
+
+const normalizeValue$2 = (value) => {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "number")
+        return `${value}px`;
+    return value;
+};
+const Box = ({ children, as = "div", className = "", position, top, right, bottom, left, zIndex, display, width, height, minWidth, maxWidth, minHeight, maxHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, color, backgroundColor, bg, opacity, border, borderWidth, borderStyle, borderColor, borderRadius, boxShadow, shadow, fontSize, fontWeight, lineHeight, textAlign, textDecoration, style, ...props }) => {
+    const Component = as;
+    const boxClasses = ["ui-box", className].filter(Boolean).join(" ");
+    const computedStyle = {
+        ...(position && { position }),
+        ...(top !== undefined && { top: normalizeValue$2(top) }),
+        ...(right !== undefined && { right: normalizeValue$2(right) }),
+        ...(bottom !== undefined && { bottom: normalizeValue$2(bottom) }),
+        ...(left !== undefined && { left: normalizeValue$2(left) }),
+        ...(zIndex !== undefined && { zIndex }),
+        ...(display && { display }),
+        ...(width !== undefined && { width: normalizeValue$2(width) }),
+        ...(height !== undefined && { height: normalizeValue$2(height) }),
+        ...(minWidth !== undefined && { minWidth: normalizeValue$2(minWidth) }),
+        ...(maxWidth !== undefined && { maxWidth: normalizeValue$2(maxWidth) }),
+        ...(minHeight !== undefined && { minHeight: normalizeValue$2(minHeight) }),
+        ...(maxHeight !== undefined && { maxHeight: normalizeValue$2(maxHeight) }),
+        ...(padding !== undefined && { padding: normalizeValue$2(padding) }),
+        ...(paddingTop !== undefined && { paddingTop: normalizeValue$2(paddingTop) }),
+        ...(paddingRight !== undefined && { paddingRight: normalizeValue$2(paddingRight) }),
+        ...(paddingBottom !== undefined && { paddingBottom: normalizeValue$2(paddingBottom) }),
+        ...(paddingLeft !== undefined && { paddingLeft: normalizeValue$2(paddingLeft) }),
+        ...(margin !== undefined && { margin: normalizeValue$2(margin) }),
+        ...(marginTop !== undefined && { marginTop: normalizeValue$2(marginTop) }),
+        ...(marginRight !== undefined && { marginRight: normalizeValue$2(marginRight) }),
+        ...(marginBottom !== undefined && { marginBottom: normalizeValue$2(marginBottom) }),
+        ...(marginLeft !== undefined && { marginLeft: normalizeValue$2(marginLeft) }),
+        ...(overflow && { overflow }),
+        ...(overflowX && { overflowX }),
+        ...(overflowY && { overflowY }),
+        ...(color && { color }),
+        ...(backgroundColor && { backgroundColor }),
+        ...(bg && { backgroundColor: bg }),
+        ...(opacity !== undefined && { opacity }),
+        ...(border && { border }),
+        ...(borderWidth !== undefined && { borderWidth: normalizeValue$2(borderWidth) }),
+        ...(borderStyle && { borderStyle }),
+        ...(borderColor && { borderColor }),
+        ...(borderRadius !== undefined && { borderRadius: normalizeValue$2(borderRadius) }),
+        ...(boxShadow && { boxShadow }),
+        ...(shadow && { boxShadow: shadow }),
+        ...(fontSize !== undefined && { fontSize: normalizeValue$2(fontSize) }),
+        ...(fontWeight !== undefined && { fontWeight }),
+        ...(lineHeight !== undefined && { lineHeight: normalizeValue$2(lineHeight) }),
+        ...(textAlign && { textAlign }),
+        ...(textDecoration && { textDecoration }),
+        ...style,
+    };
+    return (jsxRuntime.jsx(Component, { className: boxClasses, style: computedStyle, ...props, children: children }));
+};
+
+const normalizeValue$1 = (value) => {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "number")
+        return `${value}px`;
+    return value;
+};
+const mapAlignToFlex = (align) => {
+    if (!align)
+        return undefined;
+    const map = {
+        start: "flex-start",
+        end: "flex-end",
+        center: "center",
+        stretch: "stretch",
+        baseline: "baseline",
+    };
+    return map[align];
+};
+const mapJustifyToFlex = (justify) => {
+    if (!justify)
+        return undefined;
+    const map = {
+        start: "flex-start",
+        end: "flex-end",
+        center: "center",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly",
+    };
+    return map[justify];
+};
+const Flex = ({ children, direction = "row", align, alignItems, justify, justifyContent, wrap = "nowrap", gap, className = "", position, top, right, bottom, left, zIndex, width, height, minWidth, maxWidth, minHeight, maxHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, color, backgroundColor, bg, opacity, border, borderWidth, borderStyle, borderColor, borderRadius, boxShadow, shadow, fontSize, fontWeight, lineHeight, textAlign, textDecoration, style, ...props }) => {
+    const flexClasses = [
+        "ui-flex",
+        `ui-flex--${direction}`,
+        align && `ui-flex--align-${align}`,
+        justify && `ui-flex--justify-${justify}`,
+        `ui-flex--wrap-${wrap}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const flexStyle = {
+        ...(position && { position }),
+        ...(top !== undefined && { top: normalizeValue$1(top) }),
+        ...(right !== undefined && { right: normalizeValue$1(right) }),
+        ...(bottom !== undefined && { bottom: normalizeValue$1(bottom) }),
+        ...(left !== undefined && { left: normalizeValue$1(left) }),
+        ...(zIndex !== undefined && { zIndex }),
+        ...(width !== undefined && { width: normalizeValue$1(width) }),
+        ...(height !== undefined && { height: normalizeValue$1(height) }),
+        ...(minWidth !== undefined && { minWidth: normalizeValue$1(minWidth) }),
+        ...(maxWidth !== undefined && { maxWidth: normalizeValue$1(maxWidth) }),
+        ...(minHeight !== undefined && { minHeight: normalizeValue$1(minHeight) }),
+        ...(maxHeight !== undefined && { maxHeight: normalizeValue$1(maxHeight) }),
+        ...(padding !== undefined && { padding: normalizeValue$1(padding) }),
+        ...(paddingTop !== undefined && { paddingTop: normalizeValue$1(paddingTop) }),
+        ...(paddingRight !== undefined && {
+            paddingRight: normalizeValue$1(paddingRight),
+        }),
+        ...(paddingBottom !== undefined && {
+            paddingBottom: normalizeValue$1(paddingBottom),
+        }),
+        ...(paddingLeft !== undefined && {
+            paddingLeft: normalizeValue$1(paddingLeft),
+        }),
+        ...(margin !== undefined && { margin: normalizeValue$1(margin) }),
+        ...(marginTop !== undefined && { marginTop: normalizeValue$1(marginTop) }),
+        ...(marginRight !== undefined && {
+            marginRight: normalizeValue$1(marginRight),
+        }),
+        ...(marginBottom !== undefined && {
+            marginBottom: normalizeValue$1(marginBottom),
+        }),
+        ...(marginLeft !== undefined && { marginLeft: normalizeValue$1(marginLeft) }),
+        ...(overflow && { overflow }),
+        ...(overflowX && { overflowX }),
+        ...(overflowY && { overflowY }),
+        ...(color && { color }),
+        ...(backgroundColor && { backgroundColor }),
+        ...(bg && { backgroundColor: bg }),
+        ...(opacity !== undefined && { opacity }),
+        ...(border && { border }),
+        ...(borderWidth !== undefined && {
+            borderWidth: normalizeValue$1(borderWidth),
+        }),
+        ...(borderStyle && { borderStyle }),
+        ...(borderColor && { borderColor }),
+        ...(borderRadius !== undefined && {
+            borderRadius: normalizeValue$1(borderRadius),
+        }),
+        ...(boxShadow && { boxShadow }),
+        ...(shadow && { boxShadow: shadow }),
+        ...(fontSize !== undefined && { fontSize: normalizeValue$1(fontSize) }),
+        ...(fontWeight !== undefined && { fontWeight }),
+        ...(lineHeight !== undefined && { lineHeight: normalizeValue$1(lineHeight) }),
+        ...(textAlign && { textAlign }),
+        ...(textDecoration && { textDecoration }),
+        // Flexbox specific
+        ...(alignItems && { alignItems }),
+        ...(align && !alignItems && { alignItems: mapAlignToFlex(align) }),
+        ...(justifyContent && { justifyContent }),
+        ...(justify &&
+            !justifyContent && { justifyContent: mapJustifyToFlex(justify) }),
+        ...(gap !== undefined && {
+            gap: typeof gap === "number" ? `${gap}px` : gap,
+        }),
+        ...style,
+    };
+    return (jsxRuntime.jsx("div", { className: flexClasses, style: flexStyle, ...props, children: children }));
+};
+
+const FormControlContext = React.createContext({});
+const useFormControlContext = () => React.useContext(FormControlContext);
+const FormControl = ({ children, isInvalid = false, isRequired = false, isDisabled = false, id, className = "", }) => {
+    const contextValue = {
+        isInvalid,
+        isRequired,
+        isDisabled,
+        id,
+    };
+    return (jsxRuntime.jsx(FormControlContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { className: `ui-form-control ${className}`, children: children }) }));
+};
+
+const FormLabel = ({ children, htmlFor, className = "", style, }) => {
+    const { isRequired, id } = useFormControlContext();
+    const labelId = id ? `${id}-label` : undefined;
+    const labelFor = htmlFor || id;
+    return (jsxRuntime.jsxs("label", { htmlFor: labelFor, id: labelId, className: `ui-form-label ${className}`, style: style, children: [children, isRequired && jsxRuntime.jsx("span", { className: "ui-form-label__required", children: "*" })] }));
+};
+
+const FormErrorMessage = ({ children, className = "", style, }) => {
+    const { isInvalid, id } = useFormControlContext();
+    const errorId = id ? `${id}-error` : undefined;
+    if (!isInvalid)
+        return null;
+    return (jsxRuntime.jsx("div", { id: errorId, className: `ui-form-error-message ${className}`, role: "alert", style: style, children: children }));
+};
+
+const Input = ({ size = "md", variant = "outline", isInvalid, isDisabled, isReadOnly, className = "", style, id, ...props }) => {
+    const formControl = useFormControlContext();
+    const invalid = isInvalid ?? formControl.isInvalid ?? false;
+    const disabled = isDisabled ?? formControl.isDisabled ?? false;
+    const inputId = id || formControl.id;
+    const inputClasses = [
+        "ui-input",
+        `ui-input--${size}`,
+        `ui-input--${variant}`,
+        invalid && "ui-input--invalid",
+        disabled && "ui-input--disabled",
+        isReadOnly && "ui-input--readonly",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("input", { id: inputId, className: inputClasses, disabled: disabled, readOnly: isReadOnly, "aria-invalid": invalid, "aria-describedby": invalid && formControl.id ? `${formControl.id}-error` : undefined, style: style, ...props }));
+};
+
+const Textarea = ({ size = "md", variant = "outline", isInvalid, isDisabled, isReadOnly, resize = "vertical", className = "", style, id, ...props }) => {
+    const formControl = useFormControlContext();
+    const invalid = isInvalid ?? formControl.isInvalid ?? false;
+    const disabled = isDisabled ?? formControl.isDisabled ?? false;
+    const textareaId = id || formControl.id;
+    const textareaClasses = [
+        "ui-textarea",
+        `ui-textarea--${size}`,
+        `ui-textarea--${variant}`,
+        `ui-textarea--resize-${resize}`,
+        invalid && "ui-textarea--invalid",
+        disabled && "ui-textarea--disabled",
+        isReadOnly && "ui-textarea--readonly",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("textarea", { id: textareaId, className: textareaClasses, disabled: disabled, readOnly: isReadOnly, "aria-invalid": invalid, "aria-describedby": invalid && formControl.id ? `${formControl.id}-error` : undefined, style: style, ...props }));
+};
+
+const normalizeValue = (value) => {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "number")
+        return `${value}px`;
+    return value;
+};
+const Grid = ({ children, templateColumns, templateRows, gap, columnGap, rowGap, autoFlow, autoColumns, autoRows, className = "", position, top, right, bottom, left, zIndex, width, height, minWidth, maxWidth, minHeight, maxHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, backgroundColor, bg, borderRadius, style, ...props }) => {
+    const gridClasses = ["ui-grid", className].filter(Boolean).join(" ");
+    const gridStyle = {
+        ...(position && { position }),
+        ...(top !== undefined && { top: normalizeValue(top) }),
+        ...(right !== undefined && { right: normalizeValue(right) }),
+        ...(bottom !== undefined && { bottom: normalizeValue(bottom) }),
+        ...(left !== undefined && { left: normalizeValue(left) }),
+        ...(zIndex !== undefined && { zIndex }),
+        ...(width !== undefined && { width: normalizeValue(width) }),
+        ...(height !== undefined && { height: normalizeValue(height) }),
+        ...(minWidth !== undefined && { minWidth: normalizeValue(minWidth) }),
+        ...(maxWidth !== undefined && { maxWidth: normalizeValue(maxWidth) }),
+        ...(minHeight !== undefined && { minHeight: normalizeValue(minHeight) }),
+        ...(maxHeight !== undefined && { maxHeight: normalizeValue(maxHeight) }),
+        ...(padding !== undefined && { padding: normalizeValue(padding) }),
+        ...(paddingTop !== undefined && { paddingTop: normalizeValue(paddingTop) }),
+        ...(paddingRight !== undefined && {
+            paddingRight: normalizeValue(paddingRight),
+        }),
+        ...(paddingBottom !== undefined && {
+            paddingBottom: normalizeValue(paddingBottom),
+        }),
+        ...(paddingLeft !== undefined && {
+            paddingLeft: normalizeValue(paddingLeft),
+        }),
+        ...(margin !== undefined && { margin: normalizeValue(margin) }),
+        ...(marginTop !== undefined && { marginTop: normalizeValue(marginTop) }),
+        ...(marginRight !== undefined && { marginRight: normalizeValue(marginRight) }),
+        ...(marginBottom !== undefined && {
+            marginBottom: normalizeValue(marginBottom),
+        }),
+        ...(marginLeft !== undefined && { marginLeft: normalizeValue(marginLeft) }),
+        ...(backgroundColor && { backgroundColor }),
+        ...(bg && { backgroundColor: bg }),
+        ...(borderRadius !== undefined && {
+            borderRadius: normalizeValue(borderRadius),
+        }),
+        // Grid specific
+        ...(templateColumns && { gridTemplateColumns: templateColumns }),
+        ...(templateRows && { gridTemplateRows: templateRows }),
+        ...(gap !== undefined && {
+            gap: typeof gap === "number" ? `${gap}px` : gap,
+        }),
+        ...(columnGap !== undefined && {
+            columnGap: typeof columnGap === "number" ? `${columnGap}px` : columnGap,
+        }),
+        ...(rowGap !== undefined && {
+            rowGap: typeof rowGap === "number" ? `${rowGap}px` : rowGap,
+        }),
+        ...(autoFlow && { gridAutoFlow: autoFlow }),
+        ...(autoColumns && { gridAutoColumns: autoColumns }),
+        ...(autoRows && { gridAutoRows: autoRows }),
+        ...style,
+    };
+    return (jsxRuntime.jsx("div", { className: gridClasses, style: gridStyle, ...props, children: children }));
+};
+
+const Link = ({ children, href, isExternal = false, variant = "link", color = "primary", className = "", style, ...props }) => {
+    const linkClasses = [
+        "ui-link",
+        `ui-link--${variant}`,
+        `ui-link--${color}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("a", { href: href, className: linkClasses, target: isExternal ? "_blank" : undefined, rel: isExternal ? "noopener noreferrer" : undefined, style: style, ...props, children: children }));
+};
+
+const IconButton = ({ icon, size = "md", variant = "ghost", colorScheme, isRound = false, isDisabled = false, className = "", style, ...props }) => {
+    const iconButtonClasses = [
+        "ui-icon-button",
+        `ui-icon-button--${size}`,
+        `ui-icon-button--${variant}`,
+        colorScheme && `ui-icon-button--${colorScheme}`,
+        isRound && "ui-icon-button--round",
+        isDisabled && "ui-icon-button--disabled",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("button", { className: iconButtonClasses, disabled: isDisabled, style: style, ...props, children: icon }));
+};
+
+const CircularProgress = ({ value = 0, min = 0, max = 100, size = 48, thickness = 4, color = "var(--accent-primary, #bb00ed)", trackColor = "var(--bg-secondary, #f3f4f6)", isIndeterminate = false, className = "", style, children, }) => {
+    const normalizedSize = typeof size === "number" ? `${size}px` : size;
+    const radius = (parseFloat(normalizedSize) - thickness) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const normalizedValue = Math.min(Math.max((value - min) / (max - min), 0), 1);
+    const strokeDasharray = isIndeterminate ? undefined : circumference;
+    const strokeDashoffset = isIndeterminate
+        ? undefined
+        : circumference * (1 - normalizedValue);
+    return (jsxRuntime.jsxs("div", { className: `ui-circular-progress ${className}`, style: { width: normalizedSize, height: normalizedSize, ...style }, role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : value, children: [jsxRuntime.jsxs("svg", { className: "ui-circular-progress__svg", width: normalizedSize, height: normalizedSize, viewBox: `0 0 ${parseFloat(normalizedSize)} ${parseFloat(normalizedSize)}`, children: [jsxRuntime.jsx("circle", { className: "ui-circular-progress__track", cx: parseFloat(normalizedSize) / 2, cy: parseFloat(normalizedSize) / 2, r: radius, fill: "none", stroke: trackColor, strokeWidth: thickness }), jsxRuntime.jsx("circle", { className: `ui-circular-progress__indicator ${isIndeterminate
+                            ? "ui-circular-progress__indicator--indeterminate"
+                            : ""}`, cx: parseFloat(normalizedSize) / 2, cy: parseFloat(normalizedSize) / 2, r: radius, fill: "none", stroke: color, strokeWidth: thickness, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, strokeLinecap: "round", transform: `rotate(-90 ${parseFloat(normalizedSize) / 2} ${parseFloat(normalizedSize) / 2})` })] }), children && (jsxRuntime.jsx("div", { className: "ui-circular-progress__label", children: children }))] }));
+};
+const CircularProgressLabel = ({ children, className = "", style, }) => {
+    return (jsxRuntime.jsx("div", { className: `ui-circular-progress-label ${className}`, style: style, children: children }));
+};
+
+const useOutsideClick = ({ handler, refs, enabled = true, }) => {
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const isOutside = refs.every((ref) => {
+                return ref.current && !ref.current.contains(target);
+            });
+            if (isOutside) {
+                handler(event);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("touchstart", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchstart", handleClickOutside);
+        };
+    }, [handler, refs, enabled]);
+};
+
+const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen, defaultIsOpen = false, closeOnClick = false, className = "", style, }) => {
+    const [internalIsOpen, setInternalIsOpen] = React.useState(defaultIsOpen);
+    const tooltipRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const isControlled = controlledIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+    useOutsideClick({
+        handler: () => {
+            if (!isControlled) {
+                setInternalIsOpen(false);
+            }
+        },
+        refs: [tooltipRef],
+        enabled: isOpen && !isControlled,
+    });
+    const handleMouseEnter = () => {
+        if (!isControlled) {
+            setInternalIsOpen(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (!isControlled && !closeOnClick) {
+            setInternalIsOpen(false);
+        }
+    };
+    const handleClick = () => {
+        if (closeOnClick && !isControlled) {
+            setInternalIsOpen((prev) => !prev);
+        }
+    };
+    const clonedChild = React.cloneElement(children, {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+    });
+    return (jsxRuntime.jsxs("div", { className: `ui-tooltip-wrapper ${className}`, style: style, children: [clonedChild, isOpen && (jsxRuntime.jsx("div", { ref: tooltipRef, className: `ui-tooltip ui-tooltip--${placement}`, role: "tooltip", children: label }))] }));
+};
+
+const PopoverContent = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-popover__content ${className}`, children: children });
+};
+const PopoverHeader = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-popover__header ${className}`, children: children });
+};
+const PopoverBody = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-popover__body ${className}`, children: children });
+};
+const PopoverFooter = ({ children, className = "", }) => {
+    return jsxRuntime.jsx("div", { className: `ui-popover__footer ${className}`, children: children });
+};
+const PopoverCloseButton = ({ onClose, className = "", }) => {
+    return (jsxRuntime.jsx("button", { className: `ui-popover__close ${className}`, onClick: onClose, "aria-label": "Close popover", children: jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M13 1L1 13M1 1L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+const Popover = ({ children, content, placement = "bottom", isOpen: controlledIsOpen, defaultIsOpen = false, onOpenChange, trigger = "click", closeOnBlur = true, showArrow = true, className = "", style, }) => {
+    const [internalIsOpen, setInternalIsOpen] = React.useState(defaultIsOpen);
+    const popoverRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const isControlled = controlledIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+    const handleOpenChange = React.useCallback((open) => {
+        if (!isControlled) {
+            setInternalIsOpen(open);
+        }
+        onOpenChange?.(open);
+    }, [isControlled, onOpenChange]);
+    // Handle outside click
+    React.useEffect(() => {
+        if (!isOpen || !closeOnBlur)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // Check if refs are available
+            if (!popoverRef.current || !triggerRef.current) {
+                return;
+            }
+            // Check if click is inside popover or trigger
+            const clickedInsidePopover = popoverRef.current.contains(target);
+            const clickedInsideTrigger = triggerRef.current.contains(target);
+            // Close if clicked outside both
+            if (!clickedInsidePopover && !clickedInsideTrigger) {
+                handleOpenChange(false);
+            }
+        };
+        // Use click event in bubble phase (not capture) so button clicks fire first
+        document.addEventListener("click", handleClickOutside, false);
+        document.addEventListener("touchend", handleClickOutside, false);
+        return () => {
+            document.removeEventListener("click", handleClickOutside, false);
+            document.removeEventListener("touchend", handleClickOutside, false);
+        };
+    }, [isOpen, closeOnBlur, handleOpenChange]);
+    // Handle click
+    const handleClick = () => {
+        if (trigger === "click") {
+            handleOpenChange(!isOpen);
+        }
+    };
+    // Handle hover
+    const handleMouseEnter = () => {
+        if (trigger === "hover") {
+            handleOpenChange(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (trigger === "hover") {
+            handleOpenChange(false);
+        }
+    };
+    // Clone trigger element
+    const triggerElement = React.cloneElement(children, {
+        ref: (node) => {
+            triggerRef.current = node;
+            const originalRef = children.ref;
+            if (typeof originalRef === "function") {
+                originalRef(node);
+            }
+            else if (originalRef) {
+                try {
+                    originalRef.current = node;
+                }
+                catch {
+                    // Ignore read-only refs
+                }
+            }
+        },
+        onClick: trigger === "click" ? handleClick : undefined,
+        onMouseEnter: trigger === "hover" ? handleMouseEnter : undefined,
+        onMouseLeave: trigger === "hover" ? handleMouseLeave : undefined,
+    });
+    return (jsxRuntime.jsxs("div", { className: `ui-popover-wrapper ${className}`, style: style, children: [triggerElement, isOpen && (jsxRuntime.jsx("div", { ref: popoverRef, className: `ui-popover ui-popover--${placement} ${showArrow ? "ui-popover--with-arrow" : ""}`, role: "dialog", "aria-modal": "false", onClick: (e) => {
+                    // Stop propagation to prevent outside click handler from firing
+                    e.stopPropagation();
+                }, onMouseDown: (e) => {
+                    // Stop propagation to prevent outside click handler from firing
+                    e.stopPropagation();
+                }, children: content }))] }));
+};
+
+const Toast = ({ id, title, description, variant = "info", duration = 5000, isClosable = true, onClose, className = "", style, }) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [isExiting, setIsExiting] = React.useState(false);
+    React.useEffect(() => {
+        // Trigger entrance animation
+        setTimeout(() => setIsVisible(true), 10);
+        // Auto-close after duration
+        if (duration > 0) {
+            const timer = setTimeout(() => {
+                handleClose();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration]);
+    const handleClose = () => {
+        setIsExiting(true);
+        setTimeout(() => {
+            onClose?.(id);
+        }, 300); // Match CSS transition duration
+    };
+    const toastClasses = [
+        "ui-toast",
+        `ui-toast--${variant}`,
+        isVisible && !isExiting ? "ui-toast--visible" : "",
+        isExiting ? "ui-toast--exiting" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsxs("div", { className: toastClasses, style: style, children: [jsxRuntime.jsxs("div", { className: "ui-toast__content", children: [title && jsxRuntime.jsx("div", { className: "ui-toast__title", children: title }), description && (jsxRuntime.jsx("div", { className: "ui-toast__description", children: description }))] }), isClosable && (jsxRuntime.jsx("button", { className: "ui-toast__close", onClick: handleClose, "aria-label": "Close toast", children: "\u00D7" }))] }));
+};
+const ToastContainer = ({ toasts, position = "top-right", onClose, className = "", style, }) => {
+    const containerClasses = [
+        "ui-toast-container",
+        `ui-toast-container--${position}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { className: containerClasses, style: style, children: toasts.map((toast) => (jsxRuntime.jsx(Toast, { ...toast, onClose: onClose }, toast.id))) }));
+};
+
+class ToastManager {
+    constructor() {
+        this.toasts = [];
+        this.listeners = new Set();
+        this.defaultPosition = "top-center";
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notify() {
+        this.listeners.forEach((listener) => listener([...this.toasts]));
+    }
+    getToasts() {
+        return [...this.toasts];
+    }
+    addToast(message, variant, options = {}) {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        // Support both 'duration' and 'hideAfter' options
+        const duration = options.hideAfter !== undefined
+            ? options.hideAfter
+            : options.duration ?? 5000;
+        // If title is provided, use it; otherwise use message as title
+        // If title is provided, use description from options; otherwise no description
+        const title = options.title || message;
+        const description = options.title ? options.description : undefined;
+        const toast = {
+            id,
+            title,
+            description,
+            variant,
+            duration,
+            isClosable: options.isClosable ?? true,
+            position: options.position || this.defaultPosition,
+        };
+        this.toasts.push(toast);
+        this.notify();
+        return id;
+    }
+    success(message, options) {
+        return this.addToast(message, "success", options);
+    }
+    error(message, options) {
+        return this.addToast(message, "error", options);
+    }
+    warning(message, options) {
+        return this.addToast(message, "warning", options);
+    }
+    info(message, options) {
+        return this.addToast(message, "info", options);
+    }
+    close(id) {
+        this.toasts = this.toasts.filter((toast) => toast.id !== id);
+        this.notify();
+    }
+    closeAll() {
+        this.toasts = [];
+        this.notify();
+    }
+}
+const toastManager = new ToastManager();
+
+const ToastStatic = {
+    success: (messageOrOptions, options) => {
+        if (typeof messageOrOptions === "string") {
+            return toastManager.success(messageOrOptions, options);
+        }
+        else {
+            return toastManager.success("", messageOrOptions);
+        }
+    },
+    error: (messageOrOptions, options) => {
+        if (typeof messageOrOptions === "string") {
+            return toastManager.error(messageOrOptions, options);
+        }
+        else {
+            return toastManager.error("", messageOrOptions);
+        }
+    },
+    warning: (messageOrOptions, options) => {
+        if (typeof messageOrOptions === "string") {
+            return toastManager.warning(messageOrOptions, options);
+        }
+        else {
+            return toastManager.warning("", messageOrOptions);
+        }
+    },
+    info: (messageOrOptions, options) => {
+        if (typeof messageOrOptions === "string") {
+            return toastManager.info(messageOrOptions, options);
+        }
+        else {
+            return toastManager.info("", messageOrOptions);
+        }
+    },
+    close: (id) => {
+        toastManager.close(id);
+    },
+    closeAll: () => {
+        toastManager.closeAll();
+    },
+};
+
+const ToastContainerGlobal = () => {
+    const [toasts, setToasts] = React.useState([]);
+    React.useEffect(() => {
+        const unsubscribe = toastManager.subscribe((newToasts) => {
+            setToasts(newToasts);
+        });
+        // Set initial toasts
+        setToasts(toastManager.getToasts());
+        return unsubscribe;
+    }, []);
+    const handleClose = (id) => {
+        toastManager.close(id);
+    };
+    // Group toasts by position
+    const toastsByPosition = React.useMemo(() => {
+        const grouped = {
+            "top-left": [],
+            "top-right": [],
+            "top-center": [],
+            "bottom-left": [],
+            "bottom-right": [],
+            "bottom-center": [],
+        };
+        toasts.forEach((toast) => {
+            const position = toast.position || "top-right";
+            if (grouped[position]) {
+                grouped[position].push(toast);
+            }
+        });
+        return grouped;
+    }, [toasts]);
+    // Get all positions that have toasts
+    const positionsWithToasts = React.useMemo(() => {
+        return Object.keys(toastsByPosition).filter((position) => toastsByPosition[position].length > 0);
+    }, [toastsByPosition]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: positionsWithToasts.map((position) => (jsxRuntime.jsx(ToastContainer, { toasts: toastsByPosition[position], position: position, onClose: handleClose }, position))) }));
+};
+
+const useDisclosure = (defaultIsOpen = false) => {
+    const [isOpen, setIsOpen] = React.useState(defaultIsOpen);
+    const onOpen = React.useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const onClose = React.useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const onToggle = React.useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    return {
+        isOpen,
+        onOpen,
+        onClose,
+        onToggle,
+    };
+};
+
+const ThemeContext = React.createContext(undefined);
+const useTheme = () => {
+    const context = React.useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+};
+const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "uilab-theme" }) => {
+    const [theme, setTheme] = React.useState(defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = React.useState("light");
+    // Get system preference
+    const getSystemTheme = () => {
+        if (typeof window !== "undefined") {
+            return window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+        }
+        return "light";
+    };
+    // Apply theme to document
+    const applyTheme = (newTheme) => {
+        const root = document.documentElement;
+        const resolved = newTheme === "system" ? getSystemTheme() : newTheme;
+        root.classList.remove("light", "dark");
+        root.classList.add(resolved);
+        root.setAttribute("data-theme", resolved);
+        setResolvedTheme(resolved);
+    };
+    // Initialize theme from localStorage or use default
+    React.useEffect(() => {
+        const savedTheme = localStorage.getItem(storageKey);
+        if (savedTheme && ["light", "dark", "system"].includes(savedTheme)) {
+            setTheme(savedTheme);
+        }
+        else {
+            setTheme(defaultTheme);
+        }
+    }, [defaultTheme, storageKey]);
+    // Apply theme when theme state changes
+    React.useEffect(() => {
+        applyTheme(theme);
+        localStorage.setItem(storageKey, theme);
+    }, [theme, storageKey]);
+    // Listen for system theme changes
+    React.useEffect(() => {
+        if (theme === "system") {
+            const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+            const handleChange = () => applyTheme("system");
+            mediaQuery.addEventListener("change", handleChange);
+            return () => mediaQuery.removeEventListener("change", handleChange);
+        }
+    }, [theme]);
+    const value = {
+        theme,
+        setTheme,
+        resolvedTheme,
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: value, children: children }));
+};
+
+const ThemeToggle = ({ className = "", showLabel = true, variant = "dropdown", size = "md", }) => {
+    const { theme, setTheme, resolvedTheme } = useTheme();
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dropdownRef = React.useRef(null);
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const getThemeIcon = () => {
+        if (theme === "system") {
+            return "🖥️";
+        }
+        return theme === "dark" ? "🌙" : "☀️";
+    };
+    const getThemeLabel = () => {
+        switch (theme) {
+            case "light":
+                return "Light";
+            case "dark":
+                return "Dark";
+            case "system":
+                return "System";
+            default:
+                return "System";
+        }
+    };
+    const handleThemeChange = (newTheme) => {
+        setTheme(newTheme);
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        if (variant === "button") {
+            // Cycle through themes: light -> dark -> system -> light
+            const themes = [
+                "light",
+                "dark",
+                "system",
+            ];
+            const currentIndex = themes.indexOf(theme);
+            const nextIndex = (currentIndex + 1) % themes.length;
+            setTheme(themes[nextIndex]);
+        }
+        else {
+            setIsOpen(!isOpen);
+        }
+    };
+    const sizeClasses = {
+        sm: "text-sm px-2 py-1",
+        md: "text-base px-3 py-2",
+        lg: "text-lg px-4 py-3",
+    };
+    const baseClasses = `inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 ${sizeClasses[size]} ${className}`;
+    if (variant === "button") {
+        return (jsxRuntime.jsxs("button", { onClick: handleToggle, className: baseClasses, title: `Current theme: ${getThemeLabel()}`, children: [jsxRuntime.jsx("span", { children: getThemeIcon() }), showLabel && jsxRuntime.jsx("span", { children: getThemeLabel() })] }));
+    }
+    return (jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [jsxRuntime.jsxs("button", { onClick: handleToggle, className: baseClasses, title: `Theme: ${getThemeLabel()}`, children: [jsxRuntime.jsx("span", { children: getThemeIcon() }), showLabel && jsxRuntime.jsx("span", { children: getThemeLabel() }), jsxRuntime.jsx("span", { className: "ml-1", children: "\u25BC" })] }), isOpen && (jsxRuntime.jsxs("div", { className: "absolute right-0 mt-2 w-48 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 dark:ring-gray-700", children: [jsxRuntime.jsx("button", { className: `block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${theme === "light" ? "bg-gray-100 dark:bg-gray-700" : ""}`, onClick: () => handleThemeChange("light"), children: "\u2600\uFE0F Light" }), jsxRuntime.jsx("button", { className: `block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${theme === "dark" ? "bg-gray-100 dark:bg-gray-700" : ""}`, onClick: () => handleThemeChange("dark"), children: "\uD83C\uDF19 Dark" }), jsxRuntime.jsxs("button", { className: `block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${theme === "system" ? "bg-gray-100 dark:bg-gray-700" : ""}`, onClick: () => handleThemeChange("system"), children: ["\uD83D\uDDA5\uFE0F System", theme === "system" && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-gray-500", children: ["(", resolvedTheme === "dark" ? "Dark" : "Light", ")"] }))] })] }))] }));
+};
+
+/**
+ * ThemeScript - Blocking script to prevent flash of light content in dark mode
+ *
+ * Add this component to your Next.js layout.tsx file before the ThemeProvider.
+ * Make sure to add `suppressHydrationWarning` to both `<html>` and `<body>` tags
+ * to prevent hydration mismatches.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeScript, ThemeProvider } from 'uiplex';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html suppressHydrationWarning>
+ *       <body suppressHydrationWarning>
+ *         <ThemeScript />
+ *         <ThemeProvider>
+ *           {children}
+ *         </ThemeProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+const ThemeScript = ({ storageKey = "uiplex-theme", defaultTheme = "system" }) => {
+    return (jsxRuntime.jsx("script", { dangerouslySetInnerHTML: {
+            __html: `
+          (function() {
+            try {
+              // Disable transitions immediately to prevent flash
+              var noTransitionStyle = document.createElement('style');
+              noTransitionStyle.textContent = '* { transition: none !important; }';
+              document.head.appendChild(noTransitionStyle);
+              
+              var theme = localStorage.getItem('${storageKey}') || '${defaultTheme}';
+              var resolvedTheme = theme;
+              
+              if (theme === 'system') {
+                resolvedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+              }
+              
+              document.documentElement.classList.remove('light', 'dark');
+              document.documentElement.classList.add(resolvedTheme);
+              document.documentElement.setAttribute('data-theme', resolvedTheme);
+              
+              // Set initial background color to prevent flash - use !important
+              if (resolvedTheme === 'dark') {
+                var darkStyle = document.createElement('style');
+                darkStyle.textContent = 'html, body { background-color: #111827 !important; color: #f9fafb !important; }';
+                document.head.appendChild(darkStyle);
+              }
+              
+              // Re-enable transitions after a short delay
+              setTimeout(function() {
+                noTransitionStyle.remove();
+              }, 100);
+            } catch (e) {
+              document.documentElement.classList.add('light');
+              document.documentElement.setAttribute('data-theme', 'light');
+            }
+          })();
+        `,
+        } }));
+};
+
+exports.Box = Box;
+exports.Button = Button;
+exports.CircularProgress = CircularProgress;
+exports.CircularProgressLabel = CircularProgressLabel;
+exports.Flex = Flex;
+exports.FormControl = FormControl;
+exports.FormErrorMessage = FormErrorMessage;
+exports.FormLabel = FormLabel;
+exports.Grid = Grid;
+exports.IconButton = IconButton;
+exports.Input = Input;
+exports.Link = Link;
+exports.Loader = Loader;
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalContent = ModalContent;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalOverlay = ModalOverlay;
+exports.Popover = Popover;
+exports.PopoverBody = PopoverBody;
+exports.PopoverCloseButton = PopoverCloseButton;
+exports.PopoverContent = PopoverContent;
+exports.PopoverFooter = PopoverFooter;
+exports.PopoverHeader = PopoverHeader;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.Text = Text;
+exports.Textarea = Textarea;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeScript = ThemeScript;
+exports.ThemeToggle = ThemeToggle;
+exports.Toast = ToastStatic;
+exports.ToastComponent = Toast;
+exports.ToastContainer = ToastContainer;
+exports.ToastContainerGlobal = ToastContainerGlobal;
+exports.Tooltip = Tooltip;
+exports.useDisclosure = useDisclosure;
+exports.useOutsideClick = useOutsideClick;
+exports.useTheme = useTheme;