aark-react-modalify 1.3.0 → 1.3.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.
- package/README.md +416 -225
- package/dist/index-no-styles.cjs.js +3 -4
- package/dist/index-no-styles.esm.js +3 -4
- package/dist/index.cjs.js +3 -4
- package/dist/index.esm.js +3 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,330 +1,521 @@
|
|
|
1
|
-
# AARK React Modalify
|
|
1
|
+
# AARK React Modalify
|
|
2
2
|
|
|
3
|
-
A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling
|
|
3
|
+
A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling via CSS variables, responsive size presets, and a simple imperative API.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/aark-react-modalify)
|
|
6
|
+
[](LICENSE)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
- **TypeScript Support**: Full type safety out of the box
|
|
9
|
-
- **Dual API**: Component-based OR props-based configuration
|
|
10
|
-
- **Automatic CSS**: Styles included automatically or import separately
|
|
11
|
-
- **Portal Rendering**: Modals render outside your component tree
|
|
12
|
-
- **Accessibility**: Built-in keyboard navigation and focus management
|
|
13
|
-
- **Customizable**: CSS variables for complete theme control
|
|
14
|
-
- **Multiple Positions**: Various positioning options for modals and notifications
|
|
15
|
-
- **Animation Support**: Smooth fade and slide animations
|
|
16
|
-
- **Hook Integration**: useModal hook for advanced use cases
|
|
8
|
+
## Features
|
|
17
9
|
|
|
18
|
-
|
|
10
|
+
- **Zero runtime dependencies** — pure React + ReactDOM
|
|
11
|
+
- **TypeScript** — full type safety out of the box
|
|
12
|
+
- **Dual API** — pass raw JSX _or_ a plain props object
|
|
13
|
+
- **Size presets** — `sm / md / lg / xl / full` with explicit `width` / `maxWidth` override
|
|
14
|
+
- **Responsive** — adapts automatically on tablet and mobile
|
|
15
|
+
- **CSS variables** — theme every visual property without touching JS
|
|
16
|
+
- **Imperative** — call `aark.fire()` / `aark.notification()` anywhere, no context required
|
|
17
|
+
- **Portal rendering** — modal root managed automatically, no wrapping provider needed
|
|
18
|
+
- **Accessibility** — ESC key, overlay click, and focus management built in
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
19
23
|
|
|
20
24
|
```bash
|
|
25
|
+
# npm
|
|
21
26
|
npm install aark-react-modalify
|
|
27
|
+
|
|
28
|
+
# pnpm
|
|
29
|
+
pnpm add aark-react-modalify
|
|
30
|
+
|
|
31
|
+
# yarn
|
|
32
|
+
yarn add aark-react-modalify
|
|
22
33
|
```
|
|
23
34
|
|
|
24
|
-
|
|
35
|
+
**Peer dependencies:** `react >= 16.8.0`, `react-dom >= 16.8.0`
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Quick Start
|
|
27
40
|
|
|
28
|
-
|
|
41
|
+
### Component-based (pass any JSX)
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
29
44
|
import { aark } from "aark-react-modalify";
|
|
30
45
|
|
|
31
46
|
function App() {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
return <button onClick={openModal}>Open Modal</button>;
|
|
47
|
+
const openModal = () => {
|
|
48
|
+
aark.fire(
|
|
49
|
+
<div>
|
|
50
|
+
<h2>Hello World!</h2>
|
|
51
|
+
<p>This is a simple modal.</p>
|
|
52
|
+
<button onClick={() => aark.close()}>Close</button>
|
|
53
|
+
</div>,
|
|
54
|
+
{ position: "center", showCloseIcon: true }
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return <button onClick={openModal}>Open Modal</button>;
|
|
47
59
|
}
|
|
48
60
|
```
|
|
49
61
|
|
|
50
|
-
### Props-
|
|
62
|
+
### Props-based (built-in styled templates)
|
|
51
63
|
|
|
52
|
-
```
|
|
64
|
+
```tsx
|
|
53
65
|
import { aark } from "aark-react-modalify";
|
|
54
66
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
timer: 3000,
|
|
70
|
-
});
|
|
71
|
-
},
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
return <button onClick={showConfirmation}>Delete Item</button>;
|
|
76
|
-
}
|
|
67
|
+
aark.fire({
|
|
68
|
+
title: "Delete Item",
|
|
69
|
+
text: "Are you sure you want to delete this item?",
|
|
70
|
+
type: "warning",
|
|
71
|
+
showCancelButton: true,
|
|
72
|
+
confirmText: "Yes, delete it!",
|
|
73
|
+
cancelText: "Cancel",
|
|
74
|
+
onConfirm: () => {
|
|
75
|
+
aark.notification(
|
|
76
|
+
{ title: "Deleted!", text: "The item has been deleted.", type: "success", timer: 3000 },
|
|
77
|
+
{ position: "top-right" }
|
|
78
|
+
);
|
|
79
|
+
},
|
|
80
|
+
});
|
|
77
81
|
```
|
|
78
82
|
|
|
79
|
-
|
|
83
|
+
> **Note:** `position` and other display options for notifications go in the **second argument** (`NotificationOptions`), not inside the props object.
|
|
80
84
|
|
|
81
|
-
|
|
85
|
+
---
|
|
82
86
|
|
|
83
|
-
|
|
87
|
+
## API Reference
|
|
84
88
|
|
|
85
|
-
|
|
89
|
+
### `aark.fire(content, options?)` — component-based modal
|
|
86
90
|
|
|
87
|
-
```
|
|
88
|
-
aark.fire(<YourComponent />, options);
|
|
91
|
+
```tsx
|
|
92
|
+
aark.fire(<YourComponent />, options?: ModalOptions);
|
|
89
93
|
```
|
|
90
94
|
|
|
91
|
-
|
|
95
|
+
### `aark.modal(content, options?)` — alias for `aark.fire`
|
|
92
96
|
|
|
93
|
-
```
|
|
94
|
-
aark.
|
|
95
|
-
title: "Modal Title",
|
|
96
|
-
text: "Modal content",
|
|
97
|
-
type: "info", // "success" | "error" | "warning" | "info" | "question"
|
|
98
|
-
showCancelButton: true,
|
|
99
|
-
confirmText: "OK",
|
|
100
|
-
cancelText: "Cancel",
|
|
101
|
-
onConfirm: () => {},
|
|
102
|
-
onCancel: () => {},
|
|
103
|
-
});
|
|
97
|
+
```tsx
|
|
98
|
+
aark.modal(<YourComponent />, options?: ModalOptions);
|
|
104
99
|
```
|
|
105
100
|
|
|
106
|
-
###
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
101
|
+
### `aark.fire(props, options?)` — props-based modal
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
aark.fire(
|
|
105
|
+
{
|
|
106
|
+
title?: string;
|
|
107
|
+
text?: string;
|
|
108
|
+
type?: "success" | "error" | "warning" | "info" | "question";
|
|
109
|
+
icon?: string | ReactNode;
|
|
110
|
+
html?: string | ReactNode; // string → dangerouslySetInnerHTML, ReactNode → rendered as JSX
|
|
111
|
+
confirmText?: string; // default: "OK"
|
|
112
|
+
cancelText?: string; // default: "Cancel"
|
|
113
|
+
showCancelButton?: boolean; // default: false
|
|
114
|
+
showConfirmButton?: boolean; // default: true
|
|
115
|
+
reverseButtons?: boolean; // swap confirm/cancel order
|
|
116
|
+
onConfirm?: () => void;
|
|
117
|
+
onCancel?: () => void;
|
|
118
|
+
width?: string | number; // e.g. "500px", "80%", 600
|
|
119
|
+
fullWidth?: boolean;
|
|
120
|
+
padding?: string | number;
|
|
121
|
+
customClass?: {
|
|
122
|
+
popup?: string;
|
|
123
|
+
header?: string;
|
|
124
|
+
title?: string;
|
|
125
|
+
icon?: string;
|
|
126
|
+
content?: string;
|
|
127
|
+
confirmButton?: string;
|
|
128
|
+
cancelButton?: string;
|
|
129
|
+
footer?: string;
|
|
130
|
+
};
|
|
131
|
+
},
|
|
132
|
+
options?: ModalOptions // position, size, showCloseIcon, etc.
|
|
133
|
+
);
|
|
114
134
|
```
|
|
115
135
|
|
|
116
|
-
|
|
136
|
+
### `aark.notification(content, options?)` — component-based notification
|
|
117
137
|
|
|
118
|
-
```
|
|
119
|
-
aark.notification(
|
|
120
|
-
title: "Notification Title",
|
|
121
|
-
text: "Notification message",
|
|
122
|
-
type: "success",
|
|
123
|
-
timer: 3000,
|
|
124
|
-
position: "top-right",
|
|
125
|
-
});
|
|
138
|
+
```tsx
|
|
139
|
+
aark.notification(<YourToast />, options?: NotificationOptions);
|
|
126
140
|
```
|
|
127
141
|
|
|
128
|
-
###
|
|
129
|
-
|
|
130
|
-
```
|
|
131
|
-
aark.
|
|
132
|
-
|
|
133
|
-
|
|
142
|
+
### `aark.notification(props, options?)` — props-based notification
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
aark.notification(
|
|
146
|
+
{
|
|
147
|
+
title?: string;
|
|
148
|
+
text?: string;
|
|
149
|
+
type?: "success" | "error" | "warning" | "info" | "question";
|
|
150
|
+
icon?: string | ReactNode;
|
|
151
|
+
html?: string | ReactNode; // string → dangerouslySetInnerHTML, ReactNode → rendered as JSX
|
|
152
|
+
timer?: number; // auto-close in ms (default: 5000)
|
|
153
|
+
showCloseButton?: boolean; // default: true
|
|
154
|
+
clickToClose?: boolean; // default: true
|
|
155
|
+
width?: string | number;
|
|
156
|
+
fullWidth?: boolean;
|
|
157
|
+
padding?: string | number;
|
|
158
|
+
customClass?: {
|
|
159
|
+
popup?: string;
|
|
160
|
+
header?: string;
|
|
161
|
+
title?: string;
|
|
162
|
+
icon?: string;
|
|
163
|
+
content?: string;
|
|
164
|
+
};
|
|
165
|
+
},
|
|
166
|
+
options?: NotificationOptions // position, autoCloseTime, showCloseIcon, etc.
|
|
167
|
+
);
|
|
134
168
|
```
|
|
135
169
|
|
|
136
|
-
|
|
170
|
+
### Other methods
|
|
137
171
|
|
|
138
|
-
|
|
172
|
+
```tsx
|
|
173
|
+
aark.close(); // close the current modal / notification
|
|
174
|
+
aark.closeAll(); // close everything
|
|
175
|
+
aark.isOpen(); // returns boolean
|
|
139
176
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
| `escapeKeyToClose` | `boolean` | `true` | Close on ESC key |
|
|
146
|
-
| `onOpen` | `() => void` | - | Called when modal opens |
|
|
147
|
-
| `onClose` | `() => void` | - | Called when modal closes |
|
|
177
|
+
// Theme shortcuts (same as the standalone imported functions)
|
|
178
|
+
aark.setTheme(theme); // same as setAarkModalTheme(theme)
|
|
179
|
+
aark.resetTheme(); // same as resetAarkModalTheme()
|
|
180
|
+
aark.getTheme(); // same as getAarkModalTheme()
|
|
181
|
+
```
|
|
148
182
|
|
|
149
|
-
|
|
183
|
+
---
|
|
150
184
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
| `position`
|
|
158
|
-
| `
|
|
185
|
+
## Configuration Options
|
|
186
|
+
|
|
187
|
+
### `ModalOptions`
|
|
188
|
+
|
|
189
|
+
| Option | Type | Default | Description |
|
|
190
|
+
| --------------------- | ---------------- | ---------- | ---------------------------------------- |
|
|
191
|
+
| `position` | `ModalPosition` | `"center"` | Where the modal appears |
|
|
192
|
+
| `size` | `ModalSize` | — | Preset max-width (`sm/md/lg/xl/full`) |
|
|
193
|
+
| `width` | `string\|number` | — | Explicit width, overrides `size` |
|
|
194
|
+
| `maxWidth` | `string\|number` | — | Explicit max-width, overrides `size` |
|
|
195
|
+
| `showCloseIcon` | `boolean` | `true` | Render the × close button |
|
|
196
|
+
| `className` | `string` | — | Extra class on the modal container |
|
|
197
|
+
| `overlayClassName` | `string` | — | Extra class on the backdrop |
|
|
198
|
+
| `preventOverlayClose` | `boolean` | `false` | Disable close on backdrop click |
|
|
199
|
+
| `preventEscClose` | `boolean` | `false` | Disable close on ESC key |
|
|
200
|
+
|
|
201
|
+
### `NotificationOptions`
|
|
202
|
+
|
|
203
|
+
| Option | Type | Default | Description |
|
|
204
|
+
| ----------------- | ---------------------- | ------------- | ------------------------------------ |
|
|
205
|
+
| `position` | `NotificationPosition` | `"top-right"` | Where the notification appears |
|
|
206
|
+
| `autoCloseTime` | `number` | `5000` | Auto-dismiss delay in ms |
|
|
207
|
+
| `showCloseIcon` | `boolean` | `true` | Render the × close button |
|
|
208
|
+
| `className` | `string` | — | Extra class on the notification |
|
|
209
|
+
| `preventEscClose` | `boolean` | `false` | Disable dismiss on ESC key |
|
|
210
|
+
|
|
211
|
+
### Size presets (`ModalSize`)
|
|
212
|
+
|
|
213
|
+
| Value | Max-width |
|
|
214
|
+
| ------ | ---------------- |
|
|
215
|
+
| `sm` | 400 px |
|
|
216
|
+
| `md` | 550 px |
|
|
217
|
+
| `lg` | 700 px (default) |
|
|
218
|
+
| `xl` | 900 px |
|
|
219
|
+
| `full` | 100 vw − 32 px |
|
|
220
|
+
|
|
221
|
+
```tsx
|
|
222
|
+
// Use a preset
|
|
223
|
+
aark.fire(<Content />, { size: "xl" });
|
|
224
|
+
|
|
225
|
+
// Or set exact dimensions
|
|
226
|
+
aark.fire(<Content />, { width: "80%", maxWidth: "900px" });
|
|
227
|
+
```
|
|
159
228
|
|
|
160
|
-
### Position
|
|
229
|
+
### Position types
|
|
161
230
|
|
|
162
|
-
```
|
|
231
|
+
```ts
|
|
163
232
|
type ModalPosition =
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
| "bottom-left"
|
|
170
|
-
| "bottom-right";
|
|
233
|
+
| "center"
|
|
234
|
+
| "top-center"
|
|
235
|
+
| "top-right"
|
|
236
|
+
| "bottom-center"
|
|
237
|
+
| "bottom-right";
|
|
171
238
|
|
|
172
239
|
type NotificationPosition =
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
240
|
+
| "top-left"
|
|
241
|
+
| "top-center"
|
|
242
|
+
| "top-right"
|
|
243
|
+
| "bottom-left"
|
|
244
|
+
| "bottom-center"
|
|
245
|
+
| "bottom-right";
|
|
179
246
|
```
|
|
180
247
|
|
|
181
|
-
|
|
248
|
+
---
|
|
249
|
+
|
|
250
|
+
## Customization
|
|
182
251
|
|
|
183
|
-
### CSS
|
|
252
|
+
### CSS variables (full list with defaults)
|
|
253
|
+
|
|
254
|
+
Override any of these in your global CSS to theme the library without touching JS:
|
|
184
255
|
|
|
185
256
|
```css
|
|
186
257
|
:root {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
258
|
+
/* Overlay */
|
|
259
|
+
--aark-modal-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
260
|
+
--aark-modal-overlay-blur: 0px;
|
|
261
|
+
|
|
262
|
+
/* Modal */
|
|
263
|
+
--aark-modal-bg: #fff;
|
|
264
|
+
--aark-modal-radius: 8px;
|
|
265
|
+
--aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
266
|
+
--aark-modal-pad: 16px;
|
|
267
|
+
--aark-modal-max-width: 700px;
|
|
268
|
+
--aark-modal-z: 9999;
|
|
269
|
+
|
|
270
|
+
/* Close button */
|
|
271
|
+
--aark-close-color: #666;
|
|
272
|
+
--aark-close-hover: #f5f5f5;
|
|
273
|
+
--aark-close-hover-color: #333;
|
|
274
|
+
--aark-close-focus-outline: 2px solid #007bff;
|
|
275
|
+
|
|
276
|
+
/* Notification */
|
|
277
|
+
--aark-notification-bg: #fff;
|
|
278
|
+
--aark-notification-radius: 8px;
|
|
279
|
+
--aark-notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
280
|
+
--aark-notification-pad: 16px;
|
|
281
|
+
--aark-notification-z: 10000;
|
|
282
|
+
|
|
283
|
+
/* Animation */
|
|
284
|
+
--aark-anim: 0.2s;
|
|
201
285
|
}
|
|
202
286
|
```
|
|
203
287
|
|
|
204
|
-
###
|
|
288
|
+
### `setAarkModalTheme(theme)` — apply theme via JS
|
|
289
|
+
|
|
290
|
+
All properties are optional. Only the ones you pass are changed.
|
|
291
|
+
|
|
292
|
+
```tsx
|
|
293
|
+
import { setAarkModalTheme } from "aark-react-modalify";
|
|
294
|
+
// or: aark.setTheme({ ... })
|
|
295
|
+
|
|
296
|
+
setAarkModalTheme({
|
|
297
|
+
// Overlay
|
|
298
|
+
overlayBackground: "rgba(0, 0, 0, 0.7)",
|
|
299
|
+
overlayBlur: "4px",
|
|
300
|
+
|
|
301
|
+
// Modal
|
|
302
|
+
modalBackground: "#1f2937",
|
|
303
|
+
modalBorderRadius: "12px",
|
|
304
|
+
modalShadow: "0 20px 60px rgba(0, 0, 0, 0.4)",
|
|
305
|
+
modalPadding: "24px",
|
|
306
|
+
modalMaxWidth: "600px",
|
|
307
|
+
modalZIndex: 9999,
|
|
308
|
+
|
|
309
|
+
// Close button
|
|
310
|
+
closeButtonColor: "#9ca3af",
|
|
311
|
+
closeButtonHoverBackground: "rgba(255,255,255,0.1)",
|
|
312
|
+
closeButtonHoverColor: "#fff",
|
|
313
|
+
|
|
314
|
+
// Notification
|
|
315
|
+
notificationBackground: "#111827",
|
|
316
|
+
notificationBorderRadius: "8px",
|
|
317
|
+
notificationShadow: "0 4px 20px rgba(0,0,0,0.3)",
|
|
318
|
+
notificationPadding: "12px 16px",
|
|
319
|
+
notificationZIndex: 10000,
|
|
320
|
+
|
|
321
|
+
// Animation
|
|
322
|
+
animationDuration: "0.3s",
|
|
323
|
+
});
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
### `resetAarkModalTheme()` — restore defaults
|
|
327
|
+
|
|
328
|
+
```tsx
|
|
329
|
+
import { resetAarkModalTheme } from "aark-react-modalify";
|
|
330
|
+
// or: aark.resetTheme()
|
|
331
|
+
|
|
332
|
+
resetAarkModalTheme();
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
### `getAarkModalTheme()` — read current values
|
|
205
336
|
|
|
206
|
-
|
|
337
|
+
```tsx
|
|
338
|
+
import { getAarkModalTheme } from "aark-react-modalify";
|
|
339
|
+
// or: aark.getTheme()
|
|
207
340
|
|
|
208
|
-
|
|
341
|
+
const theme = getAarkModalTheme();
|
|
342
|
+
console.log(theme.modalBackground); // e.g. "#fff"
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
---
|
|
346
|
+
|
|
347
|
+
## CSS Import Options
|
|
348
|
+
|
|
349
|
+
**Option 1 — Automatic (default)**
|
|
350
|
+
|
|
351
|
+
```tsx
|
|
209
352
|
import { aark } from "aark-react-modalify";
|
|
210
|
-
// CSS is
|
|
353
|
+
// CSS is bundled and injected automatically
|
|
211
354
|
```
|
|
212
355
|
|
|
213
|
-
**Option 2
|
|
356
|
+
**Option 2 — Manual (no-styles build)**
|
|
357
|
+
|
|
358
|
+
Useful if you want full control over when/how the CSS is loaded:
|
|
214
359
|
|
|
215
|
-
```
|
|
360
|
+
```tsx
|
|
216
361
|
import { aark } from "aark-react-modalify/no-styles";
|
|
217
362
|
import "aark-react-modalify/css";
|
|
363
|
+
// or: import "aark-react-modalify/dist/aark-react-modalify.css";
|
|
218
364
|
```
|
|
219
365
|
|
|
220
|
-
|
|
366
|
+
---
|
|
367
|
+
|
|
368
|
+
## Advanced Usage
|
|
369
|
+
|
|
370
|
+
### `useModal` hook
|
|
221
371
|
|
|
222
|
-
|
|
372
|
+
Subscribe to modal state changes anywhere in your component tree:
|
|
223
373
|
|
|
224
|
-
```
|
|
225
|
-
import { useModal } from "aark-react-modalify";
|
|
374
|
+
```tsx
|
|
375
|
+
import { aark, useModal } from "aark-react-modalify";
|
|
226
376
|
|
|
227
377
|
function MyComponent() {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
);
|
|
378
|
+
const { isOpen, config } = useModal();
|
|
379
|
+
// config.mode === "modal" | "notification"
|
|
380
|
+
|
|
381
|
+
return (
|
|
382
|
+
<div>
|
|
383
|
+
<button onClick={() => aark.fire(<div>Content</div>, { position: "center" })}>
|
|
384
|
+
Open
|
|
385
|
+
</button>
|
|
386
|
+
{isOpen && <p>A {config?.mode} is currently open</p>}
|
|
387
|
+
</div>
|
|
388
|
+
);
|
|
240
389
|
}
|
|
241
390
|
```
|
|
242
391
|
|
|
243
|
-
|
|
392
|
+
`useModal` returns:
|
|
244
393
|
|
|
245
|
-
|
|
246
|
-
|
|
394
|
+
| Property | Type | Description |
|
|
395
|
+
|----------|------|-------------|
|
|
396
|
+
| `isOpen` | `boolean` | Whether a modal/notification is currently showing |
|
|
397
|
+
| `config` | `ComponentConfig \| null` | Current config object including `mode`, `content`, `props`, `options` |
|
|
398
|
+
| `close` | `() => void` | Close the current modal/notification |
|
|
247
399
|
|
|
248
|
-
|
|
249
|
-
setAarkModalTheme({
|
|
250
|
-
modalBg: "#1f2937",
|
|
251
|
-
modalRadius: "12px",
|
|
252
|
-
animationDuration: "0.3s",
|
|
253
|
-
});
|
|
400
|
+
### Manual component integration
|
|
254
401
|
|
|
255
|
-
|
|
256
|
-
|
|
402
|
+
If you need to manage rendering yourself:
|
|
403
|
+
|
|
404
|
+
```tsx
|
|
405
|
+
import { Modal, Notification, ModalProvider } from "aark-react-modalify";
|
|
257
406
|
```
|
|
258
407
|
|
|
259
|
-
|
|
408
|
+
---
|
|
409
|
+
|
|
410
|
+
## Examples
|
|
260
411
|
|
|
261
|
-
### Success
|
|
412
|
+
### Success modal
|
|
262
413
|
|
|
263
|
-
```
|
|
414
|
+
```tsx
|
|
264
415
|
aark.fire({
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
416
|
+
title: "Saved!",
|
|
417
|
+
text: "Your changes have been saved successfully.",
|
|
418
|
+
type: "success",
|
|
419
|
+
confirmText: "Great!",
|
|
269
420
|
});
|
|
270
421
|
```
|
|
271
422
|
|
|
272
|
-
### Confirmation
|
|
423
|
+
### Confirmation dialog
|
|
273
424
|
|
|
274
|
-
```
|
|
425
|
+
```tsx
|
|
275
426
|
aark.fire({
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
427
|
+
title: "Delete Item",
|
|
428
|
+
text: "This action cannot be undone.",
|
|
429
|
+
type: "warning",
|
|
430
|
+
showCancelButton: true,
|
|
431
|
+
confirmText: "Yes, delete it!",
|
|
432
|
+
cancelText: "Cancel",
|
|
433
|
+
onConfirm: () => console.log("deleted"),
|
|
283
434
|
});
|
|
284
435
|
```
|
|
285
436
|
|
|
286
|
-
###
|
|
437
|
+
### Notification with position
|
|
287
438
|
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
439
|
+
```tsx
|
|
440
|
+
// position goes in options (second argument), not inside the props
|
|
441
|
+
aark.notification(
|
|
442
|
+
{ title: "Error", text: "Something went wrong.", type: "error", timer: 4000 },
|
|
443
|
+
{ position: "top-right" }
|
|
444
|
+
);
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
### Component-based notification
|
|
448
|
+
|
|
449
|
+
```tsx
|
|
450
|
+
aark.notification(
|
|
451
|
+
<div style={{ padding: "1rem" }}>Custom toast content</div>,
|
|
452
|
+
{ position: "bottom-right", autoCloseTime: 3000 }
|
|
453
|
+
);
|
|
454
|
+
```
|
|
455
|
+
|
|
456
|
+
### Large custom modal
|
|
457
|
+
|
|
458
|
+
```tsx
|
|
459
|
+
aark.fire(<Dashboard />, {
|
|
460
|
+
size: "xl",
|
|
461
|
+
showCloseIcon: true,
|
|
462
|
+
preventOverlayClose: true,
|
|
463
|
+
});
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
### Modal with exact dimensions
|
|
467
|
+
|
|
468
|
+
```tsx
|
|
469
|
+
aark.fire(<MyForm />, {
|
|
470
|
+
width: "600px",
|
|
471
|
+
maxWidth: "90vw",
|
|
472
|
+
position: "top-center",
|
|
294
473
|
});
|
|
295
474
|
```
|
|
296
475
|
|
|
297
|
-
|
|
476
|
+
### Dark theme
|
|
298
477
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
- ✅ **Next.js** - Works with both App and Pages router
|
|
302
|
-
- ✅ **Webpack** - CSS automatically bundled
|
|
303
|
-
- ✅ **Parcel** - Styles processed automatically
|
|
478
|
+
```tsx
|
|
479
|
+
import { setAarkModalTheme } from "aark-react-modalify";
|
|
304
480
|
|
|
305
|
-
|
|
481
|
+
setAarkModalTheme({
|
|
482
|
+
modalBackground: "#1f2937",
|
|
483
|
+
modalBorderRadius: "12px",
|
|
484
|
+
overlayBackground: "rgba(0, 0, 0, 0.8)",
|
|
485
|
+
overlayBlur: "4px",
|
|
486
|
+
notificationBackground: "#111827",
|
|
487
|
+
animationDuration: "0.3s",
|
|
488
|
+
});
|
|
489
|
+
```
|
|
306
490
|
|
|
307
|
-
|
|
308
|
-
- **CSS**: ~9 kB (minified)
|
|
309
|
-
- **Total**: ~25 kB
|
|
310
|
-
- **Gzipped**: ~8 kB (estimated)
|
|
491
|
+
---
|
|
311
492
|
|
|
312
|
-
##
|
|
493
|
+
## Framework Compatibility
|
|
313
494
|
|
|
314
|
-
|
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
|
|
|
318
|
-
|
|
|
319
|
-
|
|
|
495
|
+
| Framework | Support |
|
|
496
|
+
| ---------------------------- | ------- |
|
|
497
|
+
| Vite | ✅ |
|
|
498
|
+
| Next.js (App + Pages router) | ✅ |
|
|
499
|
+
| Create React App | ✅ |
|
|
500
|
+
| Webpack | ✅ |
|
|
501
|
+
| Parcel | ✅ |
|
|
320
502
|
|
|
321
|
-
|
|
503
|
+
---
|
|
504
|
+
|
|
505
|
+
## Bundle Size
|
|
322
506
|
|
|
323
|
-
|
|
507
|
+
| Asset | Size (minified) |
|
|
508
|
+
| ---------- | --------------- |
|
|
509
|
+
| JavaScript | ~16 kB |
|
|
510
|
+
| CSS | ~5 kB |
|
|
511
|
+
| **Total** | **~21 kB** |
|
|
512
|
+
| Gzipped | ~7 kB (est.) |
|
|
513
|
+
|
|
514
|
+
---
|
|
324
515
|
|
|
325
|
-
##
|
|
516
|
+
## License
|
|
326
517
|
|
|
327
|
-
|
|
518
|
+
MIT — see [LICENSE](LICENSE) for details.
|
|
328
519
|
|
|
329
520
|
---
|
|
330
521
|
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
"use strict";var V=Object.defineProperty;var
|
|
1
|
+
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var vo=Object.prototype.hasOwnProperty;var yo=(e,o)=>{for(var t in o)V(e,t,{get:o[t],enumerable:!0})},ko=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of go(o))!vo.call(e,n)&&n!==t&&V(e,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return e};var ho=e=>ko(V({},"__esModule",{value:!0}),e);var Oo={};yo(Oo,{Modal:()=>W,ModalProvider:()=>H,Notification:()=>L,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>O});module.exports=ho(Oo);var ro=require("react"),lo=require("react-dom/client");var S=require("react");function O(){let[e,o]=(0,S.useState)(!1),[t,a]=(0,S.useState)(null),n=(0,S.useCallback)(()=>{C.close()},[]);return(0,S.useEffect)(()=>{let i=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},u=C.subscribe(i);return o(C.isOpen()),a(C.getCurrentConfig()),u},[]),{isOpen:e,config:t,close:n}}var T=require("react"),to=require("react-dom");var w=require("react"),z=require("react/jsx-runtime"),G={white:"#FFFFFF",black:"#0B071A"},J=(0,w.memo)(({name:e,color:o="black",style:t,className:a="",noHoverEffect:n=!1,onClick:i,size:u=24,"aria-label":s,title:x})=>{let m=(0,w.useMemo)(()=>String(u),[u]),f=(0,w.useMemo)(()=>G[o]?G[o]:(o.startsWith("#"),o),[o]),v=(0,w.useMemo)(()=>{let d=f;return e==="close"?(0,z.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:(0,z.jsx)("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null},[e,f,m]),c=(0,w.useMemo)(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${e} icon`,x&&(d.title=x),d.role=i?"button":"img",d},[s,x,e,i]),p=(0,w.useMemo)(()=>{if(i)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),i())}},[i]);return(0,z.jsx)("i",{className:`
|
|
2
2
|
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
3
|
${!n&&i&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${i&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
5
|
${a}
|
|
6
|
-
`.trim(),style:t,onClick:i,onKeyDown:
|
|
6
|
+
`.trim(),style:t,onClick:i,onKeyDown:p,tabIndex:i?0:void 0,...c,children:v})});J.displayName="Icon";var j=J;var U=require("react"),k=require("react/jsx-runtime"),Co={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},Q={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},Mo=({props:e,onClose:o})=>{let{title:t,text:a,type:n="info",cancelText:i="Cancel",confirmText:u="OK",onCancel:s,onConfirm:x,icon:m,html:f,showCancelButton:v=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:y={}}=e,h=()=>{s?.(),o()},q=()=>{x?.(),o()},F=(0,U.useMemo)(()=>m?typeof m=="string"?(0,k.jsx)("span",{children:m}):m:(0,k.jsx)("span",{style:{color:Q[n]},children:Co[n]}),[m,n]),l=p?["confirm","cancel"]:["cancel","confirm"],E=(0,U.useMemo)(()=>{let N={};return r?(N.width="calc(100vw - 20px)",N.maxWidth="calc(100vw - 20px)"):typeof d=="number"?N.width=`${d}px`:N.width=d,N},[d,r]);return(0,k.jsxs)("div",{className:`aark-standard-modal ${y.popup||""}`,style:E,children:[(0,k.jsxs)("div",{className:`aark-modal-content ${y.content||""}`,children:[F&&(0,k.jsx)("div",{className:`aark-modal-icon ${y.icon||""}`,children:F}),t&&(0,k.jsx)("div",{className:`aark-modal-header ${y.header||""}`,children:(0,k.jsx)("h2",{className:`aark-modal-title ${y.title||""}`,children:t})}),f?typeof f=="string"?(0,k.jsx)("div",{dangerouslySetInnerHTML:{__html:f}}):(0,k.jsx)("div",{children:f}):a?(0,k.jsx)("p",{children:a}):null]}),(v||c)&&(0,k.jsx)("div",{className:`aark-modal-footer ${y.actions||""}`,children:l.map(N=>N==="cancel"&&v?(0,k.jsx)("button",{onClick:h,className:`aark-modal-cancel-button ${y.cancelButton||""}`,children:i},"cancel"):N==="confirm"&&c?(0,k.jsx)("button",{onClick:q,className:`aark-modal-confirm-button ${y.confirmButton||""}`,style:{background:Q[n]},children:u},"confirm"):null)})]})},oo=Mo;var M=null,R=()=>(M||(M=document.getElementById("aark-react-modalify-root"),M||(M=document.createElement("div"),M.id="aark-react-modalify-root",M.style.cssText=`
|
|
7
7
|
position: fixed;
|
|
8
8
|
top: 0;
|
|
9
9
|
left: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
14
|
-
`,document.body.appendChild(M))),M),eo=()=>{M&&M.children.length===0&&(M.remove(),M=null)};var b=require("react/jsx-runtime"),bo={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},xo=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="center",showCloseIcon:p=!0,className:s="",overlayClassName:x="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:u}=n;(0,T.useEffect)(()=>{if(f)return;let l=E=>{E.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,f]);let d=(0,T.useCallback)(l=>{l.target===l.currentTarget&&!m&&o()},[o,m]),r=(0,T.useCallback)(l=>{l.stopPropagation(),o()},[o]),y=(0,T.useMemo)(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(u){let E=bo[u];u==="full"&&(l.width=l.width??E),l.maxWidth=E}return l},[g,c,u]),k=`aark-modal-container ${i} ${s}`.trim(),q=R(),F=()=>a?(0,b.jsxs)("div",{className:k,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[p&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),(0,b.jsx)("div",{className:"aark-modal-wrapper",children:(0,b.jsx)(oo,{props:a,onClose:o})})]}):t?(0,b.jsx)("div",{className:k,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:(0,b.jsxs)("div",{className:"aark-modal-body",children:[p&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),t]})}):null;return(0,to.createPortal)((0,b.jsx)("div",{className:`aark-modal-overlay ${x}`.trim(),onClick:d,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:i.includes("center")?"center":i.includes("top")?"flex-start":"flex-end",justifyContent:i.includes("center")?"center":i.includes("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},L=xo;var A=require("react"),io=require("react-dom");var $=require("react"),v=require("react/jsx-runtime"),ao={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},No={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},wo=({props:e,onClose:o})=>{let{title:t,text:a,type:n="info",icon:i,html:p,timer:s=5e3,showCloseButton:x=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:u={}}=e;(0,$.useEffect)(()=>{if(s&&s>0){let k=setTimeout(o,s);return()=>clearTimeout(k)}},[s,o]);let d=()=>{f&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,v.jsx)("span",{children:i}):i:(0,v.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),y=(0,$.useMemo)(()=>{let k={};return c!==void 0&&(k.padding=typeof c=="number"?`${c}px`:c),g?(k.width="calc(100vw - 40px)",k.maxWidth="calc(100vw - 40px)"):m!==void 0&&(k.width=typeof m=="number"?`${m}px`:m),k},[m,g,c]);return(0,v.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${u.popup||""}`,style:y,onClick:d,children:[s&&s>0&&(0,v.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,v.jsx)("div",{className:`aark-notification-icon ${u.icon||""}`,children:r}),(0,v.jsxs)("div",{style:{flex:1,minWidth:0},children:[t&&(0,v.jsx)("div",{className:`aark-notification-header ${u.header||""}`,children:(0,v.jsx)("h4",{className:`aark-notification-title ${u.title||""}`,children:t})}),(0,v.jsx)("div",{className:`aark-notification-content ${u.content||""}`,style:{marginTop:t?"0.25rem":0},children:p?(0,v.jsx)("div",{dangerouslySetInnerHTML:{__html:typeof p=="string"?p:""}}):a?(0,v.jsx)("p",{children:a}):null})]}),x&&(0,v.jsx)("button",{onClick:k=>{k.stopPropagation(),o()},className:`aark-notification-close ${u.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},no=wo;var P=require("react/jsx-runtime"),Po=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="top-right",showCloseIcon:p=!0,autoCloseTime:s=5e3,className:x="",preventEscClose:f=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(f)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,f]);let m=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${i} ${x}`.trim(),c=R(),u=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(i){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?(0,P.jsx)("div",{className:"aark-notification-wrapper",children:(0,P.jsx)(no,{props:a,onClose:o})}):t?(0,P.jsxs)("div",{className:g,role:"alert","aria-live":"polite",children:[p&&(0,P.jsx)("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),(0,P.jsx)("div",{className:"aark-notification-body",children:t})]}):null;return(0,io.createPortal)((0,P.jsx)("div",{style:u(),children:d()}),c)},W=Po;var X=require("react/jsx-runtime"),Eo=()=>{let{isOpen:e,config:o,close:t}=O();return!e||!o?null:o.mode==="modal"?(0,X.jsx)(L,{config:o,onClose:t}):o.mode==="notification"?(0,X.jsx)(W,{config:o,onClose:t}):null},H=Eo;var Y=new Set,B=null,I=null;function so(){if(I)return;let e=R();I=(0,lo.createRoot)(e),I.render((0,ro.createElement)(H))}function So(e){return Y.add(e),()=>Y.delete(e)}function K(e,o){let t={type:e,config:o};Y.forEach(a=>a(t))}function co(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};B=n,K("open",n)}function To(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};B=n,K("open",n)}function Bo(e,o){co(e,o)}function fo(){B&&(K("beforeClose",B),B=null,K("close"))}function Ro(){return B!==null}function Io(){return B}function $o(){fo()}function Ao(){I&&(I.unmount(),I=null),eo()}var h={subscribe:So,fire:Bo,fireModal:co,fireNotification:To,close:fo,isOpen:Ro,getCurrentConfig:Io,closeAll:$o,cleanup:Ao};var mo={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],n=mo[t];a!==void 0&&n&&o.style.setProperty(n,String(a))})}function Z(){let e=document.documentElement;Object.values(mo).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Fo={fire:(e,o)=>h.fire(e,o),modal:(e,o)=>h.fireModal(e,o),notification:(e,o)=>h.fireNotification(e,o),close:()=>h.close(),isOpen:()=>h.isOpen(),closeAll:()=>h.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},uo=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
|
13
|
+
`,document.body.appendChild(M))),M),eo=()=>{M&&M.children.length===0&&(M.remove(),M=null)};var b=require("react/jsx-runtime"),bo={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},xo=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="center",showCloseIcon:u=!0,className:s="",overlayClassName:x="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:v,maxWidth:c,size:p}=n;(0,T.useEffect)(()=>{if(m)return;let l=E=>{E.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=(0,T.useCallback)(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),r=(0,T.useCallback)(l=>{l.stopPropagation(),o()},[o]),y=(0,T.useMemo)(()=>{let l={};if(v!==void 0&&(l.width=typeof v=="number"?`${v}px`:v,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let E=bo[p];p==="full"&&(l.width=l.width??E),l.maxWidth=E}return l},[v,c,p]),h=`aark-modal-container ${i} ${s}`.trim(),q=R(),F=()=>a?(0,b.jsxs)("div",{className:h,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),(0,b.jsx)("div",{className:"aark-modal-wrapper",children:(0,b.jsx)(oo,{props:a,onClose:o})})]}):t?(0,b.jsx)("div",{className:h,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:(0,b.jsxs)("div",{className:"aark-modal-body",children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),t]})}):null;return(0,to.createPortal)((0,b.jsx)("div",{className:`aark-modal-overlay ${x}`.trim(),onClick:d,style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:i==="center"?"center":i.startsWith("top")?"flex-start":"flex-end",justifyContent:i.endsWith("center")?"center":i.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},W=xo;var A=require("react"),io=require("react-dom");var $=require("react"),g=require("react/jsx-runtime"),ao={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},No={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},wo=({props:e,onClose:o})=>{let{title:t,text:a,type:n="info",icon:i,html:u,timer:s=5e3,showCloseButton:x=!0,clickToClose:m=!0,width:f,fullWidth:v=!1,padding:c,customClass:p={}}=e;(0,$.useEffect)(()=>{if(s&&s>0){let h=setTimeout(o,s);return()=>clearTimeout(h)}},[s,o]);let d=()=>{m&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,g.jsx)("span",{children:i}):i:(0,g.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),y=(0,$.useMemo)(()=>{let h={};return c!==void 0&&(h.padding=typeof c=="number"?`${c}px`:c),v?(h.width="calc(100vw - 40px)",h.maxWidth="calc(100vw - 40px)"):f!==void 0&&(h.width=typeof f=="number"?`${f}px`:f),h},[f,v,c]);return(0,g.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&(0,g.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,g.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,g.jsx)("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),(0,g.jsxs)("div",{style:{flex:1,minWidth:0},children:[t&&(0,g.jsx)("div",{className:`aark-notification-header ${p.header||""}`,children:(0,g.jsx)("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),(0,g.jsx)("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?typeof u=="string"?(0,g.jsx)("div",{dangerouslySetInnerHTML:{__html:u}}):(0,g.jsx)("div",{children:u}):a?(0,g.jsx)("p",{children:a}):null})]}),x&&(0,g.jsx)("button",{onClick:h=>{h.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},no=wo;var P=require("react/jsx-runtime"),Po=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:x="",preventEscClose:m=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(m)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),v=`aark-notification-container ${i} ${x}`.trim(),c=R(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(i){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?(0,P.jsx)("div",{className:"aark-notification-wrapper",children:(0,P.jsx)(no,{props:a,onClose:o})}):t?(0,P.jsxs)("div",{className:v,role:"alert","aria-live":"polite",children:[u&&(0,P.jsx)("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),(0,P.jsx)("div",{className:"aark-notification-body",children:t})]}):null;return(0,io.createPortal)((0,P.jsx)("div",{style:p(),children:d()}),c)},L=Po;var X=require("react/jsx-runtime"),Eo=()=>{let{isOpen:e,config:o,close:t}=O();return!e||!o?null:o.mode==="modal"?(0,X.jsx)(W,{config:o,onClose:t}):o.mode==="notification"?(0,X.jsx)(L,{config:o,onClose:t}):null},H=Eo;var Y=new Set,B=null,I=null;function so(){if(I)return;let e=R();I=(0,lo.createRoot)(e),I.render((0,ro.createElement)(H))}function So(e){return Y.add(e),()=>Y.delete(e)}function K(e,o){let t={type:e,config:o};Y.forEach(a=>a(t))}function co(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};B=n,K("open",n)}function To(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};B=n,K("open",n)}function Bo(e,o){co(e,o)}function fo(){B&&(K("beforeClose",B),B=null,K("close"))}function Ro(){return B!==null}function Io(){return B}function $o(){fo()}function Ao(){I&&(I.unmount(),I=null),eo()}var C={subscribe:So,fire:Bo,fireModal:co,fireNotification:To,close:fo,isOpen:Ro,getCurrentConfig:Io,closeAll:$o,cleanup:Ao};var mo={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],n=mo[t];a!==void 0&&n&&o.style.setProperty(n,String(a))})}function Z(){let e=document.documentElement;Object.values(mo).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Fo={fire:(e,o)=>C.fire(e,o),modal:(e,o)=>C.fireModal(e,o),notification:(e,o)=>C.fireNotification(e,o),close:()=>C.close(),isOpen:()=>C.isOpen(),closeAll:()=>C.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},po=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import{createElement as To}from"react";import{createRoot as Bo}from"react-dom/client";import{useEffect as fo,useState as q,useCallback as mo}from"react";function A(){let[e,o]=q(!1),[t,a]=q(null),i=mo(()=>{k.close()},[]);return fo(()=>{let n=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},
|
|
1
|
+
import{createElement as To}from"react";import{createRoot as Bo}from"react-dom/client";import{useEffect as fo,useState as q,useCallback as mo}from"react";function A(){let[e,o]=q(!1),[t,a]=q(null),i=mo(()=>{k.close()},[]);return fo(()=>{let n=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},u=k.subscribe(n);return o(k.isOpen()),a(k.getCurrentConfig()),u},[]),{isOpen:e,config:t,close:i}}import{useEffect as vo,useCallback as Q,useMemo as yo}from"react";import{createPortal as ko}from"react-dom";import{memo as po,useMemo as T}from"react";import{jsx as F}from"react/jsx-runtime";var V={white:"#FFFFFF",black:"#0B071A"},j=po(({name:e,color:o="black",style:t,className:a="",noHoverEffect:i=!1,onClick:n,size:u=24,"aria-label":s,title:C})=>{let m=T(()=>String(u),[u]),f=T(()=>V[o]?V[o]:(o.startsWith("#"),o),[o]),g=T(()=>{let d=f;return e==="close"?F("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:F("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null},[e,f,m]),c=T(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${e} icon`,C&&(d.title=C),d.role=n?"button":"img",d},[s,C,e,n]),p=T(()=>{if(n)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),n())}},[n]);return F("i",{className:`
|
|
2
2
|
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
3
|
${!i&&n&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${n&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
5
|
${a}
|
|
6
|
-
`.trim(),style:t,onClick:n,onKeyDown:
|
|
6
|
+
`.trim(),style:t,onClick:n,onKeyDown:p,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var O=j;import{useMemo as U}from"react";import{jsx as M,jsxs as Y}from"react/jsx-runtime";var uo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},X={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},go=({props:e,onClose:o})=>{let{title:t,text:a,type:i="info",cancelText:n="Cancel",confirmText:u="OK",onCancel:s,onConfirm:C,icon:m,html:f,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:v={}}=e,y=()=>{s?.(),o()},$=()=>{C?.(),o()},R=U(()=>m?typeof m=="string"?M("span",{children:m}):m:M("span",{style:{color:X[i]},children:uo[i]}),[m,i]),l=p?["confirm","cancel"]:["cancel","confirm"],w=U(()=>{let x={};return r?(x.width="calc(100vw - 20px)",x.maxWidth="calc(100vw - 20px)"):typeof d=="number"?x.width=`${d}px`:x.width=d,x},[d,r]);return Y("div",{className:`aark-standard-modal ${v.popup||""}`,style:w,children:[Y("div",{className:`aark-modal-content ${v.content||""}`,children:[R&&M("div",{className:`aark-modal-icon ${v.icon||""}`,children:R}),t&&M("div",{className:`aark-modal-header ${v.header||""}`,children:M("h2",{className:`aark-modal-title ${v.title||""}`,children:t})}),f?typeof f=="string"?M("div",{dangerouslySetInnerHTML:{__html:f}}):M("div",{children:f}):a?M("p",{children:a}):null]}),(g||c)&&M("div",{className:`aark-modal-footer ${v.actions||""}`,children:l.map(x=>x==="cancel"&&g?M("button",{onClick:y,className:`aark-modal-cancel-button ${v.cancelButton||""}`,children:n},"cancel"):x==="confirm"&&c?M("button",{onClick:$,className:`aark-modal-confirm-button ${v.confirmButton||""}`,style:{background:X[i]},children:u},"confirm"):null)})]})},G=go;var h=null,E=()=>(h||(h=document.getElementById("aark-react-modalify-root"),h||(h=document.createElement("div"),h.id="aark-react-modalify-root",h.style.cssText=`
|
|
7
7
|
position: fixed;
|
|
8
8
|
top: 0;
|
|
9
9
|
left: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
14
|
-
`,document.body.appendChild(C))),C),J=()=>{C&&C.children.length===0&&(C.remove(),C=null)};import{jsx as N,jsxs as oo}from"react/jsx-runtime";var Co={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},ho=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="center",showCloseIcon:p=!0,className:s="",overlayClassName:h="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:u}=i;yo(()=>{if(f)return;let l=w=>{w.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,f]);let d=Q(l=>{l.target===l.currentTarget&&!m&&o()},[o,m]),r=Q(l=>{l.stopPropagation(),o()},[o]),y=vo(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(u){let w=Co[u];u==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,u]),v=`aark-modal-container ${n} ${s}`.trim(),$=E(),R=()=>a?oo("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[p&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),N("div",{className:"aark-modal-wrapper",children:N(G,{props:a,onClose:o})})]}):t?N("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:oo("div",{className:"aark-modal-body",children:[p&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),t]})}):null;return ko(N("div",{className:`aark-modal-overlay ${h}`.trim(),onClick:d,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:n.includes("center")?"center":n.includes("top")?"flex-start":"flex-end",justifyContent:n.includes("center")?"center":n.includes("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:R()}),$)},z=ho;import{useEffect as no,useCallback as No}from"react";import{createPortal as wo}from"react-dom";import{useMemo as eo,useEffect as Mo}from"react";import{jsx as b,jsxs as L}from"react/jsx-runtime";var to={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},bo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},xo=({props:e,onClose:o})=>{let{title:t,text:a,type:i="info",icon:n,html:p,timer:s=5e3,showCloseButton:h=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:u={}}=e;Mo(()=>{if(s&&s>0){let v=setTimeout(o,s);return()=>clearTimeout(v)}},[s,o]);let d=()=>{f&&o()},r=eo(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:to[i]},children:bo[i]}),[n,i]),y=eo(()=>{let v={};return c!==void 0&&(v.padding=typeof c=="number"?`${c}px`:c),g?(v.width="calc(100vw - 40px)",v.maxWidth="calc(100vw - 40px)"):m!==void 0&&(v.width=typeof m=="number"?`${m}px`:m),v},[m,g,c]);return L("div",{className:`aark-standard-notification aark-notification-${i} ${u.popup||""}`,style:y,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:to[i],animation:`aark-notification-progress ${s}ms linear forwards`}}),L("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&b("div",{className:`aark-notification-icon ${u.icon||""}`,children:r}),L("div",{style:{flex:1,minWidth:0},children:[t&&b("div",{className:`aark-notification-header ${u.header||""}`,children:b("h4",{className:`aark-notification-title ${u.title||""}`,children:t})}),b("div",{className:`aark-notification-content ${u.content||""}`,style:{marginTop:t?"0.25rem":0},children:p?b("div",{dangerouslySetInnerHTML:{__html:typeof p=="string"?p:""}}):a?b("p",{children:a}):null})]}),h&&b("button",{onClick:v=>{v.stopPropagation(),o()},className:`aark-notification-close ${u.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},ao=xo;import{jsx as B,jsxs as Eo}from"react/jsx-runtime";var Po=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="top-right",showCloseIcon:p=!0,autoCloseTime:s=5e3,className:h="",preventEscClose:f=!1}=i;no(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),no(()=>{if(f)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,f]);let m=No(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${n} ${h}`.trim(),c=E(),u=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(n){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?B("div",{className:"aark-notification-wrapper",children:B(ao,{props:a,onClose:o})}):t?Eo("div",{className:g,role:"alert","aria-live":"polite",children:[p&&B("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),B("div",{className:"aark-notification-body",children:t})]}):null;return wo(B("div",{style:u(),children:d()}),c)},W=Po;import{jsx as io}from"react/jsx-runtime";var So=()=>{let{isOpen:e,config:o,close:t}=A();return!e||!o?null:o.mode==="modal"?io(z,{config:o,onClose:t}):o.mode==="notification"?io(W,{config:o,onClose:t}):null},H=So;var K=new Set,P=null,S=null;function ro(){if(S)return;let e=E();S=Bo(e),S.render(To(H))}function Ro(e){return K.add(e),()=>K.delete(e)}function I(e,o){let t={type:e,config:o};K.forEach(a=>a(t))}function lo(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};P=i,I("open",i)}function Io(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};P=i,I("open",i)}function $o(e,o){lo(e,o)}function so(){P&&(I("beforeClose",P),P=null,I("close"))}function Ao(){return P!==null}function Fo(){return P}function Oo(){so()}function zo(){S&&(S.unmount(),S=null),J()}var k={subscribe:Ro,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:Oo,cleanup:zo};var co={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],i=co[t];a!==void 0&&i&&o.style.setProperty(i,String(a))})}function Z(){let e=document.documentElement;Object.values(co).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Lo={fire:(e,o)=>k.fire(e,o),modal:(e,o)=>k.fireModal(e,o),notification:(e,o)=>k.fireNotification(e,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},Wo=Lo;export{z as Modal,H as ModalProvider,W as Notification,Wo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
|
|
13
|
+
`,document.body.appendChild(h))),h),J=()=>{h&&h.children.length===0&&(h.remove(),h=null)};import{jsx as N,jsxs as oo}from"react/jsx-runtime";var ho={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},Co=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="center",showCloseIcon:u=!0,className:s="",overlayClassName:C="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:g,maxWidth:c,size:p}=i;vo(()=>{if(m)return;let l=w=>{w.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=Q(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),r=Q(l=>{l.stopPropagation(),o()},[o]),v=yo(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let w=ho[p];p==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,p]),y=`aark-modal-container ${n} ${s}`.trim(),$=E(),R=()=>a?oo("div",{className:y,style:v,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),N("div",{className:"aark-modal-wrapper",children:N(G,{props:a,onClose:o})})]}):t?N("div",{className:y,style:v,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:oo("div",{className:"aark-modal-body",children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),t]})}):null;return ko(N("div",{className:`aark-modal-overlay ${C}`.trim(),onClick:d,style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:n==="center"?"center":n.startsWith("top")?"flex-start":"flex-end",justifyContent:n.endsWith("center")?"center":n.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:R()}),$)},z=Co;import{useEffect as no,useCallback as No}from"react";import{createPortal as wo}from"react-dom";import{useMemo as eo,useEffect as Mo}from"react";import{jsx as b,jsxs as W}from"react/jsx-runtime";var to={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},bo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},xo=({props:e,onClose:o})=>{let{title:t,text:a,type:i="info",icon:n,html:u,timer:s=5e3,showCloseButton:C=!0,clickToClose:m=!0,width:f,fullWidth:g=!1,padding:c,customClass:p={}}=e;Mo(()=>{if(s&&s>0){let y=setTimeout(o,s);return()=>clearTimeout(y)}},[s,o]);let d=()=>{m&&o()},r=eo(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:to[i]},children:bo[i]}),[n,i]),v=eo(()=>{let y={};return c!==void 0&&(y.padding=typeof c=="number"?`${c}px`:c),g?(y.width="calc(100vw - 40px)",y.maxWidth="calc(100vw - 40px)"):f!==void 0&&(y.width=typeof f=="number"?`${f}px`:f),y},[f,g,c]);return W("div",{className:`aark-standard-notification aark-notification-${i} ${p.popup||""}`,style:v,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:to[i],animation:`aark-notification-progress ${s}ms linear forwards`}}),W("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&b("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),W("div",{style:{flex:1,minWidth:0},children:[t&&b("div",{className:`aark-notification-header ${p.header||""}`,children:b("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),b("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?typeof u=="string"?b("div",{dangerouslySetInnerHTML:{__html:u}}):b("div",{children:u}):a?b("p",{children:a}):null})]}),C&&b("button",{onClick:y=>{y.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},ao=xo;import{jsx as B,jsxs as Eo}from"react/jsx-runtime";var Po=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:C="",preventEscClose:m=!1}=i;no(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),no(()=>{if(m)return;let r=v=>{v.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=No(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${n} ${C}`.trim(),c=E(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(n){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?B("div",{className:"aark-notification-wrapper",children:B(ao,{props:a,onClose:o})}):t?Eo("div",{className:g,role:"alert","aria-live":"polite",children:[u&&B("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),B("div",{className:"aark-notification-body",children:t})]}):null;return wo(B("div",{style:p(),children:d()}),c)},L=Po;import{jsx as io}from"react/jsx-runtime";var So=()=>{let{isOpen:e,config:o,close:t}=A();return!e||!o?null:o.mode==="modal"?io(z,{config:o,onClose:t}):o.mode==="notification"?io(L,{config:o,onClose:t}):null},H=So;var K=new Set,P=null,S=null;function ro(){if(S)return;let e=E();S=Bo(e),S.render(To(H))}function Ro(e){return K.add(e),()=>K.delete(e)}function I(e,o){let t={type:e,config:o};K.forEach(a=>a(t))}function lo(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};P=i,I("open",i)}function Io(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};P=i,I("open",i)}function $o(e,o){lo(e,o)}function so(){P&&(I("beforeClose",P),P=null,I("close"))}function Ao(){return P!==null}function Fo(){return P}function Oo(){so()}function zo(){S&&(S.unmount(),S=null),J()}var k={subscribe:Ro,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:Oo,cleanup:zo};var co={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],i=co[t];a!==void 0&&i&&o.style.setProperty(i,String(a))})}function Z(){let e=document.documentElement;Object.values(co).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Wo={fire:(e,o)=>k.fire(e,o),modal:(e,o)=>k.fireModal(e,o),notification:(e,o)=>k.fireNotification(e,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},Lo=Wo;export{z as Modal,H as ModalProvider,L as Notification,Lo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var yo=Object.prototype.hasOwnProperty;var vo=(
|
|
1
|
+
"use strict";var V=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var go=Object.getOwnPropertyNames;var yo=Object.prototype.hasOwnProperty;var vo=(t,o)=>{for(var e in o)V(t,e,{get:o[e],enumerable:!0})},ko=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of go(o))!yo.call(t,n)&&n!==e&&V(t,n,{get:()=>o[n],enumerable:!(a=uo(o,n))||a.enumerable});return t};var Co=t=>ko(V({},"__esModule",{value:!0}),t);var Oo={};vo(Oo,{Modal:()=>W,ModalProvider:()=>H,Notification:()=>L,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>O});module.exports=Co(Oo);var ro=require("react"),lo=require("react-dom/client");var E=require("react");function O(){let[t,o]=(0,E.useState)(!1),[e,a]=(0,E.useState)(null),n=(0,E.useCallback)(()=>{h.close()},[]);return(0,E.useEffect)(()=>{let i=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},u=h.subscribe(i);return o(h.isOpen()),a(h.getCurrentConfig()),u},[]),{isOpen:t,config:e,close:n}}var R=require("react"),eo=require("react-dom");var w=require("react"),z=require("react/jsx-runtime"),G={white:"#FFFFFF",black:"#0B071A"},J=(0,w.memo)(({name:t,color:o="black",style:e,className:a="",noHoverEffect:n=!1,onClick:i,size:u=24,"aria-label":s,title:x})=>{let m=(0,w.useMemo)(()=>String(u),[u]),f=(0,w.useMemo)(()=>G[o]?G[o]:(o.startsWith("#"),o),[o]),y=(0,w.useMemo)(()=>{let d=f;return t==="close"?(0,z.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:(0,z.jsx)("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null},[t,f,m]),c=(0,w.useMemo)(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${t} icon`,x&&(d.title=x),d.role=i?"button":"img",d},[s,x,t,i]),p=(0,w.useMemo)(()=>{if(i)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),i())}},[i]);return(0,z.jsx)("i",{className:`
|
|
2
2
|
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
3
|
${!n&&i&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${i&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
5
|
${a}
|
|
6
|
-
`.trim(),style:
|
|
6
|
+
`.trim(),style:e,onClick:i,onKeyDown:p,tabIndex:i?0:void 0,...c,children:y})});J.displayName="Icon";var j=J;var U=require("react"),k=require("react/jsx-runtime"),ho={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},Q={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},Mo=({props:t,onClose:o})=>{let{title:e,text:a,type:n="info",cancelText:i="Cancel",confirmText:u="OK",onCancel:s,onConfirm:x,icon:m,html:f,showCancelButton:y=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:v={}}=t,C=()=>{s?.(),o()},q=()=>{x?.(),o()},F=(0,U.useMemo)(()=>m?typeof m=="string"?(0,k.jsx)("span",{children:m}):m:(0,k.jsx)("span",{style:{color:Q[n]},children:ho[n]}),[m,n]),l=p?["confirm","cancel"]:["cancel","confirm"],S=(0,U.useMemo)(()=>{let N={};return r?(N.width="calc(100vw - 20px)",N.maxWidth="calc(100vw - 20px)"):typeof d=="number"?N.width=`${d}px`:N.width=d,N},[d,r]);return(0,k.jsxs)("div",{className:`aark-standard-modal ${v.popup||""}`,style:S,children:[(0,k.jsxs)("div",{className:`aark-modal-content ${v.content||""}`,children:[F&&(0,k.jsx)("div",{className:`aark-modal-icon ${v.icon||""}`,children:F}),e&&(0,k.jsx)("div",{className:`aark-modal-header ${v.header||""}`,children:(0,k.jsx)("h2",{className:`aark-modal-title ${v.title||""}`,children:e})}),f?typeof f=="string"?(0,k.jsx)("div",{dangerouslySetInnerHTML:{__html:f}}):(0,k.jsx)("div",{children:f}):a?(0,k.jsx)("p",{children:a}):null]}),(y||c)&&(0,k.jsx)("div",{className:`aark-modal-footer ${v.actions||""}`,children:l.map(N=>N==="cancel"&&y?(0,k.jsx)("button",{onClick:C,className:`aark-modal-cancel-button ${v.cancelButton||""}`,children:i},"cancel"):N==="confirm"&&c?(0,k.jsx)("button",{onClick:q,className:`aark-modal-confirm-button ${v.confirmButton||""}`,style:{background:Q[n]},children:u},"confirm"):null)})]})},oo=Mo;var M=null,B=()=>(M||(M=document.getElementById("aark-react-modalify-root"),M||(M=document.createElement("div"),M.id="aark-react-modalify-root",M.style.cssText=`
|
|
7
7
|
position: fixed;
|
|
8
8
|
top: 0;
|
|
9
9
|
left: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
14
|
-
`,document.body.appendChild(M))),M),eo=()=>{M&&M.children.length===0&&(M.remove(),M=null)};var b=require("react/jsx-runtime"),bo={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},xo=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="center",showCloseIcon:u=!0,className:s="",overlayClassName:x="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:p}=n;(0,R.useEffect)(()=>{if(f)return;let l=S=>{S.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,f]);let d=(0,R.useCallback)(l=>{l.target===l.currentTarget&&!m&&o()},[o,m]),r=(0,R.useCallback)(l=>{l.stopPropagation(),o()},[o]),y=(0,R.useMemo)(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let S=bo[p];p==="full"&&(l.width=l.width??S),l.maxWidth=S}return l},[g,c,p]),k=`aark-modal-container ${i} ${s}`.trim(),q=B(),F=()=>a?(0,b.jsxs)("div",{className:k,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),(0,b.jsx)("div",{className:"aark-modal-wrapper",children:(0,b.jsx)(oo,{props:a,onClose:o})})]}):t?(0,b.jsx)("div",{className:k,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:(0,b.jsxs)("div",{className:"aark-modal-body",children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),t]})}):null;return(0,to.createPortal)((0,b.jsx)("div",{className:`aark-modal-overlay ${x}`.trim(),onClick:d,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:i.includes("center")?"center":i.includes("top")?"flex-start":"flex-end",justifyContent:i.includes("center")?"center":i.includes("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},L=xo;var A=require("react"),io=require("react-dom");var $=require("react"),v=require("react/jsx-runtime"),ao={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},No={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},wo=({props:e,onClose:o})=>{let{title:t,text:a,type:n="info",icon:i,html:u,timer:s=5e3,showCloseButton:x=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:p={}}=e;(0,$.useEffect)(()=>{if(s&&s>0){let k=setTimeout(o,s);return()=>clearTimeout(k)}},[s,o]);let d=()=>{f&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,v.jsx)("span",{children:i}):i:(0,v.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),y=(0,$.useMemo)(()=>{let k={};return c!==void 0&&(k.padding=typeof c=="number"?`${c}px`:c),g?(k.width="calc(100vw - 40px)",k.maxWidth="calc(100vw - 40px)"):m!==void 0&&(k.width=typeof m=="number"?`${m}px`:m),k},[m,g,c]);return(0,v.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&(0,v.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,v.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,v.jsx)("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),(0,v.jsxs)("div",{style:{flex:1,minWidth:0},children:[t&&(0,v.jsx)("div",{className:`aark-notification-header ${p.header||""}`,children:(0,v.jsx)("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),(0,v.jsx)("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?(0,v.jsx)("div",{dangerouslySetInnerHTML:{__html:typeof u=="string"?u:""}}):a?(0,v.jsx)("p",{children:a}):null})]}),x&&(0,v.jsx)("button",{onClick:k=>{k.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},no=wo;var P=require("react/jsx-runtime"),Po=({config:e,onClose:o})=>{let{content:t,props:a,options:n={}}=e,{position:i="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:x="",preventEscClose:f=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(f)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,f]);let m=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${i} ${x}`.trim(),c=B(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(i){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?(0,P.jsx)("div",{className:"aark-notification-wrapper",children:(0,P.jsx)(no,{props:a,onClose:o})}):t?(0,P.jsxs)("div",{className:g,role:"alert","aria-live":"polite",children:[u&&(0,P.jsx)("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),(0,P.jsx)("div",{className:"aark-notification-body",children:t})]}):null;return(0,io.createPortal)((0,P.jsx)("div",{style:p(),children:d()}),c)},W=Po;var X=require("react/jsx-runtime"),So=()=>{let{isOpen:e,config:o,close:t}=O();return!e||!o?null:o.mode==="modal"?(0,X.jsx)(L,{config:o,onClose:t}):o.mode==="notification"?(0,X.jsx)(W,{config:o,onClose:t}):null},H=So;var Y=new Set,T=null,I=null;function so(){if(I)return;let e=B();I=(0,lo.createRoot)(e),I.render((0,ro.createElement)(H))}function Eo(e){return Y.add(e),()=>Y.delete(e)}function K(e,o){let t={type:e,config:o};Y.forEach(a=>a(t))}function co(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};T=n,K("open",n)}function Ro(e,o){so();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let n={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};T=n,K("open",n)}function To(e,o){co(e,o)}function fo(){T&&(K("beforeClose",T),T=null,K("close"))}function Bo(){return T!==null}function Io(){return T}function $o(){fo()}function Ao(){I&&(I.unmount(),I=null),eo()}var h={subscribe:Eo,fire:To,fireModal:co,fireNotification:Ro,close:fo,isOpen:Bo,getCurrentConfig:Io,closeAll:$o,cleanup:Ao};var mo={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],n=mo[t];a!==void 0&&n&&o.style.setProperty(n,String(a))})}function Z(){let e=document.documentElement;Object.values(mo).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Fo={fire:(e,o)=>h.fire(e,o),modal:(e,o)=>h.fireModal(e,o),notification:(e,o)=>h.fireNotification(e,o),close:()=>h.close(),isOpen:()=>h.isOpen(),closeAll:()=>h.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},po=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
|
13
|
+
`,document.body.appendChild(M))),M),to=()=>{M&&M.children.length===0&&(M.remove(),M=null)};var b=require("react/jsx-runtime"),bo={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},xo=({config:t,onClose:o})=>{let{content:e,props:a,options:n={}}=t,{position:i="center",showCloseIcon:u=!0,className:s="",overlayClassName:x="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:y,maxWidth:c,size:p}=n;(0,R.useEffect)(()=>{if(m)return;let l=S=>{S.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=(0,R.useCallback)(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),r=(0,R.useCallback)(l=>{l.stopPropagation(),o()},[o]),v=(0,R.useMemo)(()=>{let l={};if(y!==void 0&&(l.width=typeof y=="number"?`${y}px`:y,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let S=bo[p];p==="full"&&(l.width=l.width??S),l.maxWidth=S}return l},[y,c,p]),C=`aark-modal-container ${i} ${s}`.trim(),q=B(),F=()=>a?(0,b.jsxs)("div",{className:C,style:v,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),(0,b.jsx)("div",{className:"aark-modal-wrapper",children:(0,b.jsx)(oo,{props:a,onClose:o})})]}):e?(0,b.jsx)("div",{className:C,style:v,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:(0,b.jsxs)("div",{className:"aark-modal-body",children:[u&&(0,b.jsx)("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:(0,b.jsx)(j,{name:"close",size:12})}),e]})}):null;return(0,eo.createPortal)((0,b.jsx)("div",{className:`aark-modal-overlay ${x}`.trim(),onClick:d,style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:i==="center"?"center":i.startsWith("top")?"flex-start":"flex-end",justifyContent:i.endsWith("center")?"center":i.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:F()}),q)},W=xo;var A=require("react"),io=require("react-dom");var $=require("react"),g=require("react/jsx-runtime"),ao={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},No={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},wo=({props:t,onClose:o})=>{let{title:e,text:a,type:n="info",icon:i,html:u,timer:s=5e3,showCloseButton:x=!0,clickToClose:m=!0,width:f,fullWidth:y=!1,padding:c,customClass:p={}}=t;(0,$.useEffect)(()=>{if(s&&s>0){let C=setTimeout(o,s);return()=>clearTimeout(C)}},[s,o]);let d=()=>{m&&o()},r=(0,$.useMemo)(()=>i?typeof i=="string"?(0,g.jsx)("span",{children:i}):i:(0,g.jsx)("span",{style:{color:ao[n]},children:No[n]}),[i,n]),v=(0,$.useMemo)(()=>{let C={};return c!==void 0&&(C.padding=typeof c=="number"?`${c}px`:c),y?(C.width="calc(100vw - 40px)",C.maxWidth="calc(100vw - 40px)"):f!==void 0&&(C.width=typeof f=="number"?`${f}px`:f),C},[f,y,c]);return(0,g.jsxs)("div",{className:`aark-standard-notification aark-notification-${n} ${p.popup||""}`,style:v,onClick:d,children:[s&&s>0&&(0,g.jsx)("div",{className:"aark-notification-progress",style:{background:ao[n],animation:`aark-notification-progress ${s}ms linear forwards`}}),(0,g.jsxs)("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&(0,g.jsx)("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),(0,g.jsxs)("div",{style:{flex:1,minWidth:0},children:[e&&(0,g.jsx)("div",{className:`aark-notification-header ${p.header||""}`,children:(0,g.jsx)("h4",{className:`aark-notification-title ${p.title||""}`,children:e})}),(0,g.jsx)("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:e?"0.25rem":0},children:u?typeof u=="string"?(0,g.jsx)("div",{dangerouslySetInnerHTML:{__html:u}}):(0,g.jsx)("div",{children:u}):a?(0,g.jsx)("p",{children:a}):null})]}),x&&(0,g.jsx)("button",{onClick:C=>{C.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},no=wo;var P=require("react/jsx-runtime"),Po=({config:t,onClose:o})=>{let{content:e,props:a,options:n={}}=t,{position:i="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:x="",preventEscClose:m=!1}=n;(0,A.useEffect)(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),(0,A.useEffect)(()=>{if(m)return;let r=v=>{v.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=(0,A.useCallback)(r=>{r.stopPropagation(),o()},[o]),y=`aark-notification-container ${i} ${x}`.trim(),c=B(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(i){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?(0,P.jsx)("div",{className:"aark-notification-wrapper",children:(0,P.jsx)(no,{props:a,onClose:o})}):e?(0,P.jsxs)("div",{className:y,role:"alert","aria-live":"polite",children:[u&&(0,P.jsx)("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),(0,P.jsx)("div",{className:"aark-notification-body",children:e})]}):null;return(0,io.createPortal)((0,P.jsx)("div",{style:p(),children:d()}),c)},L=Po;var X=require("react/jsx-runtime"),So=()=>{let{isOpen:t,config:o,close:e}=O();return!t||!o?null:o.mode==="modal"?(0,X.jsx)(W,{config:o,onClose:e}):o.mode==="notification"?(0,X.jsx)(L,{config:o,onClose:e}):null},H=So;var Y=new Set,T=null,I=null;function so(){if(I)return;let t=B();I=(0,lo.createRoot)(t),I.render((0,ro.createElement)(H))}function Eo(t){return Y.add(t),()=>Y.delete(t)}function K(t,o){let e={type:t,config:o};Y.forEach(a=>a(e))}function co(t,o){so();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let n={content:e,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};T=n,K("open",n)}function Ro(t,o){so();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let n={content:e,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};T=n,K("open",n)}function To(t,o){co(t,o)}function fo(){T&&(K("beforeClose",T),T=null,K("close"))}function Bo(){return T!==null}function Io(){return T}function $o(){fo()}function Ao(){I&&(I.unmount(),I=null),to()}var h={subscribe:Eo,fire:To,fireModal:co,fireNotification:Ro,close:fo,isOpen:Bo,getCurrentConfig:Io,closeAll:$o,cleanup:Ao};var mo={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(t){let o=document.documentElement;Object.keys(t).forEach(e=>{let a=t[e],n=mo[e];a!==void 0&&n&&o.style.setProperty(n,String(a))})}function Z(){let t=document.documentElement;Object.values(mo).forEach(o=>{t.style.removeProperty(o)})}function _(){let t=document.documentElement,o=getComputedStyle(t),e=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:e("--aark-modal-overlay-bg"),overlayBlur:e("--aark-modal-overlay-blur"),modalBackground:e("--aark-modal-bg"),modalBorderRadius:e("--aark-modal-radius"),modalShadow:e("--aark-modal-shadow"),modalPadding:e("--aark-modal-pad"),modalMaxWidth:e("--aark-modal-max-width"),modalZIndex:parseInt(e("--aark-modal-z")??"0")||void 0,closeButtonColor:e("--aark-close-color"),closeButtonHoverBackground:e("--aark-close-hover"),closeButtonHoverColor:e("--aark-close-hover-color"),closeButtonFocusOutline:e("--aark-close-focus-outline"),animationDuration:e("--aark-anim"),notificationBackground:e("--aark-notification-bg"),notificationBorderRadius:e("--aark-notification-radius"),notificationShadow:e("--aark-notification-shadow"),notificationPadding:e("--aark-notification-pad"),notificationZIndex:parseInt(e("--aark-notification-z")??"0")||void 0}}var Fo={fire:(t,o)=>h.fire(t,o),modal:(t,o)=>h.fireModal(t,o),notification:(t,o)=>h.fireNotification(t,o),close:()=>h.close(),isOpen:()=>h.isOpen(),closeAll:()=>h.closeAll(),setTheme:t=>D(t),resetTheme:()=>Z(),getTheme:()=>_()},po=Fo;0&&(module.exports={Modal,ModalProvider,Notification,aark,getAarkModalTheme,resetAarkModalTheme,setAarkModalTheme,useModal});
|
package/dist/index.esm.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import{createElement as Ro}from"react";import{createRoot as To}from"react-dom/client";import{useEffect as fo,useState as q,useCallback as mo}from"react";function A(){let[
|
|
1
|
+
import{createElement as Ro}from"react";import{createRoot as To}from"react-dom/client";import{useEffect as fo,useState as q,useCallback as mo}from"react";function A(){let[t,o]=q(!1),[e,a]=q(null),i=mo(()=>{k.close()},[]);return fo(()=>{let n=s=>{switch(s.type){case"open":o(!0),a(s.config||null);break;case"close":o(!1),a(null);break;case"beforeClose":break}},u=k.subscribe(n);return o(k.isOpen()),a(k.getCurrentConfig()),u},[]),{isOpen:t,config:e,close:i}}import{useEffect as yo,useCallback as Q,useMemo as vo}from"react";import{createPortal as ko}from"react-dom";import{memo as po,useMemo as R}from"react";import{jsx as F}from"react/jsx-runtime";var V={white:"#FFFFFF",black:"#0B071A"},j=po(({name:t,color:o="black",style:e,className:a="",noHoverEffect:i=!1,onClick:n,size:u=24,"aria-label":s,title:h})=>{let m=R(()=>String(u),[u]),f=R(()=>V[o]?V[o]:(o.startsWith("#"),o),[o]),g=R(()=>{let d=f;return t==="close"?F("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:F("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null},[t,f,m]),c=R(()=>{let d={};return s?d["aria-label"]=s:d["aria-label"]=`${t} icon`,h&&(d.title=h),d.role=n?"button":"img",d},[s,h,t,n]),p=R(()=>{if(n)return d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),n())}},[n]);return F("i",{className:`
|
|
2
2
|
inline-flex items-center justify-center bg-transparent outline-none border-none
|
|
3
3
|
${!i&&n&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}
|
|
4
4
|
${n&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}
|
|
5
5
|
${a}
|
|
6
|
-
`.trim(),style:
|
|
6
|
+
`.trim(),style:e,onClick:n,onKeyDown:p,tabIndex:n?0:void 0,...c,children:g})});j.displayName="Icon";var O=j;import{useMemo as U}from"react";import{jsx as M,jsxs as Y}from"react/jsx-runtime";var uo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},X={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},go=({props:t,onClose:o})=>{let{title:e,text:a,type:i="info",cancelText:n="Cancel",confirmText:u="OK",onCancel:s,onConfirm:h,icon:m,html:f,showCancelButton:g=!1,showConfirmButton:c=!0,reverseButtons:p=!1,width:d="auto",fullWidth:r=!1,customClass:y={}}=t,v=()=>{s?.(),o()},$=()=>{h?.(),o()},B=U(()=>m?typeof m=="string"?M("span",{children:m}):m:M("span",{style:{color:X[i]},children:uo[i]}),[m,i]),l=p?["confirm","cancel"]:["cancel","confirm"],w=U(()=>{let x={};return r?(x.width="calc(100vw - 20px)",x.maxWidth="calc(100vw - 20px)"):typeof d=="number"?x.width=`${d}px`:x.width=d,x},[d,r]);return Y("div",{className:`aark-standard-modal ${y.popup||""}`,style:w,children:[Y("div",{className:`aark-modal-content ${y.content||""}`,children:[B&&M("div",{className:`aark-modal-icon ${y.icon||""}`,children:B}),e&&M("div",{className:`aark-modal-header ${y.header||""}`,children:M("h2",{className:`aark-modal-title ${y.title||""}`,children:e})}),f?typeof f=="string"?M("div",{dangerouslySetInnerHTML:{__html:f}}):M("div",{children:f}):a?M("p",{children:a}):null]}),(g||c)&&M("div",{className:`aark-modal-footer ${y.actions||""}`,children:l.map(x=>x==="cancel"&&g?M("button",{onClick:v,className:`aark-modal-cancel-button ${y.cancelButton||""}`,children:n},"cancel"):x==="confirm"&&c?M("button",{onClick:$,className:`aark-modal-confirm-button ${y.confirmButton||""}`,style:{background:X[i]},children:u},"confirm"):null)})]})},G=go;var C=null,S=()=>(C||(C=document.getElementById("aark-react-modalify-root"),C||(C=document.createElement("div"),C.id="aark-react-modalify-root",C.style.cssText=`
|
|
7
7
|
position: fixed;
|
|
8
8
|
top: 0;
|
|
9
9
|
left: 0;
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
pointer-events: none;
|
|
13
|
-
|
|
14
|
-
`,document.body.appendChild(C))),C),J=()=>{C&&C.children.length===0&&(C.remove(),C=null)};import{jsx as N,jsxs as oo}from"react/jsx-runtime";var Co={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},ho=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="center",showCloseIcon:u=!0,className:s="",overlayClassName:h="",preventEscClose:f=!1,preventOverlayClose:m=!1,width:g,maxWidth:c,size:p}=i;yo(()=>{if(f)return;let l=w=>{w.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,f]);let d=Q(l=>{l.target===l.currentTarget&&!m&&o()},[o,m]),r=Q(l=>{l.stopPropagation(),o()},[o]),y=vo(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let w=Co[p];p==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,p]),v=`aark-modal-container ${n} ${s}`.trim(),$=S(),B=()=>a?oo("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),N("div",{className:"aark-modal-wrapper",children:N(G,{props:a,onClose:o})})]}):t?N("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:oo("div",{className:"aark-modal-body",children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),t]})}):null;return ko(N("div",{className:`aark-modal-overlay ${h}`.trim(),onClick:d,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:n.includes("center")?"center":n.includes("top")?"flex-start":"flex-end",justifyContent:n.includes("center")?"center":n.includes("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:B()}),$)},z=ho;import{useEffect as no,useCallback as No}from"react";import{createPortal as wo}from"react-dom";import{useMemo as eo,useEffect as Mo}from"react";import{jsx as b,jsxs as L}from"react/jsx-runtime";var to={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},bo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},xo=({props:e,onClose:o})=>{let{title:t,text:a,type:i="info",icon:n,html:u,timer:s=5e3,showCloseButton:h=!0,clickToClose:f=!0,width:m,fullWidth:g=!1,padding:c,customClass:p={}}=e;Mo(()=>{if(s&&s>0){let v=setTimeout(o,s);return()=>clearTimeout(v)}},[s,o]);let d=()=>{f&&o()},r=eo(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:to[i]},children:bo[i]}),[n,i]),y=eo(()=>{let v={};return c!==void 0&&(v.padding=typeof c=="number"?`${c}px`:c),g?(v.width="calc(100vw - 40px)",v.maxWidth="calc(100vw - 40px)"):m!==void 0&&(v.width=typeof m=="number"?`${m}px`:m),v},[m,g,c]);return L("div",{className:`aark-standard-notification aark-notification-${i} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:to[i],animation:`aark-notification-progress ${s}ms linear forwards`}}),L("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&b("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),L("div",{style:{flex:1,minWidth:0},children:[t&&b("div",{className:`aark-notification-header ${p.header||""}`,children:b("h4",{className:`aark-notification-title ${p.title||""}`,children:t})}),b("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:t?"0.25rem":0},children:u?b("div",{dangerouslySetInnerHTML:{__html:typeof u=="string"?u:""}}):a?b("p",{children:a}):null})]}),h&&b("button",{onClick:v=>{v.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},ao=xo;import{jsx as T,jsxs as So}from"react/jsx-runtime";var Po=({config:e,onClose:o})=>{let{content:t,props:a,options:i={}}=e,{position:n="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:h="",preventEscClose:f=!1}=i;no(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),no(()=>{if(f)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,f]);let m=No(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${n} ${h}`.trim(),c=S(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(n){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?T("div",{className:"aark-notification-wrapper",children:T(ao,{props:a,onClose:o})}):t?So("div",{className:g,role:"alert","aria-live":"polite",children:[u&&T("button",{onClick:m,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),T("div",{className:"aark-notification-body",children:t})]}):null;return wo(T("div",{style:p(),children:d()}),c)},W=Po;import{jsx as io}from"react/jsx-runtime";var Eo=()=>{let{isOpen:e,config:o,close:t}=A();return!e||!o?null:o.mode==="modal"?io(z,{config:o,onClose:t}):o.mode==="notification"?io(W,{config:o,onClose:t}):null},H=Eo;var K=new Set,P=null,E=null;function ro(){if(E)return;let e=S();E=To(e),E.render(Ro(H))}function Bo(e){return K.add(e),()=>K.delete(e)}function I(e,o){let t={type:e,config:o};K.forEach(a=>a(t))}function lo(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};P=i,I("open",i)}function Io(e,o){ro();let t,a;e&&typeof e=="object"&&!("$$typeof"in e)&&!Array.isArray(e)?(a=e,t=void 0):(t=e,a=void 0);let i={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};P=i,I("open",i)}function $o(e,o){lo(e,o)}function so(){P&&(I("beforeClose",P),P=null,I("close"))}function Ao(){return P!==null}function Fo(){return P}function Oo(){so()}function zo(){E&&(E.unmount(),E=null),J()}var k={subscribe:Bo,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:Oo,cleanup:zo};var co={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(e){let o=document.documentElement;Object.keys(e).forEach(t=>{let a=e[t],i=co[t];a!==void 0&&i&&o.style.setProperty(i,String(a))})}function Z(){let e=document.documentElement;Object.values(co).forEach(o=>{e.style.removeProperty(o)})}function _(){let e=document.documentElement,o=getComputedStyle(e),t=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:t("--aark-modal-overlay-bg"),overlayBlur:t("--aark-modal-overlay-blur"),modalBackground:t("--aark-modal-bg"),modalBorderRadius:t("--aark-modal-radius"),modalShadow:t("--aark-modal-shadow"),modalPadding:t("--aark-modal-pad"),modalMaxWidth:t("--aark-modal-max-width"),modalZIndex:parseInt(t("--aark-modal-z")??"0")||void 0,closeButtonColor:t("--aark-close-color"),closeButtonHoverBackground:t("--aark-close-hover"),closeButtonHoverColor:t("--aark-close-hover-color"),closeButtonFocusOutline:t("--aark-close-focus-outline"),animationDuration:t("--aark-anim"),notificationBackground:t("--aark-notification-bg"),notificationBorderRadius:t("--aark-notification-radius"),notificationShadow:t("--aark-notification-shadow"),notificationPadding:t("--aark-notification-pad"),notificationZIndex:parseInt(t("--aark-notification-z")??"0")||void 0}}var Lo={fire:(e,o)=>k.fire(e,o),modal:(e,o)=>k.fireModal(e,o),notification:(e,o)=>k.fireNotification(e,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:e=>D(e),resetTheme:()=>Z(),getTheme:()=>_()},Wo=Lo;export{z as Modal,H as ModalProvider,W as Notification,Wo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
|
|
13
|
+
`,document.body.appendChild(C))),C),J=()=>{C&&C.children.length===0&&(C.remove(),C=null)};import{jsx as N,jsxs as oo}from"react/jsx-runtime";var Co={sm:"400px",md:"550px",lg:"700px",xl:"900px",full:"calc(100vw - 32px)"},ho=({config:t,onClose:o})=>{let{content:e,props:a,options:i={}}=t,{position:n="center",showCloseIcon:u=!0,className:s="",overlayClassName:h="",preventEscClose:m=!1,preventOverlayClose:f=!1,width:g,maxWidth:c,size:p}=i;yo(()=>{if(m)return;let l=w=>{w.key==="Escape"&&o()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[o,m]);let d=Q(l=>{l.target===l.currentTarget&&!f&&o()},[o,f]),r=Q(l=>{l.stopPropagation(),o()},[o]),y=vo(()=>{let l={};if(g!==void 0&&(l.width=typeof g=="number"?`${g}px`:g,c===void 0&&(l.maxWidth=l.width)),c!==void 0)l.maxWidth=typeof c=="number"?`${c}px`:c;else if(p){let w=Co[p];p==="full"&&(l.width=l.width??w),l.maxWidth=w}return l},[g,c,p]),v=`aark-modal-container ${n} ${s}`.trim(),$=S(),B=()=>a?oo("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),N("div",{className:"aark-modal-wrapper",children:N(G,{props:a,onClose:o})})]}):e?N("div",{className:v,style:y,role:"dialog","aria-modal":"true",onClick:l=>l.stopPropagation(),children:oo("div",{className:"aark-modal-body",children:[u&&N("button",{onClick:r,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:N(O,{name:"close",size:12})}),e]})}):null;return ko(N("div",{className:`aark-modal-overlay ${h}`.trim(),onClick:d,style:{position:"fixed",inset:0,zIndex:"var(--aark-modal-z, 9999)",background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",WebkitBackdropFilter:"blur(var(--aark-modal-overlay-blur, 0px))",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:n==="center"?"center":n.startsWith("top")?"flex-start":"flex-end",justifyContent:n.endsWith("center")?"center":n.endsWith("right")?"flex-end":"flex-start",padding:"1rem",overflowY:"auto",boxSizing:"border-box"},children:B()}),$)},z=ho;import{useEffect as no,useCallback as No}from"react";import{createPortal as wo}from"react-dom";import{useMemo as to,useEffect as Mo}from"react";import{jsx as b,jsxs as W}from"react/jsx-runtime";var eo={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},bo={success:"\u2713",error:"\u2715",warning:"\u26A0",info:"\u24D8",question:"?"},xo=({props:t,onClose:o})=>{let{title:e,text:a,type:i="info",icon:n,html:u,timer:s=5e3,showCloseButton:h=!0,clickToClose:m=!0,width:f,fullWidth:g=!1,padding:c,customClass:p={}}=t;Mo(()=>{if(s&&s>0){let v=setTimeout(o,s);return()=>clearTimeout(v)}},[s,o]);let d=()=>{m&&o()},r=to(()=>n?typeof n=="string"?b("span",{children:n}):n:b("span",{style:{color:eo[i]},children:bo[i]}),[n,i]),y=to(()=>{let v={};return c!==void 0&&(v.padding=typeof c=="number"?`${c}px`:c),g?(v.width="calc(100vw - 40px)",v.maxWidth="calc(100vw - 40px)"):f!==void 0&&(v.width=typeof f=="number"?`${f}px`:f),v},[f,g,c]);return W("div",{className:`aark-standard-notification aark-notification-${i} ${p.popup||""}`,style:y,onClick:d,children:[s&&s>0&&b("div",{className:"aark-notification-progress",style:{background:eo[i],animation:`aark-notification-progress ${s}ms linear forwards`}}),W("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[r&&b("div",{className:`aark-notification-icon ${p.icon||""}`,children:r}),W("div",{style:{flex:1,minWidth:0},children:[e&&b("div",{className:`aark-notification-header ${p.header||""}`,children:b("h4",{className:`aark-notification-title ${p.title||""}`,children:e})}),b("div",{className:`aark-notification-content ${p.content||""}`,style:{marginTop:e?"0.25rem":0},children:u?typeof u=="string"?b("div",{dangerouslySetInnerHTML:{__html:u}}):b("div",{children:u}):a?b("p",{children:a}):null})]}),h&&b("button",{onClick:v=>{v.stopPropagation(),o()},className:`aark-notification-close ${p.closeButton||""}`,"aria-label":"Close notification",type:"button",children:"\xD7"})]})]})},ao=xo;import{jsx as T,jsxs as So}from"react/jsx-runtime";var Po=({config:t,onClose:o})=>{let{content:e,props:a,options:i={}}=t,{position:n="top-right",showCloseIcon:u=!0,autoCloseTime:s=5e3,className:h="",preventEscClose:m=!1}=i;no(()=>{if(s&&!a){let r=setTimeout(o,s);return()=>clearTimeout(r)}},[s,o,a]),no(()=>{if(m)return;let r=y=>{y.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,m]);let f=No(r=>{r.stopPropagation(),o()},[o]),g=`aark-notification-container ${n} ${h}`.trim(),c=S(),p=()=>{let r={position:"fixed",zIndex:1e4,margin:"1rem"};switch(n){case"top-left":return{...r,top:0,left:0};case"top-center":return{...r,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":return{...r,top:0,right:0};case"bottom-left":return{...r,bottom:0,left:0};case"bottom-center":return{...r,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:0,right:0};default:return{...r,top:0,right:0}}},d=()=>a?T("div",{className:"aark-notification-wrapper",children:T(ao,{props:a,onClose:o})}):e?So("div",{className:g,role:"alert","aria-live":"polite",children:[u&&T("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"\xD7"}),T("div",{className:"aark-notification-body",children:e})]}):null;return wo(T("div",{style:p(),children:d()}),c)},L=Po;import{jsx as io}from"react/jsx-runtime";var Eo=()=>{let{isOpen:t,config:o,close:e}=A();return!t||!o?null:o.mode==="modal"?io(z,{config:o,onClose:e}):o.mode==="notification"?io(L,{config:o,onClose:e}):null},H=Eo;var K=new Set,P=null,E=null;function ro(){if(E)return;let t=S();E=To(t),E.render(Ro(H))}function Bo(t){return K.add(t),()=>K.delete(t)}function I(t,o){let e={type:t,config:o};K.forEach(a=>a(e))}function lo(t,o){ro();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let i={content:e,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},o)};P=i,I("open",i)}function Io(t,o){ro();let e,a;t&&typeof t=="object"&&!("$$typeof"in t)&&!Array.isArray(t)?(a=t,e=void 0):(e=t,a=void 0);let i={content:e,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},o)};P=i,I("open",i)}function $o(t,o){lo(t,o)}function so(){P&&(I("beforeClose",P),P=null,I("close"))}function Ao(){return P!==null}function Fo(){return P}function Oo(){so()}function zo(){E&&(E.unmount(),E=null),J()}var k={subscribe:Bo,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:Oo,cleanup:zo};var co={overlayBackground:"--aark-modal-overlay-bg",overlayBlur:"--aark-modal-overlay-blur",modalBackground:"--aark-modal-bg",modalBorderRadius:"--aark-modal-radius",modalShadow:"--aark-modal-shadow",modalPadding:"--aark-modal-pad",modalMaxWidth:"--aark-modal-max-width",modalZIndex:"--aark-modal-z",closeButtonColor:"--aark-close-color",closeButtonHoverBackground:"--aark-close-hover",closeButtonHoverColor:"--aark-close-hover-color",closeButtonFocusOutline:"--aark-close-focus-outline",animationDuration:"--aark-anim",notificationBackground:"--aark-notification-bg",notificationBorderRadius:"--aark-notification-radius",notificationShadow:"--aark-notification-shadow",notificationPadding:"--aark-notification-pad",notificationZIndex:"--aark-notification-z"};function D(t){let o=document.documentElement;Object.keys(t).forEach(e=>{let a=t[e],i=co[e];a!==void 0&&i&&o.style.setProperty(i,String(a))})}function Z(){let t=document.documentElement;Object.values(co).forEach(o=>{t.style.removeProperty(o)})}function _(){let t=document.documentElement,o=getComputedStyle(t),e=a=>o.getPropertyValue(a).trim()||void 0;return{overlayBackground:e("--aark-modal-overlay-bg"),overlayBlur:e("--aark-modal-overlay-blur"),modalBackground:e("--aark-modal-bg"),modalBorderRadius:e("--aark-modal-radius"),modalShadow:e("--aark-modal-shadow"),modalPadding:e("--aark-modal-pad"),modalMaxWidth:e("--aark-modal-max-width"),modalZIndex:parseInt(e("--aark-modal-z")??"0")||void 0,closeButtonColor:e("--aark-close-color"),closeButtonHoverBackground:e("--aark-close-hover"),closeButtonHoverColor:e("--aark-close-hover-color"),closeButtonFocusOutline:e("--aark-close-focus-outline"),animationDuration:e("--aark-anim"),notificationBackground:e("--aark-notification-bg"),notificationBorderRadius:e("--aark-notification-radius"),notificationShadow:e("--aark-notification-shadow"),notificationPadding:e("--aark-notification-pad"),notificationZIndex:parseInt(e("--aark-notification-z")??"0")||void 0}}var Wo={fire:(t,o)=>k.fire(t,o),modal:(t,o)=>k.fireModal(t,o),notification:(t,o)=>k.fireNotification(t,o),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:t=>D(t),resetTheme:()=>Z(),getTheme:()=>_()},Lo=Wo;export{z as Modal,H as ModalProvider,L as Notification,Lo as aark,_ as getAarkModalTheme,Z as resetAarkModalTheme,D as setAarkModalTheme,A as useModal};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aark-react-modalify",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling via CSS variables, responsive size presets, and a simple imperative API.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.cjs.js",
|