@vhyxui/react 0.3.0-alpha → 0.4.0-alpha
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/LICENSE +21 -0
- package/README.md +65 -0
- package/dist/Accordion-qtPur3CA.js +81 -0
- package/dist/Accordion-z3QDvyGf.cjs +1 -0
- package/dist/Alert-D4EFVKUy.js +99 -0
- package/dist/Alert-DWB9Gtpv.cjs +1 -0
- package/dist/Avatar-CDoAvY0m.js +51 -0
- package/dist/Avatar-afXJdutp.cjs +1 -0
- package/dist/Badge-DOhfKlXt.cjs +1 -0
- package/dist/Badge-Z6crWSLX.js +38 -0
- package/dist/Breadcrumb-CbPmH-b4.js +90 -0
- package/dist/Breadcrumb-DWRxQvbb.cjs +1 -0
- package/dist/Button-CnNtk6HV.cjs +1 -0
- package/dist/Button-DN5vy24q.js +60 -0
- package/dist/Card-CI7DyOJg.js +79 -0
- package/dist/Card-CZUQhd45.cjs +1 -0
- package/dist/Center-BmKeGEa1.cjs +1 -0
- package/dist/Center-DFq5m7mf.js +22 -0
- package/dist/Checkbox-D-5qaOEj.js +92 -0
- package/dist/Checkbox-DOd4SIx2.cjs +1 -0
- package/dist/Container-CcsVyA6r.cjs +1 -0
- package/dist/Container-DPKIgeDZ.js +21 -0
- package/dist/Dialog-B7Mhq9Qc.cjs +1 -0
- package/dist/Dialog-DhIanyWH.js +258 -0
- package/dist/Drawer-8maigAH9.cjs +1 -0
- package/dist/Drawer-BKizItfr.js +259 -0
- package/dist/Field-DJvjEmzE.cjs +1 -0
- package/dist/Field-Dx9gXxGL.js +120 -0
- package/dist/Grid-Bzzb0usH.cjs +1 -0
- package/dist/Grid-x_OHCzGV.js +25 -0
- package/dist/Heading-BPqfnM8i.js +14 -0
- package/dist/Heading-icKRWRno.cjs +1 -0
- package/dist/Input-B0dEXpG8.js +151 -0
- package/dist/Input-CdS0oZyf.cjs +1 -0
- package/dist/Kbd-C2vxklhy.cjs +1 -0
- package/dist/Kbd-DGURpjWN.js +22 -0
- package/dist/Pagination-CiE9Jzm0.cjs +1 -0
- package/dist/Pagination-UQ53MWnR.js +128 -0
- package/dist/{Popover-j9pNswBn.js → Popover-0QvSlzcQ.js} +53 -53
- package/dist/Popover-Chf2ikqa.cjs +1 -0
- package/dist/Progress-DdWZRQVS.js +75 -0
- package/dist/Progress-lItZES-D.cjs +1 -0
- package/dist/RadioItem-BbIH7LoA.js +141 -0
- package/dist/RadioItem-Cfxch4Gj.cjs +1 -0
- package/dist/Select-CgjfJSB8.js +350 -0
- package/dist/Select-D_oVKzzK.cjs +1 -0
- package/dist/SelectField-DBGtOECg.js +49 -0
- package/dist/SelectField-DdkU9fXq.cjs +1 -0
- package/dist/Separator-BwR51KpL.js +52 -0
- package/dist/Separator-CTncQd7E.cjs +1 -0
- package/dist/Skeleton-C1LTpmVC.js +20 -0
- package/dist/Skeleton-CpzYhkFp.cjs +1 -0
- package/dist/Spinner-BJnT9SOB.cjs +1 -0
- package/dist/{Spinner-BYi9eTfl.js → Spinner-Dz68qwGs.js} +25 -25
- package/dist/Stack--mNjuxZe.cjs +1 -0
- package/dist/Stack-CfwjUv0j.js +49 -0
- package/dist/Switch-I712svE0.cjs +1 -0
- package/dist/{Switch-DOAZfSV0.js → Switch-bIbcXIMH.js} +22 -22
- package/dist/Table-C2TUkSZv.cjs +1 -0
- package/dist/Table-C_jZjmPK.js +67 -0
- package/dist/Tabs-CbmdCTVE.js +220 -0
- package/dist/Tabs-Dfuu2ZVq.cjs +1 -0
- package/dist/Text-CgsfCbWf.cjs +1 -0
- package/dist/Text-Dl4z0gus.js +26 -0
- package/dist/Text.module-CEBydIO4.js +7 -0
- package/dist/Text.module-gGopk2Yk.cjs +1 -0
- package/dist/TextField-B492c5Ct.js +31 -0
- package/dist/TextField-Bp-b0-hG.cjs +1 -0
- package/dist/{Textarea-CLrctxHU.js → Textarea-cloHZ5Sz.js} +41 -41
- package/dist/Textarea-uXK6PrFb.cjs +1 -0
- package/dist/TextareaField-C5naVyA1.cjs +1 -0
- package/dist/TextareaField-CrRndsuY.js +31 -0
- package/dist/Toast-CESL8AKT.cjs +1 -0
- package/dist/Toast-DYqE0PjM.js +167 -0
- package/dist/Tooltip-B-PpSm6T.cjs +1 -0
- package/dist/{Tooltip-BAmErB_g.js → Tooltip-DCCaNX5W.js} +34 -34
- package/dist/VhyxUIProvider-3f3b9ukY.cjs +1 -0
- package/dist/VhyxUIProvider-B2UHeumk.js +58 -0
- package/dist/VisuallyHidden-BWdnOImJ.cjs +1 -0
- package/dist/VisuallyHidden-CPTxPvL_.js +18 -0
- package/dist/accordion.cjs +1 -0
- package/dist/accordion.d.ts +48 -0
- package/dist/accordion.js +5 -0
- package/dist/alert.cjs +1 -1
- package/dist/alert.js +3 -2
- package/dist/avatar.cjs +1 -0
- package/dist/avatar.d.ts +53 -0
- package/dist/avatar.js +7 -0
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +2 -1
- package/dist/breadcrumb.cjs +1 -1
- package/dist/breadcrumb.js +3 -2
- package/dist/button.cjs +1 -1
- package/dist/button.js +3 -2
- package/dist/card.cjs +1 -1
- package/dist/card.js +3 -2
- package/dist/center.cjs +1 -0
- package/dist/center.d.ts +20 -0
- package/dist/center.js +5 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +3 -2
- package/dist/container.cjs +1 -0
- package/dist/container.d.ts +23 -0
- package/dist/container.js +5 -0
- package/dist/cx-OWdTFKLx.js +15 -0
- package/dist/cx-dgWA95G6.cjs +1 -0
- package/dist/dialog.cjs +1 -1
- package/dist/dialog.d.ts +0 -1
- package/dist/dialog.js +3 -2
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.d.ts +0 -1
- package/dist/drawer.js +3 -2
- package/dist/env-Cqd4Y-Z7.cjs +1 -0
- package/dist/env-lFT_FRkA.js +19 -0
- package/dist/form.cjs +1 -1
- package/dist/form.d.ts +6 -6
- package/dist/form.js +5 -4
- package/dist/grid.cjs +1 -0
- package/dist/grid.d.ts +35 -0
- package/dist/grid.js +5 -0
- package/dist/heading.cjs +1 -0
- package/dist/heading.d.ts +25 -0
- package/dist/heading.js +5 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +440 -20
- package/dist/index.js +96 -62
- package/dist/input.cjs +1 -1
- package/dist/input.js +3 -2
- package/dist/kbd.cjs +1 -0
- package/dist/kbd.d.ts +16 -0
- package/dist/kbd.js +5 -0
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +2 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +3 -2
- package/dist/progress.cjs +1 -1
- package/dist/progress.js +2 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.js +4 -3
- package/dist/select.cjs +1 -1
- package/dist/select.d.ts +3 -3
- package/dist/select.js +3 -2
- package/dist/selectfield.cjs +1 -1
- package/dist/selectfield.d.ts +6 -6
- package/dist/selectfield.js +3 -2
- package/dist/separator.cjs +1 -1
- package/dist/separator.js +3 -2
- package/dist/skeleton.cjs +1 -0
- package/dist/skeleton.d.ts +22 -0
- package/dist/skeleton.js +5 -0
- package/dist/spinner.cjs +1 -1
- package/dist/spinner.js +3 -2
- package/dist/stack.cjs +1 -0
- package/dist/stack.d.ts +58 -0
- package/dist/stack.js +7 -0
- package/dist/style.css +2 -1
- package/dist/switch.cjs +1 -1
- package/dist/switch.js +3 -2
- package/dist/table.cjs +1 -0
- package/dist/table.d.ts +65 -0
- package/dist/table.js +5 -0
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +3 -2
- package/dist/test-utils.cjs +1 -1
- package/dist/test-utils.d.ts +14 -2
- package/dist/test-utils.js +5 -5
- package/dist/text.cjs +1 -0
- package/dist/text.d.ts +38 -0
- package/dist/text.js +5 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +2 -1
- package/dist/textareafield.cjs +1 -1
- package/dist/textareafield.d.ts +6 -6
- package/dist/textareafield.js +2 -1
- package/dist/textfield.cjs +1 -1
- package/dist/textfield.d.ts +6 -6
- package/dist/textfield.js +3 -2
- package/dist/toast.cjs +1 -1
- package/dist/toast.js +4 -3
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.js +3 -2
- package/dist/utils.cjs +1 -0
- package/dist/utils.d.ts +28 -0
- package/dist/utils.js +8 -0
- package/dist/visually-hidden.cjs +1 -0
- package/dist/visually-hidden.d.ts +16 -0
- package/dist/visually-hidden.js +5 -0
- package/package.json +166 -72
- package/dist/Alert-BJ1O0bnK.cjs +0 -1
- package/dist/Alert-am3ANPTH.js +0 -99
- package/dist/Badge-Bbxb4wyt.js +0 -38
- package/dist/Badge-SBO9tGzn.cjs +0 -1
- package/dist/Breadcrumb-Db7ASomJ.js +0 -90
- package/dist/Breadcrumb-StitgXXx.cjs +0 -1
- package/dist/Button-DDMc7-3S.js +0 -58
- package/dist/Button-akOSYEu9.cjs +0 -1
- package/dist/Card-DSCA-Igh.cjs +0 -1
- package/dist/Card-Dh9Pcmfa.js +0 -79
- package/dist/Checkbox-DWl91ci_.js +0 -92
- package/dist/Checkbox-DvkT6QP9.cjs +0 -1
- package/dist/Dialog-CtYu14zl.js +0 -245
- package/dist/Dialog-gPT4noD8.cjs +0 -1
- package/dist/Drawer-BFJxsPG1.js +0 -246
- package/dist/Drawer-BygSIQQn.cjs +0 -1
- package/dist/Field-Bv07PL2M.js +0 -120
- package/dist/Field-D6FSsUGj.cjs +0 -1
- package/dist/Input-BS_t1bl-.js +0 -151
- package/dist/Input-UQ2fQwE7.cjs +0 -1
- package/dist/Pagination-C1h7OTgM.js +0 -128
- package/dist/Pagination-CmmcBPNz.cjs +0 -1
- package/dist/Popover-BlCmIF9J.cjs +0 -1
- package/dist/Progress-DWLr6Bq2.js +0 -75
- package/dist/Progress-FO-4WX0i.cjs +0 -1
- package/dist/RadioItem-BfkTHBxQ.cjs +0 -1
- package/dist/RadioItem-CzHSS_qK.js +0 -141
- package/dist/Select-BkJNe4Lc.cjs +0 -1
- package/dist/Select-DfV10hZt.js +0 -350
- package/dist/SelectField-B6N0uub8.js +0 -49
- package/dist/SelectField-Dxl2Mgbv.cjs +0 -1
- package/dist/Separator-C5lPGzes.cjs +0 -1
- package/dist/Separator-DQT58t90.js +0 -52
- package/dist/Spinner-CeIDpqkx.cjs +0 -1
- package/dist/Switch-BU_Tcttb.cjs +0 -1
- package/dist/Tabs-BTfm4LbV.js +0 -220
- package/dist/Tabs-DuU02-UD.cjs +0 -1
- package/dist/TextField-C3r-6jr6.cjs +0 -1
- package/dist/TextField-DtXQQJJk.js +0 -31
- package/dist/Textarea-H6evM8L4.cjs +0 -1
- package/dist/TextareaField-CpqPinvx.js +0 -31
- package/dist/TextareaField-D234Lyi_.cjs +0 -1
- package/dist/Toast-0acAjZTB.js +0 -167
- package/dist/Toast-ndaxbpcV.cjs +0 -1
- package/dist/Tooltip-CCd6VRvZ.cjs +0 -1
- package/dist/VhyxUIProvider-C7ie8u2L.cjs +0 -1
- package/dist/VhyxUIProvider-DVFSW4q-.js +0 -31
- package/dist/jsx-runtime-BRMkMA8J.cjs +0 -22
- package/dist/jsx-runtime-CL69jGNW.js +0 -279
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsx as e, jsxs as R } from "react/jsx-runtime";
|
|
2
|
+
import V, { useState as W, useCallback as z } from "react";
|
|
3
|
+
import { checkboxContract as x, Slot as A } from "@vhyxui/core";
|
|
4
|
+
import { withAgentContract as J } from "@vhyxseal/react";
|
|
5
|
+
import { u as O } from "./useId-BGRmH6iF.js";
|
|
6
|
+
const P = "_checkbox_1jvht_1", q = "_indicator_1jvht_71", r = {
|
|
7
|
+
checkbox: P,
|
|
8
|
+
indicator: q,
|
|
9
|
+
"check-icon": "_check-icon_1jvht_80"
|
|
10
|
+
};
|
|
11
|
+
function D() {
|
|
12
|
+
return /* @__PURE__ */ e(
|
|
13
|
+
"svg",
|
|
14
|
+
{
|
|
15
|
+
"aria-hidden": "true",
|
|
16
|
+
viewBox: "0 0 12 12",
|
|
17
|
+
fill: "none",
|
|
18
|
+
stroke: "currentColor",
|
|
19
|
+
strokeWidth: 2,
|
|
20
|
+
strokeLinecap: "round",
|
|
21
|
+
strokeLinejoin: "round",
|
|
22
|
+
className: r["check-icon"],
|
|
23
|
+
children: /* @__PURE__ */ e("polyline", { points: "2,6 5,9 10,3" })
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
function E() {
|
|
28
|
+
return /* @__PURE__ */ e(
|
|
29
|
+
"svg",
|
|
30
|
+
{
|
|
31
|
+
"aria-hidden": "true",
|
|
32
|
+
viewBox: "0 0 12 12",
|
|
33
|
+
fill: "none",
|
|
34
|
+
stroke: "currentColor",
|
|
35
|
+
strokeWidth: 2,
|
|
36
|
+
strokeLinecap: "round",
|
|
37
|
+
className: r["check-icon"],
|
|
38
|
+
children: /* @__PURE__ */ e("line", { x1: "2", y1: "6", x2: "10", y2: "6" })
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
const k = V.forwardRef(
|
|
43
|
+
({
|
|
44
|
+
checked: s,
|
|
45
|
+
defaultChecked: u = !1,
|
|
46
|
+
onCheckedChange: c,
|
|
47
|
+
indeterminate: m = !1,
|
|
48
|
+
size: f = "md",
|
|
49
|
+
asChild: b = !1,
|
|
50
|
+
contract: p,
|
|
51
|
+
className: y,
|
|
52
|
+
id: v,
|
|
53
|
+
disabled: i,
|
|
54
|
+
onClick: o,
|
|
55
|
+
children: _,
|
|
56
|
+
...j
|
|
57
|
+
}, d) => {
|
|
58
|
+
const N = O("vhyx-checkbox"), h = v ?? N, a = s !== void 0, [C, S] = W(u), t = m ? "indeterminate" : a ? s : C, I = t === "indeterminate" ? "mixed" : t, w = z(
|
|
59
|
+
(M) => {
|
|
60
|
+
if (o == null || o(M), i) return;
|
|
61
|
+
let n;
|
|
62
|
+
t === "indeterminate" ? n = !0 : n = !t, a || S(n), c == null || c(n);
|
|
63
|
+
},
|
|
64
|
+
[o, i, t, a, c]
|
|
65
|
+
), B = {
|
|
66
|
+
...x,
|
|
67
|
+
id: h,
|
|
68
|
+
...p
|
|
69
|
+
}, L = [r.checkbox, y].filter(Boolean).join(" "), l = {
|
|
70
|
+
id: h,
|
|
71
|
+
role: "checkbox",
|
|
72
|
+
"aria-checked": I,
|
|
73
|
+
disabled: i,
|
|
74
|
+
onClick: w,
|
|
75
|
+
className: L,
|
|
76
|
+
"data-state": t === "indeterminate" ? "indeterminate" : t ? "checked" : "unchecked",
|
|
77
|
+
"data-size": f,
|
|
78
|
+
"data-vhyx-contract": JSON.stringify(B),
|
|
79
|
+
...j
|
|
80
|
+
};
|
|
81
|
+
return b ? /* @__PURE__ */ e(A, { ref: d, ...l, children: _ }) : /* @__PURE__ */ e("button", { ref: d, type: "button", ...l, children: /* @__PURE__ */ R("span", { className: r.indicator, children: [
|
|
82
|
+
t === "indeterminate" && /* @__PURE__ */ e(E, {}),
|
|
83
|
+
t === !0 && /* @__PURE__ */ e(D, {})
|
|
84
|
+
] }) });
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
k.displayName = "VhyxCheckbox";
|
|
88
|
+
const F = { ...x, id: "vhyxui-checkbox" }, G = J(k, F);
|
|
89
|
+
G.displayName = "VhyxCheckbox";
|
|
90
|
+
export {
|
|
91
|
+
G as C
|
|
92
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),a=require("react"),d=require("@vhyxui/core"),V=require("@vhyxseal/react"),W=require("./useId-D2AEOm2G.cjs"),z="_checkbox_1jvht_1",A="_indicator_1jvht_71",o={checkbox:z,indicator:A,"check-icon":"_check-icon_1jvht_80"};function J(){return t.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:o["check-icon"],children:t.jsx("polyline",{points:"2,6 5,9 10,3"})})}function O(){return t.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",className:o["check-icon"],children:t.jsx("line",{x1:"2",y1:"6",x2:"10",y2:"6"})})}const k=a.forwardRef(({checked:x,defaultChecked:f=!1,onCheckedChange:c,indeterminate:m=!1,size:j="md",asChild:y=!1,contract:v,className:p,id:_,disabled:i,onClick:n,children:C,...N},h)=>{const I=W.useId("vhyx-checkbox"),l=_??I,s=x!==void 0,[S,q]=a.useState(f),e=m?"indeterminate":s?x:S,w=e==="indeterminate"?"mixed":e,B=a.useCallback(M=>{if(n==null||n(M),i)return;let r;e==="indeterminate"?r=!0:r=!e,s||q(r),c==null||c(r)},[n,i,e,s,c]),L={...d.checkboxContract,id:l,...v},R=[o.checkbox,p].filter(Boolean).join(" "),u={id:l,role:"checkbox","aria-checked":w,disabled:i,onClick:B,className:R,"data-state":e==="indeterminate"?"indeterminate":e?"checked":"unchecked","data-size":j,"data-vhyx-contract":JSON.stringify(L),...N};return y?t.jsx(d.Slot,{ref:h,...u,children:C}):t.jsx("button",{ref:h,type:"button",...u,children:t.jsxs("span",{className:o.indicator,children:[e==="indeterminate"&&t.jsx(O,{}),e===!0&&t.jsx(J,{})]})})});k.displayName="VhyxCheckbox";const P={...d.checkboxContract,id:"vhyxui-checkbox"},b=V.withAgentContract(k,P);b.displayName="VhyxCheckbox";exports.Checkbox=b;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const c=require("react/jsx-runtime"),o=require("react"),u=require("./cx-dgWA95G6.cjs"),d="_container_186je_1",l={container:d},e=o.forwardRef(({as:n="div",size:t="lg",flush:a=!1,className:s,...r},i)=>c.jsx(n,{ref:i,className:u.cx(l.container,s),"data-size":t,"data-flush":a?"true":void 0,...r}));e.displayName="VhyxContainer";exports.Container=e;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import i from "react";
|
|
3
|
+
import { c } from "./cx-OWdTFKLx.js";
|
|
4
|
+
const m = "_container_186je_1", f = {
|
|
5
|
+
container: m
|
|
6
|
+
}, d = i.forwardRef(
|
|
7
|
+
({ as: a = "div", size: o = "lg", flush: t = !1, className: e, ...r }, n) => /* @__PURE__ */ s(
|
|
8
|
+
a,
|
|
9
|
+
{
|
|
10
|
+
ref: n,
|
|
11
|
+
className: c(f.container, e),
|
|
12
|
+
"data-size": o,
|
|
13
|
+
"data-flush": t ? "true" : void 0,
|
|
14
|
+
...r
|
|
15
|
+
}
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
d.displayName = "VhyxContainer";
|
|
19
|
+
export {
|
|
20
|
+
d as C
|
|
21
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const u=require("react/jsx-runtime"),t=require("react"),N=require("react-dom"),v=require("@vhyxui/core"),H=require("@vhyxseal/react"),L=require("./useId-D2AEOm2G.cjs"),M=require("./env-Cqd4Y-Z7.cjs"),$="_trigger_18zu7_3",K="_overlay_18zu7_12",X="_content_18zu7_24",k="_header_18zu7_56",G="_footer_18zu7_65",J="_title_18zu7_75",W="_description_18zu7_86",Y="_close_18zu7_96",p={trigger:$,overlay:K,content:X,header:k,footer:G,title:J,description:W,close:Y},E=t.createContext(null);function h(o){const s=t.useContext(E);if(!s)throw new v.VhyxUIError({code:v.VhyxUIErrorCode.VHYXUI_MISSING_CONTEXT,message:`${o} must be used within <Dialog>`,suggestion:"Wrap your component tree with <Dialog>"});return s}const T=t.forwardRef(({open:o,defaultOpen:s=!1,onOpenChange:n,modal:r=!0,size:e="md",contract:l,children:i},d)=>{const f=L.useId("vhyx-dialog"),g=`${f}-title`,a=`${f}-description`,c=o!==void 0,[x,m]=t.useState(s),y=c?o:x,b=t.useRef(null),F=t.useRef(!1),j=t.useCallback(D=>{c||m(D),n==null||n(D)},[c,n]);t.useEffect(()=>{if(y)return;const D=b.current;D&&document.body.contains(D)&&D.focus()},[y]);const U=t.useMemo(()=>({...v.dialogContract,id:f,...l}),[f,l]),A=t.useMemo(()=>({open:y,onOpenChange:j,modal:r,size:e,titleId:g,descriptionId:a,triggerRef:b,hasTitleRef:F}),[y,j,r,e,g,a]);return u.jsx(E.Provider,{value:A,children:u.jsx("div",{ref:d,"data-state":y?"open":"closed","data-vhyx-contract":JSON.stringify(U),children:i})})});T.displayName="VhyxDialog";const w=t.forwardRef(({children:o,className:s,onClick:n,asChild:r=!1,...e},l)=>{const i=h("Dialog.Trigger"),d=t.useCallback(c=>{i.triggerRef.current=c,typeof l=="function"?l(c):l&&(l.current=c)},[l,i.triggerRef]),f=t.useCallback(c=>{n==null||n(c),i.onOpenChange(!0)},[n,i]),g=[p.trigger,s].filter(Boolean).join(" "),a={"aria-haspopup":"dialog","aria-expanded":i.open,onClick:f,className:g,...e};return r?u.jsx(v.Slot,{ref:d,...a,children:o}):u.jsx("button",{ref:d,type:"button",...a,children:o})});w.displayName="VhyxDialogTrigger";const C=t.createContext(!1);function I({children:o}){return!h("Dialog.Portal").open||typeof document>"u"?null:N.createPortal(u.jsx(C.Provider,{value:!0,children:o}),document.body)}I.displayName="VhyxDialogPortal";const _=t.forwardRef(({className:o,onClick:s,...n},r)=>{const e=h("Dialog.Overlay"),l=t.useCallback(d=>{s==null||s(d),e.onOpenChange(!1)},[s,e]),i=[p.overlay,o].filter(Boolean).join(" ");return u.jsx("div",{ref:r,className:i,"data-state":"open",onClick:l,"aria-hidden":"true",...n})});_.displayName="VhyxDialogOverlay";const Q='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function R(o){return Array.from(o.querySelectorAll(Q))}const V=t.forwardRef(({children:o,className:s,...n},r)=>{const e=h("Dialog.Content"),l=t.useContext(C),i=t.useRef(null),d=t.useCallback(a=>{i.current=a,typeof r=="function"?r(a):r&&(r.current=a)},[r]);t.useEffect(()=>{if(!e.open)return;const a=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=a}},[e.open]),t.useEffect(()=>{var c;if(!e.open||!i.current)return;const a=R(i.current);a.length>0?(c=a[0])==null||c.focus():i.current.focus()},[e.open]),t.useEffect(()=>{e.open&&M.isDev()&&!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]),t.useEffect(()=>{if(!e.open||!i.current)return;const a=i.current;function c(x){if(x.key==="Escape"){e.onOpenChange(!1);return}if(x.key!=="Tab")return;const m=R(a);if(m.length===0)return;const y=m[0],b=m[m.length-1];x.shiftKey?(document.activeElement===y||!a.contains(document.activeElement))&&(x.preventDefault(),b.focus()):(document.activeElement===b||!a.contains(document.activeElement))&&(x.preventDefault(),y.focus())}return document.addEventListener("keydown",c),()=>document.removeEventListener("keydown",c)},[e.open,e.onOpenChange]);const f=[p.content,s].filter(Boolean).join(" ");if(!e.open)return null;const g=u.jsx("div",{ref:d,role:"dialog","aria-modal":e.modal?!0:void 0,"aria-labelledby":e.titleId,"aria-describedby":e.descriptionId,tabIndex:-1,className:f,"data-state":"open","data-size":e.size,...n,children:o});return l||typeof document>"u"?g:N.createPortal(u.jsxs(C.Provider,{value:!0,children:[u.jsx(_,{}),g]}),document.body)});V.displayName="VhyxDialogContent";function O({children:o,className:s,...n}){const r=[p.header,s].filter(Boolean).join(" ");return u.jsx("div",{className:r,...n,children:o})}O.displayName="VhyxDialogHeader";function P({children:o,className:s,...n}){const r=[p.footer,s].filter(Boolean).join(" ");return u.jsx("div",{className:r,...n,children:o})}P.displayName="VhyxDialogFooter";function S({children:o,className:s,...n}){const r=h("Dialog.Title");t.useEffect(()=>(r.hasTitleRef.current=!0,()=>{r.hasTitleRef.current=!1}),[r.hasTitleRef]);const e=[p.title,s].filter(Boolean).join(" ");return u.jsx("h2",{id:r.titleId,className:e,...n,children:o})}S.displayName="VhyxDialogTitle";function q({children:o,className:s,...n}){const r=h("Dialog.Description"),e=[p.description,s].filter(Boolean).join(" ");return u.jsx("p",{id:r.descriptionId,className:e,...n,children:o})}q.displayName="VhyxDialogDescription";const z=t.forwardRef(({children:o,className:s,onClick:n,asChild:r=!1,...e},l)=>{const i=h("Dialog.Close"),d=t.useCallback(a=>{n==null||n(a),i.onOpenChange(!1)},[n,i]),f=[p.close,s].filter(Boolean).join(" "),g={onClick:d,className:f,...e};return r?u.jsx(v.Slot,{ref:l,...g,children:o}):u.jsx("button",{ref:l,type:"button",...g,children:o??"Close"})});z.displayName="VhyxDialogClose";const Z={...v.dialogContract,id:"vhyxui-dialog"},B=Object.assign(H.withAgentContract(T,Z),{Trigger:w,Portal:I,Overlay:_,Content:V,Header:O,Footer:P,Title:S,Description:q,Close:z});B.displayName="VhyxDialog";exports.Dialog=B;
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
import { jsx as c, jsxs as K } from "react/jsx-runtime";
|
|
2
|
+
import m, { useState as X, useRef as _, useCallback as b, useEffect as v, useMemo as w, createContext as G, useContext as J } from "react";
|
|
3
|
+
import I from "react-dom";
|
|
4
|
+
import { dialogContract as V, Slot as O, VhyxUIError as W, VhyxUIErrorCode as Y } from "@vhyxui/core";
|
|
5
|
+
import { withAgentContract as Q } from "@vhyxseal/react";
|
|
6
|
+
import { u as Z } from "./useId-BGRmH6iF.js";
|
|
7
|
+
import { i as k } from "./env-lFT_FRkA.js";
|
|
8
|
+
const ee = "_trigger_18zu7_3", te = "_overlay_18zu7_12", oe = "_content_18zu7_24", ne = "_header_18zu7_56", re = "_footer_18zu7_65", ae = "_title_18zu7_75", ie = "_description_18zu7_86", se = "_close_18zu7_96", p = {
|
|
9
|
+
trigger: ee,
|
|
10
|
+
overlay: te,
|
|
11
|
+
content: oe,
|
|
12
|
+
header: ne,
|
|
13
|
+
footer: re,
|
|
14
|
+
title: ae,
|
|
15
|
+
description: ie,
|
|
16
|
+
close: se
|
|
17
|
+
}, P = G(null);
|
|
18
|
+
function h(t) {
|
|
19
|
+
const r = J(P);
|
|
20
|
+
if (!r)
|
|
21
|
+
throw new W({
|
|
22
|
+
code: Y.VHYXUI_MISSING_CONTEXT,
|
|
23
|
+
message: `${t} must be used within <Dialog>`,
|
|
24
|
+
suggestion: "Wrap your component tree with <Dialog>"
|
|
25
|
+
});
|
|
26
|
+
return r;
|
|
27
|
+
}
|
|
28
|
+
const j = m.forwardRef(
|
|
29
|
+
({
|
|
30
|
+
open: t,
|
|
31
|
+
defaultOpen: r = !1,
|
|
32
|
+
onOpenChange: o,
|
|
33
|
+
modal: n = !0,
|
|
34
|
+
size: e = "md",
|
|
35
|
+
contract: s,
|
|
36
|
+
children: i
|
|
37
|
+
}, d) => {
|
|
38
|
+
const u = Z("vhyx-dialog"), f = `${u}-title`, a = `${u}-description`, l = t !== void 0, [y, D] = X(r), g = l ? t : y, C = _(null), M = _(!1), T = b(
|
|
39
|
+
(x) => {
|
|
40
|
+
l || D(x), o == null || o(x);
|
|
41
|
+
},
|
|
42
|
+
[l, o]
|
|
43
|
+
);
|
|
44
|
+
v(() => {
|
|
45
|
+
if (g) return;
|
|
46
|
+
const x = C.current;
|
|
47
|
+
x && document.body.contains(x) && x.focus();
|
|
48
|
+
}, [g]);
|
|
49
|
+
const $ = w(
|
|
50
|
+
() => ({ ...V, id: u, ...s }),
|
|
51
|
+
[u, s]
|
|
52
|
+
), q = w(
|
|
53
|
+
() => ({
|
|
54
|
+
open: g,
|
|
55
|
+
onOpenChange: T,
|
|
56
|
+
modal: n,
|
|
57
|
+
size: e,
|
|
58
|
+
titleId: f,
|
|
59
|
+
descriptionId: a,
|
|
60
|
+
triggerRef: C,
|
|
61
|
+
hasTitleRef: M
|
|
62
|
+
}),
|
|
63
|
+
[g, T, n, e, f, a]
|
|
64
|
+
);
|
|
65
|
+
return /* @__PURE__ */ c(P.Provider, { value: q, children: /* @__PURE__ */ c(
|
|
66
|
+
"div",
|
|
67
|
+
{
|
|
68
|
+
ref: d,
|
|
69
|
+
"data-state": g ? "open" : "closed",
|
|
70
|
+
"data-vhyx-contract": JSON.stringify($),
|
|
71
|
+
children: i
|
|
72
|
+
}
|
|
73
|
+
) });
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
j.displayName = "VhyxDialog";
|
|
77
|
+
const S = m.forwardRef(
|
|
78
|
+
({ children: t, className: r, onClick: o, asChild: n = !1, ...e }, s) => {
|
|
79
|
+
const i = h("Dialog.Trigger"), d = b(
|
|
80
|
+
(l) => {
|
|
81
|
+
i.triggerRef.current = l, typeof s == "function" ? s(l) : s && (s.current = l);
|
|
82
|
+
},
|
|
83
|
+
[s, i.triggerRef]
|
|
84
|
+
), u = b(
|
|
85
|
+
(l) => {
|
|
86
|
+
o == null || o(l), i.onOpenChange(!0);
|
|
87
|
+
},
|
|
88
|
+
[o, i]
|
|
89
|
+
), f = [p.trigger, r].filter(Boolean).join(" "), a = {
|
|
90
|
+
"aria-haspopup": "dialog",
|
|
91
|
+
"aria-expanded": i.open,
|
|
92
|
+
onClick: u,
|
|
93
|
+
className: f,
|
|
94
|
+
...e
|
|
95
|
+
};
|
|
96
|
+
return n ? /* @__PURE__ */ c(O, { ref: d, ...a, children: t }) : /* @__PURE__ */ c("button", { ref: d, type: "button", ...a, children: t });
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
S.displayName = "VhyxDialogTrigger";
|
|
100
|
+
const N = m.createContext(!1);
|
|
101
|
+
function z({ children: t }) {
|
|
102
|
+
return !h("Dialog.Portal").open || typeof document > "u" ? null : I.createPortal(
|
|
103
|
+
/* @__PURE__ */ c(N.Provider, { value: !0, children: t }),
|
|
104
|
+
document.body
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
z.displayName = "VhyxDialogPortal";
|
|
108
|
+
const R = m.forwardRef(
|
|
109
|
+
({ className: t, onClick: r, ...o }, n) => {
|
|
110
|
+
const e = h("Dialog.Overlay"), s = b(
|
|
111
|
+
(d) => {
|
|
112
|
+
r == null || r(d), e.onOpenChange(!1);
|
|
113
|
+
},
|
|
114
|
+
[r, e]
|
|
115
|
+
), i = [p.overlay, t].filter(Boolean).join(" ");
|
|
116
|
+
return /* @__PURE__ */ c(
|
|
117
|
+
"div",
|
|
118
|
+
{
|
|
119
|
+
ref: n,
|
|
120
|
+
className: i,
|
|
121
|
+
"data-state": "open",
|
|
122
|
+
onClick: s,
|
|
123
|
+
"aria-hidden": "true",
|
|
124
|
+
...o
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
R.displayName = "VhyxDialogOverlay";
|
|
130
|
+
const le = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
131
|
+
function E(t) {
|
|
132
|
+
return Array.from(t.querySelectorAll(le));
|
|
133
|
+
}
|
|
134
|
+
const B = m.forwardRef(
|
|
135
|
+
({ children: t, className: r, ...o }, n) => {
|
|
136
|
+
const e = h("Dialog.Content"), s = m.useContext(N), i = _(null), d = b(
|
|
137
|
+
(a) => {
|
|
138
|
+
i.current = a, typeof n == "function" ? n(a) : n && (n.current = a);
|
|
139
|
+
},
|
|
140
|
+
[n]
|
|
141
|
+
);
|
|
142
|
+
v(() => {
|
|
143
|
+
if (!e.open) return;
|
|
144
|
+
const a = document.body.style.overflow;
|
|
145
|
+
return document.body.style.overflow = "hidden", () => {
|
|
146
|
+
document.body.style.overflow = a;
|
|
147
|
+
};
|
|
148
|
+
}, [e.open]), v(() => {
|
|
149
|
+
var l;
|
|
150
|
+
if (!e.open || !i.current) return;
|
|
151
|
+
const a = E(i.current);
|
|
152
|
+
a.length > 0 ? (l = a[0]) == null || l.focus() : i.current.focus();
|
|
153
|
+
}, [e.open]), v(() => {
|
|
154
|
+
e.open && k() && !e.hasTitleRef.current && console.warn(
|
|
155
|
+
"[VhyxUI] <Dialog.Content> requires <Dialog.Title> for accessibility. Screen reader users need a title to understand the dialog purpose."
|
|
156
|
+
);
|
|
157
|
+
}, [e.open, e.hasTitleRef]), v(() => {
|
|
158
|
+
if (!e.open || !i.current) return;
|
|
159
|
+
const a = i.current;
|
|
160
|
+
function l(y) {
|
|
161
|
+
if (y.key === "Escape") {
|
|
162
|
+
e.onOpenChange(!1);
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
if (y.key !== "Tab") return;
|
|
166
|
+
const D = E(a);
|
|
167
|
+
if (D.length === 0) return;
|
|
168
|
+
const g = D[0], C = D[D.length - 1];
|
|
169
|
+
y.shiftKey ? (document.activeElement === g || !a.contains(document.activeElement)) && (y.preventDefault(), C.focus()) : (document.activeElement === C || !a.contains(document.activeElement)) && (y.preventDefault(), g.focus());
|
|
170
|
+
}
|
|
171
|
+
return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
|
|
172
|
+
}, [e.open, e.onOpenChange]);
|
|
173
|
+
const u = [p.content, r].filter(Boolean).join(" ");
|
|
174
|
+
if (!e.open) return null;
|
|
175
|
+
const f = /* @__PURE__ */ c(
|
|
176
|
+
"div",
|
|
177
|
+
{
|
|
178
|
+
ref: d,
|
|
179
|
+
role: "dialog",
|
|
180
|
+
"aria-modal": e.modal ? !0 : void 0,
|
|
181
|
+
"aria-labelledby": e.titleId,
|
|
182
|
+
"aria-describedby": e.descriptionId,
|
|
183
|
+
tabIndex: -1,
|
|
184
|
+
className: u,
|
|
185
|
+
"data-state": "open",
|
|
186
|
+
"data-size": e.size,
|
|
187
|
+
...o,
|
|
188
|
+
children: t
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
return s || typeof document > "u" ? f : I.createPortal(
|
|
192
|
+
/* @__PURE__ */ K(N.Provider, { value: !0, children: [
|
|
193
|
+
/* @__PURE__ */ c(R, {}),
|
|
194
|
+
f
|
|
195
|
+
] }),
|
|
196
|
+
document.body
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
);
|
|
200
|
+
B.displayName = "VhyxDialogContent";
|
|
201
|
+
function F({ children: t, className: r, ...o }) {
|
|
202
|
+
const n = [p.header, r].filter(Boolean).join(" ");
|
|
203
|
+
return /* @__PURE__ */ c("div", { className: n, ...o, children: t });
|
|
204
|
+
}
|
|
205
|
+
F.displayName = "VhyxDialogHeader";
|
|
206
|
+
function U({ children: t, className: r, ...o }) {
|
|
207
|
+
const n = [p.footer, r].filter(Boolean).join(" ");
|
|
208
|
+
return /* @__PURE__ */ c("div", { className: n, ...o, children: t });
|
|
209
|
+
}
|
|
210
|
+
U.displayName = "VhyxDialogFooter";
|
|
211
|
+
function A({ children: t, className: r, ...o }) {
|
|
212
|
+
const n = h("Dialog.Title");
|
|
213
|
+
v(() => (n.hasTitleRef.current = !0, () => {
|
|
214
|
+
n.hasTitleRef.current = !1;
|
|
215
|
+
}), [n.hasTitleRef]);
|
|
216
|
+
const e = [p.title, r].filter(Boolean).join(" ");
|
|
217
|
+
return /* @__PURE__ */ c("h2", { id: n.titleId, className: e, ...o, children: t });
|
|
218
|
+
}
|
|
219
|
+
A.displayName = "VhyxDialogTitle";
|
|
220
|
+
function H({ children: t, className: r, ...o }) {
|
|
221
|
+
const n = h("Dialog.Description"), e = [p.description, r].filter(Boolean).join(" ");
|
|
222
|
+
return /* @__PURE__ */ c("p", { id: n.descriptionId, className: e, ...o, children: t });
|
|
223
|
+
}
|
|
224
|
+
H.displayName = "VhyxDialogDescription";
|
|
225
|
+
const L = m.forwardRef(
|
|
226
|
+
({ children: t, className: r, onClick: o, asChild: n = !1, ...e }, s) => {
|
|
227
|
+
const i = h("Dialog.Close"), d = b(
|
|
228
|
+
(a) => {
|
|
229
|
+
o == null || o(a), i.onOpenChange(!1);
|
|
230
|
+
},
|
|
231
|
+
[o, i]
|
|
232
|
+
), u = [p.close, r].filter(Boolean).join(" "), f = {
|
|
233
|
+
onClick: d,
|
|
234
|
+
className: u,
|
|
235
|
+
...e
|
|
236
|
+
};
|
|
237
|
+
return n ? /* @__PURE__ */ c(O, { ref: s, ...f, children: t }) : /* @__PURE__ */ c("button", { ref: s, type: "button", ...f, children: t ?? "Close" });
|
|
238
|
+
}
|
|
239
|
+
);
|
|
240
|
+
L.displayName = "VhyxDialogClose";
|
|
241
|
+
const ce = { ...V, id: "vhyxui-dialog" }, de = Object.assign(
|
|
242
|
+
Q(j, ce),
|
|
243
|
+
{
|
|
244
|
+
Trigger: S,
|
|
245
|
+
Portal: z,
|
|
246
|
+
Overlay: R,
|
|
247
|
+
Content: B,
|
|
248
|
+
Header: F,
|
|
249
|
+
Footer: U,
|
|
250
|
+
Title: A,
|
|
251
|
+
Description: H,
|
|
252
|
+
Close: L
|
|
253
|
+
}
|
|
254
|
+
);
|
|
255
|
+
de.displayName = "VhyxDialog";
|
|
256
|
+
export {
|
|
257
|
+
de as D
|
|
258
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const i=require("react/jsx-runtime"),r=require("react"),R=require("react-dom"),D=require("@vhyxui/core"),H=require("@vhyxseal/react"),L=require("./useId-D2AEOm2G.cjs"),M=require("./env-Cqd4Y-Z7.cjs"),$="_trigger_y86qa_1",K="_overlay_y86qa_9",X="_content_y86qa_19",k="_header_y86qa_103",z="_footer_y86qa_110",G="_title_y86qa_118",J="_description_y86qa_127",W="_close_y86qa_135",w={trigger:$,overlay:K,content:X,header:k,footer:z,title:G,description:J,close:W},N=r.createContext(null);function h(n){const t=r.useContext(N);if(!t)throw new D.VhyxUIError({code:D.VhyxUIErrorCode.VHYXUI_MISSING_CONTEXT,message:`${n} must be used within <Drawer>`,suggestion:"Wrap your component tree with <Drawer>"});return t}const Y='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function j(n){return Array.from(n.querySelectorAll(Y))}const E=r.forwardRef(({open:n,onOpenChange:t,side:o="right",size:a="md",contract:e,children:l},c)=>{const u=L.useId("vhyx-drawer"),p=`${u}-title`,f=`${u}-description`,s=n!==void 0,[d,x]=r.useState(!1),y=s?n:d,g=r.useRef(null),v=r.useRef(!1),_=r.useCallback(m=>{s||x(m),t==null||t(m)},[s,t]);r.useEffect(()=>{if(y)return;const m=g.current;m&&document.body.contains(m)&&m.focus()},[y]);const U=r.useMemo(()=>({...D.drawerContract,id:u,...e}),[u,e]),A=r.useMemo(()=>({open:y,onOpenChange:_,side:o,size:a,titleId:p,descriptionId:f,triggerRef:g,hasTitleRef:v}),[y,_,o,a,p,f]);return i.jsx(N.Provider,{value:A,children:i.jsx("div",{ref:c,"data-state":y?"open":"closed","data-side":o,"data-vhyx-contract":JSON.stringify(U),children:l})})});E.displayName="VhyxDrawer";const T=r.forwardRef(({children:n,className:t,onClick:o,asChild:a=!1,...e},l)=>{const c=h("Drawer.Trigger"),u=r.useCallback(d=>{c.triggerRef.current=d,typeof l=="function"?l(d):l&&(l.current=d)},[l,c.triggerRef]),p=r.useCallback(d=>{o==null||o(d),c.onOpenChange(!0)},[o,c]),f=[w.trigger,t].filter(Boolean).join(" "),s={"aria-haspopup":"dialog","aria-expanded":c.open,onClick:p,className:f,...e};return a?i.jsx(D.Slot,{ref:u,...s,children:n}):i.jsx("button",{ref:u,type:"button",...s,children:n})});T.displayName="VhyxDrawerTrigger";const b=r.createContext(!1);function q({children:n}){return!h("Drawer.Portal").open||typeof document>"u"?null:R.createPortal(i.jsx(b.Provider,{value:!0,children:n}),document.body)}q.displayName="VhyxDrawerPortal";const C=r.forwardRef(({className:n,onClick:t,...o},a)=>{const e=h("Drawer.Overlay"),l=r.useCallback(u=>{t==null||t(u),e.onOpenChange(!1)},[t,e]),c=[w.overlay,n].filter(Boolean).join(" ");return i.jsx("div",{ref:a,className:c,"data-state":"open",onClick:l,"aria-hidden":"true",...o})});C.displayName="VhyxDrawerOverlay";const I=r.forwardRef(({children:n,className:t,...o},a)=>{const e=h("Drawer.Content"),l=r.useContext(b),c=r.useRef(null),u=r.useCallback(s=>{c.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]);r.useEffect(()=>{if(!e.open)return;const s=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=s}},[e.open]),r.useEffect(()=>{var d;if(!e.open||!c.current)return;const s=j(c.current);s.length>0?(d=s[0])==null||d.focus():c.current.focus()},[e.open]),r.useEffect(()=>{e.open&&M.isDev()&&!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]),r.useEffect(()=>{if(!e.open||!c.current)return;const s=c.current;function d(x){if(x.key==="Escape"){e.onOpenChange(!1);return}if(x.key!=="Tab")return;const y=j(s);if(y.length===0)return;const g=y[0],v=y[y.length-1];x.shiftKey?(document.activeElement===g||!s.contains(document.activeElement))&&(x.preventDefault(),v.focus()):(document.activeElement===v||!s.contains(document.activeElement))&&(x.preventDefault(),g.focus())}return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[e.open,e.onOpenChange]);const p=[w.content,t].filter(Boolean).join(" ");if(!e.open)return null;const f=i.jsx("div",{ref:u,role:"dialog","aria-modal":"true","aria-labelledby":e.titleId,"aria-describedby":e.descriptionId,tabIndex:-1,className:p,"data-state":"open","data-side":e.side,"data-size":e.size,...o,children:n});return l||typeof document>"u"?f:R.createPortal(i.jsxs(b.Provider,{value:!0,children:[i.jsx(C,{}),f]}),document.body)});I.displayName="VhyxDrawerContent";function V({children:n,className:t,...o}){const a=[w.header,t].filter(Boolean).join(" ");return i.jsx("div",{className:a,...o,children:n})}V.displayName="VhyxDrawerHeader";function O({children:n,className:t,...o}){const a=[w.footer,t].filter(Boolean).join(" ");return i.jsx("div",{className:a,...o,children:n})}O.displayName="VhyxDrawerFooter";function P({children:n,className:t,...o}){const a=h("Drawer.Title");r.useEffect(()=>(a.hasTitleRef.current=!0,()=>{a.hasTitleRef.current=!1}),[a.hasTitleRef]);const e=[w.title,t].filter(Boolean).join(" ");return i.jsx("h2",{id:a.titleId,className:e,...o,children:n})}P.displayName="VhyxDrawerTitle";function S({children:n,className:t,...o}){const a=h("Drawer.Description"),e=[w.description,t].filter(Boolean).join(" ");return i.jsx("p",{id:a.descriptionId,className:e,...o,children:n})}S.displayName="VhyxDrawerDescription";const B=r.forwardRef(({children:n,className:t,onClick:o,asChild:a=!1,...e},l)=>{const c=h("Drawer.Close"),u=r.useCallback(s=>{o==null||o(s),c.onOpenChange(!1)},[o,c]),p=[w.close,t].filter(Boolean).join(" "),f={onClick:u,className:p,...e};return a?i.jsx(D.Slot,{ref:l,...f,children:n}):i.jsx("button",{ref:l,type:"button",...f,children:n??"Close"})});B.displayName="VhyxDrawerClose";const Q={...D.drawerContract,id:"vhyxui-drawer"},F=Object.assign(H.withAgentContract(E,Q),{Trigger:T,Portal:q,Overlay:C,Content:I,Header:V,Footer:O,Title:P,Description:S,Close:B});F.displayName="VhyxDrawer";exports.Drawer=F;
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import { jsx as c, jsxs as K } from "react/jsx-runtime";
|
|
2
|
+
import w, { useState as X, useRef as C, useCallback as x, useEffect as g, useMemo as T, createContext as z, useContext as G } from "react";
|
|
3
|
+
import I from "react-dom";
|
|
4
|
+
import { drawerContract as V, Slot as O, VhyxUIError as J, VhyxUIErrorCode as W } from "@vhyxui/core";
|
|
5
|
+
import { withAgentContract as Y } from "@vhyxseal/react";
|
|
6
|
+
import { u as Q } from "./useId-BGRmH6iF.js";
|
|
7
|
+
import { i as Z } from "./env-lFT_FRkA.js";
|
|
8
|
+
const k = "_trigger_y86qa_1", ee = "_overlay_y86qa_9", te = "_content_y86qa_19", re = "_header_y86qa_103", ne = "_footer_y86qa_110", oe = "_title_y86qa_118", ae = "_description_y86qa_127", se = "_close_y86qa_135", p = {
|
|
9
|
+
trigger: k,
|
|
10
|
+
overlay: ee,
|
|
11
|
+
content: te,
|
|
12
|
+
header: re,
|
|
13
|
+
footer: ne,
|
|
14
|
+
title: oe,
|
|
15
|
+
description: ae,
|
|
16
|
+
close: se
|
|
17
|
+
}, P = z(null);
|
|
18
|
+
function h(r) {
|
|
19
|
+
const t = G(P);
|
|
20
|
+
if (!t)
|
|
21
|
+
throw new J({
|
|
22
|
+
code: W.VHYXUI_MISSING_CONTEXT,
|
|
23
|
+
message: `${r} must be used within <Drawer>`,
|
|
24
|
+
suggestion: "Wrap your component tree with <Drawer>"
|
|
25
|
+
});
|
|
26
|
+
return t;
|
|
27
|
+
}
|
|
28
|
+
const ie = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
29
|
+
function E(r) {
|
|
30
|
+
return Array.from(r.querySelectorAll(ie));
|
|
31
|
+
}
|
|
32
|
+
const j = w.forwardRef(
|
|
33
|
+
({
|
|
34
|
+
open: r,
|
|
35
|
+
onOpenChange: t,
|
|
36
|
+
side: n = "right",
|
|
37
|
+
size: o = "md",
|
|
38
|
+
contract: e,
|
|
39
|
+
children: i
|
|
40
|
+
}, s) => {
|
|
41
|
+
const l = Q("vhyx-drawer"), y = `${l}-title`, u = `${l}-description`, a = r !== void 0, [d, m] = X(!1), f = a ? r : d, v = C(null), b = C(!1), R = x(
|
|
42
|
+
(D) => {
|
|
43
|
+
a || m(D), t == null || t(D);
|
|
44
|
+
},
|
|
45
|
+
[a, t]
|
|
46
|
+
);
|
|
47
|
+
g(() => {
|
|
48
|
+
if (f) return;
|
|
49
|
+
const D = v.current;
|
|
50
|
+
D && document.body.contains(D) && D.focus();
|
|
51
|
+
}, [f]);
|
|
52
|
+
const M = T(
|
|
53
|
+
() => ({ ...V, id: l, ...e }),
|
|
54
|
+
[l, e]
|
|
55
|
+
), $ = T(
|
|
56
|
+
() => ({
|
|
57
|
+
open: f,
|
|
58
|
+
onOpenChange: R,
|
|
59
|
+
side: n,
|
|
60
|
+
size: o,
|
|
61
|
+
titleId: y,
|
|
62
|
+
descriptionId: u,
|
|
63
|
+
triggerRef: v,
|
|
64
|
+
hasTitleRef: b
|
|
65
|
+
}),
|
|
66
|
+
[f, R, n, o, y, u]
|
|
67
|
+
);
|
|
68
|
+
return /* @__PURE__ */ c(P.Provider, { value: $, children: /* @__PURE__ */ c(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
ref: s,
|
|
72
|
+
"data-state": f ? "open" : "closed",
|
|
73
|
+
"data-side": n,
|
|
74
|
+
"data-vhyx-contract": JSON.stringify(M),
|
|
75
|
+
children: i
|
|
76
|
+
}
|
|
77
|
+
) });
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
j.displayName = "VhyxDrawer";
|
|
81
|
+
const q = w.forwardRef(
|
|
82
|
+
({ children: r, className: t, onClick: n, asChild: o = !1, ...e }, i) => {
|
|
83
|
+
const s = h("Drawer.Trigger"), l = x(
|
|
84
|
+
(d) => {
|
|
85
|
+
s.triggerRef.current = d, typeof i == "function" ? i(d) : i && (i.current = d);
|
|
86
|
+
},
|
|
87
|
+
[i, s.triggerRef]
|
|
88
|
+
), y = x(
|
|
89
|
+
(d) => {
|
|
90
|
+
n == null || n(d), s.onOpenChange(!0);
|
|
91
|
+
},
|
|
92
|
+
[n, s]
|
|
93
|
+
), u = [p.trigger, t].filter(Boolean).join(" "), a = {
|
|
94
|
+
"aria-haspopup": "dialog",
|
|
95
|
+
"aria-expanded": s.open,
|
|
96
|
+
onClick: y,
|
|
97
|
+
className: u,
|
|
98
|
+
...e
|
|
99
|
+
};
|
|
100
|
+
return o ? /* @__PURE__ */ c(O, { ref: l, ...a, children: r }) : /* @__PURE__ */ c("button", { ref: l, type: "button", ...a, children: r });
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
q.displayName = "VhyxDrawerTrigger";
|
|
104
|
+
const _ = w.createContext(!1);
|
|
105
|
+
function S({ children: r }) {
|
|
106
|
+
return !h("Drawer.Portal").open || typeof document > "u" ? null : I.createPortal(
|
|
107
|
+
/* @__PURE__ */ c(_.Provider, { value: !0, children: r }),
|
|
108
|
+
document.body
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
S.displayName = "VhyxDrawerPortal";
|
|
112
|
+
const N = w.forwardRef(
|
|
113
|
+
({ className: r, onClick: t, ...n }, o) => {
|
|
114
|
+
const e = h("Drawer.Overlay"), i = x(
|
|
115
|
+
(l) => {
|
|
116
|
+
t == null || t(l), e.onOpenChange(!1);
|
|
117
|
+
},
|
|
118
|
+
[t, e]
|
|
119
|
+
), s = [p.overlay, r].filter(Boolean).join(" ");
|
|
120
|
+
return /* @__PURE__ */ c(
|
|
121
|
+
"div",
|
|
122
|
+
{
|
|
123
|
+
ref: o,
|
|
124
|
+
className: s,
|
|
125
|
+
"data-state": "open",
|
|
126
|
+
onClick: i,
|
|
127
|
+
"aria-hidden": "true",
|
|
128
|
+
...n
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
N.displayName = "VhyxDrawerOverlay";
|
|
134
|
+
const B = w.forwardRef(
|
|
135
|
+
({ children: r, className: t, ...n }, o) => {
|
|
136
|
+
const e = h("Drawer.Content"), i = w.useContext(_), s = C(null), l = x(
|
|
137
|
+
(a) => {
|
|
138
|
+
s.current = a, typeof o == "function" ? o(a) : o && (o.current = a);
|
|
139
|
+
},
|
|
140
|
+
[o]
|
|
141
|
+
);
|
|
142
|
+
g(() => {
|
|
143
|
+
if (!e.open) return;
|
|
144
|
+
const a = document.body.style.overflow;
|
|
145
|
+
return document.body.style.overflow = "hidden", () => {
|
|
146
|
+
document.body.style.overflow = a;
|
|
147
|
+
};
|
|
148
|
+
}, [e.open]), g(() => {
|
|
149
|
+
var d;
|
|
150
|
+
if (!e.open || !s.current) return;
|
|
151
|
+
const a = E(s.current);
|
|
152
|
+
a.length > 0 ? (d = a[0]) == null || d.focus() : s.current.focus();
|
|
153
|
+
}, [e.open]), g(() => {
|
|
154
|
+
e.open && Z() && !e.hasTitleRef.current && console.warn(
|
|
155
|
+
"[VhyxUI] <Drawer.Content> requires <Drawer.Title> for accessibility. Screen reader users need a title to understand the drawer purpose."
|
|
156
|
+
);
|
|
157
|
+
}, [e.open, e.hasTitleRef]), g(() => {
|
|
158
|
+
if (!e.open || !s.current) return;
|
|
159
|
+
const a = s.current;
|
|
160
|
+
function d(m) {
|
|
161
|
+
if (m.key === "Escape") {
|
|
162
|
+
e.onOpenChange(!1);
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
if (m.key !== "Tab") return;
|
|
166
|
+
const f = E(a);
|
|
167
|
+
if (f.length === 0) return;
|
|
168
|
+
const v = f[0], b = f[f.length - 1];
|
|
169
|
+
m.shiftKey ? (document.activeElement === v || !a.contains(document.activeElement)) && (m.preventDefault(), b.focus()) : (document.activeElement === b || !a.contains(document.activeElement)) && (m.preventDefault(), v.focus());
|
|
170
|
+
}
|
|
171
|
+
return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
|
|
172
|
+
}, [e.open, e.onOpenChange]);
|
|
173
|
+
const y = [p.content, t].filter(Boolean).join(" ");
|
|
174
|
+
if (!e.open) return null;
|
|
175
|
+
const u = /* @__PURE__ */ c(
|
|
176
|
+
"div",
|
|
177
|
+
{
|
|
178
|
+
ref: l,
|
|
179
|
+
role: "dialog",
|
|
180
|
+
"aria-modal": "true",
|
|
181
|
+
"aria-labelledby": e.titleId,
|
|
182
|
+
"aria-describedby": e.descriptionId,
|
|
183
|
+
tabIndex: -1,
|
|
184
|
+
className: y,
|
|
185
|
+
"data-state": "open",
|
|
186
|
+
"data-side": e.side,
|
|
187
|
+
"data-size": e.size,
|
|
188
|
+
...n,
|
|
189
|
+
children: r
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
return i || typeof document > "u" ? u : I.createPortal(
|
|
193
|
+
/* @__PURE__ */ K(_.Provider, { value: !0, children: [
|
|
194
|
+
/* @__PURE__ */ c(N, {}),
|
|
195
|
+
u
|
|
196
|
+
] }),
|
|
197
|
+
document.body
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
);
|
|
201
|
+
B.displayName = "VhyxDrawerContent";
|
|
202
|
+
function F({ children: r, className: t, ...n }) {
|
|
203
|
+
const o = [p.header, t].filter(Boolean).join(" ");
|
|
204
|
+
return /* @__PURE__ */ c("div", { className: o, ...n, children: r });
|
|
205
|
+
}
|
|
206
|
+
F.displayName = "VhyxDrawerHeader";
|
|
207
|
+
function U({ children: r, className: t, ...n }) {
|
|
208
|
+
const o = [p.footer, t].filter(Boolean).join(" ");
|
|
209
|
+
return /* @__PURE__ */ c("div", { className: o, ...n, children: r });
|
|
210
|
+
}
|
|
211
|
+
U.displayName = "VhyxDrawerFooter";
|
|
212
|
+
function A({ children: r, className: t, ...n }) {
|
|
213
|
+
const o = h("Drawer.Title");
|
|
214
|
+
g(() => (o.hasTitleRef.current = !0, () => {
|
|
215
|
+
o.hasTitleRef.current = !1;
|
|
216
|
+
}), [o.hasTitleRef]);
|
|
217
|
+
const e = [p.title, t].filter(Boolean).join(" ");
|
|
218
|
+
return /* @__PURE__ */ c("h2", { id: o.titleId, className: e, ...n, children: r });
|
|
219
|
+
}
|
|
220
|
+
A.displayName = "VhyxDrawerTitle";
|
|
221
|
+
function H({ children: r, className: t, ...n }) {
|
|
222
|
+
const o = h("Drawer.Description"), e = [p.description, t].filter(Boolean).join(" ");
|
|
223
|
+
return /* @__PURE__ */ c("p", { id: o.descriptionId, className: e, ...n, children: r });
|
|
224
|
+
}
|
|
225
|
+
H.displayName = "VhyxDrawerDescription";
|
|
226
|
+
const L = w.forwardRef(
|
|
227
|
+
({ children: r, className: t, onClick: n, asChild: o = !1, ...e }, i) => {
|
|
228
|
+
const s = h("Drawer.Close"), l = x(
|
|
229
|
+
(a) => {
|
|
230
|
+
n == null || n(a), s.onOpenChange(!1);
|
|
231
|
+
},
|
|
232
|
+
[n, s]
|
|
233
|
+
), y = [p.close, t].filter(Boolean).join(" "), u = {
|
|
234
|
+
onClick: l,
|
|
235
|
+
className: y,
|
|
236
|
+
...e
|
|
237
|
+
};
|
|
238
|
+
return o ? /* @__PURE__ */ c(O, { ref: i, ...u, children: r }) : /* @__PURE__ */ c("button", { ref: i, type: "button", ...u, children: r ?? "Close" });
|
|
239
|
+
}
|
|
240
|
+
);
|
|
241
|
+
L.displayName = "VhyxDrawerClose";
|
|
242
|
+
const ce = { ...V, id: "vhyxui-drawer" }, le = Object.assign(
|
|
243
|
+
Y(j, ce),
|
|
244
|
+
{
|
|
245
|
+
Trigger: q,
|
|
246
|
+
Portal: S,
|
|
247
|
+
Overlay: N,
|
|
248
|
+
Content: B,
|
|
249
|
+
Header: F,
|
|
250
|
+
Footer: U,
|
|
251
|
+
Title: A,
|
|
252
|
+
Description: H,
|
|
253
|
+
Close: L
|
|
254
|
+
}
|
|
255
|
+
);
|
|
256
|
+
le.displayName = "VhyxDrawer";
|
|
257
|
+
export {
|
|
258
|
+
le as D
|
|
259
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const s=require("react/jsx-runtime"),n=require("react"),R=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",o={form:$,field:k,"field--horizontal":"_field--horizontal_14a4e_30",label:A,control:D,hint:H,error:L,required:G,optional:J},C=n.createContext(null);function B(){return n.useContext(C)}const I=n.forwardRef(({form:e,layout:l="vertical",size:c="md",disabled:v=!1,onSubmit:i,className:x,children:F,...u},y)=>{const h=e==null?void 0:e.formState,a=e==null?void 0:e.register,d=e?t=>e.getFieldState(t):void 0,f=n.useCallback(t=>{t.preventDefault(),e&&i?e.handleSubmit(_=>{i(_)})(t):i&&i({})},[e,i]),r=n.useMemo(()=>{const t={disabled:v,size:c,layout:l};return h!==void 0&&(t.formState=h),a!==void 0&&(t.register=a),d!==void 0&&(t.getFieldState=d),t},[h,a,d,v,c,l]),m=[o.form,x].filter(Boolean).join(" ");return s.jsx(C.Provider,{value:r,children:s.jsx("form",{ref:y,className:m,"data-layout":l,"data-size":c,onSubmit:f,...u,children:F})})});I.displayName="VhyxForm";const K={...M.formContract,id:"vhyxui-form"},E=P.withAgentContract(I,K);E.displayName="VhyxForm";function V({name:e,label:l,hint:c,error:v,required:i=!1,optional:x=!1,layout:F,children:u,className:y,...h}){var q,b,S;const a=R.useId("field"),d=`${a}-hint`,f=`${a}-error`,r=B(),m=(S=(b=(q=r==null?void 0:r.getFieldState)==null?void 0:q.call(r,e))==null?void 0:b.error)==null?void 0:S.message,t=v??(typeof m=="string"?m:void 0),_=!!t,j=!!c,p=[];j&&p.push(d),_&&p.push(f);const g=p.length>0?p.join(" "):void 0,N=F??(r==null?void 0:r.layout)??"vertical",w=n.isValidElement(u)?n.cloneElement(u,{id:a,...g!==void 0?{"aria-describedby":g}:{},..._?{"aria-invalid":!0,"data-error":!0}:{}}):u,z=[o.field,N==="horizontal"?o["field--horizontal"]:"",y].filter(Boolean).join(" ");return s.jsxs("div",{className:z,"data-layout":N,...h,children:[l!==void 0&&s.jsxs("label",{htmlFor:a,className:o.label,children:[l,i&&s.jsxs("span",{className:o.required,"aria-hidden":"true",children:[" ","*"]}),x&&s.jsxs("span",{className:o.optional,"aria-hidden":"true",children:[" ","(optional)"]})]}),s.jsx("div",{className:o.control,children:w}),j&&s.jsx("span",{id:d,className:o.hint,children:c}),_&&s.jsx("span",{id:f,className:o.error,role:"alert","aria-live":"assertive",children:t})]})}V.displayName="VhyxField";exports.Field=V;exports.Form=E;exports.useFormContext=B;
|