@yuno-payments/dashboard-design-system 0.0.120 → 0.0.121
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.
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { j as e } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
-
import * as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { cva as
|
|
5
|
-
import { normalizeDimension as
|
|
6
|
-
import { useBodyScrollLock as
|
|
7
|
-
import { useEscapeKey as
|
|
8
|
-
import { Icon as
|
|
9
|
-
import { Button as
|
|
10
|
-
import { Typography as
|
|
11
|
-
const
|
|
2
|
+
import * as m from "react";
|
|
3
|
+
import { createPortal as C } from "react-dom";
|
|
4
|
+
import { cva as x } from "../../../node_modules/class-variance-authority/dist/index.js";
|
|
5
|
+
import { normalizeDimension as h, cn as r } from "../../../lib/utils.js";
|
|
6
|
+
import { useBodyScrollLock as H } from "../../../hooks/use-body-scroll-lock.js";
|
|
7
|
+
import { useEscapeKey as W } from "../../../hooks/use-escape-key.js";
|
|
8
|
+
import { Icon as D } from "../../atoms/icon/icon.js";
|
|
9
|
+
import { Button as u } from "../../atoms/button/button.js";
|
|
10
|
+
import { Typography as p } from "../../atoms/typography/typography.js";
|
|
11
|
+
const F = x(
|
|
12
12
|
"fixed z-[1000000] bg-background shadow-lg transition-transform duration-300 ease-in-out",
|
|
13
13
|
{
|
|
14
14
|
variants: {
|
|
@@ -38,7 +38,7 @@ const D = g(
|
|
|
38
38
|
isOpen: !1
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
),
|
|
41
|
+
), I = x(
|
|
42
42
|
"fixed inset-0 z-[1000000] bg-black/50 transition-opacity duration-300",
|
|
43
43
|
{
|
|
44
44
|
variants: {
|
|
@@ -51,120 +51,119 @@ const D = g(
|
|
|
51
51
|
isOpen: !1
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
), K =
|
|
54
|
+
), K = m.forwardRef(
|
|
55
55
|
({
|
|
56
|
-
className:
|
|
57
|
-
side:
|
|
58
|
-
title:
|
|
59
|
-
description:
|
|
60
|
-
open:
|
|
61
|
-
onClose:
|
|
56
|
+
className: b,
|
|
57
|
+
side: t = "right",
|
|
58
|
+
title: i,
|
|
59
|
+
description: l,
|
|
60
|
+
open: s,
|
|
61
|
+
onClose: o,
|
|
62
62
|
buttons: c = [],
|
|
63
|
-
width:
|
|
64
|
-
height:
|
|
65
|
-
showHeader:
|
|
66
|
-
showFooter:
|
|
67
|
-
children:
|
|
68
|
-
headerClassName:
|
|
69
|
-
contentClassName:
|
|
70
|
-
footerClassName:
|
|
71
|
-
loading:
|
|
72
|
-
...
|
|
73
|
-
},
|
|
74
|
-
const [
|
|
75
|
-
if (
|
|
76
|
-
if (
|
|
63
|
+
width: y,
|
|
64
|
+
height: g,
|
|
65
|
+
showHeader: j = !0,
|
|
66
|
+
showFooter: v = !0,
|
|
67
|
+
children: O,
|
|
68
|
+
headerClassName: N,
|
|
69
|
+
contentClassName: w,
|
|
70
|
+
footerClassName: S,
|
|
71
|
+
loading: k = !1,
|
|
72
|
+
...z
|
|
73
|
+
}, V) => {
|
|
74
|
+
const [R, f] = m.useState(s);
|
|
75
|
+
if (H(s), W(s, o), m.useEffect(() => {
|
|
76
|
+
if (s)
|
|
77
77
|
f(!0);
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
return () => clearTimeout(t);
|
|
78
|
+
else {
|
|
79
|
+
const a = setTimeout(() => {
|
|
80
|
+
f(!1);
|
|
81
|
+
}, 300);
|
|
82
|
+
return () => clearTimeout(a);
|
|
84
83
|
}
|
|
85
|
-
}, [
|
|
86
|
-
const
|
|
87
|
-
...
|
|
88
|
-
...
|
|
89
|
-
},
|
|
84
|
+
}, [s]), !R) return null;
|
|
85
|
+
const n = h(y), d = h(g), E = {
|
|
86
|
+
...n && (t === "left" || t === "right") ? { width: n, maxWidth: n } : {},
|
|
87
|
+
...d && (t === "top" || t === "bottom") ? { height: d, maxHeight: d } : {}
|
|
88
|
+
}, T = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
90
89
|
/* @__PURE__ */ e.jsx(
|
|
91
90
|
"div",
|
|
92
91
|
{
|
|
93
|
-
className:
|
|
94
|
-
onClick:
|
|
92
|
+
className: I({ isOpen: s }),
|
|
93
|
+
onClick: o,
|
|
95
94
|
"aria-hidden": "true"
|
|
96
95
|
}
|
|
97
96
|
),
|
|
98
97
|
/* @__PURE__ */ e.jsx(
|
|
99
98
|
"div",
|
|
100
99
|
{
|
|
101
|
-
ref:
|
|
102
|
-
className: r(
|
|
103
|
-
style:
|
|
100
|
+
ref: V,
|
|
101
|
+
className: r(F({ side: t, isOpen: s }), b),
|
|
102
|
+
style: E,
|
|
104
103
|
role: "dialog",
|
|
105
104
|
"aria-modal": "true",
|
|
106
|
-
"aria-labelledby":
|
|
107
|
-
"aria-describedby":
|
|
108
|
-
...
|
|
105
|
+
"aria-labelledby": i ? "sheet-title" : void 0,
|
|
106
|
+
"aria-describedby": l ? "sheet-description" : void 0,
|
|
107
|
+
...z,
|
|
109
108
|
children: /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
|
|
110
|
-
|
|
109
|
+
j && /* @__PURE__ */ e.jsxs(
|
|
111
110
|
"div",
|
|
112
111
|
{
|
|
113
112
|
className: r(
|
|
114
113
|
"flex items-center justify-between border-b border-border p-6",
|
|
115
|
-
|
|
114
|
+
N
|
|
116
115
|
),
|
|
117
116
|
children: [
|
|
118
117
|
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
i && /* @__PURE__ */ e.jsx(
|
|
119
|
+
p,
|
|
121
120
|
{
|
|
122
121
|
id: "sheet-title",
|
|
123
122
|
as: "h2",
|
|
124
123
|
variant: "h3",
|
|
125
124
|
className: "font-semibold",
|
|
126
|
-
children:
|
|
125
|
+
children: i
|
|
127
126
|
}
|
|
128
127
|
),
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
l && /* @__PURE__ */ e.jsx(
|
|
129
|
+
p,
|
|
131
130
|
{
|
|
132
131
|
id: "sheet-description",
|
|
133
132
|
variant: "muted",
|
|
134
133
|
className: "text-sm",
|
|
135
|
-
children:
|
|
134
|
+
children: l
|
|
136
135
|
}
|
|
137
136
|
)
|
|
138
137
|
] }),
|
|
139
138
|
/* @__PURE__ */ e.jsx(
|
|
140
|
-
|
|
139
|
+
u,
|
|
141
140
|
{
|
|
142
141
|
variant: "ghost",
|
|
143
142
|
size: "icon",
|
|
144
|
-
onClick:
|
|
143
|
+
onClick: o,
|
|
145
144
|
"aria-label": "Close",
|
|
146
145
|
className: "h-6 w-6",
|
|
147
|
-
children: /* @__PURE__ */ e.jsx(
|
|
146
|
+
children: /* @__PURE__ */ e.jsx(D, { name: "X", size: "md" })
|
|
148
147
|
}
|
|
149
148
|
)
|
|
150
149
|
]
|
|
151
150
|
}
|
|
152
151
|
),
|
|
153
|
-
/* @__PURE__ */ e.jsx("div", { className: r("flex-1 overflow-y-auto p-6",
|
|
154
|
-
|
|
152
|
+
/* @__PURE__ */ e.jsx("div", { className: r("flex-1 overflow-y-auto p-6", w), children: O }),
|
|
153
|
+
v && c.length > 0 && /* @__PURE__ */ e.jsx(
|
|
155
154
|
"div",
|
|
156
155
|
{
|
|
157
156
|
className: r(
|
|
158
157
|
"flex items-center justify-end gap-3 border-t border-border p-6",
|
|
159
|
-
|
|
158
|
+
S
|
|
160
159
|
),
|
|
161
|
-
children: c.map((
|
|
162
|
-
|
|
160
|
+
children: c.map((a, B) => /* @__PURE__ */ e.jsx(
|
|
161
|
+
u,
|
|
163
162
|
{
|
|
164
|
-
disabled:
|
|
165
|
-
...
|
|
163
|
+
disabled: k || a.disabled,
|
|
164
|
+
...a
|
|
166
165
|
},
|
|
167
|
-
|
|
166
|
+
B
|
|
168
167
|
))
|
|
169
168
|
}
|
|
170
169
|
)
|
|
@@ -172,7 +171,7 @@ const D = g(
|
|
|
172
171
|
}
|
|
173
172
|
)
|
|
174
173
|
] });
|
|
175
|
-
return
|
|
174
|
+
return C(T, document.body);
|
|
176
175
|
}
|
|
177
176
|
);
|
|
178
177
|
K.displayName = "Sheet";
|