@cerberus-design/react 0.14.2-next-a928afd → 0.14.2-next-0052cda
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/build/legacy/_tsup-dts-rollup.d.cts +111 -34
- package/build/legacy/components/Accordion.cjs +4 -187
- package/build/legacy/components/Accordion.cjs.map +1 -1
- package/build/legacy/components/Accordion.client.cjs +64 -0
- package/build/legacy/components/Accordion.client.cjs.map +1 -0
- package/build/legacy/components/AccordionItemGroup.cjs +41 -185
- package/build/legacy/components/AccordionItemGroup.cjs.map +1 -1
- package/build/legacy/components/Admonition.cjs +89 -239
- package/build/legacy/components/Admonition.cjs.map +1 -1
- package/build/legacy/components/Admonition.client.cjs +219 -0
- package/build/legacy/components/Admonition.client.cjs.map +1 -0
- package/build/legacy/components/AnimatingUploadIcon.cjs.map +1 -1
- package/build/legacy/components/Avatar.cjs +23 -174
- package/build/legacy/components/Avatar.cjs.map +1 -1
- package/build/legacy/components/Checkbox.cjs +22 -168
- package/build/legacy/components/Checkbox.cjs.map +1 -1
- package/build/legacy/components/DatePicker.client.cjs +119 -268
- package/build/legacy/components/DatePicker.client.cjs.map +1 -1
- package/build/legacy/components/DatePicker.server.cjs +17 -271
- package/build/legacy/components/DatePicker.server.cjs.map +1 -1
- package/build/legacy/components/FileStatus.cjs +62 -212
- package/build/legacy/components/FileStatus.cjs.map +1 -1
- package/build/legacy/components/FileUploader.cjs +29 -180
- package/build/legacy/components/FileUploader.cjs.map +1 -1
- package/build/legacy/components/Input.cjs +20 -172
- package/build/legacy/components/Input.cjs.map +1 -1
- package/build/legacy/components/Notification.cjs +25 -176
- package/build/legacy/components/Notification.cjs.map +1 -1
- package/build/legacy/components/Select.cjs +26 -178
- package/build/legacy/components/Select.cjs.map +1 -1
- package/build/legacy/components/Tag.cjs +16 -167
- package/build/legacy/components/Tag.cjs.map +1 -1
- package/build/legacy/components/Toggle.cjs +20 -172
- package/build/legacy/components/Toggle.cjs.map +1 -1
- package/build/legacy/config/defineIcons.cjs +3 -39
- package/build/legacy/config/defineIcons.cjs.map +1 -1
- package/build/legacy/config/{cerbIcons.cjs → index.cjs} +22 -29
- package/build/legacy/config/index.cjs.map +1 -0
- package/build/legacy/config/types.cjs +19 -0
- package/build/legacy/config/types.cjs.map +1 -0
- package/build/legacy/context/cerberus.cjs +46 -0
- package/build/legacy/context/cerberus.cjs.map +1 -0
- package/build/legacy/context/confirm-modal.cjs +58 -207
- package/build/legacy/context/confirm-modal.cjs.map +1 -1
- package/build/legacy/context/cta-modal.cjs +57 -209
- package/build/legacy/context/cta-modal.cjs.map +1 -1
- package/build/legacy/context/notification-center.cjs +55 -206
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/context/prompt-modal.cjs +83 -233
- package/build/legacy/context/prompt-modal.cjs.map +1 -1
- package/build/legacy/index.cjs +950 -930
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +111 -34
- package/build/modern/{chunk-BVCXVZAF.js → chunk-25HMVHLT.js} +6 -5
- package/build/modern/chunk-25HMVHLT.js.map +1 -0
- package/build/modern/chunk-36N4527B.js +1 -0
- package/build/modern/chunk-5EWCH7AI.js +82 -0
- package/build/modern/chunk-5EWCH7AI.js.map +1 -0
- package/build/modern/chunk-5SNLQZYP.js +25 -0
- package/build/modern/chunk-5SNLQZYP.js.map +1 -0
- package/build/modern/{chunk-6BH5J5GF.js → chunk-CCTLGF5U.js} +18 -17
- package/build/modern/chunk-CCTLGF5U.js.map +1 -0
- package/build/modern/{chunk-HKJMLWVP.js → chunk-EDARV2EI.js} +5 -4
- package/build/modern/chunk-EDARV2EI.js.map +1 -0
- package/build/modern/{chunk-FXLLRVAM.js → chunk-EMNBMH7Z.js} +13 -11
- package/build/modern/chunk-EMNBMH7Z.js.map +1 -0
- package/build/modern/{chunk-PVIMOXSO.js → chunk-GCQMH4QA.js} +5 -4
- package/build/modern/chunk-GCQMH4QA.js.map +1 -0
- package/build/modern/chunk-GITT5645.js +20 -0
- package/build/modern/chunk-GITT5645.js.map +1 -0
- package/build/modern/{chunk-TJCFYL5W.js → chunk-IGHMP4WA.js} +1 -20
- package/build/modern/chunk-IGHMP4WA.js.map +1 -0
- package/build/modern/chunk-ISCJ542I.js +82 -0
- package/build/modern/chunk-ISCJ542I.js.map +1 -0
- package/build/modern/{chunk-HVKM54BA.js → chunk-IW3LIRDG.js} +1 -1
- package/build/modern/chunk-IW3LIRDG.js.map +1 -0
- package/build/modern/{chunk-KWJ5FKX7.js → chunk-JQCRDZNI.js} +8 -6
- package/build/modern/chunk-JQCRDZNI.js.map +1 -0
- package/build/modern/chunk-KDDPAJMR.js +9 -0
- package/build/modern/chunk-KDDPAJMR.js.map +1 -0
- package/build/modern/{chunk-JJZQGR7A.js → chunk-KF35CYT4.js} +8 -6
- package/build/modern/chunk-KF35CYT4.js.map +1 -0
- package/build/modern/{chunk-XOROL3JY.js → chunk-KKHL3ZO4.js} +5 -4
- package/build/modern/chunk-KKHL3ZO4.js.map +1 -0
- package/build/modern/{chunk-U36UZJGZ.js → chunk-MZ3UCDUL.js} +5 -4
- package/build/modern/chunk-MZ3UCDUL.js.map +1 -0
- package/build/modern/{chunk-T2JOPPGL.js → chunk-N24COMHJ.js} +11 -4
- package/build/modern/chunk-N24COMHJ.js.map +1 -0
- package/build/modern/{chunk-CVTON5DQ.js → chunk-N3L3PEMF.js} +2 -2
- package/build/modern/chunk-NJSETNRL.js +68 -0
- package/build/modern/chunk-NJSETNRL.js.map +1 -0
- package/build/modern/{chunk-XXWR7UGH.js → chunk-QKZZHZL4.js} +22 -21
- package/build/modern/chunk-QKZZHZL4.js.map +1 -0
- package/build/modern/{chunk-KPUYKHLW.js → chunk-UMF2TWZN.js} +59 -9
- package/build/modern/chunk-UMF2TWZN.js.map +1 -0
- package/build/modern/{chunk-QK7R2XJM.js → chunk-XQICKZH4.js} +6 -5
- package/build/modern/chunk-XQICKZH4.js.map +1 -0
- package/build/modern/chunk-XZGXRRSQ.js +31 -0
- package/build/modern/chunk-XZGXRRSQ.js.map +1 -0
- package/build/modern/{chunk-5OVH3INN.js → chunk-Z64YZ5IH.js} +18 -18
- package/build/modern/chunk-Z64YZ5IH.js.map +1 -0
- package/build/modern/components/Accordion.client.js +9 -0
- package/build/modern/components/Accordion.client.js.map +1 -0
- package/build/modern/components/Accordion.js +1 -7
- package/build/modern/components/AccordionItemGroup.js +4 -6
- package/build/modern/components/Admonition.client.js +11 -0
- package/build/modern/components/Admonition.client.js.map +1 -0
- package/build/modern/components/Admonition.js +4 -6
- package/build/modern/components/AnimatingUploadIcon.js +1 -1
- package/build/modern/components/Avatar.js +3 -5
- package/build/modern/components/Checkbox.js +2 -5
- package/build/modern/components/DatePicker.client.js +8 -7
- package/build/modern/components/DatePicker.server.js +3 -13
- package/build/modern/components/FileStatus.js +4 -7
- package/build/modern/components/FileUploader.js +3 -6
- package/build/modern/components/Input.js +2 -5
- package/build/modern/components/Notification.js +2 -5
- package/build/modern/components/Select.js +2 -5
- package/build/modern/components/Tag.js +3 -5
- package/build/modern/components/Toggle.js +2 -5
- package/build/modern/config/defineIcons.js +2 -5
- package/build/modern/config/index.js +14 -0
- package/build/modern/config/index.js.map +1 -0
- package/build/modern/config/types.js +2 -0
- package/build/modern/config/types.js.map +1 -0
- package/build/modern/context/cerberus.js +10 -0
- package/build/modern/context/cerberus.js.map +1 -0
- package/build/modern/context/confirm-modal.js +6 -9
- package/build/modern/context/cta-modal.js +6 -9
- package/build/modern/context/notification-center.js +3 -6
- package/build/modern/context/prompt-modal.js +8 -11
- package/build/modern/index.js +105 -94
- package/build/modern/index.js.map +1 -1
- package/package.json +4 -8
- package/src/components/Accordion.client.tsx +46 -0
- package/src/components/Accordion.tsx +0 -37
- package/src/components/AccordionItemGroup.tsx +1 -1
- package/src/components/Admonition.client.tsx +73 -0
- package/src/components/Admonition.tsx +1 -70
- package/src/components/AnimatingUploadIcon.tsx +3 -3
- package/src/components/Avatar.tsx +5 -2
- package/src/components/Checkbox.tsx +10 -3
- package/src/components/DatePicker.client.tsx +79 -7
- package/src/components/DatePicker.server.tsx +2 -75
- package/src/components/FileStatus.tsx +5 -3
- package/src/components/FileUploader.tsx +3 -2
- package/src/components/Input.tsx +4 -2
- package/src/components/Notification.tsx +7 -4
- package/src/components/Select.tsx +5 -2
- package/src/components/Tag.tsx +5 -2
- package/src/components/Toggle.tsx +4 -3
- package/src/config/defineIcons.ts +28 -16
- package/src/config/index.ts +28 -0
- package/src/config/types.ts +42 -0
- package/src/context/cerberus.tsx +44 -0
- package/src/context/confirm-modal.tsx +4 -2
- package/src/context/cta-modal.tsx +5 -4
- package/src/context/prompt-modal.tsx +4 -2
- package/src/index.ts +3 -1
- package/build/legacy/config/cerbIcons.cjs.map +0 -1
- package/build/modern/chunk-5OVH3INN.js.map +0 -1
- package/build/modern/chunk-6BH5J5GF.js.map +0 -1
- package/build/modern/chunk-BC5SZDYY.js +0 -132
- package/build/modern/chunk-BC5SZDYY.js.map +0 -1
- package/build/modern/chunk-BVCXVZAF.js.map +0 -1
- package/build/modern/chunk-CRII2HNX.js +0 -55
- package/build/modern/chunk-CRII2HNX.js.map +0 -1
- package/build/modern/chunk-FXLLRVAM.js.map +0 -1
- package/build/modern/chunk-HKJMLWVP.js.map +0 -1
- package/build/modern/chunk-HVKM54BA.js.map +0 -1
- package/build/modern/chunk-JJZQGR7A.js.map +0 -1
- package/build/modern/chunk-KPUYKHLW.js.map +0 -1
- package/build/modern/chunk-KWJ5FKX7.js.map +0 -1
- package/build/modern/chunk-PVIMOXSO.js.map +0 -1
- package/build/modern/chunk-QK7R2XJM.js.map +0 -1
- package/build/modern/chunk-QMF5ZNDG.js +0 -27
- package/build/modern/chunk-QMF5ZNDG.js.map +0 -1
- package/build/modern/chunk-QQOWWMZ3.js +0 -138
- package/build/modern/chunk-QQOWWMZ3.js.map +0 -1
- package/build/modern/chunk-T2JOPPGL.js.map +0 -1
- package/build/modern/chunk-TJCFYL5W.js.map +0 -1
- package/build/modern/chunk-U36UZJGZ.js.map +0 -1
- package/build/modern/chunk-XOROL3JY.js.map +0 -1
- package/build/modern/chunk-XXWR7UGH.js.map +0 -1
- package/build/modern/config/cerbIcons.js +0 -9
- package/src/config/cerbIcons.ts +0 -73
- /package/build/modern/{config/cerbIcons.js.map → chunk-36N4527B.js.map} +0 -0
- /package/build/modern/{chunk-CVTON5DQ.js.map → chunk-N3L3PEMF.js.map} +0 -0
|
@@ -25,7 +25,7 @@ __export(prompt_modal_exports, {
|
|
|
25
25
|
usePromptModal: () => usePromptModal
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(prompt_modal_exports);
|
|
28
|
-
var
|
|
28
|
+
var import_react7 = require("react");
|
|
29
29
|
|
|
30
30
|
// src/components/Portal.tsx
|
|
31
31
|
var import_react = require("@ark-ui/react");
|
|
@@ -111,193 +111,41 @@ function useFieldContext() {
|
|
|
111
111
|
return context;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
// src/
|
|
115
|
-
var
|
|
116
|
-
|
|
117
|
-
// src/config/icons/checkbox.icons.tsx
|
|
114
|
+
// src/context/cerberus.tsx
|
|
115
|
+
var import_react3 = require("react");
|
|
118
116
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
role: "img",
|
|
127
|
-
viewBox: "0 0 24 24",
|
|
128
|
-
...props,
|
|
129
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
130
|
-
"path",
|
|
131
|
-
{
|
|
132
|
-
fill: "currentColor",
|
|
133
|
-
d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
|
|
134
|
-
}
|
|
135
|
-
)
|
|
136
|
-
}
|
|
137
|
-
);
|
|
138
|
-
}
|
|
139
|
-
function IndeterminateIcon(props) {
|
|
140
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
141
|
-
"svg",
|
|
142
|
-
{
|
|
143
|
-
"aria-hidden": "true",
|
|
144
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
145
|
-
role: "img",
|
|
146
|
-
fill: "none",
|
|
147
|
-
viewBox: "0 0 24 24",
|
|
148
|
-
...props,
|
|
149
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
|
|
150
|
-
}
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
// src/components/AnimatingUploadIcon.tsx
|
|
155
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
156
|
-
function AnimatingUploadIcon(props) {
|
|
157
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
158
|
-
"svg",
|
|
159
|
-
{
|
|
160
|
-
"aria-hidden": "true",
|
|
161
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
162
|
-
width: props.size ?? "1em",
|
|
163
|
-
height: props.size ?? "1em",
|
|
164
|
-
viewBox: "0 0 24 24",
|
|
165
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
166
|
-
"g",
|
|
167
|
-
{
|
|
168
|
-
fill: "none",
|
|
169
|
-
stroke: "currentColor",
|
|
170
|
-
strokeLinecap: "square",
|
|
171
|
-
strokeLinejoin: "round",
|
|
172
|
-
strokeWidth: 1.5,
|
|
173
|
-
children: [
|
|
174
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
175
|
-
"path",
|
|
176
|
-
{
|
|
177
|
-
"data-name": "animating-trail",
|
|
178
|
-
strokeDasharray: "2 4",
|
|
179
|
-
strokeDashoffset: 6,
|
|
180
|
-
d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
|
|
181
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
182
|
-
"animate",
|
|
183
|
-
{
|
|
184
|
-
attributeName: "stroke-dashoffset",
|
|
185
|
-
dur: "0.45s",
|
|
186
|
-
repeatCount: "indefinite",
|
|
187
|
-
values: "6;0"
|
|
188
|
-
}
|
|
189
|
-
)
|
|
190
|
-
}
|
|
191
|
-
),
|
|
192
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
193
|
-
"path",
|
|
194
|
-
{
|
|
195
|
-
"data-name": "half-circle",
|
|
196
|
-
strokeDasharray: 32,
|
|
197
|
-
strokeDashoffset: 32,
|
|
198
|
-
d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
|
|
199
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
200
|
-
"animate",
|
|
201
|
-
{
|
|
202
|
-
fill: "freeze",
|
|
203
|
-
attributeName: "stroke-dashoffset",
|
|
204
|
-
begin: "0.075s",
|
|
205
|
-
dur: "0.3s",
|
|
206
|
-
values: "32;0"
|
|
207
|
-
}
|
|
208
|
-
)
|
|
209
|
-
}
|
|
210
|
-
),
|
|
211
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
212
|
-
"svg",
|
|
213
|
-
{
|
|
214
|
-
"aria-hidden": "true",
|
|
215
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
216
|
-
width: "0.8em",
|
|
217
|
-
height: "0.8em",
|
|
218
|
-
x: "27%",
|
|
219
|
-
y: "27%",
|
|
220
|
-
viewBox: "0 0 24 24",
|
|
221
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
222
|
-
"polygon",
|
|
223
|
-
{
|
|
224
|
-
fill: "currentColor",
|
|
225
|
-
stroke: "currentColor",
|
|
226
|
-
strokeWidth: 0.8,
|
|
227
|
-
opacity: "1",
|
|
228
|
-
points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
|
|
229
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
230
|
-
"animate",
|
|
231
|
-
{
|
|
232
|
-
fill: "freeze",
|
|
233
|
-
attributeName: "opacity",
|
|
234
|
-
values: "1;0;1",
|
|
235
|
-
dur: "2s",
|
|
236
|
-
repeatCount: "indefinite"
|
|
237
|
-
}
|
|
238
|
-
)
|
|
239
|
-
}
|
|
240
|
-
)
|
|
241
|
-
}
|
|
242
|
-
)
|
|
243
|
-
]
|
|
244
|
-
}
|
|
245
|
-
)
|
|
246
|
-
}
|
|
247
|
-
);
|
|
117
|
+
var CerberusContext = (0, import_react3.createContext)(null);
|
|
118
|
+
function useCerberusContext() {
|
|
119
|
+
const context = (0, import_react3.useContext)(CerberusContext);
|
|
120
|
+
if (!context) {
|
|
121
|
+
throw new Error("useCerberus must be used within a CerberusProvider");
|
|
122
|
+
}
|
|
123
|
+
return context;
|
|
248
124
|
}
|
|
249
125
|
|
|
250
|
-
// src/config/cerbIcons.ts
|
|
251
|
-
var defaultIcons = {
|
|
252
|
-
accordionIndicator: import_icons.ChevronDown,
|
|
253
|
-
avatar: import_icons.UserFilled,
|
|
254
|
-
calendar: import_icons.Calendar,
|
|
255
|
-
calendarPrev: import_icons.ChevronLeft,
|
|
256
|
-
calendarNext: import_icons.ChevronRight,
|
|
257
|
-
checkbox: CheckmarkIcon,
|
|
258
|
-
close: import_icons.Close,
|
|
259
|
-
confirmModal: import_icons.Information,
|
|
260
|
-
delete: import_icons.TrashCan,
|
|
261
|
-
promptModal: import_icons.Information,
|
|
262
|
-
waitingFileUploader: import_icons.CloudUpload,
|
|
263
|
-
fileUploader: AnimatingUploadIcon,
|
|
264
|
-
indeterminate: IndeterminateIcon,
|
|
265
|
-
infoNotification: import_icons.Information,
|
|
266
|
-
successNotification: import_icons.CheckmarkOutline,
|
|
267
|
-
warningNotification: import_icons.WarningAlt,
|
|
268
|
-
dangerNotification: import_icons.WarningFilled,
|
|
269
|
-
invalid: import_icons.WarningFilled,
|
|
270
|
-
invalidAlt: import_icons.Warning,
|
|
271
|
-
redo: import_icons.Restart,
|
|
272
|
-
selectArrow: import_icons.ChevronDown,
|
|
273
|
-
toggleChecked: import_icons.Checkmark
|
|
274
|
-
};
|
|
275
|
-
|
|
276
|
-
// src/config/defineIcons.ts
|
|
277
|
-
var $cerberusIcons = defaultIcons;
|
|
278
|
-
|
|
279
126
|
// src/components/Show.tsx
|
|
280
|
-
var
|
|
127
|
+
var import_react4 = require("react");
|
|
281
128
|
function Show(props) {
|
|
282
129
|
const { when, children, fallback } = props;
|
|
283
|
-
const condition = (0,
|
|
284
|
-
return (0,
|
|
130
|
+
const condition = (0, import_react4.useMemo)(() => when ?? false, [when]);
|
|
131
|
+
return (0, import_react4.useMemo)(() => {
|
|
285
132
|
if (condition) return children;
|
|
286
133
|
return fallback ?? null;
|
|
287
134
|
}, [condition, children, fallback]);
|
|
288
135
|
}
|
|
289
136
|
|
|
290
137
|
// src/components/Input.tsx
|
|
291
|
-
var
|
|
138
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
292
139
|
function Input(props) {
|
|
293
140
|
const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
|
|
294
141
|
const inputStyles = (0, import_recipes2.input)({ size });
|
|
295
142
|
const { invalid, ...fieldStates } = useFieldContext();
|
|
296
143
|
const hasEndIcon = Boolean(endIcon);
|
|
297
|
-
const {
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
/* @__PURE__ */ (0,
|
|
144
|
+
const { icons } = useCerberusContext();
|
|
145
|
+
const { invalid: InvalidIcon } = icons;
|
|
146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: inputStyles.root, children: [
|
|
147
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
301
149
|
"input",
|
|
302
150
|
{
|
|
303
151
|
...nativeProps,
|
|
@@ -308,8 +156,8 @@ function Input(props) {
|
|
|
308
156
|
className: (0, import_css2.cx)("peer", nativeProps.className, inputStyles.input)
|
|
309
157
|
}
|
|
310
158
|
),
|
|
311
|
-
/* @__PURE__ */ (0,
|
|
312
|
-
/* @__PURE__ */ (0,
|
|
159
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
|
|
160
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
|
|
313
161
|
] });
|
|
314
162
|
}
|
|
315
163
|
|
|
@@ -317,12 +165,12 @@ function Input(props) {
|
|
|
317
165
|
var import_recipes3 = require("@cerberus/styled-system/recipes");
|
|
318
166
|
var import_css3 = require("@cerberus/styled-system/css");
|
|
319
167
|
var import_patterns = require("@cerberus/styled-system/patterns");
|
|
320
|
-
var
|
|
168
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
321
169
|
function Label(props) {
|
|
322
170
|
const { hidden, size, ...nativeProps } = props;
|
|
323
171
|
const { required, disabled } = useFieldContext();
|
|
324
172
|
const usage = hidden ? "hidden" : "visible";
|
|
325
|
-
return /* @__PURE__ */ (0,
|
|
173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
326
174
|
"label",
|
|
327
175
|
{
|
|
328
176
|
...nativeProps,
|
|
@@ -337,7 +185,7 @@ function Label(props) {
|
|
|
337
185
|
),
|
|
338
186
|
children: [
|
|
339
187
|
props.children,
|
|
340
|
-
/* @__PURE__ */ (0,
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
341
189
|
"span",
|
|
342
190
|
{
|
|
343
191
|
className: (0, import_css3.css)({
|
|
@@ -353,21 +201,21 @@ function Label(props) {
|
|
|
353
201
|
}
|
|
354
202
|
|
|
355
203
|
// src/hooks/useModal.ts
|
|
356
|
-
var
|
|
204
|
+
var import_react5 = require("react");
|
|
357
205
|
function useModal() {
|
|
358
|
-
const modalRef = (0,
|
|
359
|
-
const [isOpen, setIsOpen] = (0,
|
|
360
|
-
const show = (0,
|
|
206
|
+
const modalRef = (0, import_react5.useRef)(null);
|
|
207
|
+
const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
|
|
208
|
+
const show = (0, import_react5.useCallback)(() => {
|
|
361
209
|
var _a;
|
|
362
210
|
(_a = modalRef.current) == null ? void 0 : _a.showModal();
|
|
363
211
|
setIsOpen(true);
|
|
364
212
|
}, []);
|
|
365
|
-
const close = (0,
|
|
213
|
+
const close = (0, import_react5.useCallback)(() => {
|
|
366
214
|
var _a;
|
|
367
215
|
(_a = modalRef.current) == null ? void 0 : _a.close();
|
|
368
216
|
setIsOpen(false);
|
|
369
217
|
}, []);
|
|
370
|
-
return (0,
|
|
218
|
+
return (0, import_react5.useMemo)(() => {
|
|
371
219
|
return {
|
|
372
220
|
modalRef,
|
|
373
221
|
show,
|
|
@@ -380,10 +228,10 @@ function useModal() {
|
|
|
380
228
|
// src/components/Modal.tsx
|
|
381
229
|
var import_css4 = require("@cerberus/styled-system/css");
|
|
382
230
|
var import_recipes4 = require("@cerberus/styled-system/recipes");
|
|
383
|
-
var
|
|
384
|
-
var
|
|
231
|
+
var import_react6 = require("react");
|
|
232
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
385
233
|
function ModalEl(props, ref) {
|
|
386
|
-
return /* @__PURE__ */ (0,
|
|
234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
387
235
|
"dialog",
|
|
388
236
|
{
|
|
389
237
|
...props,
|
|
@@ -392,14 +240,14 @@ function ModalEl(props, ref) {
|
|
|
392
240
|
}
|
|
393
241
|
);
|
|
394
242
|
}
|
|
395
|
-
var Modal = (0,
|
|
243
|
+
var Modal = (0, import_react6.forwardRef)(ModalEl);
|
|
396
244
|
|
|
397
245
|
// src/components/ModalHeader.tsx
|
|
398
246
|
var import_css5 = require("@cerberus/styled-system/css");
|
|
399
247
|
var import_patterns2 = require("@cerberus/styled-system/patterns");
|
|
400
|
-
var
|
|
248
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
401
249
|
function ModalHeader(props) {
|
|
402
|
-
return /* @__PURE__ */ (0,
|
|
250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
403
251
|
"div",
|
|
404
252
|
{
|
|
405
253
|
...props,
|
|
@@ -418,24 +266,24 @@ function ModalHeader(props) {
|
|
|
418
266
|
// src/components/ModalHeading.tsx
|
|
419
267
|
var import_css6 = require("@cerberus/styled-system/css");
|
|
420
268
|
var import_recipes5 = require("@cerberus/styled-system/recipes");
|
|
421
|
-
var
|
|
269
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
422
270
|
function ModalHeading(props) {
|
|
423
|
-
return /* @__PURE__ */ (0,
|
|
271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { ...props, className: (0, import_css6.cx)(props.className, (0, import_recipes5.modal)().heading) });
|
|
424
272
|
}
|
|
425
273
|
|
|
426
274
|
// src/components/ModalDescription.tsx
|
|
427
275
|
var import_css7 = require("@cerberus/styled-system/css");
|
|
428
276
|
var import_recipes6 = require("@cerberus/styled-system/recipes");
|
|
429
|
-
var
|
|
277
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
430
278
|
function ModalDescription(props) {
|
|
431
|
-
return /* @__PURE__ */ (0,
|
|
279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...props, className: (0, import_css7.cx)(props.className, (0, import_recipes6.modal)().description) });
|
|
432
280
|
}
|
|
433
281
|
|
|
434
282
|
// src/components/Avatar.tsx
|
|
435
283
|
var import_css8 = require("@cerberus/styled-system/css");
|
|
436
284
|
var import_patterns3 = require("@cerberus/styled-system/patterns");
|
|
437
285
|
var import_recipes7 = require("@cerberus/styled-system/recipes");
|
|
438
|
-
var
|
|
286
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
439
287
|
function Avatar(props) {
|
|
440
288
|
const {
|
|
441
289
|
ariaLabel,
|
|
@@ -448,9 +296,10 @@ function Avatar(props) {
|
|
|
448
296
|
icon,
|
|
449
297
|
...nativeProps
|
|
450
298
|
} = props;
|
|
451
|
-
const {
|
|
299
|
+
const { icons } = useCerberusContext();
|
|
300
|
+
const { avatar: AvatarIcon } = icons;
|
|
452
301
|
const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
|
|
453
|
-
return /* @__PURE__ */ (0,
|
|
302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
454
303
|
"div",
|
|
455
304
|
{
|
|
456
305
|
...nativeProps,
|
|
@@ -459,19 +308,19 @@ function Avatar(props) {
|
|
|
459
308
|
(0, import_recipes7.avatar)({ gradient, size }),
|
|
460
309
|
(0, import_patterns3.circle)()
|
|
461
310
|
),
|
|
462
|
-
children: /* @__PURE__ */ (0,
|
|
311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
463
312
|
Show,
|
|
464
313
|
{
|
|
465
314
|
when: Boolean(src) || Boolean(as),
|
|
466
|
-
fallback: /* @__PURE__ */ (0,
|
|
315
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
467
316
|
Show,
|
|
468
317
|
{
|
|
469
318
|
when: Boolean(initials),
|
|
470
|
-
fallback: /* @__PURE__ */ (0,
|
|
319
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
471
320
|
Show,
|
|
472
321
|
{
|
|
473
322
|
when: Boolean(icon),
|
|
474
|
-
fallback: /* @__PURE__ */ (0,
|
|
323
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
475
324
|
AvatarIcon,
|
|
476
325
|
{
|
|
477
326
|
size: iconSizeMap[size]
|
|
@@ -483,11 +332,11 @@ function Avatar(props) {
|
|
|
483
332
|
children: initials
|
|
484
333
|
}
|
|
485
334
|
),
|
|
486
|
-
children: /* @__PURE__ */ (0,
|
|
335
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
487
336
|
Show,
|
|
488
337
|
{
|
|
489
338
|
when: Boolean(as),
|
|
490
|
-
fallback: /* @__PURE__ */ (0,
|
|
339
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
491
340
|
"img",
|
|
492
341
|
{
|
|
493
342
|
alt: props.ariaLabel,
|
|
@@ -523,30 +372,31 @@ var iconSizeMap = {
|
|
|
523
372
|
};
|
|
524
373
|
|
|
525
374
|
// src/context/prompt-modal.tsx
|
|
526
|
-
var
|
|
527
|
-
var PromptModalContext = (0,
|
|
375
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
376
|
+
var PromptModalContext = (0, import_react7.createContext)(null);
|
|
528
377
|
function PromptModal(props) {
|
|
529
378
|
const { modalRef, show, close } = useModal();
|
|
530
|
-
const resolveRef = (0,
|
|
531
|
-
const [content, setContent] = (0,
|
|
532
|
-
const [inputValue, setInputValue] = (0,
|
|
379
|
+
const resolveRef = (0, import_react7.useRef)(null);
|
|
380
|
+
const [content, setContent] = (0, import_react7.useState)(null);
|
|
381
|
+
const [inputValue, setInputValue] = (0, import_react7.useState)("");
|
|
533
382
|
const focusTrap = trapFocus(modalRef);
|
|
534
|
-
const
|
|
535
|
-
const
|
|
383
|
+
const { icons } = useCerberusContext();
|
|
384
|
+
const { promptModal: PromptIcon } = icons;
|
|
385
|
+
const isValid = (0, import_react7.useMemo)(
|
|
536
386
|
() => inputValue === (content == null ? void 0 : content.key),
|
|
537
387
|
[inputValue, content]
|
|
538
388
|
);
|
|
539
|
-
const palette = (0,
|
|
389
|
+
const palette = (0, import_react7.useMemo)(
|
|
540
390
|
() => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
|
|
541
391
|
[content]
|
|
542
392
|
);
|
|
543
|
-
const handleChange = (0,
|
|
393
|
+
const handleChange = (0, import_react7.useCallback)(
|
|
544
394
|
(e) => {
|
|
545
395
|
setInputValue(e.currentTarget.value);
|
|
546
396
|
},
|
|
547
397
|
[content]
|
|
548
398
|
);
|
|
549
|
-
const handleChoice = (0,
|
|
399
|
+
const handleChoice = (0, import_react7.useCallback)(
|
|
550
400
|
(e) => {
|
|
551
401
|
var _a;
|
|
552
402
|
const target = e.currentTarget;
|
|
@@ -557,7 +407,7 @@ function PromptModal(props) {
|
|
|
557
407
|
},
|
|
558
408
|
[inputValue, close]
|
|
559
409
|
);
|
|
560
|
-
const handleShow = (0,
|
|
410
|
+
const handleShow = (0, import_react7.useCallback)(
|
|
561
411
|
(options) => {
|
|
562
412
|
return new Promise((resolve) => {
|
|
563
413
|
setContent({ ...options, kind: options.kind || "non-destructive" });
|
|
@@ -567,42 +417,42 @@ function PromptModal(props) {
|
|
|
567
417
|
},
|
|
568
418
|
[show]
|
|
569
419
|
);
|
|
570
|
-
const value = (0,
|
|
420
|
+
const value = (0, import_react7.useMemo)(
|
|
571
421
|
() => ({
|
|
572
422
|
show: handleShow
|
|
573
423
|
}),
|
|
574
424
|
[handleShow]
|
|
575
425
|
);
|
|
576
|
-
return /* @__PURE__ */ (0,
|
|
426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PromptModalContext.Provider, { value, children: [
|
|
577
427
|
props.children,
|
|
578
|
-
/* @__PURE__ */ (0,
|
|
579
|
-
/* @__PURE__ */ (0,
|
|
580
|
-
/* @__PURE__ */ (0,
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
|
|
429
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalHeader, { children: [
|
|
430
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
581
431
|
"div",
|
|
582
432
|
{
|
|
583
433
|
className: (0, import_patterns4.hstack)({
|
|
584
434
|
justify: "center",
|
|
585
435
|
w: "full"
|
|
586
436
|
}),
|
|
587
|
-
children: /* @__PURE__ */ (0,
|
|
437
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
588
438
|
Show,
|
|
589
439
|
{
|
|
590
440
|
when: palette === "danger",
|
|
591
|
-
fallback: /* @__PURE__ */ (0,
|
|
441
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
592
442
|
Avatar,
|
|
593
443
|
{
|
|
594
444
|
ariaLabel: "",
|
|
595
445
|
gradient: "charon-light",
|
|
596
|
-
icon: /* @__PURE__ */ (0,
|
|
446
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 }),
|
|
597
447
|
src: ""
|
|
598
448
|
}
|
|
599
449
|
),
|
|
600
|
-
children: /* @__PURE__ */ (0,
|
|
450
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
601
451
|
Avatar,
|
|
602
452
|
{
|
|
603
453
|
ariaLabel: "",
|
|
604
454
|
gradient: "hades-dark",
|
|
605
|
-
icon: /* @__PURE__ */ (0,
|
|
455
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 }),
|
|
606
456
|
src: ""
|
|
607
457
|
}
|
|
608
458
|
)
|
|
@@ -610,10 +460,10 @@ function PromptModal(props) {
|
|
|
610
460
|
)
|
|
611
461
|
}
|
|
612
462
|
),
|
|
613
|
-
/* @__PURE__ */ (0,
|
|
614
|
-
/* @__PURE__ */ (0,
|
|
463
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
|
|
615
465
|
] }),
|
|
616
|
-
/* @__PURE__ */ (0,
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
617
467
|
"div",
|
|
618
468
|
{
|
|
619
469
|
className: (0, import_patterns4.vstack)({
|
|
@@ -621,8 +471,8 @@ function PromptModal(props) {
|
|
|
621
471
|
mt: "4",
|
|
622
472
|
mb: "8"
|
|
623
473
|
}),
|
|
624
|
-
children: /* @__PURE__ */ (0,
|
|
625
|
-
/* @__PURE__ */ (0,
|
|
474
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { invalid: !isValid, children: [
|
|
475
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
626
476
|
Label,
|
|
627
477
|
{
|
|
628
478
|
className: (0, import_css9.css)({
|
|
@@ -633,7 +483,7 @@ function PromptModal(props) {
|
|
|
633
483
|
size: "md",
|
|
634
484
|
children: [
|
|
635
485
|
"Type",
|
|
636
|
-
/* @__PURE__ */ (0,
|
|
486
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
637
487
|
"strong",
|
|
638
488
|
{
|
|
639
489
|
className: (0, import_css9.css)({
|
|
@@ -646,7 +496,7 @@ function PromptModal(props) {
|
|
|
646
496
|
]
|
|
647
497
|
}
|
|
648
498
|
),
|
|
649
|
-
/* @__PURE__ */ (0,
|
|
499
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
650
500
|
Input,
|
|
651
501
|
{
|
|
652
502
|
id: "confirm",
|
|
@@ -658,7 +508,7 @@ function PromptModal(props) {
|
|
|
658
508
|
] })
|
|
659
509
|
}
|
|
660
510
|
),
|
|
661
|
-
/* @__PURE__ */ (0,
|
|
511
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
662
512
|
"div",
|
|
663
513
|
{
|
|
664
514
|
className: (0, import_patterns4.hstack)({
|
|
@@ -666,7 +516,7 @@ function PromptModal(props) {
|
|
|
666
516
|
gap: "4"
|
|
667
517
|
}),
|
|
668
518
|
children: [
|
|
669
|
-
/* @__PURE__ */ (0,
|
|
519
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
670
520
|
Button,
|
|
671
521
|
{
|
|
672
522
|
autoFocus: true,
|
|
@@ -681,7 +531,7 @@ function PromptModal(props) {
|
|
|
681
531
|
children: content == null ? void 0 : content.actionText
|
|
682
532
|
}
|
|
683
533
|
),
|
|
684
|
-
/* @__PURE__ */ (0,
|
|
534
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
685
535
|
Button,
|
|
686
536
|
{
|
|
687
537
|
className: (0, import_css9.css)({
|
|
@@ -701,7 +551,7 @@ function PromptModal(props) {
|
|
|
701
551
|
] });
|
|
702
552
|
}
|
|
703
553
|
function usePromptModal() {
|
|
704
|
-
const context = (0,
|
|
554
|
+
const context = (0, import_react7.useContext)(PromptModalContext);
|
|
705
555
|
if (context === null) {
|
|
706
556
|
throw new Error("usePromptModal must be used within a PromptModal Provider");
|
|
707
557
|
}
|