@mieweb/ui 0.2.2 → 0.2.4
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/ag-grid.cjs +5 -5
- package/dist/ag-grid.js +1 -1
- package/dist/{chunk-I7L6CQXR.cjs → chunk-377KAB4C.cjs} +52 -31
- package/dist/chunk-377KAB4C.cjs.map +1 -0
- package/dist/chunk-3K7QCDSV.js +3 -0
- package/dist/{chunk-Y22SOAJM.js.map → chunk-3K7QCDSV.js.map} +1 -1
- package/dist/{chunk-QUA7WVHK.cjs → chunk-QIOM5ZV2.cjs} +2 -14
- package/dist/{chunk-QUA7WVHK.cjs.map → chunk-QIOM5ZV2.cjs.map} +1 -1
- package/dist/{chunk-SD44QJIP.js → chunk-TCQ27C5M.js} +52 -31
- package/dist/chunk-TCQ27C5M.js.map +1 -0
- package/dist/components/Modal/index.cjs +9 -9
- package/dist/components/Modal/index.js +1 -1
- package/dist/index.cjs +334 -363
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -6
- package/dist/index.d.ts +8 -6
- package/dist/index.js +177 -206
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunk-I7L6CQXR.cjs.map +0 -1
- package/dist/chunk-SD44QJIP.js.map +0 -1
- package/dist/chunk-Y22SOAJM.js +0 -3
package/dist/ag-grid.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkQIOM5ZV2_cjs = require('./chunk-QIOM5ZV2.cjs');
|
|
4
4
|
var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var agGridReact = require('ag-grid-react');
|
|
@@ -413,7 +413,7 @@ function EmailRenderer(props) {
|
|
|
413
413
|
className: "text-primary-600 dark:text-primary-400 inline-flex items-center gap-1.5 hover:underline",
|
|
414
414
|
onClick: (e) => e.stopPropagation(),
|
|
415
415
|
children: [
|
|
416
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
416
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkQIOM5ZV2_cjs.Mail, { className: "h-3 w-3 opacity-60" }),
|
|
417
417
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: value })
|
|
418
418
|
]
|
|
419
419
|
}
|
|
@@ -430,7 +430,7 @@ function PhoneRenderer(props) {
|
|
|
430
430
|
className: "text-foreground hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center gap-1.5",
|
|
431
431
|
onClick: (e) => e.stopPropagation(),
|
|
432
432
|
children: [
|
|
433
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
433
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkQIOM5ZV2_cjs.Phone, { className: "h-3 w-3 text-green-500 opacity-70" }),
|
|
434
434
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: displayValue })
|
|
435
435
|
]
|
|
436
436
|
}
|
|
@@ -450,7 +450,7 @@ function DomainRenderer(props) {
|
|
|
450
450
|
className: "text-primary-600 dark:text-primary-400 inline-flex items-center gap-1.5 hover:underline",
|
|
451
451
|
onClick: (e) => e.stopPropagation(),
|
|
452
452
|
children: [
|
|
453
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
453
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkQIOM5ZV2_cjs.Globe, { className: "h-3 w-3 opacity-60" }),
|
|
454
454
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayDomain })
|
|
455
455
|
]
|
|
456
456
|
}
|
|
@@ -547,7 +547,7 @@ function BooleanRenderer(props) {
|
|
|
547
547
|
isTrue ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400" : "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
|
|
548
548
|
),
|
|
549
549
|
children: [
|
|
550
|
-
isTrue ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
550
|
+
isTrue ? /* @__PURE__ */ jsxRuntime.jsx(chunkQIOM5ZV2_cjs.CheckCircle, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkQIOM5ZV2_cjs.Clock, { className: "h-3 w-3" }),
|
|
551
551
|
isTrue ? "Yes" : "No"
|
|
552
552
|
]
|
|
553
553
|
}
|
package/dist/ag-grid.js
CHANGED
|
@@ -33,7 +33,7 @@ var scrollLockState = {
|
|
|
33
33
|
originalOverflow: null};
|
|
34
34
|
var modalOverlayVariants = classVarianceAuthority.cva(
|
|
35
35
|
[
|
|
36
|
-
"fixed inset-0
|
|
36
|
+
"fixed inset-0",
|
|
37
37
|
"bg-black/50 backdrop-blur-sm",
|
|
38
38
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
39
39
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
|
|
@@ -45,10 +45,17 @@ var modalOverlayVariants = classVarianceAuthority.cva(
|
|
|
45
45
|
);
|
|
46
46
|
var modalContentVariants = classVarianceAuthority.cva(
|
|
47
47
|
[
|
|
48
|
-
"
|
|
49
|
-
"-
|
|
50
|
-
|
|
51
|
-
"
|
|
48
|
+
"relative w-full bg-card text-card-foreground",
|
|
49
|
+
"border border-border shadow-lg",
|
|
50
|
+
// Full-screen on mobile, rounded on larger screens
|
|
51
|
+
"rounded-none sm:rounded-xl",
|
|
52
|
+
"flex flex-col",
|
|
53
|
+
// Full viewport height on mobile, constrained on larger screens
|
|
54
|
+
"max-h-dvh sm:max-h-[calc(100dvh-2rem)]",
|
|
55
|
+
"min-h-dvh sm:min-h-0",
|
|
56
|
+
// If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),
|
|
57
|
+
// make it participate in the flex column layout so overflow constraints work.
|
|
58
|
+
"[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0",
|
|
52
59
|
"focus:outline-none",
|
|
53
60
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
54
61
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
@@ -57,13 +64,13 @@ var modalContentVariants = classVarianceAuthority.cva(
|
|
|
57
64
|
{
|
|
58
65
|
variants: {
|
|
59
66
|
size: {
|
|
60
|
-
sm: "max-w-sm",
|
|
61
|
-
md: "max-w-md",
|
|
62
|
-
lg: "max-w-lg",
|
|
63
|
-
xl: "max-w-xl",
|
|
64
|
-
"2xl": "max-w-2xl",
|
|
65
|
-
"3xl": "max-w-3xl",
|
|
66
|
-
"4xl": "max-w-4xl",
|
|
67
|
+
sm: "sm:max-w-sm",
|
|
68
|
+
md: "sm:max-w-md",
|
|
69
|
+
lg: "sm:max-w-lg",
|
|
70
|
+
xl: "sm:max-w-xl",
|
|
71
|
+
"2xl": "sm:max-w-2xl",
|
|
72
|
+
"3xl": "sm:max-w-3xl",
|
|
73
|
+
"4xl": "sm:max-w-4xl",
|
|
67
74
|
full: "max-w-[calc(100vw-2rem)]"
|
|
68
75
|
}
|
|
69
76
|
},
|
|
@@ -129,26 +136,33 @@ function Modal({
|
|
|
129
136
|
{
|
|
130
137
|
className: chunkOR5DRJCW_cjs.cn(modalOverlayVariants()),
|
|
131
138
|
"data-state": open ? "open" : "closed",
|
|
132
|
-
onClick: handleOverlayClick,
|
|
133
139
|
"aria-hidden": "true"
|
|
134
140
|
}
|
|
135
141
|
),
|
|
136
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
142
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
137
143
|
"div",
|
|
138
144
|
{
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
145
|
+
className: "flex min-h-full items-center justify-center p-0 sm:p-4",
|
|
146
|
+
onClick: handleOverlayClick,
|
|
147
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
148
|
+
"div",
|
|
149
|
+
{
|
|
150
|
+
ref: focusTrapRef,
|
|
151
|
+
role: "dialog",
|
|
152
|
+
"aria-modal": "true",
|
|
153
|
+
"aria-label": ariaLabel,
|
|
154
|
+
"aria-labelledby": ariaLabelledBy || `${modalId}-title`,
|
|
155
|
+
"aria-describedby": ariaDescribedBy,
|
|
156
|
+
id: modalId,
|
|
157
|
+
tabIndex: -1,
|
|
158
|
+
"data-state": open ? "open" : "closed",
|
|
159
|
+
className: chunkOR5DRJCW_cjs.cn(modalContentVariants({ size }), className),
|
|
160
|
+
onClick: (e) => e.stopPropagation(),
|
|
161
|
+
children
|
|
162
|
+
}
|
|
163
|
+
)
|
|
150
164
|
}
|
|
151
|
-
)
|
|
165
|
+
) })
|
|
152
166
|
] })
|
|
153
167
|
}
|
|
154
168
|
);
|
|
@@ -170,7 +184,7 @@ var ModalHeader = React__namespace.forwardRef(
|
|
|
170
184
|
{
|
|
171
185
|
ref,
|
|
172
186
|
className: chunkOR5DRJCW_cjs.cn(
|
|
173
|
-
"flex items-center justify-between",
|
|
187
|
+
"flex shrink-0 items-center justify-between",
|
|
174
188
|
"border-border border-b px-6 py-4",
|
|
175
189
|
className
|
|
176
190
|
),
|
|
@@ -232,7 +246,14 @@ var ModalClose = React__namespace.forwardRef(
|
|
|
232
246
|
);
|
|
233
247
|
ModalClose.displayName = "ModalClose";
|
|
234
248
|
var ModalBody = React__namespace.forwardRef(
|
|
235
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
249
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
250
|
+
"div",
|
|
251
|
+
{
|
|
252
|
+
ref,
|
|
253
|
+
className: chunkOR5DRJCW_cjs.cn("min-h-0 flex-1 overflow-y-auto px-6 py-4", className),
|
|
254
|
+
...props
|
|
255
|
+
}
|
|
256
|
+
)
|
|
236
257
|
);
|
|
237
258
|
ModalBody.displayName = "ModalBody";
|
|
238
259
|
var ModalFooter = React__namespace.forwardRef(
|
|
@@ -241,7 +262,7 @@ var ModalFooter = React__namespace.forwardRef(
|
|
|
241
262
|
{
|
|
242
263
|
ref,
|
|
243
264
|
className: chunkOR5DRJCW_cjs.cn(
|
|
244
|
-
"flex items-center justify-end gap-3",
|
|
265
|
+
"flex shrink-0 items-center justify-end gap-3",
|
|
245
266
|
"border-border border-t px-6 py-4",
|
|
246
267
|
className
|
|
247
268
|
),
|
|
@@ -280,5 +301,5 @@ exports.ModalHeader = ModalHeader;
|
|
|
280
301
|
exports.ModalTitle = ModalTitle;
|
|
281
302
|
exports.modalContentVariants = modalContentVariants;
|
|
282
303
|
exports.modalOverlayVariants = modalOverlayVariants;
|
|
283
|
-
//# sourceMappingURL=chunk-
|
|
284
|
-
//# sourceMappingURL=chunk-
|
|
304
|
+
//# sourceMappingURL=chunk-377KAB4C.cjs.map
|
|
305
|
+
//# sourceMappingURL=chunk-377KAB4C.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":["cva","React","useFocusTrap","useEscapeKey","isStorybookDocsMode","jsx","jsxs","cn"],"mappings":"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","file":"chunk-377KAB4C.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { isStorybookDocsMode } from '../../utils/environment';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\n/**\n * Modal scroll lock state manager.\n * Uses a singleton pattern with ref-like storage to track open modals\n * and manage body scroll locking across multiple modal instances.\n * Includes reset capability for testing environments.\n */\nconst scrollLockState = {\n count: 0,\n originalOverflow: null as string | null,\n reset() {\n this.count = 0;\n this.originalOverflow = null;\n },\n};\n\n// Export for testing environments\nexport const __resetScrollLockState = () => scrollLockState.reset();\n\nconst modalOverlayVariants = cva(\n [\n 'fixed inset-0',\n 'bg-black/50 backdrop-blur-sm',\n 'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n ],\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\nconst modalContentVariants = cva(\n [\n 'relative w-full bg-card text-card-foreground',\n 'border border-border shadow-lg',\n // Full-screen on mobile, rounded on larger screens\n 'rounded-none sm:rounded-xl',\n 'flex flex-col',\n // Full viewport height on mobile, constrained on larger screens\n 'max-h-dvh sm:max-h-[calc(100dvh-2rem)]',\n 'min-h-dvh sm:min-h-0',\n // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),\n // make it participate in the flex column layout so overflow constraints work.\n '[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0',\n 'focus:outline-none',\n 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n 'duration-200',\n ],\n {\n variants: {\n size: {\n sm: 'sm:max-w-sm',\n md: 'sm:max-w-md',\n lg: 'sm:max-w-lg',\n xl: 'sm:max-w-xl',\n '2xl': 'sm:max-w-2xl',\n '3xl': 'sm:max-w-3xl',\n '4xl': 'sm:max-w-4xl',\n full: 'max-w-[calc(100vw-2rem)]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n /** Whether the modal is open */\n open: boolean;\n /** Callback when the modal should close */\n onOpenChange: (open: boolean) => void;\n /** Modal content */\n children: React.ReactNode;\n /** Whether to close when clicking the overlay */\n closeOnOverlayClick?: boolean;\n /** Whether to close when pressing Escape */\n closeOnEscape?: boolean;\n /** Additional class name for the modal content */\n className?: string;\n /** ID for the modal, used for accessibility */\n id?: string;\n /** Accessible label for the modal */\n 'aria-label'?: string;\n /** ID of the element that labels the modal */\n 'aria-labelledby'?: string;\n /** ID of the element that describes the modal */\n 'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n * <ModalHeader>\n * <ModalTitle>Confirm Action</ModalTitle>\n * <ModalClose />\n * </ModalHeader>\n * <ModalBody>\n * Are you sure you want to continue?\n * </ModalBody>\n * <ModalFooter>\n * <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button onClick={handleConfirm}>Confirm</Button>\n * </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n open,\n onOpenChange,\n children,\n size,\n closeOnOverlayClick = true,\n closeOnEscape = true,\n className,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n const generatedId = React.useId();\n const modalId = id || generatedId;\n\n // Focus trap (only active when modal is open)\n const focusTrapRef = useFocusTrap<HTMLDivElement>(open);\n\n // Handle escape key\n useEscapeKey(() => {\n if (closeOnEscape && open) {\n onOpenChange(false);\n }\n }, open);\n\n // Handle overlay click\n const handleOverlayClick = React.useCallback(\n (e: React.MouseEvent) => {\n if (closeOnOverlayClick && e.target === e.currentTarget) {\n onOpenChange(false);\n }\n },\n [closeOnOverlayClick, onOpenChange]\n );\n\n // Prevent body scroll when modal is open (handles multiple modals)\n // Skip scroll lock in Storybook docs mode where multiple stories render inline\n React.useEffect(() => {\n // Skip scroll lock entirely in Storybook docs mode\n if (!open || isStorybookDocsMode()) {\n return undefined;\n }\n\n scrollLockState.count++;\n // Only capture and set overflow when first modal opens\n if (scrollLockState.count === 1) {\n scrollLockState.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n return () => {\n scrollLockState.count--;\n // Only restore overflow when last modal closes\n if (\n scrollLockState.count === 0 &&\n scrollLockState.originalOverflow !== null\n ) {\n document.body.style.overflow = scrollLockState.originalOverflow;\n scrollLockState.originalOverflow = null;\n }\n };\n }, [open]);\n\n if (!open) return null;\n\n return (\n <ModalContext.Provider\n value={{ onClose: () => onOpenChange(false), modalId }}\n >\n {/* Portal to body */}\n <div className=\"fixed inset-0 z-50\">\n {/* Overlay backdrop */}\n <div\n className={cn(modalOverlayVariants())}\n data-state={open ? 'open' : 'closed'}\n aria-hidden=\"true\"\n />\n {/* Scrollable centering container — click outside to close */}\n <div className=\"fixed inset-0 overflow-y-auto\">\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className=\"flex min-h-full items-center justify-center p-0 sm:p-4\"\n onClick={handleOverlayClick}\n >\n {/* Content */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}\n <div\n ref={focusTrapRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n aria-describedby={ariaDescribedBy}\n id={modalId}\n tabIndex={-1}\n data-state={open ? 'open' : 'closed'}\n className={cn(modalContentVariants({ size }), className)}\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n </div>\n </div>\n </ModalContext.Provider>\n );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n onClose: () => void;\n modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n undefined\n);\n\nfunction useModalContext() {\n const context = React.useContext(ModalContext);\n if (!context) {\n throw new Error('Modal components must be used within a Modal');\n }\n return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex shrink-0 items-center justify-between',\n 'border-border border-b px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n ({ className, children, ...props }, ref) => {\n const { modalId } = useModalContext();\n return (\n <h2\n ref={ref}\n id={`${modalId}-title`}\n className={cn(\n 'text-lg leading-none font-semibold tracking-tight',\n className\n )}\n {...props}\n >\n {children}\n </h2>\n );\n }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n ({ className, children, onClick, ...props }, ref) => {\n const { onClose } = useModalContext();\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) {\n onClose();\n }\n },\n [onClick, onClose]\n );\n\n return (\n <button\n ref={ref}\n type=\"button\"\n onClick={handleClick}\n className={cn(\n 'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n 'text-muted-foreground hover:text-foreground',\n 'hover:bg-muted transition-colors',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n className\n )}\n aria-label=\"Close\"\n {...props}\n >\n {children || <CloseIcon />}\n </button>\n );\n }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', className)}\n {...props}\n />\n )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex shrink-0 items-center justify-end gap-3',\n 'border-border border-t px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n );\n}\n\nexport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalClose,\n ModalBody,\n ModalFooter,\n modalContentVariants,\n modalOverlayVariants,\n};\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { AlertCircle, ArrowLeft, Bell, Calendar, Camera, Check, CheckCircle, ChevronDown, ClipboardCheck, ClipboardList, ClipboardPlus, Clock, Download, ExternalLink, FileCheck, FileHeart, FilePlus, FileText, Globe, HeartPulse, Image, Mail, MoreHorizontal, MoreVertical, Paperclip, Pencil, Phone, Pill, Plus, Printer, RefreshCw, Scan, ScanLine, Send, Share, Stethoscope, Trash2, Upload, User, Users, Wheat, X } from 'lucide-react';
|
|
2
|
+
//# sourceMappingURL=chunk-3K7QCDSV.js.map
|
|
3
|
+
//# sourceMappingURL=chunk-3K7QCDSV.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-3K7QCDSV.js","sourcesContent":[]}
|
|
@@ -16,10 +16,6 @@ Object.defineProperty(exports, "Bell", {
|
|
|
16
16
|
enumerable: true,
|
|
17
17
|
get: function () { return lucideReact.Bell; }
|
|
18
18
|
});
|
|
19
|
-
Object.defineProperty(exports, "Building", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () { return lucideReact.Building; }
|
|
22
|
-
});
|
|
23
19
|
Object.defineProperty(exports, "Calendar", {
|
|
24
20
|
enumerable: true,
|
|
25
21
|
get: function () { return lucideReact.Calendar; }
|
|
@@ -40,10 +36,6 @@ Object.defineProperty(exports, "ChevronDown", {
|
|
|
40
36
|
enumerable: true,
|
|
41
37
|
get: function () { return lucideReact.ChevronDown; }
|
|
42
38
|
});
|
|
43
|
-
Object.defineProperty(exports, "ChevronUp", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
get: function () { return lucideReact.ChevronUp; }
|
|
46
|
-
});
|
|
47
39
|
Object.defineProperty(exports, "ClipboardCheck", {
|
|
48
40
|
enumerable: true,
|
|
49
41
|
get: function () { return lucideReact.ClipboardCheck; }
|
|
@@ -100,10 +92,6 @@ Object.defineProperty(exports, "Mail", {
|
|
|
100
92
|
enumerable: true,
|
|
101
93
|
get: function () { return lucideReact.Mail; }
|
|
102
94
|
});
|
|
103
|
-
Object.defineProperty(exports, "Menu", {
|
|
104
|
-
enumerable: true,
|
|
105
|
-
get: function () { return lucideReact.Menu; }
|
|
106
|
-
});
|
|
107
95
|
Object.defineProperty(exports, "MoreHorizontal", {
|
|
108
96
|
enumerable: true,
|
|
109
97
|
get: function () { return lucideReact.MoreHorizontal; }
|
|
@@ -184,5 +172,5 @@ Object.defineProperty(exports, "X", {
|
|
|
184
172
|
enumerable: true,
|
|
185
173
|
get: function () { return lucideReact.X; }
|
|
186
174
|
});
|
|
187
|
-
//# sourceMappingURL=chunk-
|
|
188
|
-
//# sourceMappingURL=chunk-
|
|
175
|
+
//# sourceMappingURL=chunk-QIOM5ZV2.cjs.map
|
|
176
|
+
//# sourceMappingURL=chunk-QIOM5ZV2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-QIOM5ZV2.cjs","sourcesContent":[]}
|
|
@@ -11,7 +11,7 @@ var scrollLockState = {
|
|
|
11
11
|
originalOverflow: null};
|
|
12
12
|
var modalOverlayVariants = cva(
|
|
13
13
|
[
|
|
14
|
-
"fixed inset-0
|
|
14
|
+
"fixed inset-0",
|
|
15
15
|
"bg-black/50 backdrop-blur-sm",
|
|
16
16
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
17
17
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
|
|
@@ -23,10 +23,17 @@ var modalOverlayVariants = cva(
|
|
|
23
23
|
);
|
|
24
24
|
var modalContentVariants = cva(
|
|
25
25
|
[
|
|
26
|
-
"
|
|
27
|
-
"-
|
|
28
|
-
|
|
29
|
-
"
|
|
26
|
+
"relative w-full bg-card text-card-foreground",
|
|
27
|
+
"border border-border shadow-lg",
|
|
28
|
+
// Full-screen on mobile, rounded on larger screens
|
|
29
|
+
"rounded-none sm:rounded-xl",
|
|
30
|
+
"flex flex-col",
|
|
31
|
+
// Full viewport height on mobile, constrained on larger screens
|
|
32
|
+
"max-h-dvh sm:max-h-[calc(100dvh-2rem)]",
|
|
33
|
+
"min-h-dvh sm:min-h-0",
|
|
34
|
+
// If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),
|
|
35
|
+
// make it participate in the flex column layout so overflow constraints work.
|
|
36
|
+
"[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0",
|
|
30
37
|
"focus:outline-none",
|
|
31
38
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
32
39
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
@@ -35,13 +42,13 @@ var modalContentVariants = cva(
|
|
|
35
42
|
{
|
|
36
43
|
variants: {
|
|
37
44
|
size: {
|
|
38
|
-
sm: "max-w-sm",
|
|
39
|
-
md: "max-w-md",
|
|
40
|
-
lg: "max-w-lg",
|
|
41
|
-
xl: "max-w-xl",
|
|
42
|
-
"2xl": "max-w-2xl",
|
|
43
|
-
"3xl": "max-w-3xl",
|
|
44
|
-
"4xl": "max-w-4xl",
|
|
45
|
+
sm: "sm:max-w-sm",
|
|
46
|
+
md: "sm:max-w-md",
|
|
47
|
+
lg: "sm:max-w-lg",
|
|
48
|
+
xl: "sm:max-w-xl",
|
|
49
|
+
"2xl": "sm:max-w-2xl",
|
|
50
|
+
"3xl": "sm:max-w-3xl",
|
|
51
|
+
"4xl": "sm:max-w-4xl",
|
|
45
52
|
full: "max-w-[calc(100vw-2rem)]"
|
|
46
53
|
}
|
|
47
54
|
},
|
|
@@ -107,26 +114,33 @@ function Modal({
|
|
|
107
114
|
{
|
|
108
115
|
className: cn(modalOverlayVariants()),
|
|
109
116
|
"data-state": open ? "open" : "closed",
|
|
110
|
-
onClick: handleOverlayClick,
|
|
111
117
|
"aria-hidden": "true"
|
|
112
118
|
}
|
|
113
119
|
),
|
|
114
|
-
/* @__PURE__ */ jsx(
|
|
120
|
+
/* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
|
|
115
121
|
"div",
|
|
116
122
|
{
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
123
|
+
className: "flex min-h-full items-center justify-center p-0 sm:p-4",
|
|
124
|
+
onClick: handleOverlayClick,
|
|
125
|
+
children: /* @__PURE__ */ jsx(
|
|
126
|
+
"div",
|
|
127
|
+
{
|
|
128
|
+
ref: focusTrapRef,
|
|
129
|
+
role: "dialog",
|
|
130
|
+
"aria-modal": "true",
|
|
131
|
+
"aria-label": ariaLabel,
|
|
132
|
+
"aria-labelledby": ariaLabelledBy || `${modalId}-title`,
|
|
133
|
+
"aria-describedby": ariaDescribedBy,
|
|
134
|
+
id: modalId,
|
|
135
|
+
tabIndex: -1,
|
|
136
|
+
"data-state": open ? "open" : "closed",
|
|
137
|
+
className: cn(modalContentVariants({ size }), className),
|
|
138
|
+
onClick: (e) => e.stopPropagation(),
|
|
139
|
+
children
|
|
140
|
+
}
|
|
141
|
+
)
|
|
128
142
|
}
|
|
129
|
-
)
|
|
143
|
+
) })
|
|
130
144
|
] })
|
|
131
145
|
}
|
|
132
146
|
);
|
|
@@ -148,7 +162,7 @@ var ModalHeader = React.forwardRef(
|
|
|
148
162
|
{
|
|
149
163
|
ref,
|
|
150
164
|
className: cn(
|
|
151
|
-
"flex items-center justify-between",
|
|
165
|
+
"flex shrink-0 items-center justify-between",
|
|
152
166
|
"border-border border-b px-6 py-4",
|
|
153
167
|
className
|
|
154
168
|
),
|
|
@@ -210,7 +224,14 @@ var ModalClose = React.forwardRef(
|
|
|
210
224
|
);
|
|
211
225
|
ModalClose.displayName = "ModalClose";
|
|
212
226
|
var ModalBody = React.forwardRef(
|
|
213
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
227
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
228
|
+
"div",
|
|
229
|
+
{
|
|
230
|
+
ref,
|
|
231
|
+
className: cn("min-h-0 flex-1 overflow-y-auto px-6 py-4", className),
|
|
232
|
+
...props
|
|
233
|
+
}
|
|
234
|
+
)
|
|
214
235
|
);
|
|
215
236
|
ModalBody.displayName = "ModalBody";
|
|
216
237
|
var ModalFooter = React.forwardRef(
|
|
@@ -219,7 +240,7 @@ var ModalFooter = React.forwardRef(
|
|
|
219
240
|
{
|
|
220
241
|
ref,
|
|
221
242
|
className: cn(
|
|
222
|
-
"flex items-center justify-end gap-3",
|
|
243
|
+
"flex shrink-0 items-center justify-end gap-3",
|
|
223
244
|
"border-border border-t px-6 py-4",
|
|
224
245
|
className
|
|
225
246
|
),
|
|
@@ -251,5 +272,5 @@ function CloseIcon() {
|
|
|
251
272
|
}
|
|
252
273
|
|
|
253
274
|
export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants };
|
|
254
|
-
//# sourceMappingURL=chunk-
|
|
255
|
-
//# sourceMappingURL=chunk-
|
|
275
|
+
//# sourceMappingURL=chunk-TCQ27C5M.js.map
|
|
276
|
+
//# sourceMappingURL=chunk-TCQ27C5M.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-TCQ27C5M.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { isStorybookDocsMode } from '../../utils/environment';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\n/**\n * Modal scroll lock state manager.\n * Uses a singleton pattern with ref-like storage to track open modals\n * and manage body scroll locking across multiple modal instances.\n * Includes reset capability for testing environments.\n */\nconst scrollLockState = {\n count: 0,\n originalOverflow: null as string | null,\n reset() {\n this.count = 0;\n this.originalOverflow = null;\n },\n};\n\n// Export for testing environments\nexport const __resetScrollLockState = () => scrollLockState.reset();\n\nconst modalOverlayVariants = cva(\n [\n 'fixed inset-0',\n 'bg-black/50 backdrop-blur-sm',\n 'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n ],\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\nconst modalContentVariants = cva(\n [\n 'relative w-full bg-card text-card-foreground',\n 'border border-border shadow-lg',\n // Full-screen on mobile, rounded on larger screens\n 'rounded-none sm:rounded-xl',\n 'flex flex-col',\n // Full viewport height on mobile, constrained on larger screens\n 'max-h-dvh sm:max-h-[calc(100dvh-2rem)]',\n 'min-h-dvh sm:min-h-0',\n // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),\n // make it participate in the flex column layout so overflow constraints work.\n '[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0',\n 'focus:outline-none',\n 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n 'duration-200',\n ],\n {\n variants: {\n size: {\n sm: 'sm:max-w-sm',\n md: 'sm:max-w-md',\n lg: 'sm:max-w-lg',\n xl: 'sm:max-w-xl',\n '2xl': 'sm:max-w-2xl',\n '3xl': 'sm:max-w-3xl',\n '4xl': 'sm:max-w-4xl',\n full: 'max-w-[calc(100vw-2rem)]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n /** Whether the modal is open */\n open: boolean;\n /** Callback when the modal should close */\n onOpenChange: (open: boolean) => void;\n /** Modal content */\n children: React.ReactNode;\n /** Whether to close when clicking the overlay */\n closeOnOverlayClick?: boolean;\n /** Whether to close when pressing Escape */\n closeOnEscape?: boolean;\n /** Additional class name for the modal content */\n className?: string;\n /** ID for the modal, used for accessibility */\n id?: string;\n /** Accessible label for the modal */\n 'aria-label'?: string;\n /** ID of the element that labels the modal */\n 'aria-labelledby'?: string;\n /** ID of the element that describes the modal */\n 'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n * <ModalHeader>\n * <ModalTitle>Confirm Action</ModalTitle>\n * <ModalClose />\n * </ModalHeader>\n * <ModalBody>\n * Are you sure you want to continue?\n * </ModalBody>\n * <ModalFooter>\n * <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button onClick={handleConfirm}>Confirm</Button>\n * </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n open,\n onOpenChange,\n children,\n size,\n closeOnOverlayClick = true,\n closeOnEscape = true,\n className,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n const generatedId = React.useId();\n const modalId = id || generatedId;\n\n // Focus trap (only active when modal is open)\n const focusTrapRef = useFocusTrap<HTMLDivElement>(open);\n\n // Handle escape key\n useEscapeKey(() => {\n if (closeOnEscape && open) {\n onOpenChange(false);\n }\n }, open);\n\n // Handle overlay click\n const handleOverlayClick = React.useCallback(\n (e: React.MouseEvent) => {\n if (closeOnOverlayClick && e.target === e.currentTarget) {\n onOpenChange(false);\n }\n },\n [closeOnOverlayClick, onOpenChange]\n );\n\n // Prevent body scroll when modal is open (handles multiple modals)\n // Skip scroll lock in Storybook docs mode where multiple stories render inline\n React.useEffect(() => {\n // Skip scroll lock entirely in Storybook docs mode\n if (!open || isStorybookDocsMode()) {\n return undefined;\n }\n\n scrollLockState.count++;\n // Only capture and set overflow when first modal opens\n if (scrollLockState.count === 1) {\n scrollLockState.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n return () => {\n scrollLockState.count--;\n // Only restore overflow when last modal closes\n if (\n scrollLockState.count === 0 &&\n scrollLockState.originalOverflow !== null\n ) {\n document.body.style.overflow = scrollLockState.originalOverflow;\n scrollLockState.originalOverflow = null;\n }\n };\n }, [open]);\n\n if (!open) return null;\n\n return (\n <ModalContext.Provider\n value={{ onClose: () => onOpenChange(false), modalId }}\n >\n {/* Portal to body */}\n <div className=\"fixed inset-0 z-50\">\n {/* Overlay backdrop */}\n <div\n className={cn(modalOverlayVariants())}\n data-state={open ? 'open' : 'closed'}\n aria-hidden=\"true\"\n />\n {/* Scrollable centering container — click outside to close */}\n <div className=\"fixed inset-0 overflow-y-auto\">\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className=\"flex min-h-full items-center justify-center p-0 sm:p-4\"\n onClick={handleOverlayClick}\n >\n {/* Content */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}\n <div\n ref={focusTrapRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n aria-describedby={ariaDescribedBy}\n id={modalId}\n tabIndex={-1}\n data-state={open ? 'open' : 'closed'}\n className={cn(modalContentVariants({ size }), className)}\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n </div>\n </div>\n </ModalContext.Provider>\n );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n onClose: () => void;\n modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n undefined\n);\n\nfunction useModalContext() {\n const context = React.useContext(ModalContext);\n if (!context) {\n throw new Error('Modal components must be used within a Modal');\n }\n return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex shrink-0 items-center justify-between',\n 'border-border border-b px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n ({ className, children, ...props }, ref) => {\n const { modalId } = useModalContext();\n return (\n <h2\n ref={ref}\n id={`${modalId}-title`}\n className={cn(\n 'text-lg leading-none font-semibold tracking-tight',\n className\n )}\n {...props}\n >\n {children}\n </h2>\n );\n }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n ({ className, children, onClick, ...props }, ref) => {\n const { onClose } = useModalContext();\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) {\n onClose();\n }\n },\n [onClick, onClose]\n );\n\n return (\n <button\n ref={ref}\n type=\"button\"\n onClick={handleClick}\n className={cn(\n 'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n 'text-muted-foreground hover:text-foreground',\n 'hover:bg-muted transition-colors',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n className\n )}\n aria-label=\"Close\"\n {...props}\n >\n {children || <CloseIcon />}\n </button>\n );\n }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', className)}\n {...props}\n />\n )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex shrink-0 items-center justify-end gap-3',\n 'border-border border-t px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n );\n}\n\nexport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalClose,\n ModalBody,\n ModalFooter,\n modalContentVariants,\n modalOverlayVariants,\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk377KAB4C_cjs = require('../../chunk-377KAB4C.cjs');
|
|
4
4
|
require('../../chunk-NNEFAUHV.cjs');
|
|
5
5
|
require('../../chunk-FHY3K6PL.cjs');
|
|
6
6
|
require('../../chunk-SCV7C55E.cjs');
|
|
@@ -10,35 +10,35 @@ require('../../chunk-OR5DRJCW.cjs');
|
|
|
10
10
|
|
|
11
11
|
Object.defineProperty(exports, "Modal", {
|
|
12
12
|
enumerable: true,
|
|
13
|
-
get: function () { return
|
|
13
|
+
get: function () { return chunk377KAB4C_cjs.Modal; }
|
|
14
14
|
});
|
|
15
15
|
Object.defineProperty(exports, "ModalBody", {
|
|
16
16
|
enumerable: true,
|
|
17
|
-
get: function () { return
|
|
17
|
+
get: function () { return chunk377KAB4C_cjs.ModalBody; }
|
|
18
18
|
});
|
|
19
19
|
Object.defineProperty(exports, "ModalClose", {
|
|
20
20
|
enumerable: true,
|
|
21
|
-
get: function () { return
|
|
21
|
+
get: function () { return chunk377KAB4C_cjs.ModalClose; }
|
|
22
22
|
});
|
|
23
23
|
Object.defineProperty(exports, "ModalFooter", {
|
|
24
24
|
enumerable: true,
|
|
25
|
-
get: function () { return
|
|
25
|
+
get: function () { return chunk377KAB4C_cjs.ModalFooter; }
|
|
26
26
|
});
|
|
27
27
|
Object.defineProperty(exports, "ModalHeader", {
|
|
28
28
|
enumerable: true,
|
|
29
|
-
get: function () { return
|
|
29
|
+
get: function () { return chunk377KAB4C_cjs.ModalHeader; }
|
|
30
30
|
});
|
|
31
31
|
Object.defineProperty(exports, "ModalTitle", {
|
|
32
32
|
enumerable: true,
|
|
33
|
-
get: function () { return
|
|
33
|
+
get: function () { return chunk377KAB4C_cjs.ModalTitle; }
|
|
34
34
|
});
|
|
35
35
|
Object.defineProperty(exports, "modalContentVariants", {
|
|
36
36
|
enumerable: true,
|
|
37
|
-
get: function () { return
|
|
37
|
+
get: function () { return chunk377KAB4C_cjs.modalContentVariants; }
|
|
38
38
|
});
|
|
39
39
|
Object.defineProperty(exports, "modalOverlayVariants", {
|
|
40
40
|
enumerable: true,
|
|
41
|
-
get: function () { return
|
|
41
|
+
get: function () { return chunk377KAB4C_cjs.modalOverlayVariants; }
|
|
42
42
|
});
|
|
43
43
|
//# sourceMappingURL=index.cjs.map
|
|
44
44
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from '../../chunk-
|
|
1
|
+
export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from '../../chunk-TCQ27C5M.js';
|
|
2
2
|
import '../../chunk-4SMSH4OY.js';
|
|
3
3
|
import '../../chunk-T4ME7QCT.js';
|
|
4
4
|
import '../../chunk-VSQF22GL.js';
|