@sproutsocial/seeds-react-modal 1.0.2 → 1.0.3

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.
Files changed (54) hide show
  1. package/.turbo/turbo-build.log +39 -19
  2. package/CHANGELOG.md +8 -0
  3. package/dist/Modal-ki8oiGbC.d.mts +69 -0
  4. package/dist/Modal-ki8oiGbC.d.ts +69 -0
  5. package/dist/ModalRail-OQ8DZ1vH.d.mts +178 -0
  6. package/dist/ModalRail-OQ8DZ1vH.d.ts +178 -0
  7. package/dist/esm/chunk-GKQRFPCX.js +642 -0
  8. package/dist/esm/chunk-GKQRFPCX.js.map +1 -0
  9. package/dist/esm/chunk-IYDY4OPB.js +237 -0
  10. package/dist/esm/chunk-IYDY4OPB.js.map +1 -0
  11. package/dist/esm/index.js +28 -235
  12. package/dist/esm/index.js.map +1 -1
  13. package/dist/esm/v1/index.js +9 -0
  14. package/dist/esm/v1/index.js.map +1 -0
  15. package/dist/esm/v2/index.js +39 -0
  16. package/dist/esm/v2/index.js.map +1 -0
  17. package/dist/index.d.mts +11 -66
  18. package/dist/index.d.ts +11 -66
  19. package/dist/index.js +658 -17
  20. package/dist/index.js.map +1 -1
  21. package/dist/v1/index.d.mts +11 -0
  22. package/dist/v1/index.d.ts +11 -0
  23. package/dist/v1/index.js +273 -0
  24. package/dist/v1/index.js.map +1 -0
  25. package/dist/v2/index.d.mts +26 -0
  26. package/dist/v2/index.d.ts +26 -0
  27. package/dist/v2/index.js +694 -0
  28. package/dist/v2/index.js.map +1 -0
  29. package/package.json +33 -13
  30. package/src/Modal.stories.tsx +1 -1
  31. package/src/__tests__/v1/Modal.test.tsx +134 -0
  32. package/src/__tests__/v1/Modal.typetest.tsx +209 -0
  33. package/src/index.ts +36 -3
  34. package/src/shared/constants.ts +28 -0
  35. package/src/v1/Modal.tsx +159 -0
  36. package/src/v1/ModalTypes.ts +67 -0
  37. package/src/v1/index.ts +14 -0
  38. package/src/v1/styles.tsx +141 -0
  39. package/src/v2/ModalV2.stories.tsx +282 -0
  40. package/src/v2/ModalV2.tsx +306 -0
  41. package/src/v2/ModalV2Styles.tsx +150 -0
  42. package/src/v2/ModalV2Types.ts +158 -0
  43. package/src/v2/components/ModalClose.tsx +29 -0
  44. package/src/v2/components/ModalCloseButton.tsx +100 -0
  45. package/src/v2/components/ModalContent.tsx +16 -0
  46. package/src/v2/components/ModalDescription.tsx +19 -0
  47. package/src/v2/components/ModalFooter.tsx +20 -0
  48. package/src/v2/components/ModalHeader.tsx +52 -0
  49. package/src/v2/components/ModalRail.tsx +121 -0
  50. package/src/v2/components/ModalTrigger.tsx +39 -0
  51. package/src/v2/components/index.ts +8 -0
  52. package/src/v2/index.ts +37 -0
  53. package/tsconfig.json +7 -1
  54. package/tsup.config.ts +5 -1
@@ -1,21 +1,41 @@
1
1
  yarn run v1.22.22
2
2
  $ tsup --dts
