aark-react-modalify 1.3.0 → 1.3.2
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 +4 -4
- package/dist/index-no-styles.esm.js +4 -4
- package/dist/index.cjs.js +4 -4
- package/dist/index.esm.js +4 -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,14 @@
|
|
|
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 zo={};yo(zo,{Modal:()=>W,ModalProvider:()=>H,Notification:()=>L,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>z});module.exports=ho(zo);var ro=require("react"),lo=require("react-dom/client");var S=require("react");function z(){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"),O=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,O.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:(0,O.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,O.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
|
-
z-index:
|
|
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:
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
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: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}=z();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,14 @@
|
|
|
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 z=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
|
-
z-index:
|
|
14
|
-
`,document.body.appendChild(
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
14
|
+
`,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(z,{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(z,{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()}),$)},O=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(O,{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 zo(){so()}function Oo(){S&&(S.unmount(),S=null),J()}var k={subscribe:Ro,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:zo,cleanup:Oo};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{O 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,14 @@
|
|
|
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 zo={};vo(zo,{Modal:()=>W,ModalProvider:()=>H,Notification:()=>L,aark:()=>po,getAarkModalTheme:()=>_,resetAarkModalTheme:()=>Z,setAarkModalTheme:()=>D,useModal:()=>z});module.exports=Co(zo);var ro=require("react"),lo=require("react-dom/client");var E=require("react");function z(){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"),O=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,O.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:(0,O.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,O.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
|
-
z-index:
|
|
14
|
-
`,document.body.appendChild(M))),M),
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
14
|
+
`,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}=z();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,14 @@
|
|
|
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 z=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
|
-
z-index:
|
|
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:
|
|
13
|
+
z-index: var(--aark-modal-z, 9999);
|
|
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: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(z,{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(z,{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()}),$)},O=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(O,{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 zo(){so()}function Oo(){E&&(E.unmount(),E=null),J()}var k={subscribe:Bo,fire:$o,fireModal:lo,fireNotification:Io,close:so,isOpen:Ao,getCurrentConfig:Fo,closeAll:zo,cleanup:Oo};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{O 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.2",
|
|
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",
|