@seedgrid/fe-components 2026.3.11 → 2026.3.13

package/dist/others/SgPlayground.js

@@ -383,6 +383,7 @@ const SANDPACK_NODE_FS_PROMISES_PACKAGE_JSON_SHIM = JSON.stringify({
     module: "index.js"
 });
 const SANDPACK_FALLBACK_THEME_VARS = {
+    "--sg-mode": "light",
     // shadcn/ui design tokens (HSL)
     "--background": "0 0% 100%",
     "--foreground": "222.2 84% 4.9%",
@@ -564,6 +565,7 @@ const SANDPACK_CORE_THEME_VARS = [
 // CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
 // so we must call getPropertyValue() for each var by name.
 const SANDPACK_SG_VARS = [
+    "--sg-mode",
     // Neutrals
     "--sg-bg", "--sg-surface", "--sg-muted-surface",
     "--sg-text", "--sg-muted", "--sg-border", "--sg-ring",
@@ -856,6 +858,25 @@ function readThemeVarsFromHost() {
     Object.assign(themeVars, mapSgVarsToCoreVars(themeVars));
     return themeVars;
 }
+function resolveSandpackThemeFromHost() {
+    if (typeof window === "undefined")
+        return "light";
+    const root = document.documentElement;
+    const computed = window.getComputedStyle(root);
+    const mode = computed.getPropertyValue("--sg-mode").trim().toLowerCase();
+    if (mode === "dark")
+        return "dark";
+    if (mode === "light")
+        return "light";
+    const dataTheme = root.getAttribute("data-theme")?.trim().toLowerCase();
+    if (dataTheme === "dark")
+        return "dark";
+    if (dataTheme === "light")
+        return "light";
+    if (root.classList.contains("dark"))
+        return "dark";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 function getStyleSheetHref(styleSheet) {
     const cssSheet = styleSheet;
     if (cssSheet.href)
@@ -1035,6 +1056,7 @@ export default function SgPlayground(props) {
     const { code, interactive = false, codeContract = "renderBody", preset = "auto", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, style, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, bundlerURL, bundlerTimeoutMs, npmRegistries, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
     const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
+    const [sandpackTheme, setSandpackTheme] = React.useState(() => resolveSandpackThemeFromHost());
     const [isExpanded, setIsExpanded] = React.useState(false);
     const [activePanel, setActivePanel] = React.useState("code");
     React.useEffect(() => {
@@ -1045,6 +1067,7 @@ export default function SgPlayground(props) {
             const liveThemeVars = readThemeVarsFromHost();
             const hostCss = readHostNextCssText();
             setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding, hostCss));
+            setSandpackTheme(resolveSandpackThemeFromHost());
         };
         let frameId = null;
         const scheduleRefresh = () => {
@@ -1427,7 +1450,7 @@ export default function SgPlayground(props) {
         visibleFiles: ["/App.tsx"],
         externalResources: includeSeedgridDependency ? SANDPACK_EXTERNAL_RESOURCES : []
     }), [includeSeedgridDependency, resolvedBundlerTimeoutMs, resolvedBundlerURL]);
-    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), style: withCard ? undefined : style, children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, children: [_jsx("style", { children: SANDPACK_HOST_STYLES_CSS }), _jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
+    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), style: withCard ? undefined : style, children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, theme: sandpackTheme, children: [_jsx("style", { children: SANDPACK_HOST_STYLES_CSS }), _jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
                                 ? "border-primary text-foreground"
                                 : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("code"), children: "C\u00F3digo" }), _jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "preview"
                                 ? "border-primary text-foreground"

package/dist/overlay/SgDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2EF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAmQtD;yBAnQe,QAAQ"}
+{"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsRF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BA4QtD;yBA5Qe,QAAQ"}

package/dist/overlay/SgDialog.js

@@ -69,6 +69,199 @@ function resolveDialogShadow(elevation, shadow) {
             return elevation;
     }
 }
+function clampByte(value) {
+    return Math.min(255, Math.max(0, Math.round(value)));
+}
+function parseHexColor(input) {
+    const hex = input.replace("#", "").trim();
+    if (!hex)
+        return null;
+    if (hex.length === 3 || hex.length === 4) {
+        const r = Number.parseInt((hex.slice(0, 1) || "0").repeat(2), 16);
+        const g = Number.parseInt((hex.slice(1, 2) || "0").repeat(2), 16);
+        const b = Number.parseInt((hex.slice(2, 3) || "0").repeat(2), 16);
+        if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b))
+            return null;
+        return { r, g, b };
+    }
+    if (hex.length === 6 || hex.length === 8) {
+        const r = Number.parseInt(hex.slice(0, 2), 16);
+        const g = Number.parseInt(hex.slice(2, 4), 16);
+        const b = Number.parseInt(hex.slice(4, 6), 16);
+        if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b))
+            return null;
+        return { r, g, b };
+    }
+    return null;
+}
+function parseRgbChannel(token) {
+    const value = token.trim();
+    if (!value)
+        return null;
+    if (value.endsWith("%")) {
+        const numeric = Number.parseFloat(value.slice(0, -1));
+        if (!Number.isFinite(numeric))
+            return null;
+        return clampByte((numeric / 100) * 255);
+    }
+    const numeric = Number.parseFloat(value);
+    if (!Number.isFinite(numeric))
+        return null;
+    return clampByte(numeric);
+}
+function parseRgbColor(input) {
+    const match = input.match(/^rgba?\((.+)\)$/i);
+    if (!match)
+        return null;
+    const raw = match[1]?.trim() ?? "";
+    const withoutAlpha = raw.replace(/\s*\/\s*[\d.]+%?\s*$/, "");
+    const tokens = withoutAlpha.includes(",")
+        ? withoutAlpha.split(",")
+        : withoutAlpha.split(/\s+/);
+    if (tokens.length < 3)
+        return null;
+    const r = parseRgbChannel(tokens[0] ?? "");
+    const g = parseRgbChannel(tokens[1] ?? "");
+    const b = parseRgbChannel(tokens[2] ?? "");
+    if (r === null || g === null || b === null)
+        return null;
+    return { r, g, b };
+}
+function parseHue(token) {
+    const value = token.trim().toLowerCase();
+    if (!value)
+        return null;
+    if (value.endsWith("turn")) {
+        const numeric = Number.parseFloat(value.slice(0, -4));
+        if (!Number.isFinite(numeric))
+            return null;
+        return numeric * 360;
+    }
+    if (value.endsWith("rad")) {
+        const numeric = Number.parseFloat(value.slice(0, -3));
+        if (!Number.isFinite(numeric))
+            return null;
+        return (numeric * 180) / Math.PI;
+    }
+    if (value.endsWith("deg")) {
+        const numeric = Number.parseFloat(value.slice(0, -3));
+        if (!Number.isFinite(numeric))
+            return null;
+        return numeric;
+    }
+    const numeric = Number.parseFloat(value);
+    return Number.isFinite(numeric) ? numeric : null;
+}
+function parsePercent(token) {
+    const value = token.trim();
+    if (!value.endsWith("%"))
+        return null;
+    const numeric = Number.parseFloat(value.slice(0, -1));
+    if (!Number.isFinite(numeric))
+        return null;
+    return Math.min(100, Math.max(0, numeric));
+}
+function hslToRgb(h, s, l) {
+    const sat = Math.min(1, Math.max(0, s / 100));
+    const lig = Math.min(1, Math.max(0, l / 100));
+    const hue = ((h % 360) + 360) % 360;
+    const c = (1 - Math.abs(2 * lig - 1)) * sat;
+    const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+    const m = lig - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (hue < 60) {
+        r = c;
+        g = x;
+    }
+    else if (hue < 120) {
+        r = x;
+        g = c;
+    }
+    else if (hue < 180) {
+        g = c;
+        b = x;
+    }
+    else if (hue < 240) {
+        g = x;
+        b = c;
+    }
+    else if (hue < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    return {
+        r: clampByte((r + m) * 255),
+        g: clampByte((g + m) * 255),
+        b: clampByte((b + m) * 255)
+    };
+}
+function parseHslColor(input) {
+    const match = input.match(/^hsla?\((.+)\)$/i);
+    if (!match)
+        return null;
+    const raw = match[1]?.trim() ?? "";
+    const withoutAlpha = raw.replace(/\s*\/\s*[\d.]+%?\s*$/, "");
+    const tokens = withoutAlpha.includes(",")
+        ? withoutAlpha.split(",")
+        : withoutAlpha.split(/\s+/);
+    if (tokens.length < 3)
+        return null;
+    const h = parseHue(tokens[0] ?? "");
+    const s = parsePercent(tokens[1] ?? "");
+    const l = parsePercent(tokens[2] ?? "");
+    if (h === null || s === null || l === null)
+        return null;
+    return hslToRgb(h, s, l);
+}
+function parseCssColorToRgb(color) {
+    const input = color.trim();
+    if (!input)
+        return null;
+    if (input.startsWith("#"))
+        return parseHexColor(input);
+    if (/^rgba?\(/i.test(input))
+        return parseRgbColor(input);
+    if (/^hsla?\(/i.test(input))
+        return parseHslColor(input);
+    return null;
+}
+function relativeLuminance({ r, g, b }) {
+    const normalize = (channel) => {
+        const n = channel / 255;
+        return n <= 0.03928 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * normalize(r) + 0.7152 * normalize(g) + 0.0722 * normalize(b);
+}
+function resolveCustomSurfacePalette(backgroundColor) {
+    if (typeof backgroundColor !== "string")
+        return null;
+    const parsed = parseCssColorToRgb(backgroundColor);
+    if (!parsed)
+        return null;
+    const lightSurface = relativeLuminance(parsed) >= 0.56;
+    if (lightSurface) {
+        return {
+            foreground: "rgb(17 24 39)",
+            mutedForeground: "rgb(71 85 105)",
+            border: "rgba(15, 23, 42, 0.16)",
+            hoverBg: "rgba(15, 23, 42, 0.08)",
+            activeBg: "rgba(15, 23, 42, 0.14)"
+        };
+    }
+    return {
+        foreground: "rgb(243 244 246)",
+        mutedForeground: "rgb(203 213 225)",
+        border: "rgba(248, 250, 252, 0.18)",
+        hoverBg: "rgba(248, 250, 252, 0.08)",
+        activeBg: "rgba(248, 250, 252, 0.14)"
+    };
+}
 export function SgDialog(props) {
     const { open: openProp, onOpenChange, defaultOpen = false, title, subtitle, leading, trailing, children, footer, size = "md", severity = "plain", animation = "zoom", transitionMs = 160, autoCloseMs, className, style, customColor, elevation, shadow, showTopAccent = true, overlayClassName, contentClassName, headerClassName, bodyClassName, footerClassName, closeable = true, onClose, closeOnOverlayClick = true, closeOnEsc = true, lockBodyScroll = true, initialFocusRef, restoreFocus = true, ariaLabel } = props;
     const isControlled = openProp !== undefined;
@@ -188,13 +381,22 @@ export function SgDialog(props) {
         "max-h-[85vh] flex flex-col transition duration-150 ease-out" +
         (showTopAccent ? " border-t-4" : "");
     const resolvedShadow = resolveDialogShadow(elevation, shadow);
+    const customPalette = resolveCustomSurfacePalette(customColor);
+    const dialogVars = {
+        "--sg-dialog-muted-foreground": customPalette?.mutedForeground ?? "hsl(var(--muted-foreground))",
+        "--sg-dialog-divider": customPalette?.border ?? "hsl(var(--border))",
+        "--sg-dialog-hover-bg": customPalette?.hoverBg ?? "hsl(var(--muted) / 0.6)",
+        "--sg-dialog-active-bg": customPalette?.activeBg ?? "hsl(var(--muted))"
+    };
     const transitionStyle = { transitionDuration: `${transitionMs}ms` };
     const contentStyle = {
+        ...dialogVars,
         ...transitionStyle,
         ...(customColor !== undefined ? { backgroundColor: customColor } : {}),
+        ...(customPalette ? { color: customPalette.foreground, borderColor: customPalette.border } : {}),
         ...(resolvedShadow !== undefined ? { boxShadow: resolvedShadow } : {})
     };
-    return createPortal(_jsxs("div", { className: cn("fixed inset-0 z-[1000]", className), style: style, role: "dialog", "aria-modal": "true", "aria-label": a11yLabel, children: [_jsx("div", { ref: overlayRef, onMouseDown: onOverlayMouseDown, className: cn(overlayBase, overlayState, overlayClassName), style: transitionStyle }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs("div", { ref: contentRef, className: cn(contentBase, sizeClass(size), contentStateClass(animation, entered), showTopAccent ? severityClass(severity) : false, contentClassName), style: contentStyle, children: [(title || subtitle || closeable || leading || trailing) && (_jsxs("div", { className: cn("px-5 py-4 border-b border-border flex items-start gap-3", headerClassName), children: [leading ? _jsx("div", { className: "shrink-0 pt-0.5", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "text-base font-semibold leading-6", children: title }) : null, subtitle ? _jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [trailing ? _jsx("div", { className: "shrink-0", children: trailing }) : null, closeable ? (_jsx("button", { type: "button", onClick: close, className: cn("inline-flex items-center justify-center h-9 w-9 rounded-lg", "hover:bg-muted/60 active:bg-muted", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring,var(--primary)))]"), "aria-label": "Close", children: _jsx(CloseIcon, {}) })) : null] })] })), _jsx("div", { className: cn("px-5 py-4 overflow-auto", bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("px-5 py-4 border-t border-border flex items-center justify-end gap-2", footerClassName), children: footer })) : null] }) })] }), document.body);
+    return createPortal(_jsxs("div", { className: cn("fixed inset-0 z-[1000]", className), style: style, role: "dialog", "aria-modal": "true", "aria-label": a11yLabel, children: [_jsx("div", { ref: overlayRef, onMouseDown: onOverlayMouseDown, className: cn(overlayBase, overlayState, overlayClassName), style: transitionStyle }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs("div", { ref: contentRef, className: cn(contentBase, sizeClass(size), contentStateClass(animation, entered), showTopAccent ? severityClass(severity) : false, contentClassName), style: contentStyle, children: [(title || subtitle || closeable || leading || trailing) && (_jsxs("div", { className: cn("px-5 py-4 border-b border-[var(--sg-dialog-divider)] flex items-start gap-3", headerClassName), children: [leading ? _jsx("div", { className: "shrink-0 pt-0.5", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "text-base font-semibold leading-6", children: title }) : null, subtitle ? _jsx("div", { className: "mt-1 text-sm text-[var(--sg-dialog-muted-foreground)]", children: subtitle }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [trailing ? _jsx("div", { className: "shrink-0", children: trailing }) : null, closeable ? (_jsx("button", { type: "button", onClick: close, className: cn("inline-flex items-center justify-center h-9 w-9 rounded-lg", "hover:bg-[var(--sg-dialog-hover-bg)] active:bg-[var(--sg-dialog-active-bg)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring,var(--primary)))]"), "aria-label": "Close", children: _jsx(CloseIcon, {}) })) : null] })] })), _jsx("div", { className: cn("px-5 py-4 overflow-auto", bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("px-5 py-4 border-t border-[var(--sg-dialog-divider)] flex items-center justify-end gap-2", footerClassName), children: footer })) : null] }) })] }), document.body);
 }
 function CloseIcon() {
     return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-5", "aria-hidden": "true", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));