@versini/ui-modal 2.0.5 → 2.0.7
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 +102 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -1,3 +1,104 @@
|
|
|
1
1
|
# @versini/ui-modal
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@versini/ui-modal)
|
|
4
|
+
|
|
5
|
+
> An accessible and feature-rich React modal dialog component built with TypeScript and TailwindCSS.
|
|
6
|
+
|
|
7
|
+
The Modal component provides fully accessible dialog functionality with focus management, keyboard navigation, and customizable styling options.
|
|
8
|
+
|
|
9
|
+
## Table of Contents
|
|
10
|
+
|
|
11
|
+
- [Features](#features)
|
|
12
|
+
- [Installation](#installation)
|
|
13
|
+
- [Usage](#usage)
|
|
14
|
+
- [API](#api)
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **♿ Fully Accessible**: WCAG compliant with proper focus management and ARIA attributes
|
|
19
|
+
- **⌨️ Keyboard Navigation**: ESC to close, tab trapping, focus restoration
|
|
20
|
+
- **🎨 Customizable**: Multiple sizes, themes, and styling options
|
|
21
|
+
- **🔒 Focus Management**: Automatic focus trapping and restoration
|
|
22
|
+
- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
|
|
23
|
+
- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @versini/ui-modal
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
### Basic Modal
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { Modal } from "@versini/ui-modal";
|
|
39
|
+
import { useState } from "react";
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<>
|
|
46
|
+
<button onClick={() => setIsOpen(true)}>Open Modal</button>
|
|
47
|
+
<Modal open={isOpen} onClose={() => setIsOpen(false)} title="Modal Title">
|
|
48
|
+
<p>Modal content goes here.</p>
|
|
49
|
+
</Modal>
|
|
50
|
+
</>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Confirmation Modal
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Modal } from "@versini/ui-modal";
|
|
59
|
+
import { Button } from "@versini/ui-button";
|
|
60
|
+
|
|
61
|
+
function ConfirmationModal({ open, onClose, onConfirm }) {
|
|
62
|
+
return (
|
|
63
|
+
<Modal open={open} onClose={onClose} title="Confirm Action">
|
|
64
|
+
<p>Are you sure you want to proceed?</p>
|
|
65
|
+
<div className="flex space-x-2 mt-4">
|
|
66
|
+
<Button variant="danger" onClick={onConfirm}>
|
|
67
|
+
Confirm
|
|
68
|
+
</Button>
|
|
69
|
+
<Button variant="secondary" onClick={onClose}>
|
|
70
|
+
Cancel
|
|
71
|
+
</Button>
|
|
72
|
+
</div>
|
|
73
|
+
</Modal>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Examples
|
|
79
|
+
|
|
80
|
+
### Settings Modal
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { Modal } from "@versini/ui-modal";
|
|
84
|
+
import { TextInput } from "@versini/ui-textinput";
|
|
85
|
+
import { Toggle } from "@versini/ui-toggle";
|
|
86
|
+
|
|
87
|
+
function SettingsModal({ open, onClose }) {
|
|
88
|
+
return (
|
|
89
|
+
<Modal open={open} onClose={onClose} title="Settings" size="medium">
|
|
90
|
+
<div className="space-y-4">
|
|
91
|
+
<TextInput label="Username" name="username" />
|
|
92
|
+
<TextInput label="Email" name="email" type="email" />
|
|
93
|
+
<Toggle label="Enable notifications" />
|
|
94
|
+
<div className="flex justify-end space-x-2">
|
|
95
|
+
<Button variant="secondary" onClick={onClose}>
|
|
96
|
+
Cancel
|
|
97
|
+
</Button>
|
|
98
|
+
<Button variant="primary">Save Changes</Button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</Modal>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
```
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { Modal as _, ModalClose as n, ModalContent as t, ModalDescription as a, ModalHeading as d } from "./components/Modal/Modal.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-modal v2.0.
|
|
3
|
+
@versini/ui-modal v2.0.7
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
|
|
8
|
-
version: "2.0.
|
|
9
|
-
buildTime: "
|
|
8
|
+
version: "2.0.7",
|
|
9
|
+
buildTime: "08/23/2025 09:08 AM EDT",
|
|
10
10
|
homepage: "https://github.com/aversini/ui-components",
|
|
11
11
|
license: "MIT"
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-modal",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"main": "dist/index.js",
|
|
16
16
|
"types": "dist/index.d.ts",
|
|
17
17
|
"files": [
|
|
18
|
-
"dist"
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md"
|
|
19
20
|
],
|
|
20
21
|
"scripts": {
|
|
21
22
|
"build:check": "tsc",
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
"dev:types": "tsup --watch src",
|
|
28
29
|
"dev": "npm-run-all clean --parallel dev:js dev:types",
|
|
29
30
|
"lint": "biome lint src",
|
|
31
|
+
"lint:fix": "biome check src --write --no-errors-on-unmatched",
|
|
30
32
|
"prettier": "biome check --write --no-errors-on-unmatched",
|
|
31
33
|
"start": "static-server dist --port 5173"
|
|
32
34
|
},
|
|
@@ -35,14 +37,14 @@
|
|
|
35
37
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
36
38
|
},
|
|
37
39
|
"devDependencies": {
|
|
38
|
-
"@versini/ui-types": "
|
|
40
|
+
"@versini/ui-types": "../ui-types"
|
|
39
41
|
},
|
|
40
42
|
"dependencies": {
|
|
41
|
-
"@floating-ui/react": "0.27.
|
|
43
|
+
"@floating-ui/react": "0.27.16",
|
|
42
44
|
"clsx": "2.1.1"
|
|
43
45
|
},
|
|
44
46
|
"sideEffects": [
|
|
45
47
|
"**/*.css"
|
|
46
48
|
],
|
|
47
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "7bbfa99a4441ef5b0828a37d190f694e199b663d"
|
|
48
50
|
}
|