gantri-components 2.248.1 → 2.249.0

package/dist/components/modal/modal.styles.d.ts

@@ -43,6 +43,7 @@ export declare const StyledDynamicGlow: import("styled-components/dist/types").I
 export declare const StyledDynamicCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     $floating?: boolean | undefined;
+    $fullWidth?: boolean | undefined;
     $hasBorder: boolean;
 }>> & string;
 export declare const StyledModalBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {

package/dist/components/modal/modal.types.d.ts

@@ -3,6 +3,22 @@ import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
 import { StackProps } from '../stack/stack.types';
 export type ModalSurface = 'solid' | 'dynamic';
+/**
+ * How the modal footer lays out its action(s).
+ *
+ * - `'auto'` (default):
+ *     * Solid surface — the existing grid layout (`auto-fit, 1fr`), each
+ *       child button gets equal width.
+ *     * Dynamic surface — footer floats centered at the bottom; children
+ *       take their natural width and sit side-by-side, centered.
+ * - `'fullWidth'`:
+ *     * Solid surface — unchanged (already full-width via grid auto-fit).
+ *     * Dynamic surface — footer floats across the full content width,
+ *       respecting the modal's horizontal padding. A single primary
+ *       button stretches edge-to-edge; multiple children share the row
+ *       with `flex: 1` each.
+ */
+export type ModalFooterLayout = 'auto' | 'fullWidth';
 export interface ModalProps {
     bodyStyle?: CSSProperties;
     closeable?: boolean;
@@ -14,6 +30,12 @@ export interface ModalProps {
     /** Applies to desktop only. */
     detailsPanelWidth?: Property.Width;
     footer?: ReactElement;
+    /**
+     * Controls how the footer lays out its action(s). Defaults to
+     * `'auto'` (centered for dynamic, grid for solid). Use `'fullWidth'`
+     * to stretch a single primary action across the modal width.
+     */
+    footerLayout?: ModalFooterLayout;
     header?: ReactNode;
     headerBorderBottom?: Property.Border;
     headerStyle?: CSSProperties;