3
- CLI Building entry: src/index.ts
4
- CLI Using tsconfig: tsconfig.json
5
- CLI tsup v8.0.2
6
- CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-modal/tsup.config.ts
7
- CLI Target: es2022
8
- CLI Cleaning output folder
9
- CJS Build start
10
- ESM Build start
11
- ESM dist/esm/index.js 7.18 KB
12
- ESM dist/esm/index.js.map 14.55 KB
13
- ESM ⚡️ Build success in 145ms
14
- CJS dist/index.js 9.96 KB
15
- CJS dist/index.js.map 14.76 KB
16
- CJS ⚡️ Build success in 145ms
17
- DTS Build start
18
- DTS ⚡️ Build success in 14377ms
19
- DTS dist/index.d.ts 2.51 KB
20
- DTS dist/index.d.mts 2.51 KB
21
- Done in 18.80s.
3
+ CLI Building entry: {"index":"src/index.ts","v1/index":"src/v1/index.ts","v2/index":"src/v2/index.ts"}
4
+ CLI Using tsconfig: tsconfig.json
5
+ CLI tsup v8.5.0
6
+ CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-modal/tsup.config.ts
7
+ CLI Target: es2022
8
+ CLI Cleaning output folder
9
+ CJS Build start
10
+ ESM Build start
11
+ CJS dist/index.js 30.11 KB
12
+ CJS dist/v1/index.js 9.86 KB
13
+ CJS dist/v2/index.js 22.24 KB
14
+ CJS dist/index.js.map 49.62 KB
15
+ CJS dist/v1/index.js.map 13.03 KB
16
+ CJS dist/v2/index.js.map 36.20 KB
17
+ CJS ⚡️ Build success in 170ms
18
+ ESM dist/esm/index.js 567.00 B
19
+ ESM dist/esm/v1/index.js 165.00 B
20
+ ESM dist/esm/v2/index.js 750.00 B
21
+ ESM dist/esm/chunk-IYDY4OPB.js 7.12 KB
22
+ ESM dist/esm/chunk-GKQRFPCX.js 18.04 KB
23
+ ESM dist/esm/index.js.map 963.00 B
24
+ ESM dist/esm/v1/index.js.map 71.00 B
25
+ ESM dist/esm/v2/index.js.map 71.00 B
26
+ ESM dist/esm/chunk-IYDY4OPB.js.map 12.85 KB
27
+ ESM dist/esm/chunk-GKQRFPCX.js.map 34.97 KB
28
+ ESM ⚡️ Build success in 173ms
29
+ DTS Build start
30
+ DTS ⚡️ Build success in 25917ms
31
+ DTS dist/index.d.ts 973.00 B
32
+ DTS dist/v1/index.d.ts 413.00 B
33
+ DTS dist/v2/index.d.ts 1.33 KB
34
+ DTS dist/Modal-ki8oiGbC.d.ts 2.52 KB
35
+ DTS dist/ModalRail-OQ8DZ1vH.d.ts 7.43 KB
36
+ DTS dist/index.d.mts 976.00 B
37
+ DTS dist/v1/index.d.mts 415.00 B
38
+ DTS dist/v2/index.d.mts 1.33 KB
39
+ DTS dist/Modal-ki8oiGbC.d.mts 2.52 KB
40
+ DTS dist/ModalRail-OQ8DZ1vH.d.mts 7.43 KB
41
+ Done in 29.15s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @sproutsocial/seeds-react-modal
2
2
 
3
+ ## 1.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - 77df4d9: Build a work in progress v2 modal
8
+ - Updated dependencies [ad1ddfa]
9
+ - @sproutsocial/seeds-react-theme@2.4.0
10
+
3
11
  ## 1.0.2
4
12
 
5
13
  ### Patch Changes
