aark-react-modalify 1.1.0 → 1.2.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 +225 -118
- package/dist/aark-react-modalify.css +1 -1
- package/dist/components/modals/StandardModal.d.ts +8 -0
- package/dist/components/modals/index.d.ts +1 -0
- package/dist/components/notifications/StandardNotification.d.ts +8 -0
- package/dist/components/notifications/index.d.ts +1 -0
- package/dist/index-no-styles.cjs.js +1 -0
- package/dist/index-no-styles.esm.js +14 -0
- package/dist/index.d.ts +2 -1
- package/dist/logic/ModalManager.d.ts +4 -4
- package/dist/logic/aark.d.ts +4 -4
- package/dist/types/index.d.ts +66 -2
- package/dist/utils/inject-styles.d.ts +3 -0
- package/dist/utils/modal-root.d.ts +18 -0
- package/package.json +27 -25
- package/dist/index.cjs.js +0 -32
- package/dist/index.esm.js +0 -568
package/README.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# AARK React Modalify 🚀
|
|
2
2
|
|
|
3
|
-
A lightweight, customizable, and
|
|
3
|
+
A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling, and a simple imperative API for displaying modals, alerts, confirmations, and toast notifications.
|
|
4
4
|
|
|
5
5
|
## ✨ Features
|
|
6
6
|
|
|
7
7
|
- **Zero Dependencies**: Pure React implementation
|
|
8
8
|
- **TypeScript Support**: Full type safety out of the box
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
9
|
+
- **Dual API**: Component-based OR props-based configuration
|
|
10
|
+
- **Automatic CSS**: Styles included automatically or import separately
|
|
11
11
|
- **Portal Rendering**: Modals render outside your component tree
|
|
12
12
|
- **Accessibility**: Built-in keyboard navigation and focus management
|
|
13
|
-
- **
|
|
13
|
+
- **Customizable**: CSS variables for complete theme control
|
|
14
|
+
- **Multiple Positions**: Various positioning options for modals and notifications
|
|
14
15
|
- **Animation Support**: Smooth fade and slide animations
|
|
15
16
|
- **Hook Integration**: useModal hook for advanced use cases
|
|
16
|
-
- **No Provider Required**: Just import and use anywhere
|
|
17
17
|
|
|
18
18
|
## 📦 Installation
|
|
19
19
|
|
|
@@ -23,6 +23,8 @@ npm install aark-react-modalify
|
|
|
23
23
|
|
|
24
24
|
## 🚀 Quick Start
|
|
25
25
|
|
|
26
|
+
### Component-Based Approach
|
|
27
|
+
|
|
26
28
|
```jsx
|
|
27
29
|
import { aark } from "aark-react-modalify";
|
|
28
30
|
|
|
@@ -35,190 +37,295 @@ function App() {
|
|
|
35
37
|
<button onClick={() => aark.close()}>Close</button>
|
|
36
38
|
</div>,
|
|
37
39
|
{
|
|
38
|
-
mode: "modal",
|
|
39
40
|
position: "center",
|
|
40
41
|
showCloseIcon: true,
|
|
41
42
|
}
|
|
42
43
|
);
|
|
43
44
|
};
|
|
44
45
|
|
|
45
|
-
return
|
|
46
|
-
<div>
|
|
47
|
-
<button onClick={openModal}>Open Modal</button>
|
|
48
|
-
</div>
|
|
49
|
-
);
|
|
46
|
+
return <button onClick={openModal}>Open Modal</button>;
|
|
50
47
|
}
|
|
51
48
|
```
|
|
52
49
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
AARK React Modalify supports full theme customization through CSS variables:
|
|
50
|
+
### Props-Based Approach
|
|
56
51
|
|
|
57
52
|
```jsx
|
|
58
53
|
import { aark } from "aark-react-modalify";
|
|
59
54
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
55
|
+
function App() {
|
|
56
|
+
const showConfirmation = () => {
|
|
57
|
+
aark.fire({
|
|
58
|
+
title: "Delete Item",
|
|
59
|
+
text: "Are you sure you want to delete this item?",
|
|
60
|
+
type: "warning",
|
|
61
|
+
showCancelButton: true,
|
|
62
|
+
confirmText: "Yes, delete it!",
|
|
63
|
+
cancelText: "Cancel",
|
|
64
|
+
onConfirm: () => {
|
|
65
|
+
aark.notification({
|
|
66
|
+
title: "Deleted!",
|
|
67
|
+
text: "The item has been deleted successfully.",
|
|
68
|
+
type: "success",
|
|
69
|
+
timer: 3000,
|
|
70
|
+
});
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
};
|
|
75
74
|
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
return <button onClick={showConfirmation}>Delete Item</button>;
|
|
76
|
+
}
|
|
78
77
|
```
|
|
79
78
|
|
|
80
79
|
## 📚 API Reference
|
|
81
80
|
|
|
82
|
-
###
|
|
83
|
-
|
|
84
|
-
Display a modal with the given component and options.
|
|
81
|
+
### Modal Methods
|
|
85
82
|
|
|
86
|
-
|
|
83
|
+
#### `aark.fire(content, options?)` or `aark.fire(props)`
|
|
87
84
|
|
|
88
|
-
-
|
|
89
|
-
- `options` (ModalOptions): Configuration options
|
|
85
|
+
**Component-based:**
|
|
90
86
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
87
|
+
```jsx
|
|
88
|
+
aark.fire(<YourComponent />, options);
|
|
89
|
+
```
|
|
94
90
|
|
|
95
|
-
|
|
91
|
+
**Props-based:**
|
|
96
92
|
|
|
97
|
-
|
|
93
|
+
```jsx
|
|
94
|
+
aark.fire({
|
|
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
|
+
});
|
|
104
|
+
```
|
|
98
105
|
|
|
99
|
-
|
|
106
|
+
### Notification Methods
|
|
100
107
|
|
|
101
|
-
|
|
108
|
+
#### `aark.notification(content, options?)` or `aark.notification(props)`
|
|
102
109
|
|
|
103
|
-
|
|
110
|
+
**Component-based:**
|
|
104
111
|
|
|
105
|
-
|
|
112
|
+
```jsx
|
|
113
|
+
aark.notification(<YourNotification />, options);
|
|
114
|
+
```
|
|
106
115
|
|
|
107
|
-
|
|
116
|
+
**Props-based:**
|
|
108
117
|
|
|
109
|
-
|
|
118
|
+
```jsx
|
|
119
|
+
aark.notification({
|
|
120
|
+
title: "Notification Title",
|
|
121
|
+
text: "Notification message",
|
|
122
|
+
type: "success",
|
|
123
|
+
timer: 3000,
|
|
124
|
+
position: "top-right",
|
|
125
|
+
});
|
|
126
|
+
```
|
|
110
127
|
|
|
111
|
-
|
|
128
|
+
### Other Methods
|
|
112
129
|
|
|
113
|
-
|
|
130
|
+
```jsx
|
|
131
|
+
aark.close(); // Close current modal
|
|
132
|
+
aark.closeAll(); // Close all modals and notifications
|
|
133
|
+
aark.isOpen(); // Check if any modal is open
|
|
134
|
+
```
|
|
114
135
|
|
|
115
|
-
|
|
136
|
+
## ⚙️ Configuration Options
|
|
116
137
|
|
|
117
|
-
|
|
138
|
+
### Modal Options
|
|
118
139
|
|
|
119
|
-
|
|
140
|
+
| Option | Type | Default | Description |
|
|
141
|
+
| --------------------- | --------------- | ---------- | ------------------------ |
|
|
142
|
+
| `position` | `ModalPosition` | `"center"` | Modal position |
|
|
143
|
+
| `showCloseIcon` | `boolean` | `false` | Show close button |
|
|
144
|
+
| `clickOutsideToClose` | `boolean` | `true` | Close on backdrop click |
|
|
145
|
+
| `escapeKeyToClose` | `boolean` | `true` | Close on ESC key |
|
|
146
|
+
| `onOpen` | `() => void` | - | Called when modal opens |
|
|
147
|
+
| `onClose` | `() => void` | - | Called when modal closes |
|
|
120
148
|
|
|
121
|
-
|
|
149
|
+
### Notification Options
|
|
122
150
|
|
|
123
|
-
|
|
151
|
+
| Option | Type | Default | Description |
|
|
152
|
+
| ----------------- | ---------------------- | ------------- | --------------------- |
|
|
153
|
+
| `title` | `string` | - | Notification title |
|
|
154
|
+
| `text` | `string` | - | Notification content |
|
|
155
|
+
| `type` | `NotificationType` | `"info"` | Notification type |
|
|
156
|
+
| `timer` | `number` | `0` | Auto-close timer (ms) |
|
|
157
|
+
| `position` | `NotificationPosition` | `"top-right"` | Notification position |
|
|
158
|
+
| `showCloseButton` | `boolean` | `true` | Show close button |
|
|
124
159
|
|
|
125
|
-
|
|
160
|
+
### Position Types
|
|
126
161
|
|
|
127
162
|
```typescript
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
163
|
+
type ModalPosition =
|
|
164
|
+
| "center"
|
|
165
|
+
| "top-center"
|
|
166
|
+
| "top-left"
|
|
167
|
+
| "top-right"
|
|
168
|
+
| "bottom-center"
|
|
169
|
+
| "bottom-left"
|
|
170
|
+
| "bottom-right";
|
|
171
|
+
|
|
172
|
+
type NotificationPosition =
|
|
173
|
+
| "top-left"
|
|
174
|
+
| "top-center"
|
|
175
|
+
| "top-right"
|
|
176
|
+
| "bottom-left"
|
|
177
|
+
| "bottom-center"
|
|
178
|
+
| "bottom-right";
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## 🎨 Customization
|
|
182
|
+
|
|
183
|
+
### CSS Variables
|
|
184
|
+
|
|
185
|
+
```css
|
|
186
|
+
:root {
|
|
187
|
+
--aark-modal-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
188
|
+
--aark-modal-bg: #fff;
|
|
189
|
+
--aark-modal-radius: 8px;
|
|
190
|
+
--aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
191
|
+
--aark-modal-pad: 16px;
|
|
192
|
+
--aark-modal-z: 9999;
|
|
193
|
+
--aark-notification-bg: #fff;
|
|
194
|
+
--aark-notification-radius: 8px;
|
|
195
|
+
--aark-notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
196
|
+
--aark-notification-pad: 16px;
|
|
197
|
+
--aark-notification-z: 10000;
|
|
198
|
+
--aark-close-color: #666;
|
|
199
|
+
--aark-close-hover: #f5f5f5;
|
|
200
|
+
--aark-anim: 0.2s;
|
|
135
201
|
}
|
|
136
202
|
```
|
|
137
203
|
|
|
138
|
-
|
|
204
|
+
### CSS Import Options
|
|
139
205
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
modalContentZIndex?: number;
|
|
153
|
-
|
|
154
|
-
// Close button
|
|
155
|
-
closeButtonColor?: string;
|
|
156
|
-
closeButtonHoverBackground?: string;
|
|
157
|
-
closeButtonHoverColor?: string;
|
|
158
|
-
closeButtonFocusOutline?: string;
|
|
159
|
-
|
|
160
|
-
// Animation
|
|
161
|
-
animationDuration?: string;
|
|
162
|
-
fadeDuration?: string;
|
|
163
|
-
|
|
164
|
-
// Custom styles
|
|
165
|
-
customOverlayBackground?: string;
|
|
166
|
-
customOverlayBlur?: string;
|
|
167
|
-
customModalGradientStart?: string;
|
|
168
|
-
customModalGradientEnd?: string;
|
|
169
|
-
customModalTextColor?: string;
|
|
170
|
-
customModalShadow?: string;
|
|
171
|
-
customModalCloseColor?: string;
|
|
172
|
-
customModalCloseHoverBackground?: string;
|
|
173
|
-
customModalCloseHoverColor?: string;
|
|
174
|
-
}
|
|
206
|
+
**Option 1: Automatic (Default)**
|
|
207
|
+
|
|
208
|
+
```jsx
|
|
209
|
+
import { aark } from "aark-react-modalify";
|
|
210
|
+
// CSS is included automatically
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
**Option 2: Manual Import**
|
|
214
|
+
|
|
215
|
+
```jsx
|
|
216
|
+
import { aark } from "aark-react-modalify/no-styles";
|
|
217
|
+
import "aark-react-modalify/css";
|
|
175
218
|
```
|
|
176
219
|
|
|
177
|
-
##
|
|
220
|
+
## 🔧 Advanced Usage
|
|
178
221
|
|
|
179
|
-
|
|
222
|
+
### Using with Hooks
|
|
180
223
|
|
|
181
224
|
```jsx
|
|
182
225
|
import { useModal } from "aark-react-modalify";
|
|
183
226
|
|
|
184
227
|
function MyComponent() {
|
|
185
|
-
const {
|
|
228
|
+
const { openModal, closeModal, isOpen } = useModal();
|
|
229
|
+
|
|
230
|
+
const handleOpen = () => {
|
|
231
|
+
openModal(<div>My modal content</div>, { position: "center" });
|
|
232
|
+
};
|
|
186
233
|
|
|
187
234
|
return (
|
|
188
235
|
<div>
|
|
189
|
-
|
|
236
|
+
<button onClick={handleOpen}>Open Modal</button>
|
|
237
|
+
{isOpen && <p>Modal is currently open</p>}
|
|
190
238
|
</div>
|
|
191
239
|
);
|
|
192
240
|
}
|
|
193
241
|
```
|
|
194
242
|
|
|
195
|
-
|
|
243
|
+
### Theme Management
|
|
196
244
|
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
|
|
245
|
+
```jsx
|
|
246
|
+
import { setAarkModalTheme, resetAarkModalTheme } from "aark-react-modalify";
|
|
247
|
+
|
|
248
|
+
// Apply custom theme
|
|
249
|
+
setAarkModalTheme({
|
|
250
|
+
modalBg: "#1f2937",
|
|
251
|
+
modalRadius: "12px",
|
|
252
|
+
animationDuration: "0.3s",
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
// Reset to defaults
|
|
256
|
+
resetAarkModalTheme();
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
## 💡 Examples
|
|
200
260
|
|
|
201
|
-
|
|
202
|
-
npm run dev
|
|
261
|
+
### Success Modal
|
|
203
262
|
|
|
204
|
-
|
|
205
|
-
|
|
263
|
+
```jsx
|
|
264
|
+
aark.fire({
|
|
265
|
+
title: "Success!",
|
|
266
|
+
text: "Your data has been saved successfully.",
|
|
267
|
+
type: "success",
|
|
268
|
+
confirmText: "Great!",
|
|
269
|
+
});
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### Confirmation Dialog
|
|
273
|
+
|
|
274
|
+
```jsx
|
|
275
|
+
aark.fire({
|
|
276
|
+
title: "Delete Item",
|
|
277
|
+
text: "This action cannot be undone.",
|
|
278
|
+
type: "warning",
|
|
279
|
+
showCancelButton: true,
|
|
280
|
+
confirmText: "Yes, delete it!",
|
|
281
|
+
cancelText: "Cancel",
|
|
282
|
+
onConfirm: () => console.log("Item deleted"),
|
|
283
|
+
});
|
|
284
|
+
```
|
|
206
285
|
|
|
207
|
-
|
|
208
|
-
npm run type-check
|
|
286
|
+
### Error Notification
|
|
209
287
|
|
|
210
|
-
|
|
211
|
-
|
|
288
|
+
```jsx
|
|
289
|
+
aark.notification({
|
|
290
|
+
title: "Error",
|
|
291
|
+
text: "Something went wrong. Please try again.",
|
|
292
|
+
type: "error",
|
|
293
|
+
timer: 4000,
|
|
294
|
+
});
|
|
212
295
|
```
|
|
213
296
|
|
|
297
|
+
## 🌐 Framework Compatibility
|
|
298
|
+
|
|
299
|
+
- ✅ **Vite** - CSS automatically processed
|
|
300
|
+
- ✅ **Create React App** - Styles included in bundle
|
|
301
|
+
- ✅ **Next.js** - Works with both App and Pages router
|
|
302
|
+
- ✅ **Webpack** - CSS automatically bundled
|
|
303
|
+
- ✅ **Parcel** - Styles processed automatically
|
|
304
|
+
|
|
305
|
+
## 📊 Bundle Size
|
|
306
|
+
|
|
307
|
+
- **JavaScript**: ~16 kB (minified)
|
|
308
|
+
- **CSS**: ~9 kB (minified)
|
|
309
|
+
- **Total**: ~25 kB
|
|
310
|
+
- **Gzipped**: ~8 kB (estimated)
|
|
311
|
+
|
|
312
|
+
## 🆚 Component vs Props-Based
|
|
313
|
+
|
|
314
|
+
| Feature | Component-Based | Props-Based |
|
|
315
|
+
| --------------- | --------------------------- | --------------------------- |
|
|
316
|
+
| **Flexibility** | Complete control over JSX | Predefined templates |
|
|
317
|
+
| **Ease of Use** | Requires React knowledge | Simple object configuration |
|
|
318
|
+
| **Styling** | Full CSS control | Built-in styled templates |
|
|
319
|
+
| **Best for** | Complex UIs, custom designs | Quick alerts, confirmations |
|
|
320
|
+
|
|
214
321
|
## 📄 License
|
|
215
322
|
|
|
216
|
-
|
|
323
|
+
MIT License - see the [LICENSE](LICENSE) file for details.
|
|
217
324
|
|
|
218
325
|
## 🤝 Contributing
|
|
219
326
|
|
|
220
327
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
221
328
|
|
|
222
|
-
|
|
329
|
+
---
|
|
223
330
|
|
|
224
|
-
|
|
331
|
+
Made with ❤️ by [Mohammad Sumon](https://github.com/sumonsbgc)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--aark-modal-overlay-bg:
|
|
1
|
+
:root{--aark-modal-overlay-bg:rgba(0,0,0,.5);--aark-modal-bg:#fff;--aark-modal-radius:8px;--aark-modal-shadow:0 10px 25px rgba(0,0,0,.15);--aark-modal-pad:16px;--aark-modal-z:9999}.aark-modal-overlay{inset:0;pointer-events:auto;position:fixed;z-index:9999}.aark-modal-container{max-width:700px;min-width:280px}.aark-modal-container,.aark-modal-wrapper{pointer-events:auto;position:relative;width:100%;z-index:2}.aark-modal-wrapper{height:100%}.aark-modal-container.center{animation:scale-in var(--aark-anim)}.aark-modal-container.top-center{animation:slide-down var(--aark-anim)}.aark-modal-container.top-right{animation:slide-left var(--aark-anim)}.aark-modal-container.top-left{animation:slide-right var(--aark-anim)}.aark-modal-container.bottom-right{animation:slide-left var(--aark-anim)}.aark-modal-container.bottom-left{animation:slide-right var(--aark-anim)}.aark-modal-container.bottom-center{animation:slide-up var(--aark-anim)}.aark-modal-header{margin-bottom:0;padding-bottom:0;position:relative}.aark-modal-close{align-items:center;background:0;border:0;border-radius:50%;color:var(--aark-close-color);cursor:pointer;display:flex;font-size:14px;height:30px;justify-content:center;line-height:1;padding:.5rem;position:absolute;right:8px;top:8px;transition:all var(--aark-anim);width:30px;z-index:10}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);margin:auto;max-height:90vh;overflow:auto;padding:var(--aark-modal-pad);pointer-events:auto;position:relative;z-index:2}.aark-modal-content{flex:1;margin:1rem 0}.aark-modal-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}.aark-standard-modal{background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:700px;min-width:280px;overflow:auto;padding:var(--aark-modal-pad);pointer-events:auto;position:relative;width:100%;z-index:2}@media(max-width:768px){.aark-standard-modal{margin:12px;max-width:calc(100vw - 24px);width:calc(100vw - 24px)}}@media(max-width:480px){.aark-standard-modal{margin:8px;max-height:calc(100vh - 40px);max-width:calc(100vw - 16px);width:calc(100vw - 16px)}}.aark-standard-modal .aark-modal-header{margin-bottom:1rem}.aark-standard-modal .aark-modal-title{color:#1f2937;font-size:1.5rem;font-weight:600;margin:0;text-align:center}.aark-standard-modal .aark-modal-content{flex:1;margin:1rem 0}.aark-standard-modal .aark-modal-icon{font-size:3rem;margin-bottom:1rem;text-align:center}.aark-standard-modal .aark-modal-content p{color:#6b7280;font-size:1rem;line-height:1.5;margin:0;text-align:center}.aark-standard-modal .aark-modal-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}.aark-standard-modal .aark-modal-cancel-button,.aark-standard-modal .aark-modal-confirm-button{border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s}.aark-standard-modal .aark-modal-cancel-button{background:#fff;border:1px solid #d1d5db;color:#374151}.aark-standard-modal .aark-modal-cancel-button:hover{background:#f9fafb;border-color:#9ca3af}.aark-standard-modal .aark-modal-confirm-button{color:#fff}.aark-standard-modal .aark-modal-confirm-button:hover{opacity:.9}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.aark-modal-container{margin:12px;max-width:calc(100vw - 24px);width:calc(100vw - 24px)}}@media(max-width:480px){.aark-modal-container{margin:8px;max-height:calc(100vh - 40px);max-width:calc(100vw - 16px);width:calc(100vw - 16px)}}:root{--aark-notification-bg:#fff;--aark-notification-radius:8px;--aark-notification-shadow:0 4px 12px rgba(0,0,0,.1);--aark-notification-pad:16px;--aark-notification-z:10000;--aark-close-color:#666;--aark-close-hover:#f5f5f5;--aark-anim:.2s}.aark-notification-container{max-width:400px;min-width:280px;width:auto}.aark-notification-container,.aark-notification-wrapper{pointer-events:auto;position:relative;z-index:10001}.aark-notification-container.center{animation:scale-in var(--aark-anim)}.aark-notification-container.top-center{animation:slide-down var(--aark-anim)}.aark-notification-container.top-right{animation:slide-left var(--aark-anim)}.aark-notification-container.top-left{animation:slide-right var(--aark-anim)}.aark-notification-container.bottom-right{animation:slide-left var(--aark-anim)}.aark-notification-container.bottom-left{animation:slide-right var(--aark-anim)}.aark-notification-container.bottom-center{animation:slide-up var(--aark-anim)}.aark-standard-notification{background:var(--aark-notification-bg);border:1px solid #e5e7eb;border-radius:var(--aark-notification-radius);box-shadow:var(--aark-notification-shadow);cursor:pointer;max-width:400px;min-width:280px;overflow:hidden;padding:var(--aark-notification-pad);pointer-events:auto;position:relative;transition:all var(--aark-anim);z-index:10001}.aark-standard-notification:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-1px)}.aark-notification-header{margin-bottom:.5rem;pointer-events:auto;position:relative;z-index:10001}.aark-notification-title{color:#1f2937;font-size:.875rem;font-weight:600;line-height:1.25;margin:0}.aark-notification-content{background-color:var(--aark-notification-bg);color:#6b7280;font-size:.75rem;line-height:1.4}.aark-notification-body,.aark-notification-content{pointer-events:auto;position:relative;z-index:10001}.aark-notification-body{background:var(--aark-notification-bg);border-radius:var(--aark-notification-radius);box-shadow:var(--aark-notification-shadow);padding:var(--aark-notification-pad)}.aark-notification-content p{margin:0}.aark-notification-icon{font-size:1.25rem;margin-top:.125rem;z-index:10001}.aark-notification-close,.aark-notification-icon{flex-shrink:0;pointer-events:auto;position:relative}.aark-notification-close{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:1rem;line-height:1;padding:0;transition:color var(--aark-anim);z-index:10002}.aark-notification-close:hover{color:#6b7280}.aark-notification-close:focus{border-radius:2px;outline:2px solid #3b82f6;outline-offset:2px}.aark-notification-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem;pointer-events:auto;position:relative;z-index:10001}.aark-notification-cancel-button,.aark-notification-confirm-button{border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;pointer-events:auto;position:relative;transition:all .2s;z-index:10001}.aark-notification-cancel-button{background:#fff;border:1px solid #d1d5db;color:#374151}.aark-notification-cancel-button:hover{background:#f9fafb;border-color:#9ca3af}.aark-notification-confirm-button{color:#fff}.aark-notification-confirm-button:hover{opacity:.9}.aark-notification-progress{border-radius:0 0 var(--aark-notification-radius) var(--aark-notification-radius);bottom:0;height:3px;left:0;position:absolute;transform-origin:left}.aark-notification-success{border-left:4px solid #4ade80}.aark-notification-error{border-left:4px solid #ef4444}.aark-notification-warning{border-left:4px solid #f59e0b}.aark-notification-info{border-left:4px solid #3b82f6}.aark-notification-question{border-left:4px solid #8b5cf6}@keyframes aark-notification-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes notification-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes notification-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes notification-slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes notification-slide-out-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes notification-slide-in-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes notification-slide-out-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-left{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slide-right{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media(max-width:768px){.aark-notification-container,.aark-standard-notification{max-width:calc(100vw - 40px);min-width:auto}}@media(max-width:480px){.aark-notification-container,.aark-standard-notification{max-width:calc(100vw - 20px)}.aark-standard-notification{min-width:auto}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as StandardModal } from "./StandardModal";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { NotificationProps } from '../../types';
|
|
3
|
+
interface StandardNotificationProps {
|
|
4
|
+
props: NotificationProps;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const StandardNotification: FC<StandardNotificationProps>;
|
|
8
|
+
export default StandardNotification;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as StandardNotification } from "./StandardNotification";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),e=require("react-dom/client"),t=require("react/jsx-runtime"),a=require("react-dom");function r(){const[e,t]=o.useState(!1),[a,r]=o.useState(null),n=o.useCallback(()=>{w.close()},[]);return o.useEffect(()=>{const o=w.subscribe(o=>{switch(o.type){case"open":t(!0),r(o.config||null);break;case"close":t(!1),r(null)}});return t(w.isOpen()),r(w.getCurrentConfig()),o},[]),{isOpen:e,config:a,close:n}}const n={white:"#FFFFFF",black:"#0B071A"},l=o.memo(({name:e,color:a="black",style:r,className:l="",noHoverEffect:s=!1,onClick:i,size:c=24,"aria-label":d,title:m})=>{const u=o.useMemo(()=>String(c),[c]),p=o.useMemo(()=>n[a]?n[a]:(a.startsWith("#"),a),[a]),f=o.useMemo(()=>{const o=p;return"close"===e?t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:u,height:u,viewBox:"0 0 16 16",fill:"none",children:t.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:o})}):null},[e,p,u]),y=o.useMemo(()=>{const o={};return o["aria-label"]=d||`${e} icon`,m&&(o.title=m),o.role=i?"button":"img",o},[d,m,e,i]),k=o.useMemo(()=>{if(i)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),i())}},[i]);return t.jsx("i",{className:`\n inline-flex items-center justify-center bg-transparent outline-none border-none\n ${!s&&i&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n ${i&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n ${l}\n `.trim(),style:r,onClick:i,onKeyDown:k,tabIndex:i?0:void 0,...y,children:f})});l.displayName="Icon";const s={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},i={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},c=({props:e,onClose:a})=>{const{title:r,text:n,type:l="info",cancelText:c="Cancel",confirmText:d="OK",onCancel:m,onConfirm:u,icon:p,html:f,showCancelButton:y=!1,showConfirmButton:k=!0,reverseButtons:g=!1,width:h="auto",fullWidth:v=!1,customClass:x={}}=e,C=()=>{m?.(),a()},b=()=>{u?.(),a()},P=o.useMemo(()=>p?"string"==typeof p?t.jsx("span",{children:p}):p:t.jsx("span",{style:{color:i[l]},children:s[l]}),[p,l]),j=g?["confirm","cancel"]:["cancel","confirm"],w=o.useMemo(()=>{const o={};return v?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof h?`${h}px`:h,o},[h,v]);return t.jsxs("div",{className:`aark-standard-modal ${x.popup||""}`,style:w,children:[t.jsxs("div",{className:`aark-modal-content ${x.content||""}`,children:[P&&t.jsx("div",{className:`aark-modal-icon ${x.icon||""}`,children:P}),r&&t.jsx("div",{className:`aark-modal-header ${x.header||""}`,children:t.jsx("h2",{className:`aark-modal-title ${x.title||""}`,children:r})}),f?t.jsx("div",{dangerouslySetInnerHTML:{__html:"string"==typeof f?f:""}}):n?t.jsx("p",{children:n}):null]}),(y||k)&&t.jsx("div",{className:`aark-modal-footer ${x.actions||""}`,children:j.map(o=>"cancel"===o&&y?t.jsx("button",{onClick:C,className:`aark-modal-cancel-button ${x.cancelButton||""}`,children:c},"cancel"):"confirm"===o&&k?t.jsx("button",{onClick:b,className:`aark-modal-confirm-button ${x.confirmButton||""}`,style:{background:i[l]},children:d},"confirm"):null)})]})};let d=null;const m=()=>(d||(d=document.getElementById("aark-react-modalify-root"),d||(d=document.createElement("div"),d.id="aark-react-modalify-root",d.style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n ",document.body.appendChild(d))),d),u=({config:e,onClose:r})=>{const{content:n,props:s,options:i={}}=e,{position:d="center",showCloseIcon:u=!0,className:p="",overlayClassName:f="",preventEscClose:y=!1,preventOverlayClose:k=!1}=i;o.useEffect(()=>{const o=o=>{"Escape"!==o.key||y||r()};if(!y)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[r,y]);const g=o.useCallback(o=>{o.target!==o.currentTarget||k||r()},[r,k]),h=o.useCallback(o=>{o.stopPropagation(),r()},[r]),v=`aark-modal-container ${d} ${p}`.trim(),x=m();return a.createPortal(t.jsx("div",{className:`aark-modal-overlay ${f}`.trim(),onClick:g,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:9999,background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(2px)",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:d.includes("center")?"center":d.includes("top")?"flex-start":"flex-end",justifyContent:d.includes("center")?"center":d.includes("right")?"flex-end":"flex-start",padding:"1rem"},children:s?t.jsxs("div",{className:v,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[u&&t.jsx("button",{onClick:h,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:t.jsx(l,{name:"close",size:12})}),t.jsx("div",{className:"aark-modal-wrapper",children:t.jsx(c,{props:s,onClose:r})})]}):n?t.jsxs("div",{className:v,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[u&&t.jsx("button",{onClick:h,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:t.jsx(l,{name:"close",size:12})}),t.jsx("div",{className:"aark-modal-body",children:n})]}):null}),x)},p={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},f={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},y=({props:e,onClose:a})=>{const{title:r,text:n,type:l="info",icon:s,html:i,timer:c=5e3,showCloseButton:d=!0,clickToClose:m=!0,width:u="300px",fullWidth:y=!1,padding:k="1rem",background:g="#ffffff",customClass:h={}}=e;o.useEffect(()=>{if(c&&c>0){const o=setTimeout(a,c);return()=>clearTimeout(o)}},[c,a]);const v=o.useMemo(()=>s?"string"==typeof s?t.jsx("span",{children:s}):s:t.jsx("span",{style:{color:f[l]},children:p[l]}),[s,l]),x=o.useMemo(()=>{const o={padding:k,background:g,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:`1px solid ${f[l]}`,cursor:m?"pointer":"default",position:"relative",overflow:"hidden"};return y?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof u?`${u}px`:u,o},[u,y,k,g,l,m]);return t.jsxs("div",{className:`aark-standard-notification ${h.popup||""}`,style:x,onClick:()=>{m&&a()},children:[c&&c>0&&t.jsx("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:f[l],animation:`aark-notification-progress ${c}ms linear forwards`,transformOrigin:"left"}}),t.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[v&&t.jsx("div",{className:`aark-notification-icon ${h.icon||""}`,style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:v}),t.jsxs("div",{style:{flex:1,minWidth:0},children:[r&&t.jsx("div",{className:`aark-notification-header ${h.header||""}`,children:t.jsx("h4",{className:`aark-notification-title ${h.title||""}`,style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:r})}),t.jsx("div",{className:`aark-notification-content ${h.content||""}`,style:{marginTop:r?"0.25rem":0},children:i?t.jsx("div",{dangerouslySetInnerHTML:{__html:"string"==typeof i?i:""}}):n?t.jsx("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),d&&t.jsx("button",{onClick:o=>{o.stopPropagation(),a()},className:`aark-notification-close ${h.closeButton||""}`,style:{background:"none",border:"none",fontSize:"1rem",color:"#9ca3af",cursor:"pointer",padding:0,lineHeight:1,flexShrink:0},"aria-label":"Close notification",children:"×"})]}),t.jsx("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},k=({config:e,onClose:r})=>{const{content:n,props:l,options:s={}}=e,{position:i="top-right",showCloseIcon:c=!0,autoCloseTime:d=5e3,className:u="",preventEscClose:p=!1}=s;o.useEffect(()=>{if(d&&!l){const o=setTimeout(r,d);return()=>clearTimeout(o)}},[d,r,l]),o.useEffect(()=>{const o=o=>{"Escape"!==o.key||p||r()};if(!p)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[r,p]);const f=o.useCallback(o=>{o.stopPropagation(),r()},[r]),k=`aark-notification-container ${i} ${u}`.trim(),g=m();return a.createPortal(t.jsx("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"};switch(i){case"top-left":return{...o,top:0,left:0};case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...o,top:0,right:0};case"bottom-left":return{...o,bottom:0,left:0};case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...o,bottom:0,right:0}}})(),children:l?t.jsx("div",{className:"aark-notification-wrapper",children:t.jsx(y,{props:l,onClose:r})}):n?t.jsxs("div",{className:k,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[c&&t.jsx("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),t.jsx("div",{id:"aark-notification-body",className:"aark-notification-body",children:n})]}):null}),g)},g=()=>{const{isOpen:o,config:e,close:a}=r();return o&&e?"modal"===e.mode?t.jsx(u,{config:e,onClose:a}):"notification"===e.mode?t.jsx(k,{config:e,onClose:a}):null:null},h=new Set;let v=null,x=null;function C(){if(x)return;const t=m();x=e.createRoot(t),x.render(o.createElement(g))}function b(o,e){const t={type:o,config:e};h.forEach(o=>o(t))}function P(o,e){let t,a;C(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,a=void 0):(a=o,t=void 0);const r={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},e)};v=r,b("open",r)}function j(){v&&(b("beforeClose",v),v=null,b("close"))}const w={subscribe:function(o){return h.add(o),()=>h.delete(o)},fire:function(o,e){P(o,e)},fireModal:P,fireNotification:function(o,e){let t,a;C(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,a=void 0):(a=o,t=void 0);const r={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},e)};v=r,b("open",r)},close:j,isOpen:function(){return null!==v},getCurrentConfig:function(){return v},closeAll:function(){j()},cleanup:function(){x&&(x.unmount(),x=null),d&&0===d.children.length&&(d.remove(),d=null)}};function B(o){const e=document.documentElement;o.overlayBackground&&e.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&e.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&e.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&e.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&e.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&e.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&e.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&e.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&e.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&e.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&e.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&e.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&e.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&e.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&e.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&e.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&e.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&e.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&e.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&e.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&e.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&e.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&e.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function M(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(e=>{o.style.removeProperty(e)})}function N(){const o=document.documentElement,e=getComputedStyle(o);return{overlayBackground:e.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:e.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:e.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:e.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:e.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:e.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(e.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(e.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:e.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:e.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:e.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:e.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:e.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:e.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:e.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:e.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:e.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:e.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:e.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:e.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:e.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:e.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:e.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}const $={fire:(o,e)=>w.fire(o,e),modal:(o,e)=>w.fireModal(o,e),notification:(o,e)=>w.fireNotification(o,e),close:()=>w.close(),isOpen:()=>w.isOpen(),closeAll:()=>w.closeAll(),setTheme:o=>B(o),resetTheme:()=>M(),getTheme:()=>N()};exports.Modal=u,exports.ModalProvider=g,exports.Notification=k,exports.aark=$,exports.getAarkModalTheme=N,exports.resetAarkModalTheme=M,exports.setAarkModalTheme=B,exports.useModal=r;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import{useState as o,useCallback as e,useEffect as t,memo as a,useMemo as r,createElement as n}from"react";import{createRoot as l}from"react-dom/client";import{jsx as i,jsxs as s}from"react/jsx-runtime";import{createPortal as c}from"react-dom";function d(){const[a,r]=o(!1),[n,l]=o(null),i=e(()=>{E.close()},[]);return t(()=>{const o=E.subscribe(o=>{switch(o.type){case"open":r(!0),l(o.config||null);break;case"close":r(!1),l(null)}});return r(E.isOpen()),l(E.getCurrentConfig()),o},[]),{isOpen:a,config:n,close:i}}const m={white:"#FFFFFF",black:"#0B071A"},u=a(({name:o,color:e="black",style:t,className:a="",noHoverEffect:n=!1,onClick:l,size:s=24,"aria-label":c,title:d})=>{const u=r(()=>String(s),[s]),p=r(()=>m[e]?m[e]:(e.startsWith("#"),e),[e]),f=r(()=>"close"===o?/* @__PURE__ */i("svg",{xmlns:"http://www.w3.org/2000/svg",width:u,height:u,viewBox:"0 0 16 16",fill:"none",children:/* @__PURE__ */i("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:p})}):null,[o,p,u]),y=r(()=>{const e={};return e["aria-label"]=c||`${o} icon`,d&&(e.title=d),e.role=l?"button":"img",e},[c,d,o,l]),k=r(()=>{if(l)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),l())}},[l]);/* @__PURE__ */
|
|
2
|
+
return i("i",{className:`\n inline-flex items-center justify-center bg-transparent outline-none border-none\n ${!n&&l&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n ${l&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n ${a}\n `.trim(),style:t,onClick:l,onKeyDown:k,tabIndex:l?0:void 0,...y,children:f})});u.displayName="Icon";const p={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},f={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},y=({props:o,onClose:e})=>{const{title:t,text:a,type:n="info",cancelText:l="Cancel",confirmText:c="OK",onCancel:d,onConfirm:m,icon:u,html:y,showCancelButton:k=!1,showConfirmButton:g=!0,reverseButtons:h=!1,width:v="auto",fullWidth:C=!1,customClass:b={}}=o,x=()=>{d?.(),e()},P=()=>{m?.(),e()},w=r(()=>u?"string"==typeof u?/* @__PURE__ */i("span",{children:u}):u:/* @__PURE__ */i("span",{style:{color:f[n]},children:p[n]}),[u,n]),B=h?["confirm","cancel"]:["cancel","confirm"],N=r(()=>{const o={};return C?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof v?`${v}px`:v,o},[v,C]);/* @__PURE__ */
|
|
3
|
+
return s("div",{className:`aark-standard-modal ${b.popup||""}`,style:N,children:[
|
|
4
|
+
/* @__PURE__ */s("div",{className:`aark-modal-content ${b.content||""}`,children:[w&&/* @__PURE__ */i("div",{className:`aark-modal-icon ${b.icon||""}`,children:w}),t&&/* @__PURE__ */i("div",{className:`aark-modal-header ${b.header||""}`,children:/* @__PURE__ */i("h2",{className:`aark-modal-title ${b.title||""}`,children:t})}),y?/* @__PURE__ */i("div",{dangerouslySetInnerHTML:{__html:"string"==typeof y?y:""}}):a?/* @__PURE__ */i("p",{children:a}):null]}),(k||g)&&/* @__PURE__ */i("div",{className:`aark-modal-footer ${b.actions||""}`,children:B.map(o=>"cancel"===o&&k?/* @__PURE__ */i("button",{onClick:x,className:`aark-modal-cancel-button ${b.cancelButton||""}`,children:l},"cancel"):"confirm"===o&&g?/* @__PURE__ */i("button",{onClick:P,className:`aark-modal-confirm-button ${b.confirmButton||""}`,style:{background:f[n]},children:c},"confirm"):null)})]})};let k=null;const g=()=>(k||(k=document.getElementById("aark-react-modalify-root"),k||(k=document.createElement("div"),k.id="aark-react-modalify-root",k.style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n ",document.body.appendChild(k))),k),h=({config:o,onClose:a})=>{const{content:r,props:n,options:l={}}=o,{position:d="center",showCloseIcon:m=!0,className:p="",overlayClassName:f="",preventEscClose:k=!1,preventOverlayClose:h=!1}=l;t(()=>{const o=o=>{"Escape"!==o.key||k||a()};if(!k)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,k]);const v=e(o=>{o.target!==o.currentTarget||h||a()},[a,h]),C=e(o=>{o.stopPropagation(),a()},[a]),b=`aark-modal-container ${d} ${p}`.trim(),x=g();return c(
|
|
5
|
+
/* @__PURE__ */i("div",{className:`aark-modal-overlay ${f}`.trim(),onClick:v,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:9999,background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(2px)",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:d.includes("center")?"center":d.includes("top")?"flex-start":"flex-end",justifyContent:d.includes("center")?"center":d.includes("right")?"flex-end":"flex-start",padding:"1rem"},children:n?/* @__PURE__ */s("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[m&&/* @__PURE__ */i("button",{onClick:C,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */i(u,{name:"close",size:12})}),
|
|
6
|
+
/* @__PURE__ */i("div",{className:"aark-modal-wrapper",children:/* @__PURE__ */i(y,{props:n,onClose:a})})]}):r?/* @__PURE__ */s("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[m&&/* @__PURE__ */i("button",{onClick:C,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */i(u,{name:"close",size:12})}),
|
|
7
|
+
/* @__PURE__ */i("div",{className:"aark-modal-body",children:r})]}):null}),x)},v={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},C={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},b=({props:o,onClose:e})=>{const{title:a,text:n,type:l="info",icon:c,html:d,timer:m=5e3,showCloseButton:u=!0,clickToClose:p=!0,width:f="300px",fullWidth:y=!1,padding:k="1rem",background:g="#ffffff",customClass:h={}}=o;t(()=>{if(m&&m>0){const o=setTimeout(e,m);return()=>clearTimeout(o)}},[m,e]);const b=r(()=>c?"string"==typeof c?/* @__PURE__ */i("span",{children:c}):c:/* @__PURE__ */i("span",{style:{color:C[l]},children:v[l]}),[c,l]),x=r(()=>{const o={padding:k,background:g,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:`1px solid ${C[l]}`,cursor:p?"pointer":"default",position:"relative",overflow:"hidden"};return y?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof f?`${f}px`:f,o},[f,y,k,g,l,p]);/* @__PURE__ */
|
|
8
|
+
return s("div",{className:`aark-standard-notification ${h.popup||""}`,style:x,onClick:()=>{p&&e()},children:[m&&m>0&&/* @__PURE__ */i("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:C[l],animation:`aark-notification-progress ${m}ms linear forwards`,transformOrigin:"left"}}),
|
|
9
|
+
/* @__PURE__ */s("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[b&&/* @__PURE__ */i("div",{className:`aark-notification-icon ${h.icon||""}`,style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:b}),
|
|
10
|
+
/* @__PURE__ */s("div",{style:{flex:1,minWidth:0},children:[a&&/* @__PURE__ */i("div",{className:`aark-notification-header ${h.header||""}`,children:/* @__PURE__ */i("h4",{className:`aark-notification-title ${h.title||""}`,style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:a})}),
|
|
11
|
+
/* @__PURE__ */i("div",{className:`aark-notification-content ${h.content||""}`,style:{marginTop:a?"0.25rem":0},children:d?/* @__PURE__ */i("div",{dangerouslySetInnerHTML:{__html:"string"==typeof d?d:""}}):n?/* @__PURE__ */i("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),u&&/* @__PURE__ */i("button",{onClick:o=>{o.stopPropagation(),e()},className:`aark-notification-close ${h.closeButton||""}`,style:{background:"none",border:"none",fontSize:"1rem",color:"#9ca3af",cursor:"pointer",padding:0,lineHeight:1,flexShrink:0},"aria-label":"Close notification",children:"×"})]}),
|
|
12
|
+
/* @__PURE__ */i("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},x=({config:o,onClose:a})=>{const{content:r,props:n,options:l={}}=o,{position:d="top-right",showCloseIcon:m=!0,autoCloseTime:u=5e3,className:p="",preventEscClose:f=!1}=l;t(()=>{if(u&&!n){const o=setTimeout(a,u);return()=>clearTimeout(o)}},[u,a,n]),t(()=>{const o=o=>{"Escape"!==o.key||f||a()};if(!f)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,f]);const y=e(o=>{o.stopPropagation(),a()},[a]),k=`aark-notification-container ${d} ${p}`.trim(),h=g();return c(
|
|
13
|
+
/* @__PURE__ */i("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"};switch(d){case"top-left":return{...o,top:0,left:0};case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...o,top:0,right:0};case"bottom-left":return{...o,bottom:0,left:0};case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...o,bottom:0,right:0}}})(),children:n?/* @__PURE__ */i("div",{className:"aark-notification-wrapper",children:/* @__PURE__ */i(b,{props:n,onClose:a})}):r?/* @__PURE__ */s("div",{className:k,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[m&&/* @__PURE__ */i("button",{onClick:y,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),
|
|
14
|
+
/* @__PURE__ */i("div",{id:"aark-notification-body",className:"aark-notification-body",children:r})]}):null}),h)},P=()=>{const{isOpen:o,config:e,close:t}=d();return o&&e?"modal"===e.mode?/* @__PURE__ */i(h,{config:e,onClose:t}):"notification"===e.mode?/* @__PURE__ */i(x,{config:e,onClose:t}):null:null},w=/* @__PURE__ */new Set;let B=null,N=null;function $(){if(N)return;const o=g();N=l(o),N.render(n(P))}function M(o,e){const t={type:o,config:e};w.forEach(o=>o(t))}function S(o,e){let t,a;$(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,a=void 0):(a=o,t=void 0);const r={content:t,props:a,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},e)};B=r,M("open",r)}function V(){B&&(M("beforeClose",B),B=null,M("close"))}const E={subscribe:function(o){return w.add(o),()=>w.delete(o)},fire:function(o,e){S(o,e)},fireModal:S,fireNotification:function(o,e){let t,a;$(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,a=void 0):(a=o,t=void 0);const r={content:t,props:a,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},e)};B=r,M("open",r)},close:V,isOpen:function(){return null!==B},getCurrentConfig:function(){return B},closeAll:function(){V()},cleanup:function(){N&&(N.unmount(),N=null),k&&0===k.children.length&&(k.remove(),k=null)}};function I(o){const e=document.documentElement;o.overlayBackground&&e.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&e.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&e.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&e.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&e.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&e.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&e.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&e.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&e.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&e.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&e.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&e.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&e.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&e.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&e.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&e.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&e.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&e.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&e.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&e.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&e.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&e.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&e.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function O(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(e=>{o.style.removeProperty(e)})}function T(){const o=document.documentElement,e=getComputedStyle(o);return{overlayBackground:e.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:e.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:e.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:e.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:e.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:e.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(e.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(e.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:e.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:e.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:e.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:e.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:e.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:e.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:e.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:e.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:e.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:e.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:e.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:e.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:e.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:e.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:e.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}const H={fire:(o,e)=>E.fire(o,e),modal:(o,e)=>E.fireModal(o,e),notification:(o,e)=>E.fireNotification(o,e),close:()=>E.close(),isOpen:()=>E.isOpen(),closeAll:()=>E.closeAll(),setTheme:o=>I(o),resetTheme:()=>O(),getTheme:()=>T()};export{h as Modal,P as ModalProvider,x as Notification,H as aark,T as getAarkModalTheme,O as resetAarkModalTheme,I as setAarkModalTheme,d as useModal};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import "./assets/styles/aark-modal.css";
|
|
1
2
|
export { default as aark } from "./logic/aark";
|
|
2
|
-
export type { ModalOptions, NotificationOptions, ModalPosition, NotificationPosition, ModalMode, ModalConfig, NotificationConfig, ComponentConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
|
|
3
|
+
export type { ModalOptions, NotificationOptions, ModalPosition, NotificationPosition, ModalMode, ModalType, ModalProps, NotificationProps, ModalConfig, NotificationConfig, ComponentConfig, ModalState, ModalEvent, ModalEventType, } from "./types";
|
|
3
4
|
export type { AarkModalTheme } from "./utils/theme";
|
|
4
5
|
export { setAarkModalTheme, resetAarkModalTheme, getAarkModalTheme, } from "./utils/theme";
|
|
5
6
|
export { useModal } from "./hooks/useModal";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
import type { ComponentConfig, ModalOptions, NotificationOptions, ModalEvent } from "../types";
|
|
2
|
+
import type { ComponentConfig, ModalOptions, NotificationOptions, ModalEvent, ModalProps, NotificationProps } from "../types";
|
|
3
3
|
type ModalListener = (event: ModalEvent) => void;
|
|
4
4
|
declare function subscribe(listener: ModalListener): () => void;
|
|
5
|
-
declare function fireModal(
|
|
6
|
-
declare function fireNotification(
|
|
7
|
-
declare function fire(
|
|
5
|
+
declare function fireModal(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
|
|
6
|
+
declare function fireNotification(contentOrProps: ReactNode | NotificationProps, options?: NotificationOptions): void;
|
|
7
|
+
declare function fire(contentOrProps: ReactNode | ModalProps, options?: ModalOptions): void;
|
|
8
8
|
declare function close(): void;
|
|
9
9
|
declare function isOpen(): boolean;
|
|
10
10
|
declare function getCurrentConfig(): ComponentConfig | null;
|