reaxify 0.0.78 → 0.0.80
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/components/Drawer/index.cjs.js +1 -1
- package/dist/components/Drawer/index.es.js +12 -7
- package/dist/components/Menu/index.cjs.js +1 -1
- package/dist/components/Menu/index.es.js +29 -24
- package/dist/components/Modal/index.cjs.js +1 -1
- package/dist/components/Modal/index.es.js +36 -31
- package/dist/hooks/useKeyDown.cjs.js +1 -1
- package/dist/hooks/useKeyDown.d.ts +1 -1
- package/dist/hooks/useKeyDown.es.js +11 -10
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("../../hooks/useClasses.cjs.js"),i=require("react"),
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("../../hooks/useClasses.cjs.js"),i=require("react"),q=require("../../hooks/useKeyDown.cjs.js"),g=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),b=require("../../helpers/cn.cjs.js"),f=require("../Card/index.cjs.js"),R=require("../Portal/index.cjs.js"),C=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),p=i.createContext({open:!1,onClose:()=>{},duration:300,anchor:"start",transitionState:"unmounted"});function x({as:n,ref:a,open:r=!1,onClose:e=()=>{},duration:o=300,anchor:u="end",className:w="",children:y,...v}){const t=d(l=>l.drawer),c=i.useRef(null),m=n||"div",j={entering:"active opacity-100 pointer-events-auto",entered:"active opacity-100 pointer-events-auto",exiting:"opacity-0 pointer-events-none",exited:"opacity-0 pointer-events-none",unmounted:""},D=i.useMemo(()=>{var h;const l={start:"flex-row-reverse",end:"flex-row",top:"flex-col-reverse",bottom:"flex-col"},M=(h=t==null?void 0:t.anchor)==null?void 0:h[u];return[l[u],M]},[u,t==null?void 0:t.anchor]);return i.useImperativeHandle(a,()=>c.current),q(()=>{e==null||e()},{skip:!r,targetKey:"Escape"}),s.jsx(R,{children:s.jsx(C.default,{nodeRef:c,in:r,timeout:o,unmountOnExit:!0,children:l=>s.jsxs(m,{ref:c,style:{transitionDuration:`${o}ms`},"data-open":r,className:g.twMerge("fixed size-full inset-0 flex z-10 bg-black/20 backdrop-blur transition-opacity [--drawer-ratio:1] rtl:[--drawer-ratio:-1]",t==null?void 0:t.base,j[l],D,w),...v,children:[s.jsx("button",{type:"button",onClick:()=>e(),className:"absolute inset-0 size-full cursor-default opacity-0"}),s.jsx(p.Provider,{value:{open:r,onClose:e,transitionState:l,duration:o,anchor:u},children:y})]})})})}function N({children:n,className:a="",...r}){const e=d(t=>t.drawer.menu),{anchor:o,duration:u,transitionState:w}=i.useContext(p),y=i.useMemo(()=>{var m;const t={start:"w-[31.875rem] h-full max-w-[92.5%] rounded-e me-auto",end:"w-[31.875rem] h-full max-w-[92.5%] rounded-s ms-auto",top:"w-full h-[31.875rem] max-h-[92.5%] rounded-b mb-auto",bottom:"w-full h-[31.875rem] max-h-[92.5%] rounded-t mt-auto"},c=(m=e==null?void 0:e.anchor)==null?void 0:m[o];return[t[o],c]},[o,e==null?void 0:e.anchor]),v=i.useMemo(()=>({start:{entering:"translate-x-0",entered:"translate-x-0",exiting:"-translate-x-[calc(100%*var(--drawer-ratio))]",exited:"-translate-x-[calc(100%*var(--drawer-ratio))]",unmounted:""},end:{entering:"translate-x-0",entered:"translate-x-0",exiting:"translate-x-[calc(100%*var(--drawer-ratio))]",exited:"translate-x-[calc(100%*var(--drawer-ratio))]",unmounted:""},top:{entering:"translate-y-0",entered:"translate-y-0",exiting:"-translate-y-full",exited:"-translate-y-full",unmounted:""},bottom:{entering:"translate-y-0",entered:"translate-y-0",exiting:"translate-y-full",exited:"translate-y-full",unmounted:""}})[o],[o]);return s.jsx(f,{as:"div",style:{transitionDuration:`${u}ms`},className:g.twMerge("relative flex flex-col transition-[translate,width] rounded-none",e==null?void 0:e.base,v[w],y,a),...r,children:n})}function S({className:n,...a}){const r=d(e=>e.drawer.header.base);return s.jsx(f.Header,{className:b(r,n),...a})}function k({className:n,...a}){const r=d(e=>e.drawer.body.base);return s.jsx(f.Body,{className:b("flex-1 overflow-auto",r,n),...a})}function H({className:n,...a}){const r=d(e=>e.drawer.footer.base);return s.jsx(f.Footer,{className:b(r,n),...a})}x.Menu=N;x.Header=S;x.Body=k;x.Footer=H;exports.DrawerContext=p;exports.default=x;
|
|
@@ -28,23 +28,28 @@ function f({
|
|
|
28
28
|
children: w,
|
|
29
29
|
...p
|
|
30
30
|
}) {
|
|
31
|
-
const e = d((l) => l.drawer), u = H(null), c = n || "div",
|
|
31
|
+
const e = d((l) => l.drawer), u = H(null), c = n || "div", D = {
|
|
32
32
|
entering: "active opacity-100 pointer-events-auto",
|
|
33
33
|
entered: "active opacity-100 pointer-events-auto",
|
|
34
34
|
exiting: "opacity-0 pointer-events-none",
|
|
35
35
|
exited: "opacity-0 pointer-events-none",
|
|
36
36
|
unmounted: ""
|
|
37
|
-
},
|
|
37
|
+
}, R = y(() => {
|
|
38
38
|
var b;
|
|
39
39
|
const l = {
|
|
40
40
|
start: "flex-row-reverse",
|
|
41
41
|
end: "flex-row",
|
|
42
42
|
top: "flex-col-reverse",
|
|
43
43
|
bottom: "flex-col"
|
|
44
|
-
},
|
|
45
|
-
return [l[i],
|
|
44
|
+
}, C = (b = e == null ? void 0 : e.anchor) == null ? void 0 : b[i];
|
|
45
|
+
return [l[i], C];
|
|
46
46
|
}, [i, e == null ? void 0 : e.anchor]);
|
|
47
|
-
return M(a, () => u.current), B(
|
|
47
|
+
return M(a, () => u.current), B(
|
|
48
|
+
() => {
|
|
49
|
+
t == null || t();
|
|
50
|
+
},
|
|
51
|
+
{ skip: !r, targetKey: "Escape" }
|
|
52
|
+
), /* @__PURE__ */ s(F, { children: /* @__PURE__ */ s(S, { nodeRef: u, in: r, timeout: o, unmountOnExit: !0, children: (l) => /* @__PURE__ */ N(
|
|
48
53
|
c,
|
|
49
54
|
{
|
|
50
55
|
ref: u,
|
|
@@ -53,8 +58,8 @@ function f({
|
|
|
53
58
|
className: h(
|
|
54
59
|
"fixed size-full inset-0 flex z-10 bg-black/20 backdrop-blur transition-opacity [--drawer-ratio:1] rtl:[--drawer-ratio:-1]",
|
|
55
60
|
e == null ? void 0 : e.base,
|
|
56
|
-
|
|
57
|
-
|
|
61
|
+
D[l],
|
|
62
|
+
R,
|
|
58
63
|
x
|
|
59
64
|
),
|
|
60
65
|
...p,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";const
|
|
1
|
+
"use client";"use strict";const r=require("react/jsx-runtime"),E=require("../../hooks/useClasses.cjs.js"),t=require("react"),N=require("../../hooks/useKeyDown.cjs.js"),k=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),W=require("../Portal/index.cjs.js"),I=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),w=t.createContext({open:!1,onClose:()=>{},transitionState:"unmounted",closeOnClick:!1});function H({as:o,ref:u,open:s,onClose:a,closeOnClick:y=!1,anchorEl:c=null,className:b,children:x,...C}){const M=E(e=>e.menu.base),d=o||"div",n=16,i=t.useRef(null),f=t.useRef({left:n,right:n,top:n}),O={entering:"scale-100 opacity-100",entered:"scale-100 opacity-100",exiting:"scale-90 opacity-0",exited:"scale-90 opacity-0",unmounted:""},R=t.useCallback(e=>{f.current=e},[]),q=t.useCallback(e=>{var l,h,p;(l=i.current)==null||l.style.setProperty("--left",`${e.left}px`),(h=i.current)==null||h.style.setProperty("--right",`${e.right}px`),(p=i.current)==null||p.style.setProperty("--top",`${e.top}px`)},[]),m=t.useCallback(()=>{var P,z;if(!s||!c)return;const e=c.getBoundingClientRect(),l=window.innerWidth,h=window.innerHeight,p=((P=i.current)==null?void 0:P.offsetWidth)||150,L=((z=i.current)==null?void 0:z.offsetHeight)||200;let g=e.left,j=e.right,v=e.bottom;g=Math.min(Math.max(g,n),l-p-n),j=Math.min(Math.max(l-e.right,n),l-p-n),v=Math.min(Math.max(v,n),h-L-n),R({left:g,right:j,top:v}),q({left:g,right:j,top:v})},[s,c,R,q]);return t.useEffect(()=>{m()},[m,x]),t.useEffect(()=>{const e=()=>{m()};return window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[m]),t.useImperativeHandle(u,()=>i.current),N(()=>{a==null||a()},{skip:!s,targetKey:"Escape"}),r.jsx(W,{children:r.jsx(I.default,{nodeRef:i,in:s,timeout:300,unmountOnExit:!0,children:e=>r.jsx(w.Provider,{value:{open:s,onClose:a,transitionState:e,closeOnClick:y},children:r.jsxs(S,{children:[r.jsx($,{}),r.jsx(d,{ref:i,"data-open":s,className:k.twMerge("w-fit min-w-[12.5rem] bg-white shadow rounded p-2 transition-[scale,opacity] absolute top-[var(--top)] left-[var(--left)] right-auto origin-top-left rtl:left-auto rtl:right-[var(--right)] rtl:origin-top-right",M,O[e],b),...C,children:x})]})})})})}function S({children:o}){const{transitionState:u}=t.useContext(w),s={entering:"active pointer-events-auto",entered:"active pointer-events-auto",exiting:"pointer-events-none",exited:"pointer-events-none",unmounted:""};return r.jsx("div",{className:k.twMerge("fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",s[u]),children:o})}function $(){const{onClose:o}=t.useContext(w);return r.jsx("button",{type:"button",className:"w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",onClick:o})}function B({as:o,closeOnClick:u,type:s="button",className:a,children:y,onClick:c,...b}){const x=o||"div",C=E(f=>f.menu.item.base),{closeOnClick:M,onClose:d}=t.useContext(w),n=u??M,i=f=>{n&&(d==null||d()),c==null||c(f)};return r.jsx(x,{type:s,className:k.twMerge("flex items-center px-3 py-2 w-full text-dark text-base font-normal rounded transition-colors hover:bg-dark hover:text-white",C,a),onClick:i,...b,children:y})}H.Item=B;module.exports=H;
|
|
@@ -15,16 +15,16 @@ const x = j({
|
|
|
15
15
|
});
|
|
16
16
|
function q({
|
|
17
17
|
as: r,
|
|
18
|
-
ref:
|
|
18
|
+
ref: c,
|
|
19
19
|
open: o,
|
|
20
|
-
onClose:
|
|
20
|
+
onClose: a,
|
|
21
21
|
closeOnClick: w = !1,
|
|
22
22
|
anchorEl: s = null,
|
|
23
23
|
className: y,
|
|
24
24
|
children: m,
|
|
25
|
-
...
|
|
25
|
+
...b
|
|
26
26
|
}) {
|
|
27
|
-
const
|
|
27
|
+
const C = W((t) => t.menu.base), u = r || "div", e = 16, n = L(null), f = L({
|
|
28
28
|
left: e,
|
|
29
29
|
right: e,
|
|
30
30
|
top: e
|
|
@@ -35,18 +35,18 @@ function q({
|
|
|
35
35
|
exited: "scale-90 opacity-0",
|
|
36
36
|
unmounted: ""
|
|
37
37
|
}, H = k((t) => {
|
|
38
|
-
|
|
38
|
+
f.current = t;
|
|
39
39
|
}, []), O = k((t) => {
|
|
40
|
-
var
|
|
41
|
-
(
|
|
40
|
+
var l, h, d;
|
|
41
|
+
(l = n.current) == null || l.style.setProperty("--left", `${t.left}px`), (h = n.current) == null || h.style.setProperty("--right", `${t.right}px`), (d = n.current) == null || d.style.setProperty("--top", `${t.top}px`);
|
|
42
42
|
}, []), p = k(() => {
|
|
43
43
|
var R, E;
|
|
44
44
|
if (!o || !s) return;
|
|
45
|
-
const t = s.getBoundingClientRect(),
|
|
45
|
+
const t = s.getBoundingClientRect(), l = window.innerWidth, h = window.innerHeight, d = ((R = n.current) == null ? void 0 : R.offsetWidth) || 150, S = ((E = n.current) == null ? void 0 : E.offsetHeight) || 200;
|
|
46
46
|
let g = t.left, M = t.right, v = t.bottom;
|
|
47
|
-
g = Math.min(Math.max(g, e),
|
|
48
|
-
Math.max(
|
|
49
|
-
|
|
47
|
+
g = Math.min(Math.max(g, e), l - d - e), M = Math.min(
|
|
48
|
+
Math.max(l - t.right, e),
|
|
49
|
+
l - d - e
|
|
50
50
|
), v = Math.min(Math.max(v, e), h - S - e), H({ left: g, right: M, top: v }), O({ left: g, right: M, top: v });
|
|
51
51
|
}, [o, s, H, O]);
|
|
52
52
|
return N(() => {
|
|
@@ -58,29 +58,34 @@ function q({
|
|
|
58
58
|
return window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
|
|
59
59
|
window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
|
|
60
60
|
};
|
|
61
|
-
}, [p]), B(
|
|
61
|
+
}, [p]), B(c, () => n.current), K(
|
|
62
|
+
() => {
|
|
63
|
+
a == null || a();
|
|
64
|
+
},
|
|
65
|
+
{ skip: !o, targetKey: "Escape" }
|
|
66
|
+
), /* @__PURE__ */ i(D, { children: /* @__PURE__ */ i(T, { nodeRef: n, in: o, timeout: 300, unmountOnExit: !0, children: (t) => /* @__PURE__ */ i(
|
|
62
67
|
x.Provider,
|
|
63
68
|
{
|
|
64
69
|
value: {
|
|
65
70
|
open: o,
|
|
66
|
-
onClose:
|
|
71
|
+
onClose: a,
|
|
67
72
|
transitionState: t,
|
|
68
73
|
closeOnClick: w
|
|
69
74
|
},
|
|
70
75
|
children: /* @__PURE__ */ $(A, { children: [
|
|
71
76
|
/* @__PURE__ */ i(F, {}),
|
|
72
77
|
/* @__PURE__ */ i(
|
|
73
|
-
|
|
78
|
+
u,
|
|
74
79
|
{
|
|
75
80
|
ref: n,
|
|
76
81
|
"data-open": o,
|
|
77
82
|
className: z(
|
|
78
83
|
"w-fit min-w-[12.5rem] bg-white shadow rounded p-2 transition-[scale,opacity] absolute top-[var(--top)] left-[var(--left)] right-auto origin-top-left rtl:left-auto rtl:right-[var(--right)] rtl:origin-top-right",
|
|
79
|
-
|
|
84
|
+
C,
|
|
80
85
|
I[t],
|
|
81
86
|
y
|
|
82
87
|
),
|
|
83
|
-
...
|
|
88
|
+
...b,
|
|
84
89
|
children: m
|
|
85
90
|
}
|
|
86
91
|
)
|
|
@@ -89,7 +94,7 @@ function q({
|
|
|
89
94
|
) }) });
|
|
90
95
|
}
|
|
91
96
|
function A({ children: r }) {
|
|
92
|
-
const { transitionState:
|
|
97
|
+
const { transitionState: c } = P(x);
|
|
93
98
|
return /* @__PURE__ */ i(
|
|
94
99
|
"div",
|
|
95
100
|
{
|
|
@@ -101,7 +106,7 @@ function A({ children: r }) {
|
|
|
101
106
|
exiting: "pointer-events-none",
|
|
102
107
|
exited: "pointer-events-none",
|
|
103
108
|
unmounted: ""
|
|
104
|
-
}[
|
|
109
|
+
}[c]
|
|
105
110
|
),
|
|
106
111
|
children: r
|
|
107
112
|
}
|
|
@@ -120,15 +125,15 @@ function F() {
|
|
|
120
125
|
}
|
|
121
126
|
function G({
|
|
122
127
|
as: r,
|
|
123
|
-
closeOnClick:
|
|
128
|
+
closeOnClick: c,
|
|
124
129
|
type: o = "button",
|
|
125
|
-
className:
|
|
130
|
+
className: a,
|
|
126
131
|
children: w,
|
|
127
132
|
onClick: s,
|
|
128
133
|
...y
|
|
129
134
|
}) {
|
|
130
|
-
const m = r || "div",
|
|
131
|
-
e && (
|
|
135
|
+
const m = r || "div", b = W((f) => f.menu.item.base), { closeOnClick: C, onClose: u } = P(x), e = c ?? C, n = (f) => {
|
|
136
|
+
e && (u == null || u()), s == null || s(f);
|
|
132
137
|
};
|
|
133
138
|
return /* @__PURE__ */ i(
|
|
134
139
|
m,
|
|
@@ -136,8 +141,8 @@ function G({
|
|
|
136
141
|
type: o,
|
|
137
142
|
className: z(
|
|
138
143
|
"flex items-center px-3 py-2 w-full text-dark text-base font-normal rounded transition-colors hover:bg-dark hover:text-white",
|
|
139
|
-
|
|
140
|
-
|
|
144
|
+
b,
|
|
145
|
+
a
|
|
141
146
|
),
|
|
142
147
|
onClick: n,
|
|
143
148
|
...y,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),y=require("../../helpers/cn.cjs.js"),c=require("../../hooks/useClasses.cjs.js"),u=require("react"),q=require("../../hooks/useKeyDown.cjs.js"),v=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),x=require("../Card/index.cjs.js"),z=require("../Portal/index.cjs.js"),w=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),g=u.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300});function l({as:t,ref:n,size:s="md",open:e=!1,onClose:o=()=>{},duration:r=300,className:f,children:p,...b}){const d=c(m=>m.modal.base),a=u.useRef(null),M=t||"div",j={entering:"active opacity-100 pointer-events-auto",entered:"active opacity-100 pointer-events-auto",exiting:"opacity-0 pointer-events-none",exited:"opacity-0 pointer-events-none",unmounted:""};return u.useImperativeHandle(n,()=>a.current),q(()=>{o==null||o()},{skip:!e,targetKey:"Escape"}),i.jsx(z,{children:i.jsx(w.default,{nodeRef:a,in:e,timeout:r,unmountOnExit:!0,children:m=>i.jsxs(M,{ref:a,"data-open":e,style:{transitionDuration:`${r}ms`},className:v.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",d,j[m],f),...b,children:[i.jsx("button",{type:"button",onClick:()=>o(),className:"absolute inset-0 cursor-default opacity-0"}),i.jsx(g.Provider,{value:{size:s,open:e,onClose:o,transitionState:m,duration:r},children:p})]})})})}function N({className:t,children:n,...s}){const e=c(d=>d.modal.dialog),{size:o,transitionState:r,duration:f}=u.useContext(g),p={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},b=u.useMemo(()=>{var a;return[{sm:"min-[576px]:w-[300px]",md:"min-[576px]:w-[500px]",lg:"min-[992px]:w-[800px]"}[o],(a=e==null?void 0:e.size)==null?void 0:a[o]]},[o,e==null?void 0:e.size]);return i.jsx(x,{as:"div",style:{transitionDuration:`${f}ms`},className:v.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,b,p[r],t),...s,children:n})}function S({className:t,...n}){const s=c(e=>e.modal.header.base);return i.jsx(x.Header,{className:y(s,t),...n})}function h({className:t,...n}){const s=c(e=>e.modal.body.base);return i.jsx(x.Body,{className:y(s,t),...n})}function D({className:t,...n}){const s=c(e=>e.modal.footer.base);return i.jsx(x.Footer,{className:y(s,t),...n})}l.Dialog=N;l.Header=S;l.Body=h;l.Footer=D;exports.ModalContext=g;exports.default=l;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
2
|
+
import { jsx as i, jsxs as M } from "react/jsx-runtime";
|
|
3
3
|
import y from "../../helpers/cn.es.js";
|
|
4
4
|
import l from "../../hooks/useClasses.es.js";
|
|
5
|
-
import { createContext as
|
|
6
|
-
import
|
|
5
|
+
import { createContext as w, useRef as N, useImperativeHandle as h, useContext as D, useMemo as k } from "react";
|
|
6
|
+
import C from "../../hooks/useKeyDown.es.js";
|
|
7
7
|
import { twMerge as b } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
|
|
8
8
|
import d from "../Card/index.es.js";
|
|
9
9
|
import H from "../Portal/index.es.js";
|
|
10
10
|
import S from "../../node_modules/react-transition-group/esm/Transition.es.js";
|
|
11
|
-
const v =
|
|
11
|
+
const v = w({
|
|
12
12
|
size: "md",
|
|
13
13
|
open: !1,
|
|
14
14
|
onClose: () => {
|
|
@@ -17,29 +17,34 @@ const v = M({
|
|
|
17
17
|
duration: 300
|
|
18
18
|
});
|
|
19
19
|
function u({
|
|
20
|
-
as:
|
|
20
|
+
as: e,
|
|
21
21
|
ref: o,
|
|
22
22
|
size: n = "md",
|
|
23
|
-
open:
|
|
24
|
-
onClose:
|
|
23
|
+
open: t = !1,
|
|
24
|
+
onClose: a = () => {
|
|
25
25
|
},
|
|
26
26
|
duration: r = 300,
|
|
27
27
|
className: p,
|
|
28
28
|
children: f,
|
|
29
29
|
...x
|
|
30
30
|
}) {
|
|
31
|
-
const m = l((c) => c.modal.base), s =
|
|
31
|
+
const m = l((c) => c.modal.base), s = N(null), g = e || "div", z = {
|
|
32
32
|
entering: "active opacity-100 pointer-events-auto",
|
|
33
33
|
entered: "active opacity-100 pointer-events-auto",
|
|
34
34
|
exiting: "opacity-0 pointer-events-none",
|
|
35
35
|
exited: "opacity-0 pointer-events-none",
|
|
36
36
|
unmounted: ""
|
|
37
37
|
};
|
|
38
|
-
return
|
|
38
|
+
return h(o, () => s.current), C(
|
|
39
|
+
() => {
|
|
40
|
+
a == null || a();
|
|
41
|
+
},
|
|
42
|
+
{ skip: !t, targetKey: "Escape" }
|
|
43
|
+
), /* @__PURE__ */ i(H, { children: /* @__PURE__ */ i(S, { nodeRef: s, in: t, timeout: r, unmountOnExit: !0, children: (c) => /* @__PURE__ */ M(
|
|
39
44
|
g,
|
|
40
45
|
{
|
|
41
46
|
ref: s,
|
|
42
|
-
"data-open":
|
|
47
|
+
"data-open": t,
|
|
43
48
|
style: { transitionDuration: `${r}ms` },
|
|
44
49
|
className: b(
|
|
45
50
|
"modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",
|
|
@@ -49,18 +54,18 @@ function u({
|
|
|
49
54
|
),
|
|
50
55
|
...x,
|
|
51
56
|
children: [
|
|
52
|
-
/* @__PURE__ */
|
|
57
|
+
/* @__PURE__ */ i(
|
|
53
58
|
"button",
|
|
54
59
|
{
|
|
55
60
|
type: "button",
|
|
56
|
-
onClick: () =>
|
|
61
|
+
onClick: () => a(),
|
|
57
62
|
className: "absolute inset-0 cursor-default opacity-0"
|
|
58
63
|
}
|
|
59
64
|
),
|
|
60
|
-
/* @__PURE__ */
|
|
65
|
+
/* @__PURE__ */ i(
|
|
61
66
|
v.Provider,
|
|
62
67
|
{
|
|
63
|
-
value: { size: n, open:
|
|
68
|
+
value: { size: n, open: t, onClose: a, transitionState: c, duration: r },
|
|
64
69
|
children: f
|
|
65
70
|
}
|
|
66
71
|
)
|
|
@@ -68,49 +73,49 @@ function u({
|
|
|
68
73
|
}
|
|
69
74
|
) }) });
|
|
70
75
|
}
|
|
71
|
-
function B({ className:
|
|
72
|
-
const
|
|
76
|
+
function B({ className: e, children: o, ...n }) {
|
|
77
|
+
const t = l((m) => m.modal.dialog), { size: a, transitionState: r, duration: p } = D(v), f = {
|
|
73
78
|
entering: "scale-100",
|
|
74
79
|
entered: "scale-100",
|
|
75
80
|
exiting: "scale-75",
|
|
76
81
|
exited: "scale-75",
|
|
77
82
|
unmounted: ""
|
|
78
|
-
}, x =
|
|
83
|
+
}, x = k(() => {
|
|
79
84
|
var s;
|
|
80
85
|
return [{
|
|
81
86
|
sm: "min-[576px]:w-[300px]",
|
|
82
87
|
md: "min-[576px]:w-[500px]",
|
|
83
88
|
lg: "min-[992px]:w-[800px]"
|
|
84
|
-
}[
|
|
85
|
-
}, [
|
|
86
|
-
return /* @__PURE__ */
|
|
89
|
+
}[a], (s = t == null ? void 0 : t.size) == null ? void 0 : s[a]];
|
|
90
|
+
}, [a, t == null ? void 0 : t.size]);
|
|
91
|
+
return /* @__PURE__ */ i(
|
|
87
92
|
d,
|
|
88
93
|
{
|
|
89
94
|
as: "div",
|
|
90
95
|
style: { transitionDuration: `${p}ms` },
|
|
91
96
|
className: b(
|
|
92
97
|
"max-w-full max-h-full m-auto transition-transform",
|
|
93
|
-
|
|
98
|
+
t == null ? void 0 : t.base,
|
|
94
99
|
x,
|
|
95
100
|
f[r],
|
|
96
|
-
|
|
101
|
+
e
|
|
97
102
|
),
|
|
98
103
|
...n,
|
|
99
104
|
children: o
|
|
100
105
|
}
|
|
101
106
|
);
|
|
102
107
|
}
|
|
103
|
-
function F({ className:
|
|
104
|
-
const n = l((
|
|
105
|
-
return /* @__PURE__ */
|
|
108
|
+
function F({ className: e, ...o }) {
|
|
109
|
+
const n = l((t) => t.modal.header.base);
|
|
110
|
+
return /* @__PURE__ */ i(d.Header, { className: y(n, e), ...o });
|
|
106
111
|
}
|
|
107
|
-
function R({ className:
|
|
108
|
-
const n = l((
|
|
109
|
-
return /* @__PURE__ */
|
|
112
|
+
function R({ className: e, ...o }) {
|
|
113
|
+
const n = l((t) => t.modal.body.base);
|
|
114
|
+
return /* @__PURE__ */ i(d.Body, { className: y(n, e), ...o });
|
|
110
115
|
}
|
|
111
|
-
function j({ className:
|
|
112
|
-
const n = l((
|
|
113
|
-
return /* @__PURE__ */
|
|
116
|
+
function j({ className: e, ...o }) {
|
|
117
|
+
const n = l((t) => t.modal.footer.base);
|
|
118
|
+
return /* @__PURE__ */ i(d.Footer, { className: y(n, e), ...o });
|
|
114
119
|
}
|
|
115
120
|
u.Dialog = B;
|
|
116
121
|
u.Header = F;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";const s=require("react");function o(r,{skip:
|
|
1
|
+
"use client";"use strict";const s=require("react");function o(r,{skip:t=!1,targetKey:e=null}={}){const u=s.useRef(r);u.current=r,s.useEffect(()=>{if(t)return;const c=n=>e?Array.isArray(e)?e.includes(n):n===e:!0,i=n=>{c(n.key)&&u.current(n.key)};return window.addEventListener("keydown",i),()=>{window.removeEventListener("keydown",i)}},[e,t])}module.exports=o;
|
|
@@ -2,5 +2,5 @@ type Options = {
|
|
|
2
2
|
skip?: boolean;
|
|
3
3
|
targetKey?: null | string | string[];
|
|
4
4
|
};
|
|
5
|
-
export default function useKeyDown(callback
|
|
5
|
+
export default function useKeyDown(callback: (key: string) => void, { skip, targetKey }?: Options): void;
|
|
6
6
|
export {};
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useEffect as
|
|
3
|
-
function
|
|
4
|
-
t(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import { useRef as f, useEffect as s } from "react";
|
|
3
|
+
function d(r, { skip: u = !1, targetKey: e = null } = {}) {
|
|
4
|
+
const t = f(r);
|
|
5
|
+
t.current = r, s(() => {
|
|
6
|
+
if (u) return;
|
|
7
|
+
const o = (n) => e ? Array.isArray(e) ? e.includes(n) : n === e : !0, i = (n) => {
|
|
8
|
+
o(n.key) && t.current(n.key);
|
|
8
9
|
};
|
|
9
|
-
return window.addEventListener("keydown",
|
|
10
|
-
window.removeEventListener("keydown",
|
|
10
|
+
return window.addEventListener("keydown", i), () => {
|
|
11
|
+
window.removeEventListener("keydown", i);
|
|
11
12
|
};
|
|
12
|
-
}, [
|
|
13
|
+
}, [e, u]);
|
|
13
14
|
}
|
|
14
15
|
export {
|
|
15
|
-
|
|
16
|
+
d as default
|
|
16
17
|
};
|