@@ -0,0 +1,69 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import ReactModal from 'react-modal';
4
+ import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
5
+ import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
6
+
7
+ interface TypeModalCloseButtonProps extends Omit<TypeButtonProps, "children"> {
8
+ children?: void | null;
9
+ }
10
+ interface TypeModalHeaderProps extends TypeBoxProps {
11
+ title?: string;
12
+ subtitle?: string;
13
+ /** Passing children will override the default modal header */
14
+ children?: React.ReactNode;
15
+ /** If you're rendering a custom header, you can use this prop to add a bottom border */
16
+ bordered?: boolean;
17
+ }
18
+ interface TypeModalFooterProps extends TypeBoxProps {
19
+ bg?: string;
20
+ children: React.ReactNode;
21
+ }
22
+ interface TypeModalContentProps extends TypeBoxProps {
23
+ children?: React.ReactNode;
24
+ }
25
+ interface TypeModalProps extends TypeContainerProps, Omit<ReactModal.Props, keyof TypeContainerProps | "onRequestClose"> {
26
+ /** section of app to aria hide for the modal */
27
+ appElementSelector?: string;
28
+ /** trigger to open or close the modal */
29
+ isOpen: boolean;
30
+ /** label for screen readers to announce the modal */
31
+ label: string;
32
+ /** body content of the modal */
33
+ children: React.ReactNode;
34
+ /** callback for close */
35
+ onClose?: () => void;
36
+ /** aria-label for modal X */
37
+ closeButtonLabel: string;
38
+ /** Controls the z-index CSS property */
39
+ zIndex?: number;
40
+ /** The max width of the modal container */
41
+ width?: string | number;
42
+ /**
43
+ * Custom attributes to be added to the modals container
44
+ * Each key will be prepended with "data-" when rendered in the DOM
45
+ */
46
+ data?: Record<string, string | boolean | number>;
47
+ }
48
+
49
+ /**
50
+ * The modal you want
51
+ */
52
+ declare const Modal: {
53
+ (props: TypeModalProps): react_jsx_runtime.JSX.Element;
54
+ Header: {
55
+ (props: TypeModalHeaderProps): react_jsx_runtime.JSX.Element;
56
+ displayName: string;
57
+ };
58
+ Footer: {
59
+ ({ bg, ...rest }: TypeModalFooterProps): react_jsx_runtime.JSX.Element;
60
+ displayName: string;
61
+ };
62
+ Content: React.ForwardRefExoticComponent<Omit<TypeModalContentProps, "ref"> & React.RefAttributes<unknown>>;
63
+ CloseButton: {
64
+ (props: TypeModalCloseButtonProps): react_jsx_runtime.JSX.Element | null;
65
+ displayName: string;
66
+ };
67
+ };
68
+
69
+ export { Modal as M, type TypeModalProps as T, type TypeModalHeaderProps as a, type TypeModalFooterProps as b, type TypeModalContentProps as c, type TypeModalCloseButtonProps as d };
@@ -0,0 +1,69 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import ReactModal from 'react-modal';
4
+ import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
5
+ import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
6
+
7
+ interface TypeModalCloseButtonProps extends Omit<TypeButtonProps, "children"> {
8
+ children?: void | null;
9
+ }
10
+ interface TypeModalHeaderProps extends TypeBoxProps {
11
+ title?: string;
12
+ subtitle?: string;
13
+ /** Passing children will override the default modal header */
14
+ children?: React.ReactNode;
15
+ /** If you're rendering a custom header, you can use this prop to add a bottom border */
16
+ bordered?: boolean;
17
+ }
18
+ interface TypeModalFooterProps extends TypeBoxProps {
19
+ bg?: string;
20
+ children: React.ReactNode;
21
+ }
22
+ interface TypeModalContentProps extends TypeBoxProps {
23
+ children?: React.ReactNode;
24
+ }
25
+ interface TypeModalProps extends TypeContainerProps, Omit<ReactModal.Props, keyof TypeContainerProps | "onRequestClose"> {
26
+ /** section of app to aria hide for the modal */
27
+ appElementSelector?: string;
28
+ /** trigger to open or close the modal */
29
+ isOpen: boolean;
30
+ /** label for screen readers to announce the modal */
31
+ label: string;
32
+ /** body content of the modal */
33
+ children: React.ReactNode;
34
+ /** callback for close */
35
+ onClose?: () => void;
36
+ /** aria-label for modal X */
37
+ closeButtonLabel: string;
38
+ /** Controls the z-index CSS property */
39
+ zIndex?: number;
40
+ /** The max width of the modal container */
41
+ width?: string | number;
42
+ /**
43
+ * Custom attributes to be added to the modals container
44
+ * Each key will be prepended with "data-" when rendered in the DOM
45
+ */
46
+ data?: Record<string, string | boolean | number>;
47
+ }
48
+
49
+ /**
50
+ * The modal you want
51
+ */
52
+ declare const Modal: {
53
+ (props: TypeModalProps): react_jsx_runtime.JSX.Element;
54
+ Header: {
55
+ (props: TypeModalHeaderProps): react_jsx_runtime.JSX.Element;
56
+ displayName: string;
57
+ };
58
+ Footer: {
59
+ ({ bg, ...rest }: TypeModalFooterProps): react_jsx_runtime.JSX.Element;
60
+ displayName: string;
61
+ };
62
+ Content: React.ForwardRefExoticComponent<Omit<TypeModalContentProps, "ref"> & React.RefAttributes<unknown>>;
63
+ CloseButton: {
64
+ (props: TypeModalCloseButtonProps): react_jsx_runtime.JSX.Element | null;
65
+ displayName: string;
66
+ };
67
+ };
68
+
69
+ export { Modal as M, type TypeModalProps as T, type TypeModalHeaderProps as a, type TypeModalFooterProps as b, type TypeModalContentProps as c, type TypeModalCloseButtonProps as d };
@@ -0,0 +1,178 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import * as Dialog from '@radix-ui/react-dialog';
4
+ import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
5
+ import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
6
+ import { TypeIconName } from '@sproutsocial/seeds-react-icon';
7
+
8
+ interface TypeModalV2TriggerProps extends TypeButtonProps {
9
+ /** The content to display inside the trigger button */
10
+ children: React.ReactNode;
11
+ /** Custom click handler - will be called before the modal opens */
12
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
13
+ /** Use asChild to render a custom trigger element */
14
+ asChild?: boolean;
15
+ }
16
+ interface TypeModalV2CloseButtonProps extends Omit<TypeButtonProps, "children" | "size"> {
17
+ children?: React.ReactNode;
18
+ /** Custom click handler - will be called before the modal closes */
19
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
20
+ /** Use asChild to render a custom close element */
21
+ asChild?: boolean;
22
+ /** aria-label for modal close button */
23
+ closeButtonLabel?: string;
24
+ /** Size of the close button in pixels */
25
+ size?: number;
26
+ /** Position type - absolute (outside modal) or relative (inside modal) */
27
+ position?: "absolute" | "relative";
28
+ /** Which side to position the button on (for absolute positioning) */
29
+ side?: "right" | "left";
30
+ /** Offset from the modal edge in pixels (for absolute positioning) */
31
+ offset?: number;
32
+ }
33
+ interface TypeModalV2HeaderProps extends TypeBoxProps {
34
+ title?: string;
35
+ subtitle?: string;
36
+ /** Passing children will override the default modal header */
37
+ children?: React.ReactNode;
38
+ /** If you're rendering a custom header, you can use this prop to add a bottom border */
39
+ bordered?: boolean;
40
+ /** Additional props for the Dialog.Title when title is provided */
41
+ titleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Title>, "asChild" | "children">;
42
+ /** Additional props for the Dialog.Description when subtitle is provided */
43
+ subtitleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
44
+ /** Opt-in inline close inside header; default is floating rail */
45
+ showInlineClose?: boolean;
46
+ }
47
+ interface TypeModalV2FooterProps extends TypeBoxProps {
48
+ bg?: string;
49
+ children: React.ReactNode;
50
+ }
51
+ interface TypeModalV2ContentProps extends TypeBoxProps {
52
+ children?: React.ReactNode;
53
+ }
54
+ interface TypeModalV2DescriptionProps extends TypeBoxProps {
55
+ children: React.ReactNode;
56
+ /** Additional props for the Dialog.Description */
57
+ descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
58
+ }
59
+ interface TypeModalV2Props extends TypeContainerProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> {
60
+ /** Controls whether the modal is open (controlled mode) */
61
+ open?: boolean;
62
+ /** Default open state for uncontrolled mode */
63
+ defaultOpen?: boolean;
64
+ /** body content of the modal */
65
+ children: React.ReactNode;
66
+ /** Callback when open state changes */
67
+ onOpenChange?: (open: boolean) => void;
68
+ /** The element that will trigger the modal when clicked.
69
+ * Can be any React element like a button, link, or custom component. */
70
+ modalTrigger?: React.ReactElement<any>;
71
+ /** Enable draggable functionality using react-dnd */
72
+ draggable?: boolean;
73
+ /** Simplified API: Modal title (creates ModalHeader automatically) */
74
+ title?: string;
75
+ /** Simplified API: Modal subtitle (creates ModalHeader automatically) */
76
+ subtitle?: string;
77
+ /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
78
+ description?: string;
79
+ /** Modal size preset or custom width */
80
+ size?: "small" | "medium" | "large" | "full" | string | number;
81
+ /** Priority level that maps to z-index presets */
82
+ priority?: "low" | "medium" | "high";
83
+ /**
84
+ * Custom attributes to be added to the modals container
85
+ * Each key will be prepended with "data-" when rendered in the DOM
86
+ */
87
+ data?: Record<string, string | boolean | number>;
88
+ /** Whether to show the background overlay (defaults to true) */
89
+ showOverlay?: boolean;
90
+ /** Optional quick actions to render on a modal side rail */
91
+ actions?: TypeModalActionProps[];
92
+ /** Optional props to customize the side rail position/size */
93
+ railProps?: Partial<TypeModalRailProps>;
94
+ }
95
+ type TypeModalRailProps = {
96
+ side?: "right" | "left";
97
+ offset?: number;
98
+ gap?: number;
99
+ size?: number;
100
+ collapseAt?: number;
101
+ children?: React.ReactNode;
102
+ };
103
+ type ModalActionBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
104
+ /** Icon name from the Seeds icon set */
105
+ iconName?: TypeIconName;
106
+ /** Optional click handler; ignored for type "close" */
107
+ onClick?: () => void;
108
+ /** Accessible name for the action button */
109
+ "aria-label": string;
110
+ };
111
+ type TypeModalActionProps = (ModalActionBase & {
112
+ actionType: "close";
113
+ }) | (ModalActionBase & {
114
+ actionType?: "button";
115
+ });
116
+
117
+ /**
118
+ * The modal you want - with Radix UI Dialog
119
+ *
120
+ * Features:
121
+ * - Built with Radix UI Dialog for superior accessibility
122
+ * - Same API as the original Modal component
123
+ * - Automatic focus management and keyboard navigation
124
+ * - Portal rendering for proper z-index layering
125
+ * - Customizable styling through system props
126
+ * - Optional draggable functionality using react-dnd
127
+ */
128
+ declare const Modal: (props: TypeModalV2Props) => react_jsx_runtime.JSX.Element;
129
+
130
+ declare const ModalHeader: {
131
+ (props: TypeModalV2HeaderProps): react_jsx_runtime.JSX.Element;
132
+ displayName: string;
133
+ };
134
+
135
+ declare const ModalFooter: {
136
+ (props: TypeModalV2FooterProps): react_jsx_runtime.JSX.Element;
137
+ displayName: string;
138
+ };
139
+
140
+ declare const ModalContent: React.ForwardRefExoticComponent<Omit<TypeModalV2ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
141
+
142
+ declare const ModalDescription: React.ForwardRefExoticComponent<Omit<TypeModalV2DescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
143
+
144
+ declare const ModalCloseButton: {
145
+ (props: TypeModalV2CloseButtonProps): react_jsx_runtime.JSX.Element;
146
+ displayName: string;
147
+ };
148
+
149
+ /**
150
+ * A trigger button that opens the modal when clicked.
151
+ * Must be used inside a Modal component's Dialog.Root context.
152
+ * Uses Seeds Button by default but supports asChild for custom elements.
153
+ */
154
+ declare const ModalTrigger: {
155
+ (props: TypeModalV2TriggerProps): react_jsx_runtime.JSX.Element;
156
+ displayName: string;
157
+ };
158
+
159
+ interface ModalCloseProps {
160
+ children: React.ReactNode;
161
+ onClick?: (e: React.MouseEvent) => void;
162
+ asChild?: boolean;
163
+ }
164
+ /**
165
+ * A component that closes the modal when clicked.
166
+ * Uses asChild pattern like Radix primitives.
167
+ */
168
+ declare const ModalClose: {
169
+ (props: ModalCloseProps): react_jsx_runtime.JSX.Element;
170
+ displayName: string;
171
+ };
172
+
173
+ declare const ModalRail: React.FC<TypeModalRailProps>;
174
+ declare const ModalAction: React.FC<TypeModalActionProps & {
175
+ size?: number;
176
+ }>;
177
+
178
+ export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q };
@@ -0,0 +1,178 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import * as Dialog from '@radix-ui/react-dialog';
4
+ import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
5
+ import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
6
+ import { TypeIconName } from '@sproutsocial/seeds-react-icon';
7
+
8
+ interface TypeModalV2TriggerProps extends TypeButtonProps {
9
+ /** The content to display inside the trigger button */
10
+ children: React.ReactNode;
11
+ /** Custom click handler - will be called before the modal opens */
12
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
13
+ /** Use asChild to render a custom trigger element */
14
+ asChild?: boolean;
15
+ }
16
+ interface TypeModalV2CloseButtonProps extends Omit<TypeButtonProps, "children" | "size"> {
17
+ children?: React.ReactNode;
18
+ /** Custom click handler - will be called before the modal closes */
19
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
20
+ /** Use asChild to render a custom close element */
21
+ asChild?: boolean;
22
+ /** aria-label for modal close button */
23
+ closeButtonLabel?: string;
24
+ /** Size of the close button in pixels */
25
+ size?: number;
26
+ /** Position type - absolute (outside modal) or relative (inside modal) */
27
+ position?: "absolute" | "relative";
28
+ /** Which side to position the button on (for absolute positioning) */
29
+ side?: "right" | "left";
30
+ /** Offset from the modal edge in pixels (for absolute positioning) */
31
+ offset?: number;
32
+ }
33
+ interface TypeModalV2HeaderProps extends TypeBoxProps {
34
+ title?: string;
35
+ subtitle?: string;
36
+ /** Passing children will override the default modal header */
37
+ children?: React.ReactNode;
38
+ /** If you're rendering a custom header, you can use this prop to add a bottom border */
39
+ bordered?: boolean;
40
+ /** Additional props for the Dialog.Title when title is provided */
41
+ titleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Title>, "asChild" | "children">;
42
+ /** Additional props for the Dialog.Description when subtitle is provided */
43
+ subtitleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
44
+ /** Opt-in inline close inside header; default is floating rail */
45
+ showInlineClose?: boolean;
46
+ }
47
+ interface TypeModalV2FooterProps extends TypeBoxProps {
48
+ bg?: string;
49
+ children: React.ReactNode;
50
+ }
51
+ interface TypeModalV2ContentProps extends TypeBoxProps {
52
+ children?: React.ReactNode;
53
+ }
54
+ interface TypeModalV2DescriptionProps extends TypeBoxProps {
55
+ children: React.ReactNode;
56
+ /** Additional props for the Dialog.Description */
57
+ descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
58
+ }
59
+ interface TypeModalV2Props extends TypeContainerProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> {
60
+ /** Controls whether the modal is open (controlled mode) */
61
+ open?: boolean;
62
+ /** Default open state for uncontrolled mode */
63
+ defaultOpen?: boolean;
64
+ /** body content of the modal */
65
+ children: React.ReactNode;
66
+ /** Callback when open state changes */
67
+ onOpenChange?: (open: boolean) => void;
68
+ /** The element that will trigger the modal when clicked.
69
+ * Can be any React element like a button, link, or custom component. */
70
+ modalTrigger?: React.ReactElement<any>;
71
+ /** Enable draggable functionality using react-dnd */
72
+ draggable?: boolean;
73
+ /** Simplified API: Modal title (creates ModalHeader automatically) */
74
+ title?: string;
75
+ /** Simplified API: Modal subtitle (creates ModalHeader automatically) */
76
+ subtitle?: string;
77
+ /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
78
+ description?: string;
79
+ /** Modal size preset or custom width */
80
+ size?: "small" | "medium" | "large" | "full" | string | number;
81
+ /** Priority level that maps to z-index presets */
82
+ priority?: "low" | "medium" | "high";
83
+ /**
84
+ * Custom attributes to be added to the modals container
85
+ * Each key will be prepended with "data-" when rendered in the DOM
86
+ */
87
+ data?: Record<string, string | boolean | number>;
88
+ /** Whether to show the background overlay (defaults to true) */
89
+ showOverlay?: boolean;
90
+ /** Optional quick actions to render on a modal side rail */
91
+ actions?: TypeModalActionProps[];
92
+ /** Optional props to customize the side rail position/size */
93
+ railProps?: Partial<TypeModalRailProps>;
94
+ }
95
+ type TypeModalRailProps = {
96
+ side?: "right" | "left";
97
+ offset?: number;
98
+ gap?: number;
99
+ size?: number;
100
+ collapseAt?: number;
101
+ children?: React.ReactNode;
102
+ };
103
+ type ModalActionBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
104
+ /** Icon name from the Seeds icon set */
105
+ iconName?: TypeIconName;
106
+ /** Optional click handler; ignored for type "close" */
107
+ onClick?: () => void;
108
+ /** Accessible name for the action button */
109
+ "aria-label": string;
110
+ };
111
+ type TypeModalActionProps = (ModalActionBase & {
112
+ actionType: "close";
113
+ }) | (ModalActionBase & {
114
+ actionType?: "button";
115
+ });
116
+
117
+ /**
118
+ * The modal you want - with Radix UI Dialog
119
+ *
120
+ * Features:
121
+ * - Built with Radix UI Dialog for superior accessibility
122
+ * - Same API as the original Modal component
123
+ * - Automatic focus management and keyboard navigation
124
+ * - Portal rendering for proper z-index layering
125
+ * - Customizable styling through system props
126
+ * - Optional draggable functionality using react-dnd
127
+ */
128
+ declare const Modal: (props: TypeModalV2Props) => react_jsx_runtime.JSX.Element;
129
+
130
+ declare const ModalHeader: {
131
+ (props: TypeModalV2HeaderProps): react_jsx_runtime.JSX.Element;
132
+ displayName: string;
133
+ };
134
+
135
+ declare const ModalFooter: {
136
+ (props: TypeModalV2FooterProps): react_jsx_runtime.JSX.Element;
137
+ displayName: string;
138
+ };
139
+
140
+ declare const ModalContent: React.ForwardRefExoticComponent<Omit<TypeModalV2ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
141
+
142
+ declare const ModalDescription: React.ForwardRefExoticComponent<Omit<TypeModalV2DescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
143
+
144
+ declare const ModalCloseButton: {
145
+ (props: TypeModalV2CloseButtonProps): react_jsx_runtime.JSX.Element;
146
+ displayName: string;
147
+ };
148
+
149
+ /**
150
+ * A trigger button that opens the modal when clicked.
151
+ * Must be used inside a Modal component's Dialog.Root context.
152
+ * Uses Seeds Button by default but supports asChild for custom elements.
153
+ */
154
+ declare const ModalTrigger: {
155
+ (props: TypeModalV2TriggerProps): react_jsx_runtime.JSX.Element;
156
+ displayName: string;
157
+ };
158
+
159
+ interface ModalCloseProps {
160
+ children: React.ReactNode;
161
+ onClick?: (e: React.MouseEvent) => void;
162
+ asChild?: boolean;
163
+ }
164
+ /**
165
+ * A component that closes the modal when clicked.
166
+ * Uses asChild pattern like Radix primitives.
167
+ */
168
+ declare const ModalClose: {
169
+ (props: ModalCloseProps): react_jsx_runtime.JSX.Element;
170
+ displayName: string;
171
+ };
172
+
173
+ declare const ModalRail: React.FC<TypeModalRailProps>;
174
+ declare const ModalAction: React.FC<TypeModalActionProps & {
175
+ size?: number;
176
+ }>;
177
+
178
+ export { Modal as M, type TypeModalV2Props as T, ModalTrigger as a, ModalDescription as b, ModalHeader as c, ModalFooter as d, ModalContent as e, ModalCloseButton as f, ModalClose as g, ModalRail as h, ModalAction as i, type TypeModalV2TriggerProps as j, type TypeModalV2CloseButtonProps as k, type TypeModalV2HeaderProps as l, type TypeModalV2FooterProps as m, type TypeModalV2ContentProps as n, type TypeModalV2DescriptionProps as o, type TypeModalRailProps as p, type TypeModalActionProps as q };