@behivetech/atoms.modal 0.0.0-stage → 0.2.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 +31 -2
- package/dist/index.cjs +223 -0
- package/dist/index.css +143 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.js +211 -0
- package/docs.json +64 -0
- package/index.ts +2 -0
- package/modal.example.tsx +11 -0
- package/modal.module.scss +56 -0
- package/modal.tsx +100 -0
- package/package.json +62 -3
package/README.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Modal
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A `Card` centered in the viewport with a dimmed backdrop that blocks
|
|
4
|
+
interaction with the rest of the page, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog)
|
|
5
|
+
for focus trapping, Escape-to-close, and outside-click-to-close. It has no
|
|
6
|
+
opinion on what goes inside the panel — an optional `title` renders a header
|
|
7
|
+
with a close button, otherwise just the `children` are shown.
|
|
8
|
+
|
|
9
|
+
For a panel that docks to an edge of the viewport instead — optionally
|
|
10
|
+
non-blocking — use `@behivetech/atoms.drawer`.
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
```jsx
|
|
15
|
+
import { Modal } from "@behivetech/atoms.modal";
|
|
16
|
+
|
|
17
|
+
<Modal onClose={() => setOpen(false)} title="Add Block">
|
|
18
|
+
<div>Dialog content</div>
|
|
19
|
+
</Modal>;
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
| Prop | Type | Default | Description |
|
|
25
|
+
| -------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------- |
|
|
26
|
+
| `onClose` | `() => void` | — | Called when the modal is dismissed (backdrop click, Escape, or the close button) — required |
|
|
27
|
+
| `title` | `string` | — | Optional header title; omit to render no header and no close button |
|
|
28
|
+
| `icon` | `ReactNode` | — | Optional icon rendered before the title; ignored if `title` is omitted |
|
|
29
|
+
| `padding` | `none \| sm \| md \| lg` | `none` | Internal padding of the panel body — same values as `Card`'s `padding` prop |
|
|
30
|
+
| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop |
|
|
31
|
+
| `children` | `ReactNode` | — | Dialog content |
|
|
32
|
+
| `className` | `string` | — | Additional class names |
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
9
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
+
};
|
|
11
|
+
var __export = (target, all) => {
|
|
12
|
+
for (var name in all)
|
|
13
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
31
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
|
+
|
|
33
|
+
// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
|
|
34
|
+
var require_classnames = __commonJS({
|
|
35
|
+
"../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports2, module2) {
|
|
36
|
+
"use strict";
|
|
37
|
+
(function() {
|
|
38
|
+
"use strict";
|
|
39
|
+
var hasOwn = {}.hasOwnProperty;
|
|
40
|
+
function classNames() {
|
|
41
|
+
var classes = "";
|
|
42
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
43
|
+
var arg = arguments[i];
|
|
44
|
+
if (arg) {
|
|
45
|
+
classes = appendClass(classes, parseValue(arg));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return classes;
|
|
49
|
+
}
|
|
50
|
+
function parseValue(arg) {
|
|
51
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
52
|
+
return arg;
|
|
53
|
+
}
|
|
54
|
+
if (typeof arg !== "object") {
|
|
55
|
+
return "";
|
|
56
|
+
}
|
|
57
|
+
if (Array.isArray(arg)) {
|
|
58
|
+
return classNames.apply(null, arg);
|
|
59
|
+
}
|
|
60
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
61
|
+
return arg.toString();
|
|
62
|
+
}
|
|
63
|
+
var classes = "";
|
|
64
|
+
for (var key in arg) {
|
|
65
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
66
|
+
classes = appendClass(classes, key);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return classes;
|
|
70
|
+
}
|
|
71
|
+
function appendClass(value, newClass) {
|
|
72
|
+
if (!newClass) {
|
|
73
|
+
return value;
|
|
74
|
+
}
|
|
75
|
+
if (value) {
|
|
76
|
+
return value + " " + newClass;
|
|
77
|
+
}
|
|
78
|
+
return value + newClass;
|
|
79
|
+
}
|
|
80
|
+
if (typeof module2 !== "undefined" && module2.exports) {
|
|
81
|
+
classNames.default = classNames;
|
|
82
|
+
module2.exports = classNames;
|
|
83
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
84
|
+
define("classnames", [], function() {
|
|
85
|
+
return classNames;
|
|
86
|
+
});
|
|
87
|
+
} else {
|
|
88
|
+
window.classNames = classNames;
|
|
89
|
+
}
|
|
90
|
+
})();
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// index.ts
|
|
95
|
+
var index_exports = {};
|
|
96
|
+
__export(index_exports, {
|
|
97
|
+
Modal: () => Modal
|
|
98
|
+
});
|
|
99
|
+
module.exports = __toCommonJS(index_exports);
|
|
100
|
+
|
|
101
|
+
// modal.tsx
|
|
102
|
+
var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
103
|
+
|
|
104
|
+
// ../../../../packages/registry/class-names/dist/index.js
|
|
105
|
+
var import_classnames = __toESM(require_classnames(), 1);
|
|
106
|
+
var getClassName = ({
|
|
107
|
+
className,
|
|
108
|
+
modifiers = {},
|
|
109
|
+
rootClass,
|
|
110
|
+
styles = {}
|
|
111
|
+
}) => {
|
|
112
|
+
function getModifiers() {
|
|
113
|
+
const updatedModifiers = {};
|
|
114
|
+
const modifierKeys = Object.keys(modifiers);
|
|
115
|
+
if (modifierKeys.length) {
|
|
116
|
+
modifierKeys.forEach((modKey) => {
|
|
117
|
+
const classKey = `${rootClass}--${modKey}`;
|
|
118
|
+
const newClassName = styles[classKey] || classKey;
|
|
119
|
+
updatedModifiers[newClassName] = modifiers[modKey] ?? false;
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
return updatedModifiers;
|
|
123
|
+
}
|
|
124
|
+
function getChildClass(childClassName) {
|
|
125
|
+
const classKey = `${rootClass}__${childClassName}`;
|
|
126
|
+
return styles[classKey] || classKey;
|
|
127
|
+
}
|
|
128
|
+
function getRootStyles() {
|
|
129
|
+
return (0, import_classnames.default)(
|
|
130
|
+
className,
|
|
131
|
+
{
|
|
132
|
+
...getModifiers()
|
|
133
|
+
},
|
|
134
|
+
styles[rootClass] || rootClass
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
return [getRootStyles(), getChildClass];
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
// modal.tsx
|
|
141
|
+
var import_atoms = require("@behivetech/atoms.card");
|
|
142
|
+
var import_atoms2 = require("@behivetech/atoms.button");
|
|
143
|
+
var import_atoms3 = require("@behivetech/atoms.icon");
|
|
144
|
+
|
|
145
|
+
// modal.module.scss
|
|
146
|
+
var modal_module_default = {
|
|
147
|
+
"BHT__Card": "BHT__Card",
|
|
148
|
+
"BHT__Card__header": "BHT__Card__header",
|
|
149
|
+
"BHT__Card__heading": "BHT__Card__heading",
|
|
150
|
+
"BHT__Card__icon": "BHT__Card__icon",
|
|
151
|
+
"BHT__Card__title": "BHT__Card__title",
|
|
152
|
+
"BHT__Card__action": "BHT__Card__action",
|
|
153
|
+
"BHT__Card__body-padding": "BHT__Card__body-padding",
|
|
154
|
+
"BHT__Card--interactive": "BHT__Card--interactive",
|
|
155
|
+
"BHT__Card--scrollable-body": "BHT__Card--scrollable-body",
|
|
156
|
+
"BHT__Card--padding-sm": "BHT__Card--padding-sm",
|
|
157
|
+
"BHT__Card--padding-md": "BHT__Card--padding-md",
|
|
158
|
+
"BHT__Card--padding-lg": "BHT__Card--padding-lg",
|
|
159
|
+
"BHT__Modal": "BHT__Modal",
|
|
160
|
+
"BHT__Modal__backdrop": "BHT__Modal__backdrop",
|
|
161
|
+
"BHT__Modal__panel": "BHT__Modal__panel",
|
|
162
|
+
"BHT__Modal__visually-hidden-title": "BHT__Modal__visually-hidden-title"
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
// modal.tsx
|
|
166
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
167
|
+
var Modal = ({
|
|
168
|
+
className,
|
|
169
|
+
onClose,
|
|
170
|
+
title,
|
|
171
|
+
icon,
|
|
172
|
+
padding,
|
|
173
|
+
headingLevel,
|
|
174
|
+
children,
|
|
175
|
+
...rest
|
|
176
|
+
}) => {
|
|
177
|
+
const [rootClass, getChildClass] = getClassName({
|
|
178
|
+
className,
|
|
179
|
+
rootClass: "BHT__Modal",
|
|
180
|
+
styles: modal_module_default
|
|
181
|
+
});
|
|
182
|
+
const hasHeader = title !== void 0;
|
|
183
|
+
const cardTitle = hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }) }) : void 0;
|
|
184
|
+
const cardAction = hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_atoms2.Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_atoms3.CloseIcon, { size: "sm" }) }) }) : void 0;
|
|
185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Root, { open: true, modal: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RadixDialog.Portal, { children: [
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Overlay, { className: getChildClass("backdrop") }),
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Content, { ...rest, className: rootClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
188
|
+
import_atoms.Card,
|
|
189
|
+
{
|
|
190
|
+
className: getChildClass("panel"),
|
|
191
|
+
icon: hasHeader ? icon : void 0,
|
|
192
|
+
title: cardTitle,
|
|
193
|
+
headingLevel,
|
|
194
|
+
action: cardAction,
|
|
195
|
+
padding,
|
|
196
|
+
scrollableBody: true,
|
|
197
|
+
children: [
|
|
198
|
+
!hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
199
|
+
RadixDialog.Title,
|
|
200
|
+
{
|
|
201
|
+
className: getChildClass("visually-hidden-title"),
|
|
202
|
+
children: "Dialog"
|
|
203
|
+
}
|
|
204
|
+
),
|
|
205
|
+
children
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
) })
|
|
209
|
+
] }) });
|
|
210
|
+
};
|
|
211
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
212
|
+
0 && (module.exports = {
|
|
213
|
+
Modal
|
|
214
|
+
});
|
|
215
|
+
/*! Bundled license information:
|
|
216
|
+
|
|
217
|
+
classnames/index.js:
|
|
218
|
+
(*!
|
|
219
|
+
Copyright (c) 2018 Jed Watson.
|
|
220
|
+
Licensed under the MIT License (MIT), see
|
|
221
|
+
http://jedwatson.github.io/classnames
|
|
222
|
+
*)
|
|
223
|
+
*/
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
3
|
+
/* esbuild-sass-plugin:css-chunkmodal.module.scss */
|
|
4
|
+
.BHT__Card {
|
|
5
|
+
background: var(--card-background, var(--md-sys-color-surface, var(--color-surface)));
|
|
6
|
+
color: var(--md-sys-color-on-surface, var(--color-on-surface));
|
|
7
|
+
border: var(--card-border, 1px solid var(--md-sys-color-outline-variant, var(--color-border)));
|
|
8
|
+
border-radius: var(--card-radius, var(--md-sys-shape-corner-medium, 12px));
|
|
9
|
+
min-width: 0;
|
|
10
|
+
}
|
|
11
|
+
.BHT__Card__header {
|
|
12
|
+
padding: var(--spacing-4) var(--spacing-6);
|
|
13
|
+
border-bottom: 1px solid var(--md-sys-color-outline-variant, var(--color-border));
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
gap: var(--spacing-4);
|
|
18
|
+
}
|
|
19
|
+
.BHT__Card__heading {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: var(--spacing-2);
|
|
23
|
+
min-width: 0;
|
|
24
|
+
}
|
|
25
|
+
.BHT__Card__icon {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
line-height: 1;
|
|
28
|
+
}
|
|
29
|
+
.BHT__Card__title {
|
|
30
|
+
margin: 0;
|
|
31
|
+
font-family: var(--md-sys-typescale-title-medium-font, var(--font-heading));
|
|
32
|
+
font-size: var(--md-sys-typescale-title-medium-size, 1rem);
|
|
33
|
+
font-weight: var(--md-sys-typescale-title-medium-weight, 500);
|
|
34
|
+
line-height: var(--md-sys-typescale-title-medium-line-height, 1.5rem);
|
|
35
|
+
letter-spacing: var(--md-sys-typescale-title-medium-tracking, 0.0094em);
|
|
36
|
+
color: var(--md-sys-color-on-surface, var(--color-text-heading));
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
text-overflow: ellipsis;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
}
|
|
41
|
+
.BHT__Card__action {
|
|
42
|
+
display: inline-flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: var(--spacing-2);
|
|
45
|
+
flex-shrink: 0;
|
|
46
|
+
}
|
|
47
|
+
.BHT__Card__body-padding {
|
|
48
|
+
display: block;
|
|
49
|
+
width: 100%;
|
|
50
|
+
padding: 0;
|
|
51
|
+
margin: 0;
|
|
52
|
+
background: none;
|
|
53
|
+
border: none;
|
|
54
|
+
font: inherit;
|
|
55
|
+
color: inherit;
|
|
56
|
+
text-align: inherit;
|
|
57
|
+
}
|
|
58
|
+
.BHT__Card--interactive.BHT__Card {
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
.BHT__Card--interactive .BHT__Card__body-padding {
|
|
62
|
+
position: relative;
|
|
63
|
+
isolation: isolate;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: var(--spacing-2);
|
|
68
|
+
text-align: center;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
}
|
|
71
|
+
.BHT__Card--interactive .BHT__Card__body-padding::after {
|
|
72
|
+
content: "";
|
|
73
|
+
position: absolute;
|
|
74
|
+
inset: 0;
|
|
75
|
+
background: currentColor;
|
|
76
|
+
opacity: 0;
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
transition: opacity var(--md-sys-motion-duration-short-2, 100ms) var(--md-sys-motion-easing-standard, ease);
|
|
79
|
+
}
|
|
80
|
+
.BHT__Card--interactive .BHT__Card__body-padding:hover::after {
|
|
81
|
+
opacity: var(--md-sys-state-hover-opacity, 0.08);
|
|
82
|
+
}
|
|
83
|
+
.BHT__Card--interactive .BHT__Card__body-padding:focus-visible::after {
|
|
84
|
+
opacity: var(--md-sys-state-focus-opacity, 0.1);
|
|
85
|
+
}
|
|
86
|
+
.BHT__Card--interactive .BHT__Card__body-padding:active::after {
|
|
87
|
+
opacity: var(--md-sys-state-pressed-opacity, 0.1);
|
|
88
|
+
}
|
|
89
|
+
.BHT__Card--interactive .BHT__Card__body-padding:focus-visible {
|
|
90
|
+
outline: 3px solid var(--md-sys-color-secondary, var(--color-border-focus));
|
|
91
|
+
outline-offset: -3px;
|
|
92
|
+
}
|
|
93
|
+
.BHT__Card--scrollable-body.BHT__Card {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
}
|
|
98
|
+
.BHT__Card--scrollable-body .BHT__Card__body-padding {
|
|
99
|
+
overflow-y: auto;
|
|
100
|
+
flex: 1;
|
|
101
|
+
min-height: 0;
|
|
102
|
+
}
|
|
103
|
+
.BHT__Card--padding-sm .BHT__Card__body-padding {
|
|
104
|
+
padding: var(--spacing-3);
|
|
105
|
+
}
|
|
106
|
+
.BHT__Card--padding-md .BHT__Card__body-padding {
|
|
107
|
+
padding: var(--spacing-5);
|
|
108
|
+
}
|
|
109
|
+
.BHT__Card--padding-lg .BHT__Card__body-padding {
|
|
110
|
+
padding: var(--spacing-8);
|
|
111
|
+
}
|
|
112
|
+
.BHT__Modal {
|
|
113
|
+
position: fixed;
|
|
114
|
+
top: 50%;
|
|
115
|
+
left: 50%;
|
|
116
|
+
transform: translate(-50%, -50%);
|
|
117
|
+
z-index: var(--z-modal, 400);
|
|
118
|
+
}
|
|
119
|
+
.BHT__Modal__backdrop {
|
|
120
|
+
position: fixed;
|
|
121
|
+
inset: 0;
|
|
122
|
+
background: var(--color-overlay);
|
|
123
|
+
z-index: var(--z-modal, 400);
|
|
124
|
+
}
|
|
125
|
+
.BHT__Modal__panel {
|
|
126
|
+
--card-background: var( --md-sys-color-surface-container-high, var(--color-surface-light) );
|
|
127
|
+
--card-radius: var(--md-sys-shape-corner-extra-large, 28px);
|
|
128
|
+
--card-border: none;
|
|
129
|
+
box-shadow: var(--md-sys-elevation-3, var(--shadow-lg));
|
|
130
|
+
width: min(37.5rem, 90vw);
|
|
131
|
+
max-height: 70vh;
|
|
132
|
+
}
|
|
133
|
+
.BHT__Modal__visually-hidden-title {
|
|
134
|
+
position: absolute;
|
|
135
|
+
width: 1px;
|
|
136
|
+
height: 1px;
|
|
137
|
+
padding: 0;
|
|
138
|
+
margin: -1px;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
clip: rect(0, 0, 0, 0);
|
|
141
|
+
white-space: nowrap;
|
|
142
|
+
border: 0;
|
|
143
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { CardPadding, CardHeadingLevel } from '@behivetech/atoms.card';
|
|
4
|
+
|
|
5
|
+
interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
6
|
+
/** Additional class names to merge with the component root element */
|
|
7
|
+
className?: string;
|
|
8
|
+
/** Called when the modal is dismissed (backdrop click, Escape, or the close button) */
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
/** Optional header title; omit to render no header and no close button */
|
|
11
|
+
title?: string;
|
|
12
|
+
/** Optional icon rendered before the title in the header; ignored if `title` is omitted */
|
|
13
|
+
icon?: ReactNode;
|
|
14
|
+
/** Internal padding of the panel body — same values as `Card`'s `padding` prop */
|
|
15
|
+
padding?: CardPadding;
|
|
16
|
+
/** Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop */
|
|
17
|
+
headingLevel?: CardHeadingLevel;
|
|
18
|
+
/** Dialog content */
|
|
19
|
+
children: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* A `Card` centered in the viewport with a dimmed backdrop that blocks
|
|
23
|
+
* interaction with the rest of the page, built on Radix's `Dialog` for focus
|
|
24
|
+
* trapping, Escape-to-close, and outside-click-to-close. For a panel that docks
|
|
25
|
+
* to an edge of the viewport instead, use `Drawer`.
|
|
26
|
+
*/
|
|
27
|
+
declare const Modal: ({ className, onClose, title, icon, padding, headingLevel, children, ...rest }: ModalProps) => react.JSX.Element;
|
|
28
|
+
|
|
29
|
+
export { Modal, type ModalProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
+
mod
|
|
25
|
+
));
|
|
26
|
+
|
|
27
|
+
// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
|
|
28
|
+
var require_classnames = __commonJS({
|
|
29
|
+
"../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
|
|
30
|
+
"use strict";
|
|
31
|
+
(function() {
|
|
32
|
+
"use strict";
|
|
33
|
+
var hasOwn = {}.hasOwnProperty;
|
|
34
|
+
function classNames() {
|
|
35
|
+
var classes = "";
|
|
36
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
37
|
+
var arg = arguments[i];
|
|
38
|
+
if (arg) {
|
|
39
|
+
classes = appendClass(classes, parseValue(arg));
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return classes;
|
|
43
|
+
}
|
|
44
|
+
function parseValue(arg) {
|
|
45
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
46
|
+
return arg;
|
|
47
|
+
}
|
|
48
|
+
if (typeof arg !== "object") {
|
|
49
|
+
return "";
|
|
50
|
+
}
|
|
51
|
+
if (Array.isArray(arg)) {
|
|
52
|
+
return classNames.apply(null, arg);
|
|
53
|
+
}
|
|
54
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
55
|
+
return arg.toString();
|
|
56
|
+
}
|
|
57
|
+
var classes = "";
|
|
58
|
+
for (var key in arg) {
|
|
59
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
60
|
+
classes = appendClass(classes, key);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return classes;
|
|
64
|
+
}
|
|
65
|
+
function appendClass(value, newClass) {
|
|
66
|
+
if (!newClass) {
|
|
67
|
+
return value;
|
|
68
|
+
}
|
|
69
|
+
if (value) {
|
|
70
|
+
return value + " " + newClass;
|
|
71
|
+
}
|
|
72
|
+
return value + newClass;
|
|
73
|
+
}
|
|
74
|
+
if (typeof module !== "undefined" && module.exports) {
|
|
75
|
+
classNames.default = classNames;
|
|
76
|
+
module.exports = classNames;
|
|
77
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
78
|
+
define("classnames", [], function() {
|
|
79
|
+
return classNames;
|
|
80
|
+
});
|
|
81
|
+
} else {
|
|
82
|
+
window.classNames = classNames;
|
|
83
|
+
}
|
|
84
|
+
})();
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// modal.tsx
|
|
89
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
90
|
+
|
|
91
|
+
// ../../../../packages/registry/class-names/dist/index.js
|
|
92
|
+
var import_classnames = __toESM(require_classnames(), 1);
|
|
93
|
+
var getClassName = ({
|
|
94
|
+
className,
|
|
95
|
+
modifiers = {},
|
|
96
|
+
rootClass,
|
|
97
|
+
styles = {}
|
|
98
|
+
}) => {
|
|
99
|
+
function getModifiers() {
|
|
100
|
+
const updatedModifiers = {};
|
|
101
|
+
const modifierKeys = Object.keys(modifiers);
|
|
102
|
+
if (modifierKeys.length) {
|
|
103
|
+
modifierKeys.forEach((modKey) => {
|
|
104
|
+
const classKey = `${rootClass}--${modKey}`;
|
|
105
|
+
const newClassName = styles[classKey] || classKey;
|
|
106
|
+
updatedModifiers[newClassName] = modifiers[modKey] ?? false;
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
return updatedModifiers;
|
|
110
|
+
}
|
|
111
|
+
function getChildClass(childClassName) {
|
|
112
|
+
const classKey = `${rootClass}__${childClassName}`;
|
|
113
|
+
return styles[classKey] || classKey;
|
|
114
|
+
}
|
|
115
|
+
function getRootStyles() {
|
|
116
|
+
return (0, import_classnames.default)(
|
|
117
|
+
className,
|
|
118
|
+
{
|
|
119
|
+
...getModifiers()
|
|
120
|
+
},
|
|
121
|
+
styles[rootClass] || rootClass
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
return [getRootStyles(), getChildClass];
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
// modal.tsx
|
|
128
|
+
import {
|
|
129
|
+
Card
|
|
130
|
+
} from "@behivetech/atoms.card";
|
|
131
|
+
import { Button } from "@behivetech/atoms.button";
|
|
132
|
+
import { CloseIcon } from "@behivetech/atoms.icon";
|
|
133
|
+
|
|
134
|
+
// modal.module.scss
|
|
135
|
+
var modal_module_default = {
|
|
136
|
+
"BHT__Card": "BHT__Card",
|
|
137
|
+
"BHT__Card__header": "BHT__Card__header",
|
|
138
|
+
"BHT__Card__heading": "BHT__Card__heading",
|
|
139
|
+
"BHT__Card__icon": "BHT__Card__icon",
|
|
140
|
+
"BHT__Card__title": "BHT__Card__title",
|
|
141
|
+
"BHT__Card__action": "BHT__Card__action",
|
|
142
|
+
"BHT__Card__body-padding": "BHT__Card__body-padding",
|
|
143
|
+
"BHT__Card--interactive": "BHT__Card--interactive",
|
|
144
|
+
"BHT__Card--scrollable-body": "BHT__Card--scrollable-body",
|
|
145
|
+
"BHT__Card--padding-sm": "BHT__Card--padding-sm",
|
|
146
|
+
"BHT__Card--padding-md": "BHT__Card--padding-md",
|
|
147
|
+
"BHT__Card--padding-lg": "BHT__Card--padding-lg",
|
|
148
|
+
"BHT__Modal": "BHT__Modal",
|
|
149
|
+
"BHT__Modal__backdrop": "BHT__Modal__backdrop",
|
|
150
|
+
"BHT__Modal__panel": "BHT__Modal__panel",
|
|
151
|
+
"BHT__Modal__visually-hidden-title": "BHT__Modal__visually-hidden-title"
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
// modal.tsx
|
|
155
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
156
|
+
var Modal = ({
|
|
157
|
+
className,
|
|
158
|
+
onClose,
|
|
159
|
+
title,
|
|
160
|
+
icon,
|
|
161
|
+
padding,
|
|
162
|
+
headingLevel,
|
|
163
|
+
children,
|
|
164
|
+
...rest
|
|
165
|
+
}) => {
|
|
166
|
+
const [rootClass, getChildClass] = getClassName({
|
|
167
|
+
className,
|
|
168
|
+
rootClass: "BHT__Modal",
|
|
169
|
+
styles: modal_module_default
|
|
170
|
+
});
|
|
171
|
+
const hasHeader = title !== void 0;
|
|
172
|
+
const cardTitle = hasHeader ? /* @__PURE__ */ jsx(RadixDialog.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { children: title }) }) : void 0;
|
|
173
|
+
const cardAction = hasHeader ? /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" }) }) }) : void 0;
|
|
174
|
+
return /* @__PURE__ */ jsx(RadixDialog.Root, { open: true, modal: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
|
|
175
|
+
/* @__PURE__ */ jsx(RadixDialog.Overlay, { className: getChildClass("backdrop") }),
|
|
176
|
+
/* @__PURE__ */ jsx(RadixDialog.Content, { ...rest, className: rootClass, children: /* @__PURE__ */ jsxs(
|
|
177
|
+
Card,
|
|
178
|
+
{
|
|
179
|
+
className: getChildClass("panel"),
|
|
180
|
+
icon: hasHeader ? icon : void 0,
|
|
181
|
+
title: cardTitle,
|
|
182
|
+
headingLevel,
|
|
183
|
+
action: cardAction,
|
|
184
|
+
padding,
|
|
185
|
+
scrollableBody: true,
|
|
186
|
+
children: [
|
|
187
|
+
!hasHeader && /* @__PURE__ */ jsx(
|
|
188
|
+
RadixDialog.Title,
|
|
189
|
+
{
|
|
190
|
+
className: getChildClass("visually-hidden-title"),
|
|
191
|
+
children: "Dialog"
|
|
192
|
+
}
|
|
193
|
+
),
|
|
194
|
+
children
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
) })
|
|
198
|
+
] }) });
|
|
199
|
+
};
|
|
200
|
+
export {
|
|
201
|
+
Modal
|
|
202
|
+
};
|
|
203
|
+
/*! Bundled license information:
|
|
204
|
+
|
|
205
|
+
classnames/index.js:
|
|
206
|
+
(*!
|
|
207
|
+
Copyright (c) 2018 Jed Watson.
|
|
208
|
+
Licensed under the MIT License (MIT), see
|
|
209
|
+
http://jedwatson.github.io/classnames
|
|
210
|
+
*)
|
|
211
|
+
*/
|
package/docs.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://github.com/behivetech/bht-component-registry/docs.schema.json",
|
|
3
|
+
"version": 2,
|
|
4
|
+
"generatedAt": "2026-10-23T16:59:21.250Z",
|
|
5
|
+
"docs": [
|
|
6
|
+
{
|
|
7
|
+
"displayName": "Modal",
|
|
8
|
+
"description": "A `Card` centered in the viewport with a dimmed backdrop that blocks\ninteraction with the rest of the page, built on Radix's `Dialog` for focus\ntrapping, Escape-to-close, and outside-click-to-close. For a panel that docks\nto an edge of the viewport instead, use `Drawer`.",
|
|
9
|
+
"extendsNative": true,
|
|
10
|
+
"props": [
|
|
11
|
+
{
|
|
12
|
+
"name": "children",
|
|
13
|
+
"type": "ReactNode",
|
|
14
|
+
"required": true,
|
|
15
|
+
"defaultValue": null,
|
|
16
|
+
"description": "Dialog content"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "onClose",
|
|
20
|
+
"type": "() => void",
|
|
21
|
+
"required": true,
|
|
22
|
+
"defaultValue": null,
|
|
23
|
+
"description": "Called when the modal is dismissed (backdrop click, Escape, or the close button)"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "className",
|
|
27
|
+
"type": "string",
|
|
28
|
+
"required": false,
|
|
29
|
+
"defaultValue": null,
|
|
30
|
+
"description": "Additional class names to merge with the component root element"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "headingLevel",
|
|
34
|
+
"type": "1 | 2 | 3 | 4 | 5 | 6",
|
|
35
|
+
"required": false,
|
|
36
|
+
"defaultValue": null,
|
|
37
|
+
"description": "Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "icon",
|
|
41
|
+
"type": "ReactNode",
|
|
42
|
+
"required": false,
|
|
43
|
+
"defaultValue": null,
|
|
44
|
+
"description": "Optional icon rendered before the title in the header; ignored if `title` is omitted"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "padding",
|
|
48
|
+
"type": "\"none\" | \"sm\" | \"md\" | \"lg\"",
|
|
49
|
+
"required": false,
|
|
50
|
+
"defaultValue": null,
|
|
51
|
+
"description": "Internal padding of the panel body — same values as `Card`'s `padding` prop"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "title",
|
|
55
|
+
"type": "string",
|
|
56
|
+
"required": false,
|
|
57
|
+
"defaultValue": null,
|
|
58
|
+
"description": "Optional header title; omit to render no header and no close button"
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"functions": []
|
|
64
|
+
}
|
package/index.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Modal } from "./modal.js";
|
|
2
|
+
|
|
3
|
+
export const BasicModal = () => (
|
|
4
|
+
<Modal onClose={() => {}} title="Add Block">
|
|
5
|
+
Modal content
|
|
6
|
+
</Modal>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export const ModalWithoutTitle = () => (
|
|
10
|
+
<Modal onClose={() => {}}>Modal content, no header</Modal>
|
|
11
|
+
);
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
// Modal renders its panel as a Card, but Card is a separate published package
|
|
2
|
+
// with its own separate CSS — nothing about installing @behivetech/atoms.modal
|
|
3
|
+
// tells a consumer they also need @behivetech/atoms.card/styles.css. Pulling
|
|
4
|
+
// Card's actual stylesheet in here (not a copy — the real file, by relative
|
|
5
|
+
// path) means Modal's own bundled CSS is self-sufficient: install/import just
|
|
6
|
+
// this package and the panel renders fully styled, no hidden second import
|
|
7
|
+
// required. Card uses generateScopedName: "[local]" (unhashed class names),
|
|
8
|
+
// so this emits the exact same selectors Card's own build emits — no risk of
|
|
9
|
+
// mismatching the classNames the real <Card> component actually renders with.
|
|
10
|
+
@use "../card/card.module.scss";
|
|
11
|
+
|
|
12
|
+
// Material Design 3 basic dialog: the panel is a Card re-themed through its
|
|
13
|
+
// custom properties, never by targeting Card's classes.
|
|
14
|
+
.BHT__Modal {
|
|
15
|
+
position: fixed;
|
|
16
|
+
top: 50%;
|
|
17
|
+
left: 50%;
|
|
18
|
+
transform: translate(-50%, -50%);
|
|
19
|
+
z-index: var(--z-modal, 400);
|
|
20
|
+
|
|
21
|
+
&__backdrop {
|
|
22
|
+
position: fixed;
|
|
23
|
+
inset: 0;
|
|
24
|
+
background: var(--color-overlay);
|
|
25
|
+
z-index: var(--z-modal, 400);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__panel {
|
|
29
|
+
/* Card reads these custom properties — see Card's README */
|
|
30
|
+
--card-background: var(
|
|
31
|
+
--md-sys-color-surface-container-high,
|
|
32
|
+
var(--color-surface-light)
|
|
33
|
+
);
|
|
34
|
+
--card-radius: var(--md-sys-shape-corner-extra-large, 28px);
|
|
35
|
+
// MD3 dialogs separate from the page by tone and elevation, not an outline.
|
|
36
|
+
--card-border: none;
|
|
37
|
+
|
|
38
|
+
box-shadow: var(--md-sys-elevation-3, var(--shadow-lg));
|
|
39
|
+
width: min(37.5rem, 90vw);
|
|
40
|
+
max-height: 70vh;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&__visually-hidden-title {
|
|
44
|
+
// Fixed px: this is the standard clip idiom for hiding content from sight
|
|
45
|
+
// while leaving it to screen readers, not a size that should scale.
|
|
46
|
+
position: absolute;
|
|
47
|
+
width: 1px;
|
|
48
|
+
height: 1px;
|
|
49
|
+
padding: 0;
|
|
50
|
+
margin: -1px;
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
clip: rect(0, 0, 0, 0);
|
|
53
|
+
white-space: nowrap;
|
|
54
|
+
border: 0;
|
|
55
|
+
}
|
|
56
|
+
}
|
package/modal.tsx
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
3
|
+
import { getClassName } from "@bht-component-registry/class-names";
|
|
4
|
+
import {
|
|
5
|
+
Card,
|
|
6
|
+
type CardPadding,
|
|
7
|
+
type CardHeadingLevel,
|
|
8
|
+
} from "@behivetech/atoms.card";
|
|
9
|
+
import { Button } from "@behivetech/atoms.button";
|
|
10
|
+
// The glyph, not the set: `<Icon name>` is a runtime lookup, so importing it
|
|
11
|
+
// here would pull all 22 icons into every consumer of Modal.
|
|
12
|
+
import { CloseIcon } from "@behivetech/atoms.icon";
|
|
13
|
+
import styles from "./modal.module.scss";
|
|
14
|
+
|
|
15
|
+
export interface ModalProps extends Omit<
|
|
16
|
+
HTMLAttributes<HTMLDivElement>,
|
|
17
|
+
"title"
|
|
18
|
+
> {
|
|
19
|
+
/** Additional class names to merge with the component root element */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** Called when the modal is dismissed (backdrop click, Escape, or the close button) */
|
|
22
|
+
onClose: () => void;
|
|
23
|
+
/** Optional header title; omit to render no header and no close button */
|
|
24
|
+
title?: string;
|
|
25
|
+
/** Optional icon rendered before the title in the header; ignored if `title` is omitted */
|
|
26
|
+
icon?: ReactNode;
|
|
27
|
+
/** Internal padding of the panel body — same values as `Card`'s `padding` prop */
|
|
28
|
+
padding?: CardPadding;
|
|
29
|
+
/** Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop */
|
|
30
|
+
headingLevel?: CardHeadingLevel;
|
|
31
|
+
/** Dialog content */
|
|
32
|
+
children: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* A `Card` centered in the viewport with a dimmed backdrop that blocks
|
|
37
|
+
* interaction with the rest of the page, built on Radix's `Dialog` for focus
|
|
38
|
+
* trapping, Escape-to-close, and outside-click-to-close. For a panel that docks
|
|
39
|
+
* to an edge of the viewport instead, use `Drawer`.
|
|
40
|
+
*/
|
|
41
|
+
export const Modal = ({
|
|
42
|
+
className,
|
|
43
|
+
onClose,
|
|
44
|
+
title,
|
|
45
|
+
icon,
|
|
46
|
+
padding,
|
|
47
|
+
headingLevel,
|
|
48
|
+
children,
|
|
49
|
+
...rest
|
|
50
|
+
}: ModalProps) => {
|
|
51
|
+
const [rootClass, getChildClass] = getClassName({
|
|
52
|
+
className,
|
|
53
|
+
rootClass: "BHT__Modal",
|
|
54
|
+
styles,
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const hasHeader = title !== undefined;
|
|
58
|
+
|
|
59
|
+
const cardTitle = hasHeader ? (
|
|
60
|
+
<RadixDialog.Title asChild>
|
|
61
|
+
<span>{title}</span>
|
|
62
|
+
</RadixDialog.Title>
|
|
63
|
+
) : undefined;
|
|
64
|
+
|
|
65
|
+
const cardAction = hasHeader ? (
|
|
66
|
+
<RadixDialog.Close asChild>
|
|
67
|
+
<Button variant="ghost" size="sm" iconOnly aria-label="Close">
|
|
68
|
+
<CloseIcon size="sm" />
|
|
69
|
+
</Button>
|
|
70
|
+
</RadixDialog.Close>
|
|
71
|
+
) : undefined;
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<RadixDialog.Root open modal onOpenChange={(open) => !open && onClose()}>
|
|
75
|
+
<RadixDialog.Portal>
|
|
76
|
+
<RadixDialog.Overlay className={getChildClass("backdrop")} />
|
|
77
|
+
<RadixDialog.Content {...rest} className={rootClass}>
|
|
78
|
+
<Card
|
|
79
|
+
className={getChildClass("panel")}
|
|
80
|
+
icon={hasHeader ? icon : undefined}
|
|
81
|
+
title={cardTitle}
|
|
82
|
+
headingLevel={headingLevel}
|
|
83
|
+
action={cardAction}
|
|
84
|
+
padding={padding}
|
|
85
|
+
scrollableBody
|
|
86
|
+
>
|
|
87
|
+
{!hasHeader && (
|
|
88
|
+
<RadixDialog.Title
|
|
89
|
+
className={getChildClass("visually-hidden-title")}
|
|
90
|
+
>
|
|
91
|
+
Dialog
|
|
92
|
+
</RadixDialog.Title>
|
|
93
|
+
)}
|
|
94
|
+
{children}
|
|
95
|
+
</Card>
|
|
96
|
+
</RadixDialog.Content>
|
|
97
|
+
</RadixDialog.Portal>
|
|
98
|
+
</RadixDialog.Root>
|
|
99
|
+
);
|
|
100
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,65 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@behivetech/atoms.modal",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.2.3",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"private": false,
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"require": "./dist/index.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./styles.css": "./dist/index.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md",
|
|
18
|
+
"index.ts",
|
|
19
|
+
"modal.tsx",
|
|
20
|
+
"modal.module.scss",
|
|
21
|
+
"*.example.tsx",
|
|
22
|
+
"docs.json"
|
|
23
|
+
],
|
|
24
|
+
"registry": {
|
|
25
|
+
"status": "stable",
|
|
26
|
+
"tags": []
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@radix-ui/react-dialog": "^1.1.23",
|
|
30
|
+
"@behivetech/atoms.button": "0.4.3",
|
|
31
|
+
"@behivetech/atoms.card": "0.4.3",
|
|
32
|
+
"@behivetech/atoms.icon": "0.3.3"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": "^19.2.7",
|
|
36
|
+
"react-dom": "^19.2.7"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@types/react": "19.2.17",
|
|
40
|
+
"@types/react-dom": "19.2.3",
|
|
41
|
+
"eslint": "^9.39.5",
|
|
42
|
+
"tsup": "^8.5.1",
|
|
43
|
+
"typescript": "^6.0.3",
|
|
44
|
+
"vitest": "^4.1.10",
|
|
45
|
+
"@bht-component-registry/class-names": "0.0.6",
|
|
46
|
+
"@bht-component-registry/env": "0.1.0"
|
|
47
|
+
},
|
|
48
|
+
"repository": {
|
|
49
|
+
"type": "git",
|
|
50
|
+
"url": "https://github.com/behivetech/bht-galaxy.git",
|
|
51
|
+
"directory": "registry/behivetech/atoms/modal"
|
|
52
|
+
},
|
|
53
|
+
"publishConfig": {
|
|
54
|
+
"registry": "https://registry.npmjs.org",
|
|
55
|
+
"access": "public",
|
|
56
|
+
"provenance": true
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"build": "tsup && bht-registry-docgen",
|
|
60
|
+
"dev": "tsup --watch",
|
|
61
|
+
"lint": "eslint . --max-warnings 0",
|
|
62
|
+
"check-types": "tsc --noEmit",
|
|
63
|
+
"test": "vitest run"
|
|
64
|
+
}
|
|
6
65
|
}
|