gantri-components 2.243.2 → 2.244.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,11 +10,13 @@ export declare const StyledModalBody: import("styled-components/dist/types").ISt
|
|
|
10
10
|
noTopSpacing?: boolean | undefined;
|
|
11
11
|
} & {
|
|
12
12
|
$height?: ResolutionAwareProp<Property.Height<0 | (string & {})>> | undefined;
|
|
13
|
+
$surface?: "solid" | "dynamic" | undefined;
|
|
13
14
|
$width?: ResolutionAwareProp<Property.Width<0 | (string & {})>> | undefined;
|
|
14
15
|
}>> & string;
|
|
15
16
|
export declare const StyledModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../stack/stack.types").StackProps & import("react").RefAttributes<import("../stack/stack.types").StackProps>, "ref"> & {
|
|
16
17
|
ref?: ((instance: import("../stack/stack.types").StackProps | null) => void) | import("react").RefObject<import("../stack/stack.types").StackProps> | null | undefined;
|
|
17
18
|
}, {
|
|
19
|
+
$floatingFooter?: boolean | undefined;
|
|
18
20
|
isFullScreen?: boolean | undefined;
|
|
19
21
|
noTopSpacing?: boolean | undefined;
|
|
20
22
|
}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../stack/stack.types").StackProps & import("react").RefAttributes<import("../stack/stack.types").StackProps>>, keyof import("react").Component<any, {}, any>>;
|
|
@@ -30,10 +32,19 @@ export declare const StyledDetailsPanelContainer: import("styled-components/dist
|
|
|
30
32
|
export declare const StyledModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
|
|
31
33
|
$borderBottom?: Property.Border<0 | (string & {})> | undefined;
|
|
32
34
|
$closeable?: boolean | undefined;
|
|
35
|
+
$dynamicSurface?: boolean | undefined;
|
|
36
|
+
$noBorder?: boolean | undefined;
|
|
33
37
|
isFullScreen?: boolean | undefined;
|
|
34
38
|
}>> & string;
|
|
39
|
+
export declare const StyledDynamicGlow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
40
|
+
$tone: 'dark' | 'light';
|
|
41
|
+
}>> & string;
|
|
42
|
+
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;
|
|
35
43
|
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>, {
|
|
44
|
+
$floating?: boolean | undefined;
|
|
36
45
|
$hasBorder: boolean;
|
|
37
46
|
}>> & string;
|
|
38
|
-
export declare const StyledModalBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").
|
|
47
|
+
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>, {
|
|
48
|
+
$surface?: "solid" | "dynamic" | undefined;
|
|
49
|
+
}>> & string;
|
|
39
50
|
export declare const StyledModalCloseButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
@@ -2,6 +2,7 @@ import { Property } from 'csstype';
|
|
|
2
2
|
import { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
3
3
|
import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
|
|
4
4
|
import { StackProps } from '../stack/stack.types';
|
|
5
|
+
export type ModalSurface = 'solid' | 'dynamic';
|
|
5
6
|
export interface ModalProps {
|
|
6
7
|
bodyStyle?: CSSProperties;
|
|
7
8
|
closeable?: boolean;
|
|
@@ -24,6 +25,18 @@ export interface ModalProps {
|
|
|
24
25
|
/** Applies to mobile/tablet only. */
|
|
25
26
|
noTopSpacing?: boolean;
|
|
26
27
|
onClose?: () => void;
|
|
28
|
+
/**
|
|
29
|
+
* Visual treatment of the modal.
|
|
30
|
+
*
|
|
31
|
+
* - `'solid'` (default): classic flat surface with the existing styles.
|
|
32
|
+
* Preserves backward compatibility for every modal already in the app.
|
|
33
|
+
* - `'dynamic'`: layered translucent "diffuser" surface for modern themes
|
|
34
|
+
* (luminosity + overlay blends, 128px backdrop blur, inner glow, 32px
|
|
35
|
+
* border-radius). Header stays static at the top, content scrolls in
|
|
36
|
+
* the middle, and the footer floats over the bottom of the content.
|
|
37
|
+
* On classic themes this falls back to the solid look.
|
|
38
|
+
*/
|
|
39
|
+
surface?: ModalSurface;
|
|
27
40
|
/** Ignored if `isFullScreen` is `true`. */
|
|
28
41
|
top?: ResolutionAwareProp<Property.Top>;
|
|
29
42
|
width?: ResolutionAwareProp<Property.Width>;
|