@slithy/modal-parts 0.1.2 → 0.1.3
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 +91 -0
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @slithy/modal-parts
|
|
2
|
+
|
|
3
|
+
Layout primitives for `@slithy/modal-kit` modals: `Header`, `Footer`, `Main`, and `CloseButton`.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @slithy/modal-core @slithy/modal-kit @slithy/modal-parts
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { useModalStore } from '@slithy/modal-core'
|
|
19
|
+
import { Modal } from '@slithy/modal-kit'
|
|
20
|
+
import { CloseButton, Footer, Header, Main } from '@slithy/modal-parts'
|
|
21
|
+
|
|
22
|
+
function MyModal() {
|
|
23
|
+
return (
|
|
24
|
+
<Modal aria-label="Settings">
|
|
25
|
+
<Header>Settings</Header>
|
|
26
|
+
<Main>
|
|
27
|
+
<p>Content goes here.</p>
|
|
28
|
+
</Main>
|
|
29
|
+
<Footer>Footer text</Footer>
|
|
30
|
+
<CloseButton handleClose={() => useModalStore.getState().closeModal()} />
|
|
31
|
+
</Modal>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Works the same with `@slithy/modal-spring` or any other adapter — just swap `Modal` for the adapter's component.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
### `Header`
|
|
43
|
+
|
|
44
|
+
Top section with a bottom border. Accepts all `div` HTML attributes.
|
|
45
|
+
|
|
46
|
+
| Prop | Type |
|
|
47
|
+
|---|---|
|
|
48
|
+
| `children` | `ReactNode` |
|
|
49
|
+
| `className` | `string` |
|
|
50
|
+
|
|
51
|
+
### `Footer`
|
|
52
|
+
|
|
53
|
+
Bottom section with a top border. Hidden when empty (`display: none`). Accepts all `div` HTML attributes.
|
|
54
|
+
|
|
55
|
+
| Prop | Type |
|
|
56
|
+
|---|---|
|
|
57
|
+
| `children` | `ReactNode` |
|
|
58
|
+
| `className` | `string` |
|
|
59
|
+
|
|
60
|
+
### `Main`
|
|
61
|
+
|
|
62
|
+
Scrollable content area. Grows to fill available space (`flex-grow: 1`). Use `forwardRef` — the ref forwards to the underlying `div`.
|
|
63
|
+
|
|
64
|
+
| Prop | Type | Description |
|
|
65
|
+
|---|---|---|
|
|
66
|
+
| `children` | `ReactNode` | — |
|
|
67
|
+
| `className` | `string` | — |
|
|
68
|
+
| `inert` | `boolean` | Blocks all interactions. Consider accessibility impact. |
|
|
69
|
+
|
|
70
|
+
### `CloseButton`
|
|
71
|
+
|
|
72
|
+
Absolutely-positioned close button (top-right). Renders an `×` SVG icon by default.
|
|
73
|
+
|
|
74
|
+
| Prop | Type | Description |
|
|
75
|
+
|---|---|---|
|
|
76
|
+
| `handleClose` | `() => void` | Required. Called on click. |
|
|
77
|
+
| `className` | `string` | — |
|
|
78
|
+
| `disabled` | `boolean` | — |
|
|
79
|
+
| `icon` | `ReactNode` | Override the default SVG icon |
|
|
80
|
+
| `title` | `string` | Tooltip text |
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Exports
|
|
85
|
+
|
|
86
|
+
| Export | Description |
|
|
87
|
+
|---|---|
|
|
88
|
+
| `Header` | Top section with bottom border |
|
|
89
|
+
| `Footer` | Bottom section with top border; hidden when empty |
|
|
90
|
+
| `Main` | Scrollable flex-grow content area |
|
|
91
|
+
| `CloseButton` | Absolutely-positioned close button |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slithy/modal-parts",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Layout primitives for @slithy/modal-kit modals.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"*.css"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@slithy/
|
|
20
|
-
"@slithy/
|
|
19
|
+
"@slithy/modal-kit": "0.1.3",
|
|
20
|
+
"@slithy/utils": "0.3.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": "^17 || ^18 || ^19"
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"tsup": "^8",
|
|
35
35
|
"typescript": "^5",
|
|
36
36
|
"vitest": "^4.1.2",
|
|
37
|
-
"@slithy/
|
|
38
|
-
"@slithy/
|
|
37
|
+
"@slithy/tsconfig": "0.0.0",
|
|
38
|
+
"@slithy/eslint-config": "0.0.0"
|
|
39
39
|
},
|
|
40
40
|
"author": "mjcampagna",
|
|
41
41
|
"license": "ISC",
|