@seedgrid/fe-components 2026.3.9 → 2026.3.11-1

package/dist/layout/SgCard.js

@@ -1,16 +1,152 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-function DefaultCaret({ open }) {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cn("shrink-0 transition-transform duration-200", open ? "rotate-90" : "rotate-0"), "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01Z" }) }));
+function parseStoredCardPosition(raw) {
+    const value = typeof raw === "string"
+        ? (() => {
+            try {
+                return JSON.parse(raw);
+            }
+            catch {
+                return null;
+            }
+        })()
+        : raw;
+    if (!value ||
+        typeof value !== "object" ||
+        typeof value.x !== "number" ||
+        typeof value.y !== "number" ||
+        !Number.isFinite(value.x) ||
+        !Number.isFinite(value.y)) {
+        return null;
+    }
+    return {
+        x: value.x,
+        y: value.y
+    };
+}
+function mergeTransforms(baseTransform, extraTransform) {
+    if (typeof baseTransform === "string" && baseTransform.trim().length > 0) {
+        return `${baseTransform} ${extraTransform}`;
+    }
+    return extraTransform;
+}
+function DefaultCaret({ open, size }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", className: cn("shrink-0 transition-transform duration-200", open ? "rotate-90" : "rotate-0"), "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01Z" }) }));
 }
 export function SgCard(props) {
-    const { className, headerClassName, bodyClassName, footerClassName, cardStyle = "default", size = "md", leading, trailing, trailer, title, description, actions, header, footer, clickable = false, disabled = false, collapsible = false, defaultOpen = true, open: controlledOpen, onOpenChange, collapseIcon, collapseToggleAlign = "left", toggleOnHeaderClick = true, onClick, children, ...rest } = props;
-    const isInteractive = (clickable || typeof onClick === "function") && !collapsible;
+    const { id, className, headerClassName, bodyClassName, footerClassName, bgColor, bgColorTitle, bgColorFooter, cardStyle = "default", size = "md", leading, trailing, trailer, title, description, actions, header, footer, clickable = false, disabled = false, collapsible = false, defaultOpen = true, open: controlledOpen, onOpenChange, collapseIcon, collapseIconSize = 18, collapseToggleAlign = "left", toggleOnHeaderClick = true, draggable = false, defaultPosition, dragPersistKey, onPositionChange, style, onClick, children, ...rest } = props;
+    const hasEnvironmentProvider = useHasSgEnvironmentProvider();
+    const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
+    const isInteractive = (clickable || typeof onClick === "function") && !collapsible && !draggable;
     const trailingNode = trailing ?? trailer;
+    const [dragPosition, setDragPosition] = React.useState({
+        x: defaultPosition?.x ?? 0,
+        y: defaultPosition?.y ?? 0
+    });
+    const dragPositionRef = React.useRef(dragPosition);
+    const [dragHydrated, setDragHydrated] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
+    const dragStateRef = React.useRef(null);
+    const suppressNextToggleRef = React.useRef(false);
+    const dragStorageKey = React.useMemo(() => {
+        if (typeof dragPersistKey === "string" && dragPersistKey.trim().length > 0) {
+            return dragPersistKey.trim();
+        }
+        if (typeof id === "string" && id.trim().length > 0) {
+            return `sg-card-pos:${id.trim()}`;
+        }
+        return null;
+    }, [dragPersistKey, id]);
+    React.useEffect(() => {
+        dragPositionRef.current = dragPosition;
+        onPositionChange?.(dragPosition);
+    }, [dragPosition, onPositionChange]);
+    React.useEffect(() => {
+        if (!draggable) {
+            setDragHydrated(false);
+            return;
+        }
+        let alive = true;
+        (async () => {
+            let loaded = null;
+            if (dragStorageKey) {
+                if (hasEnvironmentProvider) {
+                    try {
+                        const state = await loadPersistedState(dragStorageKey);
+                        loaded = parseStoredCardPosition(state);
+                        if (!loaded && state !== null && state !== undefined) {
+                            await clearPersistedState(dragStorageKey);
+                        }
+                    }
+                    catch {
+                        loaded = null;
+                    }
+                }
+                else {
+                    try {
+                        const raw = localStorage.getItem(dragStorageKey);
+                        loaded = parseStoredCardPosition(raw);
+                        if (!loaded && raw !== null) {
+                            localStorage.removeItem(dragStorageKey);
+                        }
+                    }
+                    catch {
+                        loaded = null;
+                    }
+                }
+            }
+            if (!alive)
+                return;
+            if (loaded) {
+                setDragPosition(loaded);
+            }
+            else {
+                setDragPosition({
+                    x: defaultPosition?.x ?? 0,
+                    y: defaultPosition?.y ?? 0
+                });
+            }
+            setDragHydrated(true);
+        })();
+        return () => {
+            alive = false;
+        };
+    }, [
+        clearPersistedState,
+        defaultPosition?.x,
+        defaultPosition?.y,
+        dragStorageKey,
+        draggable,
+        hasEnvironmentProvider,
+        loadPersistedState
+    ]);
+    React.useEffect(() => {
+        if (!draggable || !dragHydrated || !dragStorageKey || dragging)
+            return;
+        if (hasEnvironmentProvider) {
+            void savePersistedState(dragStorageKey, dragPosition);
+            return;
+        }
+        try {
+            localStorage.setItem(dragStorageKey, JSON.stringify(dragPosition));
+        }
+        catch {
+            // ignore
+        }
+    }, [
+        dragHydrated,
+        dragPosition,
+        dragStorageKey,
+        draggable,
+        dragging,
+        hasEnvironmentProvider,
+        savePersistedState
+    ]);
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
     const isControlled = typeof controlledOpen === "boolean";
     const isOpen = collapsible ? (isControlled ? controlledOpen : uncontrolledOpen) : true;
@@ -58,9 +194,13 @@ export function SgCard(props) {
         ? cn("transition-[box-shadow,transform] duration-150", "hover:shadow-md", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[hsl(var(--primary)/0.35)]", disabled ? "" : "cursor-pointer", disabled ? "" : "active:translate-y-[0.5px]")
         : "";
     const disabledClasses = disabled ? "opacity-60 pointer-events-none select-none" : "";
-    const rootClasses = cn("w-full", sizeClasses.root, variantClasses, interactiveClasses, disabledClasses, className);
+    const rootClasses = cn("w-full", sizeClasses.root, variantClasses, interactiveClasses, disabledClasses, draggable ? "touch-none" : "", className);
     const toggle = React.useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
     const onHeaderClick = () => {
+        if (suppressNextToggleRef.current) {
+            suppressNextToggleRef.current = false;
+            return;
+        }
         if (!collapsible)
             return;
         if (!toggleOnHeaderClick)
@@ -69,10 +209,74 @@ export function SgCard(props) {
             return;
         toggle();
     };
-    const ToggleButton = collapsible ? (_jsx("button", { type: "button", onClick: (e) => {
+    const onHeaderPointerDown = React.useCallback((event) => {
+        if (!draggable || disabled)
+            return;
+        if (event.button !== 0)
+            return;
+        const target = event.target;
+        const interactiveAncestor = target?.closest("[data-sg-card-toggle=\"true\"],button,a,input,textarea,select,[role=\"button\"],[data-sg-card-no-drag=\"true\"]");
+        if (interactiveAncestor && interactiveAncestor !== event.currentTarget) {
+            return;
+        }
+        dragStateRef.current = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            originX: dragPositionRef.current.x,
+            originY: dragPositionRef.current.y,
+            moved: false
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        setDragging(true);
+        event.preventDefault();
+    }, [disabled, draggable]);
+    const onHeaderPointerMove = React.useCallback((event) => {
+        const state = dragStateRef.current;
+        if (!state || state.pointerId !== event.pointerId)
+            return;
+        const dx = event.clientX - state.startX;
+        const dy = event.clientY - state.startY;
+        if (!state.moved && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) {
+            state.moved = true;
+        }
+        setDragPosition({
+            x: state.originX + dx,
+            y: state.originY + dy
+        });
+        if (state.moved) {
+            event.preventDefault();
+        }
+    }, []);
+    const endHeaderDrag = React.useCallback((event) => {
+        const state = dragStateRef.current;
+        if (!state || state.pointerId !== event.pointerId)
+            return;
+        if (state.moved) {
+            suppressNextToggleRef.current = true;
+        }
+        dragStateRef.current = null;
+        setDragging(false);
+        try {
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        }
+        catch {
+            // ignore
+        }
+    }, []);
+    const headerInteractionClasses = disabled
+        ? ""
+        : draggable
+            ? dragging
+                ? "cursor-grabbing"
+                : "cursor-grab"
+            : collapsible && toggleOnHeaderClick
+                ? "cursor-pointer"
+                : "";
+    const ToggleButton = collapsible ? (_jsx("button", { "data-sg-card-toggle": "true", type: "button", onClick: (e) => {
             e.stopPropagation();
             toggle();
-        }, className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md", "text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.35)]"), "aria-label": isOpen ? "Recolher" : "Expandir", "aria-expanded": isOpen, disabled: disabled, children: collapseIcon ?? _jsx(DefaultCaret, { open: isOpen }) })) : null;
+        }, className: cn("inline-flex h-9 w-9 items-center justify-center rounded-md", "text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.35)]"), "aria-label": isOpen ? "Recolher" : "Expandir", "aria-expanded": isOpen, disabled: disabled, children: collapseIcon ?? _jsx(DefaultCaret, { open: isOpen, size: collapseIconSize }) })) : null;
     const headerHasContent = Boolean(header) ||
         Boolean(leading) ||
         Boolean(title) ||
@@ -80,7 +284,7 @@ export function SgCard(props) {
         Boolean(trailingNode) ||
         Boolean(actions) ||
         collapsible;
-    const renderDefaultHeader = headerHasContent ? (_jsxs("div", { className: cn("flex items-start gap-3", "border-b border-border/60", sizeClasses.header, headerClassName, collapsible && toggleOnHeaderClick ? "cursor-pointer" : ""), onClick: onHeaderClick, role: collapsible && toggleOnHeaderClick ? "button" : undefined, tabIndex: collapsible && toggleOnHeaderClick && !disabled ? 0 : undefined, onKeyDown: (e) => {
+    const renderDefaultHeader = headerHasContent ? (_jsxs("div", { className: cn("flex items-start gap-3", "border-b border-border/60", sizeClasses.header, headerClassName, headerInteractionClasses), style: bgColorTitle ? { backgroundColor: bgColorTitle } : undefined, onClick: onHeaderClick, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: endHeaderDrag, onPointerCancel: endHeaderDrag, role: collapsible && toggleOnHeaderClick ? "button" : undefined, tabIndex: collapsible && toggleOnHeaderClick && !disabled ? 0 : undefined, onKeyDown: (e) => {
             if (!collapsible || !toggleOnHeaderClick || disabled)
                 return;
             if (e.key === "Enter" || e.key === " ") {
@@ -88,7 +292,7 @@ export function SgCard(props) {
                 toggle();
             }
         }, "aria-expanded": collapsible ? isOpen : undefined, children: [collapseToggleAlign === "left" ? ToggleButton : null, 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: cn("font-medium text-foreground", sizeClasses.title), children: title })) : null, description ? (_jsx("div", { className: cn("mt-0.5 text-muted-foreground", sizeClasses.desc), children: description })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [trailingNode ? _jsx("div", { className: "shrink-0", children: trailingNode }) : null, actions ? _jsx("div", { className: "shrink-0", children: actions }) : null, collapseToggleAlign === "right" ? ToggleButton : null] })] })) : null;
-    const headerNode = header ? (_jsx("div", { className: cn("border-b border-border/60", sizeClasses.header, headerClassName, collapsible && toggleOnHeaderClick ? "cursor-pointer" : ""), onClick: onHeaderClick, role: collapsible && toggleOnHeaderClick ? "button" : undefined, tabIndex: collapsible && toggleOnHeaderClick && !disabled ? 0 : undefined, onKeyDown: (e) => {
+    const headerNode = header ? (_jsx("div", { className: cn("border-b border-border/60", sizeClasses.header, headerClassName, headerInteractionClasses), style: bgColorTitle ? { backgroundColor: bgColorTitle } : undefined, onClick: onHeaderClick, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: endHeaderDrag, onPointerCancel: endHeaderDrag, role: collapsible && toggleOnHeaderClick ? "button" : undefined, tabIndex: collapsible && toggleOnHeaderClick && !disabled ? 0 : undefined, onKeyDown: (e) => {
             if (!collapsible || !toggleOnHeaderClick || disabled)
                 return;
             if (e.key === "Enter" || e.key === " ") {
@@ -96,11 +300,23 @@ export function SgCard(props) {
                 toggle();
             }
         }, "aria-expanded": collapsible ? isOpen : undefined, children: header })) : (renderDefaultHeader);
-    const collapsibleBodyWrapper = collapsible ? (_jsx("div", { className: cn("grid transition-all duration-200 ease-out motion-reduce:transition-none", isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"), children: _jsxs("div", { className: "overflow-hidden", children: [_jsx("div", { className: cn(sizeClasses.body, bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("border-t border-border/60", sizeClasses.footer, footerClassName), children: footer })) : null] }) })) : null;
+    const collapsibleBodyWrapper = collapsible ? (_jsx("div", { className: cn("grid transition-all duration-200 ease-out motion-reduce:transition-none", isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"), children: _jsxs("div", { className: isOpen ? "overflow-visible" : "overflow-hidden", children: [_jsx("div", { className: cn(sizeClasses.body, bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("border-t border-border/60", sizeClasses.footer, footerClassName), style: bgColorFooter ? { backgroundColor: bgColorFooter } : undefined, children: footer })) : null] }) })) : null;
     const bodyNode = !collapsible ? _jsx("div", { className: cn(sizeClasses.body, bodyClassName), children: children }) : null;
-    const footerNode = !collapsible && footer ? (_jsx("div", { className: cn("border-t border-border/60", sizeClasses.footer, footerClassName), children: footer })) : null;
+    const footerNode = !collapsible && footer ? (_jsx("div", { className: cn("border-t border-border/60", sizeClasses.footer, footerClassName), style: bgColorFooter ? { backgroundColor: bgColorFooter } : undefined, children: footer })) : null;
     const Component = isInteractive ? "button" : "section";
     const buttonLikeProps = isInteractive ? { type: "button", onClick: disabled ? undefined : onClick, disabled } : {};
-    return (_jsxs(Component, { className: rootClasses, ...buttonLikeProps, ...rest, children: [headerNode, collapsible ? collapsibleBodyWrapper : null, !collapsible ? bodyNode : null, !collapsible ? footerNode : null] }));
+    const passiveOnClickProps = !isInteractive && typeof onClick === "function" ? { onClick: disabled ? undefined : onClick } : {};
+    const roundedDragX = Math.round(dragPosition.x);
+    const roundedDragY = Math.round(dragPosition.y);
+    const shouldApplyDragTransform = draggable && (dragging || roundedDragX !== 0 || roundedDragY !== 0);
+    const rootStyle = {
+        ...style,
+        backgroundColor: bgColor ?? style?.backgroundColor,
+        transform: shouldApplyDragTransform
+            ? mergeTransforms(style?.transform, `translate3d(${roundedDragX}px, ${roundedDragY}px, 0)`)
+            : style?.transform,
+        willChange: shouldApplyDragTransform ? "transform" : style?.willChange
+    };
+    return (_jsxs(Component, { id: id, className: rootClasses, style: rootStyle, ...buttonLikeProps, ...passiveOnClickProps, ...rest, children: [headerNode, collapsible ? collapsibleBodyWrapper : null, !collapsible ? bodyNode : null, !collapsible ? footerNode : null] }));
 }
 SgCard.displayName = "SgCard";

package/dist/overlay/SgConfirmationDialog.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { type SgButtonProps } from "../buttons/SgButton";
+import { type SgDialogProps, type SgDialogSeverity } from "./SgDialog";
+export type SgConfirmationDialogButtonConfig = {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    severity?: SgButtonProps["severity"];
+    appearance?: SgButtonProps["appearance"];
+    shape?: SgButtonProps["shape"];
+    disabled?: boolean;
+    className?: string;
+    onClick?: () => void;
+};
+export type SgConfirmationDialogProps = Omit<SgDialogProps, "title" | "children" | "footer" | "severity" | "shadow" | "showTopAccent"> & {
+    title?: React.ReactNode;
+    message?: React.ReactNode;
+    icon?: React.ReactNode;
+    iconPlacement?: "left" | "top";
+    severity?: SgDialogSeverity;
+    customColor?: SgDialogProps["customColor"];
+    elevation?: SgDialogProps["elevation"];
+    showSeverityAccent?: boolean;
+    cancelButton?: SgConfirmationDialogButtonConfig;
+    confirmButton?: SgConfirmationDialogButtonConfig;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    closeOnCancel?: boolean;
+    closeOnConfirm?: boolean;
+};
+export declare function SgConfirmationDialog(props: Readonly<SgConfirmationDialogProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgConfirmationDialog {
+    var displayName: string;
+}
+//# sourceMappingURL=SgConfirmationDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgConfirmationDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,aAAa,EACb,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,CAC1E,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,gCAAgC,CAAC;IAChD,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAoEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,yBAAyB,CAAC,2CA2I9E;yBA3Ie,oBAAoB"}

package/dist/overlay/SgConfirmationDialog.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { SgButton } from "../buttons/SgButton";
+import { t, useComponentsI18n } from "../i18n";
+import { SgDialog } from "./SgDialog";
+function resolveButtonSeverity(dialogSeverity, fallback) {
+    if (!dialogSeverity || dialogSeverity === "plain")
+        return fallback;
+    return dialogSeverity;
+}
+function DefaultCancelIcon() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+function DefaultConfirmIcon() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: _jsx("path", { d: "M5 12l5 5L20 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DefaultInfoSeverityIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", className: "size-5 text-sky-600", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 10v6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "7", r: "1.25", fill: "currentColor" })] }));
+}
+function DefaultWarningSeverityIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", className: "size-5 text-amber-600", "aria-hidden": "true", children: [_jsx("path", { d: "M12 3L22 20H2L12 3z", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }), _jsx("path", { d: "M12 9v5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "17.25", r: "1.1", fill: "currentColor" })] }));
+}
+function DefaultDangerSeverityIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", className: "size-5 text-red-600", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M9 9l6 6M15 9l-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
+}
+function defaultSeverityIcon(severity) {
+    switch (severity) {
+        case "info":
+            return _jsx(DefaultInfoSeverityIcon, {});
+        case "warning":
+            return _jsx(DefaultWarningSeverityIcon, {});
+        case "danger":
+            return _jsx(DefaultDangerSeverityIcon, {});
+        default:
+            return undefined;
+    }
+}
+export function SgConfirmationDialog(props) {
+    const { open: openProp, defaultOpen = false, onOpenChange, onClose, title, message, icon, iconPlacement = "left", severity = "warning", customColor, elevation, showSeverityAccent = false, cancelButton, confirmButton, onCancel, onConfirm, closeOnCancel = true, closeOnConfirm = true, closeable = false, size = "sm", ...dialogProps } = props;
+    const i18n = useComponentsI18n();
+    const isControlled = openProp !== undefined;
+    const [openUncontrolled, setOpenUncontrolled] = React.useState(defaultOpen);
+    const open = isControlled ? Boolean(openProp) : openUncontrolled;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setOpenUncontrolled(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const fireCancel = React.useCallback(() => {
+        cancelButton?.onClick?.();
+        onCancel?.();
+    }, [cancelButton, onCancel]);
+    const handleCancel = React.useCallback(() => {
+        fireCancel();
+        if (closeOnCancel)
+            setOpen(false);
+    }, [fireCancel, closeOnCancel, setOpen]);
+    const handleConfirm = React.useCallback(() => {
+        confirmButton?.onClick?.();
+        onConfirm?.();
+        if (closeOnConfirm)
+            setOpen(false);
+    }, [confirmButton, onConfirm, closeOnConfirm, setOpen]);
+    const handleDialogOpenChange = React.useCallback((next) => {
+        if (!next && open) {
+            fireCancel();
+        }
+        setOpen(next);
+    }, [open, fireCancel, setOpen]);
+    const cancelLabel = cancelButton?.label ?? t(i18n, "components.actions.cancel");
+    const confirmLabel = confirmButton?.label ?? t(i18n, "components.actions.confirm");
+    const cancelIcon = cancelButton?.icon ?? _jsx(DefaultCancelIcon, {});
+    const confirmIcon = confirmButton?.icon ?? _jsx(DefaultConfirmIcon, {});
+    const resolvedIcon = icon !== undefined ? icon : defaultSeverityIcon(severity);
+    const cancelSeverity = cancelButton?.severity ?? "secondary";
+    const confirmSeverity = confirmButton?.severity ?? resolveButtonSeverity(severity, "primary");
+    const messageBlock = (_jsx("div", { className: "text-sm text-muted-foreground", children: message }));
+    return (_jsx(SgDialog, { ...dialogProps, open: open, onOpenChange: handleDialogOpenChange, onClose: onClose, closeable: closeable, severity: severity, showTopAccent: showSeverityAccent, customColor: customColor, elevation: elevation, title: title, size: size, footer: (_jsxs(_Fragment, { children: [_jsx(SgButton, { size: "sm", appearance: cancelButton?.appearance ?? "ghost", severity: cancelSeverity, shape: cancelButton?.shape ?? "rounded", disabled: cancelButton?.disabled, className: cancelButton?.className, leftIcon: cancelIcon, onClick: handleCancel, children: cancelLabel }), _jsx(SgButton, { size: "sm", appearance: confirmButton?.appearance ?? "solid", severity: confirmSeverity, shape: confirmButton?.shape ?? "rounded", disabled: confirmButton?.disabled, className: confirmButton?.className, leftIcon: confirmIcon, onClick: handleConfirm, children: confirmLabel })] })), children: resolvedIcon ? (iconPlacement === "top" ? (_jsxs("div", { className: "flex flex-col items-start gap-3", children: [_jsx("div", { className: "shrink-0", children: resolvedIcon }), messageBlock] })) : (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "shrink-0", children: resolvedIcon }), _jsx("div", { className: "min-w-0", children: messageBlock })] }))) : (messageBlock) }));
+}
+SgConfirmationDialog.displayName = "SgConfirmationDialog";

package/dist/overlay/SgDialog.d.ts

@@ -19,6 +19,11 @@ export type SgDialogProps = {
     autoCloseMs?: number;
     className?: string;
     style?: React.CSSProperties;
+    customColor?: React.CSSProperties["backgroundColor"];
+    elevation?: "none" | "sm" | "md" | "lg" | React.CSSProperties["boxShadow"];
+    /** @deprecated use elevation */
+    shadow?: React.CSSProperties["boxShadow"];
+    showTopAccent?: boolean;
     overlayClassName?: string;
     contentClassName?: string;
     headerClassName?: string;

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,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;AAuDF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAuPtD;yBAvPe,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;AA2EF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAmQtD;yBAnQe,QAAQ"}

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, style, 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), 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), 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" }) }));