@optilogic/core 1.3.7 → 1.4.0
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.
- package/dist/index.cjs +8 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -4
- package/dist/index.d.ts +23 -4
- package/dist/index.js +8 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/modal.tsx +29 -4
package/package.json
CHANGED
package/src/components/modal.tsx
CHANGED
|
@@ -31,9 +31,10 @@ export interface ModalProps {
|
|
|
31
31
|
footer?: React.ReactNode;
|
|
32
32
|
|
|
33
33
|
/**
|
|
34
|
-
* Size variant
|
|
34
|
+
* Size variant. Maps to a `max-width` on the modal frame. For arbitrary
|
|
35
|
+
* widths, use `contentClassName` to override.
|
|
35
36
|
*/
|
|
36
|
-
size?: "sm" | "md" | "lg";
|
|
37
|
+
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
|
37
38
|
|
|
38
39
|
/**
|
|
39
40
|
* Z-index for stacking modals (default: 50)
|
|
@@ -41,9 +42,17 @@ export interface ModalProps {
|
|
|
41
42
|
zIndex?: number;
|
|
42
43
|
|
|
43
44
|
/**
|
|
44
|
-
* Additional class names for modal content
|
|
45
|
+
* Additional class names for the modal body (the scrollable content area).
|
|
45
46
|
*/
|
|
46
47
|
className?: string;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Additional class names for the modal frame (the outer card containing
|
|
51
|
+
* header, body, and footer). Merges with the `size` class — pass width
|
|
52
|
+
* utilities here to override the named size, e.g. `"max-w-[1200px]"` or
|
|
53
|
+
* `"w-[80vw] max-w-none"`.
|
|
54
|
+
*/
|
|
55
|
+
contentClassName?: string;
|
|
47
56
|
}
|
|
48
57
|
|
|
49
58
|
/**
|
|
@@ -65,6 +74,17 @@ export interface ModalProps {
|
|
|
65
74
|
* <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
|
|
66
75
|
* </footer>
|
|
67
76
|
* </Modal>
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* // Custom width override
|
|
80
|
+
* <Modal
|
|
81
|
+
* isOpen={open}
|
|
82
|
+
* onClose={() => setOpen(false)}
|
|
83
|
+
* title="Report"
|
|
84
|
+
* contentClassName="max-w-[1200px]"
|
|
85
|
+
* >
|
|
86
|
+
* ...
|
|
87
|
+
* </Modal>
|
|
68
88
|
*/
|
|
69
89
|
export function Modal({
|
|
70
90
|
isOpen,
|
|
@@ -75,6 +95,7 @@ export function Modal({
|
|
|
75
95
|
size = "md",
|
|
76
96
|
zIndex = 50,
|
|
77
97
|
className,
|
|
98
|
+
contentClassName,
|
|
78
99
|
}: ModalProps) {
|
|
79
100
|
React.useEffect(() => {
|
|
80
101
|
if (!isOpen) return;
|
|
@@ -107,6 +128,9 @@ export function Modal({
|
|
|
107
128
|
sm: "max-w-md",
|
|
108
129
|
md: "max-w-lg",
|
|
109
130
|
lg: "max-w-2xl",
|
|
131
|
+
xl: "max-w-4xl",
|
|
132
|
+
"2xl": "max-w-6xl",
|
|
133
|
+
full: "max-w-[95vw]",
|
|
110
134
|
};
|
|
111
135
|
|
|
112
136
|
return (
|
|
@@ -123,7 +147,8 @@ export function Modal({
|
|
|
123
147
|
"bg-card border border-border rounded-lg shadow-lg",
|
|
124
148
|
"flex flex-col",
|
|
125
149
|
"max-h-[90vh]",
|
|
126
|
-
sizeClasses[size]
|
|
150
|
+
sizeClasses[size],
|
|
151
|
+
contentClassName
|
|
127
152
|
)}
|
|
128
153
|
onClick={(e) => e.stopPropagation()}
|
|
129
154
|
>
|