@seedgrid/fe-components 2026.3.5 → 2026.3.11

package/dist/overlay/SgDialog.js

@@ -51,8 +51,26 @@ function contentStateClass(animation, entered) {
             return cn(common, entered ? "translate-y-0" : "translate-y-2");
     }
 }
+function resolveDialogShadow(elevation, shadow) {
+    if (elevation === undefined)
+        return shadow;
+    if (typeof elevation !== "string")
+        return elevation;
+    switch (elevation) {
+        case "none":
+            return "none";
+        case "sm":
+            return "0 1px 2px rgba(2, 8, 23, 0.12)";
+        case "md":
+            return "0 10px 24px rgba(2, 8, 23, 0.2), 0 4px 10px rgba(2, 8, 23, 0.12)";
+        case "lg":
+            return "0 24px 60px rgba(2, 8, 23, 0.32), 0 12px 24px rgba(2, 8, 23, 0.18)";
+        default:
+            return elevation;
+    }
+}
 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, overlayClassName, contentClassName, headerClassName, bodyClassName, footerClassName, closeable = true, onClose, closeOnOverlayClick = true, closeOnEsc = true, lockBodyScroll = true, initialFocusRef, restoreFocus = true, ariaLabel } = 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;
     const [openUncontrolled, setOpenUncontrolled] = React.useState(defaultOpen);
     const open = isControlled ? !!openProp : openUncontrolled;
@@ -167,9 +185,16 @@ export function SgDialog(props) {
     const overlayBase = "fixed inset-0 bg-black/60 backdrop-blur-[1px] transition-opacity";
     const overlayState = entered ? "opacity-100" : "opacity-0";
     const contentBase = "w-full rounded-2xl bg-background text-foreground shadow-2xl border border-border " +
-        "max-h-[85vh] flex flex-col transition duration-150 ease-out border-t-4";
+        "max-h-[85vh] flex flex-col transition duration-150 ease-out" +
+        (showTopAccent ? " border-t-4" : "");
+    const resolvedShadow = resolveDialogShadow(elevation, shadow);
     const transitionStyle = { transitionDuration: `${transitionMs}ms` };
-    return createPortal(_jsxs("div", { className: cn("fixed inset-0 z-[1000]", className), 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), severityClass(severity), contentClassName), style: transitionStyle, 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);
+    const contentStyle = {
+        ...transitionStyle,
+        ...(customColor !== undefined ? { backgroundColor: customColor } : {}),
+        ...(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);
 }
 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" }) }));