@vhyxui/react 0.1.0-alpha.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/dist/Alert-BJ1O0bnK.cjs +1 -0
- package/dist/Alert-am3ANPTH.js +99 -0
- package/dist/Badge-Fuc7l-1E.js +38 -0
- package/dist/Badge-RM7n86Rq.cjs +1 -0
- package/dist/Breadcrumb-Db7ASomJ.js +90 -0
- package/dist/Breadcrumb-StitgXXx.cjs +1 -0
- package/dist/Button-B32xz0b5.js +58 -0
- package/dist/Button-CfYG4zkG.cjs +1 -0
- package/dist/Card-D7ZNeWtE.js +75 -0
- package/dist/Card-d5xrWgQS.cjs +1 -0
- package/dist/Checkbox-DWl91ci_.js +92 -0
- package/dist/Checkbox-DvkT6QP9.cjs +1 -0
- package/dist/Dialog-CtYu14zl.js +245 -0
- package/dist/Dialog-gPT4noD8.cjs +1 -0
- package/dist/Drawer-BFJxsPG1.js +246 -0
- package/dist/Drawer-BygSIQQn.cjs +1 -0
- package/dist/Field-Bv07PL2M.js +120 -0
- package/dist/Field-D6FSsUGj.cjs +1 -0
- package/dist/Input-Dqt5q33I.js +151 -0
- package/dist/Input-OFmZxiHe.cjs +1 -0
- package/dist/Pagination-C1h7OTgM.js +128 -0
- package/dist/Pagination-CmmcBPNz.cjs +1 -0
- package/dist/Popover-BPFkS4xn.cjs +1 -0
- package/dist/Popover-MxUovsIt.js +194 -0
- package/dist/Progress-DWLr6Bq2.js +75 -0
- package/dist/Progress-FO-4WX0i.cjs +1 -0
- package/dist/RadioItem-BfkTHBxQ.cjs +1 -0
- package/dist/RadioItem-CzHSS_qK.js +141 -0
- package/dist/Select-C9yB2B8M.cjs +1 -0
- package/dist/Select-DjeJOdb7.js +327 -0
- package/dist/Separator-C5lPGzes.cjs +1 -0
- package/dist/Separator-DQT58t90.js +52 -0
- package/dist/Spinner-Cd5tcOLS.js +61 -0
- package/dist/Spinner-DSHhLV-r.cjs +1 -0
- package/dist/Switch-BU_Tcttb.cjs +1 -0
- package/dist/Switch-DOAZfSV0.js +64 -0
- package/dist/Tabs-BTfm4LbV.js +220 -0
- package/dist/Tabs-DuU02-UD.cjs +1 -0
- package/dist/Textarea-CLrctxHU.js +104 -0
- package/dist/Textarea-H6evM8L4.cjs +1 -0
- package/dist/Toast-0acAjZTB.js +167 -0
- package/dist/Toast-ndaxbpcV.cjs +1 -0
- package/dist/Tooltip-BAmErB_g.js +107 -0
- package/dist/Tooltip-CCd6VRvZ.cjs +1 -0
- package/dist/VhyxUIProvider-C9NxI-tU.cjs +1 -0
- package/dist/VhyxUIProvider-D1vNoiIk.js +34 -0
- package/dist/alert.cjs +1 -0
- package/dist/alert.d.ts +25 -0
- package/dist/alert.js +4 -0
- package/dist/badge.cjs +1 -0
- package/dist/badge.d.ts +31 -0
- package/dist/badge.js +4 -0
- package/dist/breadcrumb.cjs +1 -0
- package/dist/breadcrumb.d.ts +81 -0
- package/dist/breadcrumb.js +4 -0
- package/dist/button.cjs +1 -0
- package/dist/button.d.ts +36 -0
- package/dist/button.js +4 -0
- package/dist/card.cjs +1 -0
- package/dist/card.d.ts +72 -0
- package/dist/card.js +4 -0
- package/dist/checkbox.cjs +1 -0
- package/dist/checkbox.d.ts +33 -0
- package/dist/checkbox.js +4 -0
- package/dist/dialog.cjs +1 -0
- package/dist/dialog.d.ts +112 -0
- package/dist/dialog.js +4 -0
- package/dist/drawer.cjs +1 -0
- package/dist/drawer.d.ts +110 -0
- package/dist/drawer.js +4 -0
- package/dist/form.cjs +1 -0
- package/dist/form.d.ts +116 -0
- package/dist/form.js +6 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +1184 -0
- package/dist/index.js +83 -0
- package/dist/input.cjs +1 -0
- package/dist/input.d.ts +31 -0
- package/dist/input.js +4 -0
- package/dist/jsx-runtime-BRMkMA8J.cjs +22 -0
- package/dist/jsx-runtime-CL69jGNW.js +279 -0
- package/dist/pagination.cjs +1 -0
- package/dist/pagination.d.ts +32 -0
- package/dist/pagination.js +4 -0
- package/dist/popover.cjs +1 -0
- package/dist/popover.d.ts +72 -0
- package/dist/popover.js +4 -0
- package/dist/progress.cjs +1 -0
- package/dist/progress.d.ts +35 -0
- package/dist/progress.js +4 -0
- package/dist/radio.cjs +1 -0
- package/dist/radio.d.ts +47 -0
- package/dist/radio.js +5 -0
- package/dist/select.cjs +1 -0
- package/dist/select.d.ts +97 -0
- package/dist/select.js +4 -0
- package/dist/separator.cjs +1 -0
- package/dist/separator.d.ts +21 -0
- package/dist/separator.js +4 -0
- package/dist/spinner.cjs +1 -0
- package/dist/spinner.d.ts +24 -0
- package/dist/spinner.js +4 -0
- package/dist/style.css +1 -0
- package/dist/switch.cjs +1 -0
- package/dist/switch.d.ts +28 -0
- package/dist/switch.js +4 -0
- package/dist/tabs.cjs +1 -0
- package/dist/tabs.d.ts +59 -0
- package/dist/tabs.js +4 -0
- package/dist/test-utils.cjs +1 -0
- package/dist/test-utils.d.ts +5 -0
- package/dist/test-utils.js +12 -0
- package/dist/textarea.cjs +1 -0
- package/dist/textarea.d.ts +34 -0
- package/dist/textarea.js +4 -0
- package/dist/toast.cjs +1 -0
- package/dist/toast.d.ts +28 -0
- package/dist/toast.js +5 -0
- package/dist/tooltip.cjs +1 -0
- package/dist/tooltip.d.ts +32 -0
- package/dist/tooltip.js +4 -0
- package/dist/useId-BGRmH6iF.js +8 -0
- package/dist/useId-D2AEOm2G.cjs +1 -0
- package/package.json +170 -0
- package/style.css +1 -0
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { j as u } from "./jsx-runtime-CL69jGNW.js";
|
|
2
|
+
import D, { useState as $, useRef as _, useCallback as x, useEffect as m, useMemo as j, createContext as q, useContext as K } from "react";
|
|
3
|
+
import X from "react-dom";
|
|
4
|
+
import { dialogContract as E, Slot as T, VhyxUIError as G, VhyxUIErrorCode as J } from "@vhyxui/core";
|
|
5
|
+
import { withAgentContract as W } from "@vhyxseal/react";
|
|
6
|
+
import { u as Y } from "./useId-BGRmH6iF.js";
|
|
7
|
+
const Q = "_trigger_18zu7_3", Z = "_overlay_18zu7_12", k = "_content_18zu7_24", ee = "_header_18zu7_56", te = "_footer_18zu7_65", oe = "_title_18zu7_75", ne = "_description_18zu7_86", re = "_close_18zu7_96", g = {
|
|
8
|
+
trigger: Q,
|
|
9
|
+
overlay: Z,
|
|
10
|
+
content: k,
|
|
11
|
+
header: ee,
|
|
12
|
+
footer: te,
|
|
13
|
+
title: oe,
|
|
14
|
+
description: ne,
|
|
15
|
+
close: re
|
|
16
|
+
}, w = q(null);
|
|
17
|
+
function p(t) {
|
|
18
|
+
const r = K(w);
|
|
19
|
+
if (!r)
|
|
20
|
+
throw new G({
|
|
21
|
+
code: J.VHYXUI_MISSING_CONTEXT,
|
|
22
|
+
message: `${t} must be used within <Dialog>`,
|
|
23
|
+
suggestion: "Wrap your component tree with <Dialog>"
|
|
24
|
+
});
|
|
25
|
+
return r;
|
|
26
|
+
}
|
|
27
|
+
const I = D.forwardRef(
|
|
28
|
+
({
|
|
29
|
+
open: t,
|
|
30
|
+
defaultOpen: r = !1,
|
|
31
|
+
onOpenChange: o,
|
|
32
|
+
modal: n = !0,
|
|
33
|
+
size: e = "md",
|
|
34
|
+
contract: a,
|
|
35
|
+
children: i
|
|
36
|
+
}, f) => {
|
|
37
|
+
const s = Y("vhyx-dialog"), c = `${s}-title`, d = `${s}-description`, l = t !== void 0, [v, b] = $(r), h = l ? t : v, C = _(null), H = _(!1), N = x(
|
|
38
|
+
(y) => {
|
|
39
|
+
l || b(y), o == null || o(y);
|
|
40
|
+
},
|
|
41
|
+
[l, o]
|
|
42
|
+
);
|
|
43
|
+
m(() => {
|
|
44
|
+
if (h) return;
|
|
45
|
+
const y = C.current;
|
|
46
|
+
y && document.body.contains(y) && y.focus();
|
|
47
|
+
}, [h]);
|
|
48
|
+
const L = j(
|
|
49
|
+
() => ({ ...E, id: s, ...a }),
|
|
50
|
+
[s, a]
|
|
51
|
+
), M = j(
|
|
52
|
+
() => ({
|
|
53
|
+
open: h,
|
|
54
|
+
onOpenChange: N,
|
|
55
|
+
modal: n,
|
|
56
|
+
size: e,
|
|
57
|
+
titleId: c,
|
|
58
|
+
descriptionId: d,
|
|
59
|
+
triggerRef: C,
|
|
60
|
+
hasTitleRef: H
|
|
61
|
+
}),
|
|
62
|
+
[h, N, n, e, c, d]
|
|
63
|
+
);
|
|
64
|
+
return /* @__PURE__ */ u.jsx(w.Provider, { value: M, children: /* @__PURE__ */ u.jsx(
|
|
65
|
+
"div",
|
|
66
|
+
{
|
|
67
|
+
ref: f,
|
|
68
|
+
"data-state": h ? "open" : "closed",
|
|
69
|
+
"data-vhyx-contract": JSON.stringify(L),
|
|
70
|
+
children: i
|
|
71
|
+
}
|
|
72
|
+
) });
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
I.displayName = "VhyxDialog";
|
|
76
|
+
const V = D.forwardRef(
|
|
77
|
+
({ children: t, className: r, onClick: o, asChild: n = !1, ...e }, a) => {
|
|
78
|
+
const i = p("Dialog.Trigger"), f = x(
|
|
79
|
+
(l) => {
|
|
80
|
+
i.triggerRef.current = l, typeof a == "function" ? a(l) : a && (a.current = l);
|
|
81
|
+
},
|
|
82
|
+
[a, i.triggerRef]
|
|
83
|
+
), s = x(
|
|
84
|
+
(l) => {
|
|
85
|
+
o == null || o(l), i.onOpenChange(!0);
|
|
86
|
+
},
|
|
87
|
+
[o, i]
|
|
88
|
+
), c = [g.trigger, r].filter(Boolean).join(" "), d = {
|
|
89
|
+
"aria-haspopup": "dialog",
|
|
90
|
+
"aria-expanded": i.open,
|
|
91
|
+
onClick: s,
|
|
92
|
+
className: c,
|
|
93
|
+
...e
|
|
94
|
+
};
|
|
95
|
+
return n ? /* @__PURE__ */ u.jsx(T, { ref: f, ...d, children: t }) : /* @__PURE__ */ u.jsx("button", { ref: f, type: "button", ...d, children: t });
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
V.displayName = "VhyxDialogTrigger";
|
|
99
|
+
function O({ children: t }) {
|
|
100
|
+
return p("Dialog.Portal").open ? X.createPortal(t, document.body) : null;
|
|
101
|
+
}
|
|
102
|
+
O.displayName = "VhyxDialogPortal";
|
|
103
|
+
const S = D.forwardRef(
|
|
104
|
+
({ className: t, onClick: r, ...o }, n) => {
|
|
105
|
+
const e = p("Dialog.Overlay"), a = x(
|
|
106
|
+
(f) => {
|
|
107
|
+
r == null || r(f), e.onOpenChange(!1);
|
|
108
|
+
},
|
|
109
|
+
[r, e]
|
|
110
|
+
), i = [g.overlay, t].filter(Boolean).join(" ");
|
|
111
|
+
return /* @__PURE__ */ u.jsx(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
ref: n,
|
|
115
|
+
className: i,
|
|
116
|
+
"data-state": "open",
|
|
117
|
+
onClick: a,
|
|
118
|
+
"aria-hidden": "true",
|
|
119
|
+
...o
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
S.displayName = "VhyxDialogOverlay";
|
|
125
|
+
const se = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
126
|
+
function R(t) {
|
|
127
|
+
return Array.from(t.querySelectorAll(se));
|
|
128
|
+
}
|
|
129
|
+
const z = D.forwardRef(
|
|
130
|
+
({ children: t, className: r, ...o }, n) => {
|
|
131
|
+
const e = p("Dialog.Content"), a = _(null), i = x(
|
|
132
|
+
(s) => {
|
|
133
|
+
a.current = s, typeof n == "function" ? n(s) : n && (n.current = s);
|
|
134
|
+
},
|
|
135
|
+
[n]
|
|
136
|
+
);
|
|
137
|
+
m(() => {
|
|
138
|
+
if (!e.open) return;
|
|
139
|
+
const s = document.body.style.overflow;
|
|
140
|
+
return document.body.style.overflow = "hidden", () => {
|
|
141
|
+
document.body.style.overflow = s;
|
|
142
|
+
};
|
|
143
|
+
}, [e.open]), m(() => {
|
|
144
|
+
var c;
|
|
145
|
+
if (!e.open || !a.current) return;
|
|
146
|
+
const s = R(a.current);
|
|
147
|
+
s.length > 0 ? (c = s[0]) == null || c.focus() : a.current.focus();
|
|
148
|
+
}, [e.open]), m(() => {
|
|
149
|
+
e.open && process.env.NODE_ENV !== "production" && !e.hasTitleRef.current && console.warn(
|
|
150
|
+
"[VhyxUI] <Dialog.Content> requires <Dialog.Title> for accessibility. Screen reader users need a title to understand the dialog purpose."
|
|
151
|
+
);
|
|
152
|
+
}, [e.open, e.hasTitleRef]), m(() => {
|
|
153
|
+
if (!e.open || !a.current) return;
|
|
154
|
+
const s = a.current;
|
|
155
|
+
function c(d) {
|
|
156
|
+
if (d.key === "Escape") {
|
|
157
|
+
e.onOpenChange(!1);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
if (d.key !== "Tab") return;
|
|
161
|
+
const l = R(s);
|
|
162
|
+
if (l.length === 0) return;
|
|
163
|
+
const v = l[0], b = l[l.length - 1];
|
|
164
|
+
d.shiftKey ? (document.activeElement === v || !s.contains(document.activeElement)) && (d.preventDefault(), b.focus()) : (document.activeElement === b || !s.contains(document.activeElement)) && (d.preventDefault(), v.focus());
|
|
165
|
+
}
|
|
166
|
+
return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
|
|
167
|
+
}, [e.open, e.onOpenChange]);
|
|
168
|
+
const f = [g.content, r].filter(Boolean).join(" ");
|
|
169
|
+
return /* @__PURE__ */ u.jsx(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
ref: i,
|
|
173
|
+
role: "dialog",
|
|
174
|
+
"aria-modal": e.modal ? !0 : void 0,
|
|
175
|
+
"aria-labelledby": e.titleId,
|
|
176
|
+
"aria-describedby": e.descriptionId,
|
|
177
|
+
tabIndex: -1,
|
|
178
|
+
className: f,
|
|
179
|
+
"data-state": "open",
|
|
180
|
+
"data-size": e.size,
|
|
181
|
+
...o,
|
|
182
|
+
children: t
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
z.displayName = "VhyxDialogContent";
|
|
188
|
+
function B({ children: t, className: r, ...o }) {
|
|
189
|
+
const n = [g.header, r].filter(Boolean).join(" ");
|
|
190
|
+
return /* @__PURE__ */ u.jsx("div", { className: n, ...o, children: t });
|
|
191
|
+
}
|
|
192
|
+
B.displayName = "VhyxDialogHeader";
|
|
193
|
+
function P({ children: t, className: r, ...o }) {
|
|
194
|
+
const n = [g.footer, r].filter(Boolean).join(" ");
|
|
195
|
+
return /* @__PURE__ */ u.jsx("div", { className: n, ...o, children: t });
|
|
196
|
+
}
|
|
197
|
+
P.displayName = "VhyxDialogFooter";
|
|
198
|
+
function F({ children: t, className: r, ...o }) {
|
|
199
|
+
const n = p("Dialog.Title");
|
|
200
|
+
m(() => (n.hasTitleRef.current = !0, () => {
|
|
201
|
+
n.hasTitleRef.current = !1;
|
|
202
|
+
}), [n.hasTitleRef]);
|
|
203
|
+
const e = [g.title, r].filter(Boolean).join(" ");
|
|
204
|
+
return /* @__PURE__ */ u.jsx("h2", { id: n.titleId, className: e, ...o, children: t });
|
|
205
|
+
}
|
|
206
|
+
F.displayName = "VhyxDialogTitle";
|
|
207
|
+
function U({ children: t, className: r, ...o }) {
|
|
208
|
+
const n = p("Dialog.Description"), e = [g.description, r].filter(Boolean).join(" ");
|
|
209
|
+
return /* @__PURE__ */ u.jsx("p", { id: n.descriptionId, className: e, ...o, children: t });
|
|
210
|
+
}
|
|
211
|
+
U.displayName = "VhyxDialogDescription";
|
|
212
|
+
const A = D.forwardRef(
|
|
213
|
+
({ children: t, className: r, onClick: o, asChild: n = !1, ...e }, a) => {
|
|
214
|
+
const i = p("Dialog.Close"), f = x(
|
|
215
|
+
(d) => {
|
|
216
|
+
o == null || o(d), i.onOpenChange(!1);
|
|
217
|
+
},
|
|
218
|
+
[o, i]
|
|
219
|
+
), s = [g.close, r].filter(Boolean).join(" "), c = {
|
|
220
|
+
onClick: f,
|
|
221
|
+
className: s,
|
|
222
|
+
...e
|
|
223
|
+
};
|
|
224
|
+
return n ? /* @__PURE__ */ u.jsx(T, { ref: a, ...c, children: t }) : /* @__PURE__ */ u.jsx("button", { ref: a, type: "button", ...c, children: t ?? "Close" });
|
|
225
|
+
}
|
|
226
|
+
);
|
|
227
|
+
A.displayName = "VhyxDialogClose";
|
|
228
|
+
const ae = { ...E, id: "vhyxui-dialog" }, ie = Object.assign(
|
|
229
|
+
W(I, ae),
|
|
230
|
+
{
|
|
231
|
+
Trigger: V,
|
|
232
|
+
Portal: O,
|
|
233
|
+
Overlay: S,
|
|
234
|
+
Content: z,
|
|
235
|
+
Header: B,
|
|
236
|
+
Footer: P,
|
|
237
|
+
Title: F,
|
|
238
|
+
Description: U,
|
|
239
|
+
Close: A
|
|
240
|
+
}
|
|
241
|
+
);
|
|
242
|
+
ie.displayName = "VhyxDialog";
|
|
243
|
+
export {
|
|
244
|
+
ie as D
|
|
245
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const f=require("./jsx-runtime-BRMkMA8J.cjs"),s=require("react"),U=require("react-dom"),m=require("@vhyxui/core"),A=require("@vhyxseal/react"),H=require("./useId-D2AEOm2G.cjs"),L="_trigger_18zu7_3",M="_overlay_18zu7_12",$="_content_18zu7_24",K="_header_18zu7_56",X="_footer_18zu7_65",k="_title_18zu7_75",G="_description_18zu7_86",J="_close_18zu7_96",p={trigger:L,overlay:M,content:$,header:K,footer:X,title:k,description:G,close:J},j=s.createContext(null);function x(t){const r=s.useContext(j);if(!r)throw new m.VhyxUIError({code:m.VhyxUIErrorCode.VHYXUI_MISSING_CONTEXT,message:`${t} must be used within <Dialog>`,suggestion:"Wrap your component tree with <Dialog>"});return r}const C=s.forwardRef(({open:t,defaultOpen:r=!1,onOpenChange:o,modal:n=!0,size:e="md",contract:i,children:l},g)=>{const a=H.useId("vhyx-dialog"),u=`${a}-title`,d=`${a}-description`,c=t!==void 0,[D,R]=s.useState(r),h=c?t:D,v=s.useRef(null),q=s.useRef(!1),E=s.useCallback(y=>{c||R(y),o==null||o(y)},[c,o]);s.useEffect(()=>{if(h)return;const y=v.current;y&&document.body.contains(y)&&y.focus()},[h]);const P=s.useMemo(()=>({...m.dialogContract,id:a,...i}),[a,i]),F=s.useMemo(()=>({open:h,onOpenChange:E,modal:n,size:e,titleId:u,descriptionId:d,triggerRef:v,hasTitleRef:q}),[h,E,n,e,u,d]);return f.jsxRuntimeExports.jsx(j.Provider,{value:F,children:f.jsxRuntimeExports.jsx("div",{ref:g,"data-state":h?"open":"closed","data-vhyx-contract":JSON.stringify(P),children:l})})});C.displayName="VhyxDialog";const _=s.forwardRef(({children:t,className:r,onClick:o,asChild:n=!1,...e},i)=>{const l=x("Dialog.Trigger"),g=s.useCallback(c=>{l.triggerRef.current=c,typeof i=="function"?i(c):i&&(i.current=c)},[i,l.triggerRef]),a=s.useCallback(c=>{o==null||o(c),l.onOpenChange(!0)},[o,l]),u=[p.trigger,r].filter(Boolean).join(" "),d={"aria-haspopup":"dialog","aria-expanded":l.open,onClick:a,className:u,...e};return n?f.jsxRuntimeExports.jsx(m.Slot,{ref:g,...d,children:t}):f.jsxRuntimeExports.jsx("button",{ref:g,type:"button",...d,children:t})});_.displayName="VhyxDialogTrigger";function N({children:t}){return x("Dialog.Portal").open?U.createPortal(t,document.body):null}N.displayName="VhyxDialogPortal";const T=s.forwardRef(({className:t,onClick:r,...o},n)=>{const e=x("Dialog.Overlay"),i=s.useCallback(g=>{r==null||r(g),e.onOpenChange(!1)},[r,e]),l=[p.overlay,t].filter(Boolean).join(" ");return f.jsxRuntimeExports.jsx("div",{ref:n,className:l,"data-state":"open",onClick:i,"aria-hidden":"true",...o})});T.displayName="VhyxDialogOverlay";const W='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function b(t){return Array.from(t.querySelectorAll(W))}const w=s.forwardRef(({children:t,className:r,...o},n)=>{const e=x("Dialog.Content"),i=s.useRef(null),l=s.useCallback(a=>{i.current=a,typeof n=="function"?n(a):n&&(n.current=a)},[n]);s.useEffect(()=>{if(!e.open)return;const a=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=a}},[e.open]),s.useEffect(()=>{var u;if(!e.open||!i.current)return;const a=b(i.current);a.length>0?(u=a[0])==null||u.focus():i.current.focus()},[e.open]),s.useEffect(()=>{e.open&&process.env.NODE_ENV!=="production"&&!e.hasTitleRef.current&&console.warn("[VhyxUI] <Dialog.Content> requires <Dialog.Title> for accessibility. Screen reader users need a title to understand the dialog purpose.")},[e.open,e.hasTitleRef]),s.useEffect(()=>{if(!e.open||!i.current)return;const a=i.current;function u(d){if(d.key==="Escape"){e.onOpenChange(!1);return}if(d.key!=="Tab")return;const c=b(a);if(c.length===0)return;const D=c[0],R=c[c.length-1];d.shiftKey?(document.activeElement===D||!a.contains(document.activeElement))&&(d.preventDefault(),R.focus()):(document.activeElement===R||!a.contains(document.activeElement))&&(d.preventDefault(),D.focus())}return document.addEventListener("keydown",u),()=>document.removeEventListener("keydown",u)},[e.open,e.onOpenChange]);const g=[p.content,r].filter(Boolean).join(" ");return f.jsxRuntimeExports.jsx("div",{ref:l,role:"dialog","aria-modal":e.modal?!0:void 0,"aria-labelledby":e.titleId,"aria-describedby":e.descriptionId,tabIndex:-1,className:g,"data-state":"open","data-size":e.size,...o,children:t})});w.displayName="VhyxDialogContent";function I({children:t,className:r,...o}){const n=[p.header,r].filter(Boolean).join(" ");return f.jsxRuntimeExports.jsx("div",{className:n,...o,children:t})}I.displayName="VhyxDialogHeader";function V({children:t,className:r,...o}){const n=[p.footer,r].filter(Boolean).join(" ");return f.jsxRuntimeExports.jsx("div",{className:n,...o,children:t})}V.displayName="VhyxDialogFooter";function O({children:t,className:r,...o}){const n=x("Dialog.Title");s.useEffect(()=>(n.hasTitleRef.current=!0,()=>{n.hasTitleRef.current=!1}),[n.hasTitleRef]);const e=[p.title,r].filter(Boolean).join(" ");return f.jsxRuntimeExports.jsx("h2",{id:n.titleId,className:e,...o,children:t})}O.displayName="VhyxDialogTitle";function S({children:t,className:r,...o}){const n=x("Dialog.Description"),e=[p.description,r].filter(Boolean).join(" ");return f.jsxRuntimeExports.jsx("p",{id:n.descriptionId,className:e,...o,children:t})}S.displayName="VhyxDialogDescription";const z=s.forwardRef(({children:t,className:r,onClick:o,asChild:n=!1,...e},i)=>{const l=x("Dialog.Close"),g=s.useCallback(d=>{o==null||o(d),l.onOpenChange(!1)},[o,l]),a=[p.close,r].filter(Boolean).join(" "),u={onClick:g,className:a,...e};return n?f.jsxRuntimeExports.jsx(m.Slot,{ref:i,...u,children:t}):f.jsxRuntimeExports.jsx("button",{ref:i,type:"button",...u,children:t??"Close"})});z.displayName="VhyxDialogClose";const Y={...m.dialogContract,id:"vhyxui-dialog"},B=Object.assign(A.withAgentContract(C,Y),{Trigger:_,Portal:N,Overlay:T,Content:w,Header:I,Footer:V,Title:O,Description:S,Close:z});B.displayName="VhyxDialog";exports.Dialog=B;
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import { j as f } from "./jsx-runtime-CL69jGNW.js";
|
|
2
|
+
import D, { useState as M, useRef as v, useCallback as x, useEffect as h, useMemo as C, createContext as $, useContext as K } from "react";
|
|
3
|
+
import X from "react-dom";
|
|
4
|
+
import { drawerContract as j, Slot as R, VhyxUIError as z, VhyxUIErrorCode as G } from "@vhyxui/core";
|
|
5
|
+
import { withAgentContract as J } from "@vhyxseal/react";
|
|
6
|
+
import { u as W } from "./useId-BGRmH6iF.js";
|
|
7
|
+
const Y = "_trigger_y86qa_1", Q = "_overlay_y86qa_9", Z = "_content_y86qa_19", k = "_header_y86qa_103", ee = "_footer_y86qa_110", te = "_title_y86qa_118", re = "_description_y86qa_127", ne = "_close_y86qa_135", p = {
|
|
8
|
+
trigger: Y,
|
|
9
|
+
overlay: Q,
|
|
10
|
+
content: Z,
|
|
11
|
+
header: k,
|
|
12
|
+
footer: ee,
|
|
13
|
+
title: te,
|
|
14
|
+
description: re,
|
|
15
|
+
close: ne
|
|
16
|
+
}, E = $(null);
|
|
17
|
+
function w(r) {
|
|
18
|
+
const t = K(E);
|
|
19
|
+
if (!t)
|
|
20
|
+
throw new z({
|
|
21
|
+
code: G.VHYXUI_MISSING_CONTEXT,
|
|
22
|
+
message: `${r} must be used within <Drawer>`,
|
|
23
|
+
suggestion: "Wrap your component tree with <Drawer>"
|
|
24
|
+
});
|
|
25
|
+
return t;
|
|
26
|
+
}
|
|
27
|
+
const oe = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
28
|
+
function N(r) {
|
|
29
|
+
return Array.from(r.querySelectorAll(oe));
|
|
30
|
+
}
|
|
31
|
+
const T = D.forwardRef(
|
|
32
|
+
({
|
|
33
|
+
open: r,
|
|
34
|
+
onOpenChange: t,
|
|
35
|
+
side: n = "right",
|
|
36
|
+
size: o = "md",
|
|
37
|
+
contract: e,
|
|
38
|
+
children: a
|
|
39
|
+
}, i) => {
|
|
40
|
+
const l = W("vhyx-drawer"), s = `${l}-title`, d = `${l}-description`, c = r !== void 0, [u, g] = M(!1), y = c ? r : u, b = v(null), A = v(!1), _ = x(
|
|
41
|
+
(m) => {
|
|
42
|
+
c || g(m), t == null || t(m);
|
|
43
|
+
},
|
|
44
|
+
[c, t]
|
|
45
|
+
);
|
|
46
|
+
h(() => {
|
|
47
|
+
if (y) return;
|
|
48
|
+
const m = b.current;
|
|
49
|
+
m && document.body.contains(m) && m.focus();
|
|
50
|
+
}, [y]);
|
|
51
|
+
const H = C(
|
|
52
|
+
() => ({ ...j, id: l, ...e }),
|
|
53
|
+
[l, e]
|
|
54
|
+
), L = C(
|
|
55
|
+
() => ({
|
|
56
|
+
open: y,
|
|
57
|
+
onOpenChange: _,
|
|
58
|
+
side: n,
|
|
59
|
+
size: o,
|
|
60
|
+
titleId: s,
|
|
61
|
+
descriptionId: d,
|
|
62
|
+
triggerRef: b,
|
|
63
|
+
hasTitleRef: A
|
|
64
|
+
}),
|
|
65
|
+
[y, _, n, o, s, d]
|
|
66
|
+
);
|
|
67
|
+
return /* @__PURE__ */ f.jsx(E.Provider, { value: L, children: /* @__PURE__ */ f.jsx(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
ref: i,
|
|
71
|
+
"data-state": y ? "open" : "closed",
|
|
72
|
+
"data-side": n,
|
|
73
|
+
"data-vhyx-contract": JSON.stringify(H),
|
|
74
|
+
children: a
|
|
75
|
+
}
|
|
76
|
+
) });
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
T.displayName = "VhyxDrawer";
|
|
80
|
+
const I = D.forwardRef(
|
|
81
|
+
({ children: r, className: t, onClick: n, asChild: o = !1, ...e }, a) => {
|
|
82
|
+
const i = w("Drawer.Trigger"), l = x(
|
|
83
|
+
(u) => {
|
|
84
|
+
i.triggerRef.current = u, typeof a == "function" ? a(u) : a && (a.current = u);
|
|
85
|
+
},
|
|
86
|
+
[a, i.triggerRef]
|
|
87
|
+
), s = x(
|
|
88
|
+
(u) => {
|
|
89
|
+
n == null || n(u), i.onOpenChange(!0);
|
|
90
|
+
},
|
|
91
|
+
[n, i]
|
|
92
|
+
), d = [p.trigger, t].filter(Boolean).join(" "), c = {
|
|
93
|
+
"aria-haspopup": "dialog",
|
|
94
|
+
"aria-expanded": i.open,
|
|
95
|
+
onClick: s,
|
|
96
|
+
className: d,
|
|
97
|
+
...e
|
|
98
|
+
};
|
|
99
|
+
return o ? /* @__PURE__ */ f.jsx(R, { ref: l, ...c, children: r }) : /* @__PURE__ */ f.jsx("button", { ref: l, type: "button", ...c, children: r });
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
I.displayName = "VhyxDrawerTrigger";
|
|
103
|
+
function V({ children: r }) {
|
|
104
|
+
return w("Drawer.Portal").open ? X.createPortal(r, document.body) : null;
|
|
105
|
+
}
|
|
106
|
+
V.displayName = "VhyxDrawerPortal";
|
|
107
|
+
const O = D.forwardRef(
|
|
108
|
+
({ className: r, onClick: t, ...n }, o) => {
|
|
109
|
+
const e = w("Drawer.Overlay"), a = x(
|
|
110
|
+
(l) => {
|
|
111
|
+
t == null || t(l), e.onOpenChange(!1);
|
|
112
|
+
},
|
|
113
|
+
[t, e]
|
|
114
|
+
), i = [p.overlay, r].filter(Boolean).join(" ");
|
|
115
|
+
return /* @__PURE__ */ f.jsx(
|
|
116
|
+
"div",
|
|
117
|
+
{
|
|
118
|
+
ref: o,
|
|
119
|
+
className: i,
|
|
120
|
+
"data-state": "open",
|
|
121
|
+
onClick: a,
|
|
122
|
+
"aria-hidden": "true",
|
|
123
|
+
...n
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
O.displayName = "VhyxDrawerOverlay";
|
|
129
|
+
const q = D.forwardRef(
|
|
130
|
+
({ children: r, className: t, ...n }, o) => {
|
|
131
|
+
const e = w("Drawer.Content"), a = v(null), i = x(
|
|
132
|
+
(s) => {
|
|
133
|
+
a.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
|
|
134
|
+
},
|
|
135
|
+
[o]
|
|
136
|
+
);
|
|
137
|
+
h(() => {
|
|
138
|
+
if (!e.open) return;
|
|
139
|
+
const s = document.body.style.overflow;
|
|
140
|
+
return document.body.style.overflow = "hidden", () => {
|
|
141
|
+
document.body.style.overflow = s;
|
|
142
|
+
};
|
|
143
|
+
}, [e.open]), h(() => {
|
|
144
|
+
var d;
|
|
145
|
+
if (!e.open || !a.current) return;
|
|
146
|
+
const s = N(a.current);
|
|
147
|
+
s.length > 0 ? (d = s[0]) == null || d.focus() : a.current.focus();
|
|
148
|
+
}, [e.open]), h(() => {
|
|
149
|
+
e.open && process.env.NODE_ENV !== "production" && !e.hasTitleRef.current && console.warn(
|
|
150
|
+
"[VhyxUI] <Drawer.Content> requires <Drawer.Title> for accessibility. Screen reader users need a title to understand the drawer purpose."
|
|
151
|
+
);
|
|
152
|
+
}, [e.open, e.hasTitleRef]), h(() => {
|
|
153
|
+
if (!e.open || !a.current) return;
|
|
154
|
+
const s = a.current;
|
|
155
|
+
function d(c) {
|
|
156
|
+
if (c.key === "Escape") {
|
|
157
|
+
e.onOpenChange(!1);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
if (c.key !== "Tab") return;
|
|
161
|
+
const u = N(s);
|
|
162
|
+
if (u.length === 0) return;
|
|
163
|
+
const g = u[0], y = u[u.length - 1];
|
|
164
|
+
c.shiftKey ? (document.activeElement === g || !s.contains(document.activeElement)) && (c.preventDefault(), y.focus()) : (document.activeElement === y || !s.contains(document.activeElement)) && (c.preventDefault(), g.focus());
|
|
165
|
+
}
|
|
166
|
+
return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
|
|
167
|
+
}, [e.open, e.onOpenChange]);
|
|
168
|
+
const l = [p.content, t].filter(Boolean).join(" ");
|
|
169
|
+
return /* @__PURE__ */ f.jsx(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
ref: i,
|
|
173
|
+
role: "dialog",
|
|
174
|
+
"aria-modal": "true",
|
|
175
|
+
"aria-labelledby": e.titleId,
|
|
176
|
+
"aria-describedby": e.descriptionId,
|
|
177
|
+
tabIndex: -1,
|
|
178
|
+
className: l,
|
|
179
|
+
"data-state": "open",
|
|
180
|
+
"data-side": e.side,
|
|
181
|
+
"data-size": e.size,
|
|
182
|
+
...n,
|
|
183
|
+
children: r
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
q.displayName = "VhyxDrawerContent";
|
|
189
|
+
function S({ children: r, className: t, ...n }) {
|
|
190
|
+
const o = [p.header, t].filter(Boolean).join(" ");
|
|
191
|
+
return /* @__PURE__ */ f.jsx("div", { className: o, ...n, children: r });
|
|
192
|
+
}
|
|
193
|
+
S.displayName = "VhyxDrawerHeader";
|
|
194
|
+
function B({ children: r, className: t, ...n }) {
|
|
195
|
+
const o = [p.footer, t].filter(Boolean).join(" ");
|
|
196
|
+
return /* @__PURE__ */ f.jsx("div", { className: o, ...n, children: r });
|
|
197
|
+
}
|
|
198
|
+
B.displayName = "VhyxDrawerFooter";
|
|
199
|
+
function P({ children: r, className: t, ...n }) {
|
|
200
|
+
const o = w("Drawer.Title");
|
|
201
|
+
h(() => (o.hasTitleRef.current = !0, () => {
|
|
202
|
+
o.hasTitleRef.current = !1;
|
|
203
|
+
}), [o.hasTitleRef]);
|
|
204
|
+
const e = [p.title, t].filter(Boolean).join(" ");
|
|
205
|
+
return /* @__PURE__ */ f.jsx("h2", { id: o.titleId, className: e, ...n, children: r });
|
|
206
|
+
}
|
|
207
|
+
P.displayName = "VhyxDrawerTitle";
|
|
208
|
+
function F({ children: r, className: t, ...n }) {
|
|
209
|
+
const o = w("Drawer.Description"), e = [p.description, t].filter(Boolean).join(" ");
|
|
210
|
+
return /* @__PURE__ */ f.jsx("p", { id: o.descriptionId, className: e, ...n, children: r });
|
|
211
|
+
}
|
|
212
|
+
F.displayName = "VhyxDrawerDescription";
|
|
213
|
+
const U = D.forwardRef(
|
|
214
|
+
({ children: r, className: t, onClick: n, asChild: o = !1, ...e }, a) => {
|
|
215
|
+
const i = w("Drawer.Close"), l = x(
|
|
216
|
+
(c) => {
|
|
217
|
+
n == null || n(c), i.onOpenChange(!1);
|
|
218
|
+
},
|
|
219
|
+
[n, i]
|
|
220
|
+
), s = [p.close, t].filter(Boolean).join(" "), d = {
|
|
221
|
+
onClick: l,
|
|
222
|
+
className: s,
|
|
223
|
+
...e
|
|
224
|
+
};
|
|
225
|
+
return o ? /* @__PURE__ */ f.jsx(R, { ref: a, ...d, children: r }) : /* @__PURE__ */ f.jsx("button", { ref: a, type: "button", ...d, children: r ?? "Close" });
|
|
226
|
+
}
|
|
227
|
+
);
|
|
228
|
+
U.displayName = "VhyxDrawerClose";
|
|
229
|
+
const ae = { ...j, id: "vhyxui-drawer" }, se = Object.assign(
|
|
230
|
+
J(T, ae),
|
|
231
|
+
{
|
|
232
|
+
Trigger: I,
|
|
233
|
+
Portal: V,
|
|
234
|
+
Overlay: O,
|
|
235
|
+
Content: q,
|
|
236
|
+
Header: S,
|
|
237
|
+
Footer: B,
|
|
238
|
+
Title: P,
|
|
239
|
+
Description: F,
|
|
240
|
+
Close: U
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
se.displayName = "VhyxDrawer";
|
|
244
|
+
export {
|
|
245
|
+
se as D
|
|
246
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const p=require("./jsx-runtime-BRMkMA8J.cjs"),o=require("react"),U=require("react-dom"),h=require("@vhyxui/core"),A=require("@vhyxseal/react"),H=require("./useId-D2AEOm2G.cjs"),L="_trigger_y86qa_1",M="_overlay_y86qa_9",$="_content_y86qa_19",K="_header_y86qa_103",X="_footer_y86qa_110",k="_title_y86qa_118",z="_description_y86qa_127",G="_close_y86qa_135",y={trigger:L,overlay:M,content:$,header:K,footer:X,title:k,description:z,close:G},E=o.createContext(null);function w(r){const t=o.useContext(E);if(!t)throw new h.VhyxUIError({code:h.VhyxUIErrorCode.VHYXUI_MISSING_CONTEXT,message:`${r} must be used within <Drawer>`,suggestion:"Wrap your component tree with <Drawer>"});return t}const J='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function v(r){return Array.from(r.querySelectorAll(J))}const b=o.forwardRef(({open:r,onOpenChange:t,side:n="right",size:s="md",contract:e,children:a},c)=>{const u=H.useId("vhyx-drawer"),i=`${u}-title`,d=`${u}-description`,l=r!==void 0,[f,D]=o.useState(!1),x=l?r:f,g=o.useRef(null),B=o.useRef(!1),R=o.useCallback(m=>{l||D(m),t==null||t(m)},[l,t]);o.useEffect(()=>{if(x)return;const m=g.current;m&&document.body.contains(m)&&m.focus()},[x]);const P=o.useMemo(()=>({...h.drawerContract,id:u,...e}),[u,e]),F=o.useMemo(()=>({open:x,onOpenChange:R,side:n,size:s,titleId:i,descriptionId:d,triggerRef:g,hasTitleRef:B}),[x,R,n,s,i,d]);return p.jsxRuntimeExports.jsx(E.Provider,{value:F,children:p.jsxRuntimeExports.jsx("div",{ref:c,"data-state":x?"open":"closed","data-side":n,"data-vhyx-contract":JSON.stringify(P),children:a})})});b.displayName="VhyxDrawer";const j=o.forwardRef(({children:r,className:t,onClick:n,asChild:s=!1,...e},a)=>{const c=w("Drawer.Trigger"),u=o.useCallback(f=>{c.triggerRef.current=f,typeof a=="function"?a(f):a&&(a.current=f)},[a,c.triggerRef]),i=o.useCallback(f=>{n==null||n(f),c.onOpenChange(!0)},[n,c]),d=[y.trigger,t].filter(Boolean).join(" "),l={"aria-haspopup":"dialog","aria-expanded":c.open,onClick:i,className:d,...e};return s?p.jsxRuntimeExports.jsx(h.Slot,{ref:u,...l,children:r}):p.jsxRuntimeExports.jsx("button",{ref:u,type:"button",...l,children:r})});j.displayName="VhyxDrawerTrigger";function C({children:r}){return w("Drawer.Portal").open?U.createPortal(r,document.body):null}C.displayName="VhyxDrawerPortal";const _=o.forwardRef(({className:r,onClick:t,...n},s)=>{const e=w("Drawer.Overlay"),a=o.useCallback(u=>{t==null||t(u),e.onOpenChange(!1)},[t,e]),c=[y.overlay,r].filter(Boolean).join(" ");return p.jsxRuntimeExports.jsx("div",{ref:s,className:c,"data-state":"open",onClick:a,"aria-hidden":"true",...n})});_.displayName="VhyxDrawerOverlay";const N=o.forwardRef(({children:r,className:t,...n},s)=>{const e=w("Drawer.Content"),a=o.useRef(null),c=o.useCallback(i=>{a.current=i,typeof s=="function"?s(i):s&&(s.current=i)},[s]);o.useEffect(()=>{if(!e.open)return;const i=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=i}},[e.open]),o.useEffect(()=>{var d;if(!e.open||!a.current)return;const i=v(a.current);i.length>0?(d=i[0])==null||d.focus():a.current.focus()},[e.open]),o.useEffect(()=>{e.open&&process.env.NODE_ENV!=="production"&&!e.hasTitleRef.current&&console.warn("[VhyxUI] <Drawer.Content> requires <Drawer.Title> for accessibility. Screen reader users need a title to understand the drawer purpose.")},[e.open,e.hasTitleRef]),o.useEffect(()=>{if(!e.open||!a.current)return;const i=a.current;function d(l){if(l.key==="Escape"){e.onOpenChange(!1);return}if(l.key!=="Tab")return;const f=v(i);if(f.length===0)return;const D=f[0],x=f[f.length-1];l.shiftKey?(document.activeElement===D||!i.contains(document.activeElement))&&(l.preventDefault(),x.focus()):(document.activeElement===x||!i.contains(document.activeElement))&&(l.preventDefault(),D.focus())}return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[e.open,e.onOpenChange]);const u=[y.content,t].filter(Boolean).join(" ");return p.jsxRuntimeExports.jsx("div",{ref:c,role:"dialog","aria-modal":"true","aria-labelledby":e.titleId,"aria-describedby":e.descriptionId,tabIndex:-1,className:u,"data-state":"open","data-side":e.side,"data-size":e.size,...n,children:r})});N.displayName="VhyxDrawerContent";function T({children:r,className:t,...n}){const s=[y.header,t].filter(Boolean).join(" ");return p.jsxRuntimeExports.jsx("div",{className:s,...n,children:r})}T.displayName="VhyxDrawerHeader";function I({children:r,className:t,...n}){const s=[y.footer,t].filter(Boolean).join(" ");return p.jsxRuntimeExports.jsx("div",{className:s,...n,children:r})}I.displayName="VhyxDrawerFooter";function q({children:r,className:t,...n}){const s=w("Drawer.Title");o.useEffect(()=>(s.hasTitleRef.current=!0,()=>{s.hasTitleRef.current=!1}),[s.hasTitleRef]);const e=[y.title,t].filter(Boolean).join(" ");return p.jsxRuntimeExports.jsx("h2",{id:s.titleId,className:e,...n,children:r})}q.displayName="VhyxDrawerTitle";function V({children:r,className:t,...n}){const s=w("Drawer.Description"),e=[y.description,t].filter(Boolean).join(" ");return p.jsxRuntimeExports.jsx("p",{id:s.descriptionId,className:e,...n,children:r})}V.displayName="VhyxDrawerDescription";const O=o.forwardRef(({children:r,className:t,onClick:n,asChild:s=!1,...e},a)=>{const c=w("Drawer.Close"),u=o.useCallback(l=>{n==null||n(l),c.onOpenChange(!1)},[n,c]),i=[y.close,t].filter(Boolean).join(" "),d={onClick:u,className:i,...e};return s?p.jsxRuntimeExports.jsx(h.Slot,{ref:a,...d,children:r}):p.jsxRuntimeExports.jsx("button",{ref:a,type:"button",...d,children:r??"Close"})});O.displayName="VhyxDrawerClose";const W={...h.drawerContract,id:"vhyxui-drawer"},S=Object.assign(A.withAgentContract(b,W),{Trigger:j,Portal:C,Overlay:_,Content:N,Header:T,Footer:I,Title:q,Description:V,Close:O});S.displayName="VhyxDrawer";exports.Drawer=S;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { j as r } from "./jsx-runtime-CL69jGNW.js";
|
|
2
|
+
import y, { useContext as V, useCallback as w, useMemo as z, createContext as R } from "react";
|
|
3
|
+
import { u as M } from "./useId-BGRmH6iF.js";
|
|
4
|
+
import { formContract as P } from "@vhyxui/core";
|
|
5
|
+
import { withAgentContract as $ } from "@vhyxseal/react";
|
|
6
|
+
const k = "_form_14a4e_3", A = "_field_14a4e_24", D = "_label_14a4e_40", H = "_control_14a4e_46", L = "_hint_14a4e_51", G = "_error_14a4e_52", J = "_required_14a4e_76", K = "_optional_14a4e_81", a = {
|
|
7
|
+
form: k,
|
|
8
|
+
field: A,
|
|
9
|
+
"field--horizontal": "_field--horizontal_14a4e_30",
|
|
10
|
+
label: D,
|
|
11
|
+
control: H,
|
|
12
|
+
hint: L,
|
|
13
|
+
error: G,
|
|
14
|
+
required: J,
|
|
15
|
+
optional: K
|
|
16
|
+
}, C = R(null);
|
|
17
|
+
function O() {
|
|
18
|
+
return V(C);
|
|
19
|
+
}
|
|
20
|
+
const E = y.forwardRef(
|
|
21
|
+
({
|
|
22
|
+
form: e,
|
|
23
|
+
layout: n = "vertical",
|
|
24
|
+
size: l = "md",
|
|
25
|
+
disabled: f = !1,
|
|
26
|
+
onSubmit: i,
|
|
27
|
+
className: v,
|
|
28
|
+
children: x,
|
|
29
|
+
...d
|
|
30
|
+
}, j) => {
|
|
31
|
+
const h = e == null ? void 0 : e.formState, s = e == null ? void 0 : e.register, c = e ? (t) => e.getFieldState(t) : void 0, _ = w(
|
|
32
|
+
(t) => {
|
|
33
|
+
t.preventDefault(), e && i ? e.handleSubmit((u) => {
|
|
34
|
+
i(u);
|
|
35
|
+
})(t) : i && i({});
|
|
36
|
+
},
|
|
37
|
+
[e, i]
|
|
38
|
+
), o = z(
|
|
39
|
+
() => {
|
|
40
|
+
const t = { disabled: f, size: l, layout: n };
|
|
41
|
+
return h !== void 0 && (t.formState = h), s !== void 0 && (t.register = s), c !== void 0 && (t.getFieldState = c), t;
|
|
42
|
+
},
|
|
43
|
+
[h, s, c, f, l, n]
|
|
44
|
+
), m = [a.form, v].filter(Boolean).join(" ");
|
|
45
|
+
return /* @__PURE__ */ r.jsx(C.Provider, { value: o, children: /* @__PURE__ */ r.jsx(
|
|
46
|
+
"form",
|
|
47
|
+
{
|
|
48
|
+
ref: j,
|
|
49
|
+
className: m,
|
|
50
|
+
"data-layout": n,
|
|
51
|
+
"data-size": l,
|
|
52
|
+
onSubmit: _,
|
|
53
|
+
...d,
|
|
54
|
+
children: x
|
|
55
|
+
}
|
|
56
|
+
) });
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
E.displayName = "VhyxForm";
|
|
60
|
+
const Q = { ...P, id: "vhyxui-form" }, T = $(E, Q);
|
|
61
|
+
T.displayName = "VhyxForm";
|
|
62
|
+
function U({
|
|
63
|
+
name: e,
|
|
64
|
+
label: n,
|
|
65
|
+
hint: l,
|
|
66
|
+
error: f,
|
|
67
|
+
required: i = !1,
|
|
68
|
+
optional: v = !1,
|
|
69
|
+
layout: x,
|
|
70
|
+
children: d,
|
|
71
|
+
className: j,
|
|
72
|
+
...h
|
|
73
|
+
}) {
|
|
74
|
+
var b, S, B;
|
|
75
|
+
const s = M("field"), c = `${s}-hint`, _ = `${s}-error`, o = O(), m = (B = (S = (b = o == null ? void 0 : o.getFieldState) == null ? void 0 : b.call(o, e)) == null ? void 0 : S.error) == null ? void 0 : B.message, t = f ?? (typeof m == "string" ? m : void 0), u = !!t, F = !!l, p = [];
|
|
76
|
+
F && p.push(c), u && p.push(_);
|
|
77
|
+
const g = p.length > 0 ? p.join(" ") : void 0, N = x ?? (o == null ? void 0 : o.layout) ?? "vertical", q = y.isValidElement(d) ? y.cloneElement(
|
|
78
|
+
d,
|
|
79
|
+
{
|
|
80
|
+
id: s,
|
|
81
|
+
...g !== void 0 ? { "aria-describedby": g } : {},
|
|
82
|
+
...u ? { "aria-invalid": !0, "data-error": !0 } : {}
|
|
83
|
+
}
|
|
84
|
+
) : d, I = [
|
|
85
|
+
a.field,
|
|
86
|
+
N === "horizontal" ? a["field--horizontal"] : "",
|
|
87
|
+
j
|
|
88
|
+
].filter(Boolean).join(" ");
|
|
89
|
+
return /* @__PURE__ */ r.jsxs("div", { className: I, "data-layout": N, ...h, children: [
|
|
90
|
+
n !== void 0 && /* @__PURE__ */ r.jsxs("label", { htmlFor: s, className: a.label, children: [
|
|
91
|
+
n,
|
|
92
|
+
i && /* @__PURE__ */ r.jsxs("span", { className: a.required, "aria-hidden": "true", children: [
|
|
93
|
+
" ",
|
|
94
|
+
"*"
|
|
95
|
+
] }),
|
|
96
|
+
v && /* @__PURE__ */ r.jsxs("span", { className: a.optional, "aria-hidden": "true", children: [
|
|
97
|
+
" ",
|
|
98
|
+
"(optional)"
|
|
99
|
+
] })
|
|
100
|
+
] }),
|
|
101
|
+
/* @__PURE__ */ r.jsx("div", { className: a.control, children: q }),
|
|
102
|
+
F && /* @__PURE__ */ r.jsx("span", { id: c, className: a.hint, children: l }),
|
|
103
|
+
u && /* @__PURE__ */ r.jsx(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
id: _,
|
|
107
|
+
className: a.error,
|
|
108
|
+
role: "alert",
|
|
109
|
+
"aria-live": "assertive",
|
|
110
|
+
children: t
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
] });
|
|
114
|
+
}
|
|
115
|
+
U.displayName = "VhyxField";
|
|
116
|
+
export {
|
|
117
|
+
U as F,
|
|
118
|
+
T as a,
|
|
119
|
+
O as u
|
|
120
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const o=require("./jsx-runtime-BRMkMA8J.cjs"),n=require("react"),z=require("./useId-D2AEOm2G.cjs"),M=require("@vhyxui/core"),P=require("@vhyxseal/react"),$="_form_14a4e_3",k="_field_14a4e_24",A="_label_14a4e_40",D="_control_14a4e_46",H="_hint_14a4e_51",L="_error_14a4e_52",G="_required_14a4e_76",J="_optional_14a4e_81",r={form:$,field:k,"field--horizontal":"_field--horizontal_14a4e_30",label:A,control:D,hint:H,error:L,required:G,optional:J},b=n.createContext(null);function S(){return n.useContext(b)}const C=n.forwardRef(({form:e,layout:l="vertical",size:c="md",disabled:m=!1,onSubmit:a,className:f,children:j,...u},F)=>{const x=e==null?void 0:e.formState,i=e==null?void 0:e.register,d=e?t=>e.getFieldState(t):void 0,p=n.useCallback(t=>{t.preventDefault(),e&&a?e.handleSubmit(h=>{a(h)})(t):a&&a({})},[e,a]),s=n.useMemo(()=>{const t={disabled:m,size:c,layout:l};return x!==void 0&&(t.formState=x),i!==void 0&&(t.register=i),d!==void 0&&(t.getFieldState=d),t},[x,i,d,m,c,l]),_=[r.form,f].filter(Boolean).join(" ");return o.jsxRuntimeExports.jsx(b.Provider,{value:s,children:o.jsxRuntimeExports.jsx("form",{ref:F,className:_,"data-layout":l,"data-size":c,onSubmit:p,...u,children:j})})});C.displayName="VhyxForm";const K={...M.formContract,id:"vhyxui-form"},B=P.withAgentContract(C,K);B.displayName="VhyxForm";function I({name:e,label:l,hint:c,error:m,required:a=!1,optional:f=!1,layout:j,children:u,className:F,...x}){var R,N,q;const i=z.useId("field"),d=`${i}-hint`,p=`${i}-error`,s=S(),_=(q=(N=(R=s==null?void 0:s.getFieldState)==null?void 0:R.call(s,e))==null?void 0:N.error)==null?void 0:q.message,t=m??(typeof _=="string"?_:void 0),h=!!t,y=!!c,v=[];y&&v.push(d),h&&v.push(p);const E=v.length>0?v.join(" "):void 0,g=j??(s==null?void 0:s.layout)??"vertical",V=n.isValidElement(u)?n.cloneElement(u,{id:i,...E!==void 0?{"aria-describedby":E}:{},...h?{"aria-invalid":!0,"data-error":!0}:{}}):u,w=[r.field,g==="horizontal"?r["field--horizontal"]:"",F].filter(Boolean).join(" ");return o.jsxRuntimeExports.jsxs("div",{className:w,"data-layout":g,...x,children:[l!==void 0&&o.jsxRuntimeExports.jsxs("label",{htmlFor:i,className:r.label,children:[l,a&&o.jsxRuntimeExports.jsxs("span",{className:r.required,"aria-hidden":"true",children:[" ","*"]}),f&&o.jsxRuntimeExports.jsxs("span",{className:r.optional,"aria-hidden":"true",children:[" ","(optional)"]})]}),o.jsxRuntimeExports.jsx("div",{className:r.control,children:V}),y&&o.jsxRuntimeExports.jsx("span",{id:d,className:r.hint,children:c}),h&&o.jsxRuntimeExports.jsx("span",{id:p,className:r.error,role:"alert","aria-live":"assertive",children:t})]})}I.displayName="VhyxField";exports.Field=I;exports.Form=B;exports.useFormContext=S;
|