tintora 0.22.0 → 0.24.0
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/README.md +1 -1
- package/dist/Alert/Alert.d.ts +20 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +449 -379
- package/dist/tintora.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { jsx as
|
|
1
|
+
import "./tintora.css";
|
|
2
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
3
|
+
import { cloneElement as n, createContext as r, useContext as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
|
|
3
4
|
//#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
4
5
|
function u(e) {
|
|
5
6
|
var t, n, r = "";
|
|
@@ -17,31 +18,100 @@ function d() {
|
|
|
17
18
|
return r;
|
|
18
19
|
}
|
|
19
20
|
//#endregion
|
|
21
|
+
//#region src/Alert/Alert.tsx
|
|
22
|
+
var f = {
|
|
23
|
+
info: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" }),
|
|
24
|
+
success: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" }),
|
|
25
|
+
warning: /* @__PURE__ */ e("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" }),
|
|
26
|
+
error: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
|
|
27
|
+
}, p = ({ status: t }) => /* @__PURE__ */ e("svg", {
|
|
28
|
+
width: "22",
|
|
29
|
+
height: "22",
|
|
30
|
+
viewBox: "0 0 24 24",
|
|
31
|
+
fill: "none",
|
|
32
|
+
stroke: `var(--tintora-status-${t}-fg)`,
|
|
33
|
+
strokeWidth: "2",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round",
|
|
36
|
+
"aria-hidden": "true",
|
|
37
|
+
style: {
|
|
38
|
+
flex: "0 0 auto",
|
|
39
|
+
marginTop: 1
|
|
40
|
+
},
|
|
41
|
+
children: f[t]
|
|
42
|
+
});
|
|
43
|
+
function m({ status: n = "info", variant: r = "alert", title: i, children: a, action: o, onDismiss: s, className: c, ...l }) {
|
|
44
|
+
return /* @__PURE__ */ t("div", {
|
|
45
|
+
...l,
|
|
46
|
+
role: r === "alert" && n === "error" ? "alert" : "status",
|
|
47
|
+
className: d("tintora-alert", r === "announcement" ? "tintora-alert--announcement" : `tintora-alert--${n}`, c),
|
|
48
|
+
children: [
|
|
49
|
+
r === "alert" && /* @__PURE__ */ e(p, { status: n }),
|
|
50
|
+
/* @__PURE__ */ t("div", {
|
|
51
|
+
className: d("tintora-alert__content", r === "announcement" && "tintora-alert__content--announcement"),
|
|
52
|
+
children: [
|
|
53
|
+
i && /* @__PURE__ */ e("span", {
|
|
54
|
+
className: "tintora-alert__content__title",
|
|
55
|
+
children: i
|
|
56
|
+
}),
|
|
57
|
+
a && /* @__PURE__ */ e("span", {
|
|
58
|
+
className: "tintora-alert__content__sub-title",
|
|
59
|
+
children: a
|
|
60
|
+
}),
|
|
61
|
+
o && /* @__PURE__ */ e("button", {
|
|
62
|
+
type: "button",
|
|
63
|
+
onClick: o.onClick,
|
|
64
|
+
className: d("tintora-alert__content__action", r === "alert" && `tintora-alert__content__action--${n}`),
|
|
65
|
+
children: o.label
|
|
66
|
+
})
|
|
67
|
+
]
|
|
68
|
+
}),
|
|
69
|
+
r === "alert" && s && /* @__PURE__ */ e("button", {
|
|
70
|
+
type: "button",
|
|
71
|
+
"aria-label": "Dismiss",
|
|
72
|
+
className: "tintora-alert__close",
|
|
73
|
+
onClick: s,
|
|
74
|
+
children: /* @__PURE__ */ e("svg", {
|
|
75
|
+
width: "16",
|
|
76
|
+
height: "16",
|
|
77
|
+
viewBox: "0 0 24 24",
|
|
78
|
+
fill: "none",
|
|
79
|
+
stroke: "currentColor",
|
|
80
|
+
strokeWidth: "2",
|
|
81
|
+
strokeLinecap: "round",
|
|
82
|
+
"aria-hidden": "true",
|
|
83
|
+
children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
|
|
84
|
+
})
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
//#endregion
|
|
20
90
|
//#region src/Avatar/utils.ts
|
|
21
|
-
function
|
|
91
|
+
function h(e) {
|
|
22
92
|
if (!e.length) return "";
|
|
23
93
|
let t = e.trim().split(/\s+/).map((e) => e.match(/\p{L}\p{M}*/u)?.[0]).filter((e) => !!e);
|
|
24
94
|
return `${t[0] ?? ""}${t.length > 1 ? t.at(-1) ?? "" : ""}`.toLocaleUpperCase();
|
|
25
95
|
}
|
|
26
96
|
//#endregion
|
|
27
97
|
//#region src/Avatar/Avatar.tsx
|
|
28
|
-
function
|
|
29
|
-
let [
|
|
30
|
-
return /* @__PURE__ */
|
|
98
|
+
function g({ name: t, src: n, size: r = "medium", className: i, ...a }) {
|
|
99
|
+
let [o, s] = l(), c = !!n && n !== o;
|
|
100
|
+
return /* @__PURE__ */ e("span", {
|
|
31
101
|
role: "img",
|
|
32
|
-
"aria-label":
|
|
33
|
-
...
|
|
34
|
-
className: d("tintora-avatar", `tintora-avatar--${
|
|
35
|
-
children:
|
|
36
|
-
src:
|
|
102
|
+
"aria-label": t,
|
|
103
|
+
...a,
|
|
104
|
+
className: d("tintora-avatar", `tintora-avatar--${r}`, i),
|
|
105
|
+
children: c ? /* @__PURE__ */ e("img", {
|
|
106
|
+
src: n,
|
|
37
107
|
alt: "",
|
|
38
|
-
onError: () =>
|
|
39
|
-
}) :
|
|
108
|
+
onError: () => s(n)
|
|
109
|
+
}) : h(t)
|
|
40
110
|
});
|
|
41
111
|
}
|
|
42
112
|
//#endregion
|
|
43
113
|
//#region src/Spinner/Spinner.tsx
|
|
44
|
-
var
|
|
114
|
+
var _ = {
|
|
45
115
|
small: {
|
|
46
116
|
width: 16,
|
|
47
117
|
height: 16,
|
|
@@ -58,87 +128,87 @@ var m = {
|
|
|
58
128
|
strokeWidth: 2.4
|
|
59
129
|
}
|
|
60
130
|
};
|
|
61
|
-
function
|
|
62
|
-
let { width:
|
|
63
|
-
return /* @__PURE__ */
|
|
131
|
+
function v({ size: n = "medium", color: r = "accent" }) {
|
|
132
|
+
let { width: i, height: a, strokeWidth: o } = _[n];
|
|
133
|
+
return /* @__PURE__ */ t("svg", {
|
|
64
134
|
className: "tintora-spinner",
|
|
65
|
-
width:
|
|
66
|
-
height:
|
|
135
|
+
width: i,
|
|
136
|
+
height: a,
|
|
67
137
|
viewBox: "0 0 24 24",
|
|
68
138
|
fill: "none",
|
|
69
139
|
role: "img",
|
|
70
140
|
"aria-label": "Loading",
|
|
71
|
-
children: [/* @__PURE__ */
|
|
141
|
+
children: [/* @__PURE__ */ e("circle", {
|
|
72
142
|
cx: "12",
|
|
73
143
|
cy: "12",
|
|
74
144
|
r: "9",
|
|
75
145
|
stroke: "currentColor",
|
|
76
|
-
strokeOpacity:
|
|
77
|
-
strokeWidth:
|
|
78
|
-
}), /* @__PURE__ */
|
|
146
|
+
strokeOpacity: r === "accent" ? .25 : .35,
|
|
147
|
+
strokeWidth: o
|
|
148
|
+
}), /* @__PURE__ */ e("path", {
|
|
79
149
|
d: "M21 12a9 9 0 0 0-9-9",
|
|
80
|
-
stroke:
|
|
81
|
-
strokeWidth:
|
|
150
|
+
stroke: r === "accent" ? "var(--tintora-control-fill)" : "currentColor",
|
|
151
|
+
strokeWidth: o,
|
|
82
152
|
strokeLinecap: "round"
|
|
83
153
|
})]
|
|
84
154
|
});
|
|
85
155
|
}
|
|
86
156
|
//#endregion
|
|
87
157
|
//#region src/Button/Button.tsx
|
|
88
|
-
function
|
|
89
|
-
return /* @__PURE__ */
|
|
90
|
-
type:
|
|
91
|
-
className: d("tintora-button", `tintora-button--${
|
|
92
|
-
"tintora-button--leading-icon": !!
|
|
93
|
-
"tintora-button--loading":
|
|
94
|
-
"tintora-button--trailing-icon": !!
|
|
95
|
-
},
|
|
96
|
-
disabled: u ||
|
|
97
|
-
"aria-busy":
|
|
158
|
+
function y({ children: n, className: r, variant: i, size: a = "medium", leadingIcon: o, trailingIcon: s, type: c = "button", loading: l = !1, disabled: u, ...f }) {
|
|
159
|
+
return /* @__PURE__ */ t("button", {
|
|
160
|
+
type: c,
|
|
161
|
+
className: d("tintora-button", `tintora-button--${i}`, `tintora-button--${a}`, {
|
|
162
|
+
"tintora-button--leading-icon": !!o || l,
|
|
163
|
+
"tintora-button--loading": l,
|
|
164
|
+
"tintora-button--trailing-icon": !!s
|
|
165
|
+
}, r),
|
|
166
|
+
disabled: u || l,
|
|
167
|
+
"aria-busy": l || void 0,
|
|
98
168
|
...f,
|
|
99
169
|
children: [
|
|
100
|
-
|
|
170
|
+
l && /* @__PURE__ */ e("span", {
|
|
101
171
|
className: "tintora-button__icon",
|
|
102
172
|
"aria-hidden": "true",
|
|
103
|
-
children: /* @__PURE__ */
|
|
173
|
+
children: /* @__PURE__ */ e(v, {
|
|
104
174
|
size: "small",
|
|
105
175
|
color: "current"
|
|
106
176
|
})
|
|
107
177
|
}),
|
|
108
|
-
!
|
|
178
|
+
!l && o && /* @__PURE__ */ e("span", {
|
|
109
179
|
className: "tintora-button__icon",
|
|
110
180
|
"aria-hidden": "true",
|
|
111
|
-
children:
|
|
181
|
+
children: o
|
|
112
182
|
}),
|
|
113
|
-
|
|
114
|
-
|
|
183
|
+
n,
|
|
184
|
+
s && /* @__PURE__ */ e("span", {
|
|
115
185
|
className: "tintora-button__icon",
|
|
116
186
|
"aria-hidden": "true",
|
|
117
|
-
children:
|
|
187
|
+
children: s
|
|
118
188
|
})
|
|
119
189
|
]
|
|
120
190
|
});
|
|
121
191
|
}
|
|
122
192
|
//#endregion
|
|
123
193
|
//#region src/Card/Card.tsx
|
|
124
|
-
function
|
|
125
|
-
return /* @__PURE__ */
|
|
126
|
-
...
|
|
127
|
-
className: d("tintora-card", `tintora-card--${
|
|
194
|
+
function b({ as: t = "article", variant: n = "surface", className: r, ...i }) {
|
|
195
|
+
return /* @__PURE__ */ e(t, {
|
|
196
|
+
...i,
|
|
197
|
+
className: d("tintora-card", `tintora-card--${n}`, r)
|
|
128
198
|
});
|
|
129
199
|
}
|
|
130
|
-
function
|
|
131
|
-
return /* @__PURE__ */
|
|
132
|
-
...
|
|
200
|
+
function x({ selected: t = !1, className: n, ...r }) {
|
|
201
|
+
return /* @__PURE__ */ e("button", {
|
|
202
|
+
...r,
|
|
133
203
|
type: "button",
|
|
134
|
-
"aria-pressed":
|
|
135
|
-
className: d("tintora-card", "tintora-card--surface", "tintora-card--selectable",
|
|
204
|
+
"aria-pressed": t,
|
|
205
|
+
className: d("tintora-card", "tintora-card--surface", "tintora-card--selectable", t && "tintora-card--selected", n)
|
|
136
206
|
});
|
|
137
207
|
}
|
|
138
208
|
//#endregion
|
|
139
209
|
//#region src/hooks/useCheckedState.ts
|
|
140
|
-
function
|
|
141
|
-
let [r, i] =
|
|
210
|
+
function S({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
|
|
211
|
+
let [r, i] = l(t), a = e !== void 0;
|
|
142
212
|
return {
|
|
143
213
|
checked: a ? e : r,
|
|
144
214
|
onChange: (e) => {
|
|
@@ -148,27 +218,27 @@ function y({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
|
|
|
148
218
|
}
|
|
149
219
|
//#endregion
|
|
150
220
|
//#region src/Checkbox/Checkbox.tsx
|
|
151
|
-
function
|
|
152
|
-
let u =
|
|
153
|
-
checked:
|
|
154
|
-
defaultChecked:
|
|
155
|
-
onCheckedChange:
|
|
221
|
+
function C({ checked: n, defaultChecked: r, onCheckedChange: i, indeterminate: a = !1, className: o, ...l }) {
|
|
222
|
+
let u = c(null), f = S({
|
|
223
|
+
checked: n,
|
|
224
|
+
defaultChecked: r,
|
|
225
|
+
onCheckedChange: i
|
|
156
226
|
});
|
|
157
|
-
return
|
|
158
|
-
u.current && (u.current.indeterminate =
|
|
159
|
-
}), /* @__PURE__ */
|
|
160
|
-
className: d("tintora-checkbox",
|
|
161
|
-
children: [/* @__PURE__ */
|
|
162
|
-
...
|
|
227
|
+
return s(() => {
|
|
228
|
+
u.current && (u.current.indeterminate = a);
|
|
229
|
+
}), /* @__PURE__ */ t("span", {
|
|
230
|
+
className: d("tintora-checkbox", o),
|
|
231
|
+
children: [/* @__PURE__ */ e("input", {
|
|
232
|
+
...l,
|
|
163
233
|
ref: u,
|
|
164
234
|
type: "checkbox",
|
|
165
235
|
className: "tintora-checkbox__input",
|
|
166
236
|
checked: f.checked,
|
|
167
237
|
onChange: f.onChange
|
|
168
|
-
}), /* @__PURE__ */
|
|
238
|
+
}), /* @__PURE__ */ t("span", {
|
|
169
239
|
className: "tintora-checkbox__box",
|
|
170
240
|
"aria-hidden": "true",
|
|
171
|
-
children: [/* @__PURE__ */
|
|
241
|
+
children: [/* @__PURE__ */ e("svg", {
|
|
172
242
|
className: "tintora-checkbox__check",
|
|
173
243
|
width: "14",
|
|
174
244
|
height: "14",
|
|
@@ -177,8 +247,8 @@ function b({ checked: e, defaultChecked: t, onCheckedChange: n, indeterminate: r
|
|
|
177
247
|
strokeWidth: "3.2",
|
|
178
248
|
strokeLinecap: "round",
|
|
179
249
|
strokeLinejoin: "round",
|
|
180
|
-
children: /* @__PURE__ */
|
|
181
|
-
}), /* @__PURE__ */
|
|
250
|
+
children: /* @__PURE__ */ e("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
|
|
251
|
+
}), /* @__PURE__ */ e("svg", {
|
|
182
252
|
className: "tintora-checkbox__dash",
|
|
183
253
|
width: "14",
|
|
184
254
|
height: "14",
|
|
@@ -186,58 +256,58 @@ function b({ checked: e, defaultChecked: t, onCheckedChange: n, indeterminate: r
|
|
|
186
256
|
fill: "none",
|
|
187
257
|
strokeWidth: "3.2",
|
|
188
258
|
strokeLinecap: "round",
|
|
189
|
-
children: /* @__PURE__ */
|
|
259
|
+
children: /* @__PURE__ */ e("path", { d: "M6 12h12" })
|
|
190
260
|
})]
|
|
191
261
|
})]
|
|
192
262
|
});
|
|
193
263
|
}
|
|
194
264
|
//#endregion
|
|
195
265
|
//#region src/Chip/Chip.tsx
|
|
196
|
-
function
|
|
197
|
-
return /* @__PURE__ */
|
|
198
|
-
...
|
|
266
|
+
function w({ children: t, selected: n, className: r, "aria-pressed": i, ...a }) {
|
|
267
|
+
return /* @__PURE__ */ e("button", {
|
|
268
|
+
...a,
|
|
199
269
|
type: "button",
|
|
200
|
-
className: d("tintora-chip",
|
|
201
|
-
"aria-pressed":
|
|
202
|
-
children:
|
|
270
|
+
className: d("tintora-chip", r),
|
|
271
|
+
"aria-pressed": n ?? i,
|
|
272
|
+
children: t
|
|
203
273
|
});
|
|
204
274
|
}
|
|
205
275
|
//#endregion
|
|
206
276
|
//#region src/Dot/Dot.tsx
|
|
207
|
-
function
|
|
208
|
-
return /* @__PURE__ */
|
|
209
|
-
...
|
|
210
|
-
className: d("tintora-dot", `tintora-dot--${
|
|
211
|
-
role:
|
|
212
|
-
"aria-label":
|
|
213
|
-
"aria-hidden": !
|
|
277
|
+
function T({ variant: t = "unread", label: n, className: r, ...i }) {
|
|
278
|
+
return /* @__PURE__ */ e("span", {
|
|
279
|
+
...i,
|
|
280
|
+
className: d("tintora-dot", `tintora-dot--${t}`, r),
|
|
281
|
+
role: n ? "img" : void 0,
|
|
282
|
+
"aria-label": n,
|
|
283
|
+
"aria-hidden": !n || void 0
|
|
214
284
|
});
|
|
215
285
|
}
|
|
216
286
|
//#endregion
|
|
217
287
|
//#region src/IconButton/IconButton.tsx
|
|
218
|
-
var
|
|
288
|
+
var E = {
|
|
219
289
|
round: "secondary",
|
|
220
290
|
field: "secondary",
|
|
221
291
|
nav: "ghost"
|
|
222
292
|
};
|
|
223
|
-
function
|
|
224
|
-
let
|
|
225
|
-
return /* @__PURE__ */
|
|
226
|
-
...
|
|
227
|
-
variant:
|
|
228
|
-
"aria-current":
|
|
229
|
-
className: d("tintora-icon-button", `tintora-icon-button--${
|
|
230
|
-
...
|
|
231
|
-
children: /* @__PURE__ */
|
|
293
|
+
function D({ icon: t, variant: n = "round", size: r, selected: i, className: a, ...o }) {
|
|
294
|
+
let s = n === "round" ? r ?? "large" : void 0;
|
|
295
|
+
return /* @__PURE__ */ e(y, {
|
|
296
|
+
...o,
|
|
297
|
+
variant: E[n],
|
|
298
|
+
"aria-current": i ? "page" : void 0,
|
|
299
|
+
className: d("tintora-icon-button", `tintora-icon-button--${n}`, s && `tintora-icon-button--${s}`, a),
|
|
300
|
+
...s && { size: s },
|
|
301
|
+
children: /* @__PURE__ */ e("span", {
|
|
232
302
|
className: "tintora-icon-button__icon",
|
|
233
303
|
"aria-hidden": "true",
|
|
234
|
-
children:
|
|
304
|
+
children: t
|
|
235
305
|
})
|
|
236
306
|
});
|
|
237
307
|
}
|
|
238
308
|
//#endregion
|
|
239
309
|
//#region src/Modal/Modal.tsx
|
|
240
|
-
var
|
|
310
|
+
var O = () => /* @__PURE__ */ e("svg", {
|
|
241
311
|
width: "16",
|
|
242
312
|
height: "16",
|
|
243
313
|
viewBox: "0 0 24 24",
|
|
@@ -245,53 +315,53 @@ var T = () => /* @__PURE__ */ c("svg", {
|
|
|
245
315
|
stroke: "currentColor",
|
|
246
316
|
strokeWidth: "2",
|
|
247
317
|
strokeLinecap: "round",
|
|
248
|
-
children: /* @__PURE__ */
|
|
318
|
+
children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
|
|
249
319
|
});
|
|
250
|
-
function
|
|
251
|
-
let b =
|
|
252
|
-
return
|
|
253
|
-
let
|
|
254
|
-
|
|
255
|
-
}, [
|
|
320
|
+
function k({ open: n, onClose: r, title: i, description: s, icon: l, status: u = "info", actions: f, size: p = "md", align: m = "start", role: h = "dialog", closeButton: g = !0, className: _, children: v, ...y }) {
|
|
321
|
+
let b = c(null), x = o(), S = o();
|
|
322
|
+
return a(() => {
|
|
323
|
+
let e = b.current;
|
|
324
|
+
e && (n && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !n && e.open && e.close());
|
|
325
|
+
}, [n]), /* @__PURE__ */ t("dialog", {
|
|
256
326
|
...y,
|
|
257
327
|
ref: b,
|
|
258
328
|
role: h,
|
|
259
329
|
"aria-labelledby": x,
|
|
260
|
-
"aria-describedby":
|
|
330
|
+
"aria-describedby": s ? S : void 0,
|
|
261
331
|
className: d("tintora-modal", `tintora-modal--${p}`, m === "center" && "tintora-modal--center", _),
|
|
262
332
|
onCancel: (e) => {
|
|
263
|
-
e.preventDefault(),
|
|
333
|
+
e.preventDefault(), r();
|
|
264
334
|
},
|
|
265
335
|
onClick: (e) => {
|
|
266
|
-
h === "dialog" && e.target === e.currentTarget &&
|
|
336
|
+
h === "dialog" && e.target === e.currentTarget && r();
|
|
267
337
|
},
|
|
268
338
|
children: [
|
|
269
|
-
|
|
339
|
+
l && /* @__PURE__ */ e("span", {
|
|
270
340
|
className: d("tintora-modal__icon", `tintora-modal__icon--${u}`),
|
|
271
341
|
"aria-hidden": "true",
|
|
272
|
-
children:
|
|
342
|
+
children: l
|
|
273
343
|
}),
|
|
274
|
-
/* @__PURE__ */
|
|
344
|
+
/* @__PURE__ */ t("div", {
|
|
275
345
|
className: "tintora-modal__text",
|
|
276
|
-
children: [/* @__PURE__ */
|
|
346
|
+
children: [/* @__PURE__ */ e("h2", {
|
|
277
347
|
id: x,
|
|
278
348
|
className: "tintora-modal__title",
|
|
279
|
-
children:
|
|
280
|
-
}),
|
|
349
|
+
children: i
|
|
350
|
+
}), s && /* @__PURE__ */ e("p", {
|
|
281
351
|
id: S,
|
|
282
352
|
className: "tintora-modal__description",
|
|
283
|
-
children:
|
|
353
|
+
children: s
|
|
284
354
|
})]
|
|
285
355
|
}),
|
|
286
|
-
g && /* @__PURE__ */
|
|
356
|
+
g && /* @__PURE__ */ e(D, {
|
|
287
357
|
className: "tintora-modal__close",
|
|
288
358
|
size: "medium",
|
|
289
359
|
"aria-label": "Close",
|
|
290
|
-
icon: /* @__PURE__ */
|
|
291
|
-
onClick:
|
|
360
|
+
icon: /* @__PURE__ */ e(O, {}),
|
|
361
|
+
onClick: r
|
|
292
362
|
}),
|
|
293
363
|
v,
|
|
294
|
-
f && /* @__PURE__ */
|
|
364
|
+
f && /* @__PURE__ */ e("div", {
|
|
295
365
|
className: "tintora-modal__actions",
|
|
296
366
|
children: f
|
|
297
367
|
})
|
|
@@ -300,17 +370,17 @@ function E({ open: e, onClose: t, title: n, description: a, icon: s, status: u =
|
|
|
300
370
|
}
|
|
301
371
|
//#endregion
|
|
302
372
|
//#region src/hooks/useLatest.ts
|
|
303
|
-
function
|
|
304
|
-
let t =
|
|
305
|
-
return
|
|
373
|
+
function A(e) {
|
|
374
|
+
let t = c(e);
|
|
375
|
+
return a(() => {
|
|
306
376
|
t.current = e;
|
|
307
377
|
}, [e]), t;
|
|
308
378
|
}
|
|
309
379
|
//#endregion
|
|
310
380
|
//#region src/hooks/useEscapeKey.ts
|
|
311
|
-
function
|
|
312
|
-
let n =
|
|
313
|
-
|
|
381
|
+
function j(e, t) {
|
|
382
|
+
let n = A(t);
|
|
383
|
+
a(() => {
|
|
314
384
|
if (!e) return;
|
|
315
385
|
let t = (e) => {
|
|
316
386
|
e.key === "Escape" && n.current();
|
|
@@ -320,36 +390,36 @@ function O(e, t) {
|
|
|
320
390
|
}
|
|
321
391
|
//#endregion
|
|
322
392
|
//#region src/hooks/useOutsidePress.ts
|
|
323
|
-
function
|
|
324
|
-
let
|
|
325
|
-
|
|
393
|
+
function M(e, t, n) {
|
|
394
|
+
let r = A(n);
|
|
395
|
+
a(() => {
|
|
326
396
|
if (!e) return;
|
|
327
397
|
let n = (e) => {
|
|
328
|
-
t.current?.contains(e.target) ||
|
|
398
|
+
t.current?.contains(e.target) || r.current();
|
|
329
399
|
};
|
|
330
400
|
return document.addEventListener("pointerdown", n), () => document.removeEventListener("pointerdown", n);
|
|
331
401
|
}, [
|
|
332
402
|
e,
|
|
333
403
|
t,
|
|
334
|
-
|
|
404
|
+
r
|
|
335
405
|
]);
|
|
336
406
|
}
|
|
337
407
|
//#endregion
|
|
338
408
|
//#region src/hooks/useTopLayerPosition.ts
|
|
339
|
-
function
|
|
340
|
-
let [i,
|
|
341
|
-
return
|
|
409
|
+
function N(e, t, n, r) {
|
|
410
|
+
let [i, a] = l(null);
|
|
411
|
+
return s(() => {
|
|
342
412
|
let r = t.current;
|
|
343
413
|
if (!e || !r) {
|
|
344
|
-
|
|
414
|
+
a(null);
|
|
345
415
|
return;
|
|
346
416
|
}
|
|
347
417
|
r.showPopover();
|
|
348
|
-
let i = () =>
|
|
418
|
+
let i = () => a(n()), o = (e) => {
|
|
349
419
|
r.contains(e.target) || i();
|
|
350
420
|
};
|
|
351
|
-
return i(), window.addEventListener("scroll",
|
|
352
|
-
window.removeEventListener("scroll",
|
|
421
|
+
return i(), window.addEventListener("scroll", o, !0), window.addEventListener("resize", i), () => {
|
|
422
|
+
window.removeEventListener("scroll", o, !0), window.removeEventListener("resize", i);
|
|
353
423
|
};
|
|
354
424
|
}, [
|
|
355
425
|
e,
|
|
@@ -359,17 +429,17 @@ function A(e, t, n, r) {
|
|
|
359
429
|
}
|
|
360
430
|
//#endregion
|
|
361
431
|
//#region src/utils/placement.ts
|
|
362
|
-
var
|
|
432
|
+
var P = {
|
|
363
433
|
gap: 10,
|
|
364
434
|
margin: 8,
|
|
365
435
|
arrowInset: 12
|
|
366
|
-
},
|
|
436
|
+
}, F = {
|
|
367
437
|
top: "bottom",
|
|
368
438
|
bottom: "top",
|
|
369
439
|
left: "right",
|
|
370
440
|
right: "left"
|
|
371
|
-
},
|
|
372
|
-
function
|
|
441
|
+
}, I = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
|
|
442
|
+
function L(e, t, n, r, { gap: i, margin: a }) {
|
|
373
443
|
let o = (t) => {
|
|
374
444
|
switch (t) {
|
|
375
445
|
case "top": return e.top;
|
|
@@ -378,16 +448,16 @@ function P(e, t, n, r, { gap: i, margin: a }) {
|
|
|
378
448
|
case "right": return r.width - e.right;
|
|
379
449
|
}
|
|
380
450
|
}, s = (n === "top" || n === "bottom" ? t.height : t.width) + i + a, c = o(n);
|
|
381
|
-
return c >= s || o(
|
|
451
|
+
return c >= s || o(F[n]) <= c ? n : F[n];
|
|
382
452
|
}
|
|
383
|
-
function
|
|
453
|
+
function R(e, t, n, r = {
|
|
384
454
|
width: window.innerWidth,
|
|
385
455
|
height: window.innerHeight
|
|
386
456
|
}, i = {}) {
|
|
387
457
|
let a = {
|
|
388
|
-
...
|
|
458
|
+
...P,
|
|
389
459
|
...i
|
|
390
|
-
}, { gap: o, margin: s, arrowInset: c } = a, l =
|
|
460
|
+
}, { gap: o, margin: s, arrowInset: c } = a, l = L(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
|
|
391
461
|
switch (l) {
|
|
392
462
|
case "top":
|
|
393
463
|
d = e.y - t.height - o, f = e.x + e.width / 2 - t.width / 2;
|
|
@@ -400,18 +470,18 @@ function F(e, t, n, r = {
|
|
|
400
470
|
break;
|
|
401
471
|
case "right": d = e.y + e.height / 2 - t.height / 2, f = e.x + e.width + o;
|
|
402
472
|
}
|
|
403
|
-
u ? f =
|
|
473
|
+
u ? f = I(f, s, r.width - t.width - s) : d = I(d, s, r.height - t.height - s);
|
|
404
474
|
let p = u ? e.x + e.width / 2 - f : e.y + e.height / 2 - d, m = u ? t.width : t.height;
|
|
405
475
|
return {
|
|
406
476
|
top: d,
|
|
407
477
|
left: f,
|
|
408
478
|
placement: l,
|
|
409
|
-
arrowOffset:
|
|
479
|
+
arrowOffset: I(p, c, m - c)
|
|
410
480
|
};
|
|
411
481
|
}
|
|
412
482
|
//#endregion
|
|
413
483
|
//#region src/Popover/Popover.tsx
|
|
414
|
-
var
|
|
484
|
+
var z = [
|
|
415
485
|
"button:not([disabled])",
|
|
416
486
|
"[href]",
|
|
417
487
|
"input:not([disabled])",
|
|
@@ -419,14 +489,14 @@ var I = [
|
|
|
419
489
|
"textarea:not([disabled])",
|
|
420
490
|
"[tabindex]:not([tabindex=\"-1\"])"
|
|
421
491
|
].join(", ");
|
|
422
|
-
function
|
|
423
|
-
let _ =
|
|
424
|
-
|
|
492
|
+
function B({ open: r, onOpenChange: i, trigger: l, title: u, children: f, role: p = "dialog", size: m = "md", placement: h = "bottom", className: g }) {
|
|
493
|
+
let _ = o(), v = c(null), y = c(null), b = c(!1), x = () => i(!1);
|
|
494
|
+
j(r, x), M(r, v, x);
|
|
425
495
|
let S = (e) => {
|
|
426
|
-
|
|
427
|
-
}, C =
|
|
496
|
+
l.props.onClick?.(e), e.defaultPrevented || i(!r);
|
|
497
|
+
}, C = N(r, y, () => {
|
|
428
498
|
let e = y.current, t = v.current?.firstElementChild;
|
|
429
|
-
return !e || !t ? null :
|
|
499
|
+
return !e || !t ? null : R(t.getBoundingClientRect(), {
|
|
430
500
|
width: e.offsetWidth,
|
|
431
501
|
height: e.offsetHeight
|
|
432
502
|
}, h, void 0, { gap: 12 });
|
|
@@ -439,24 +509,24 @@ function L({ open: t, onOpenChange: n, trigger: s, title: u, children: f, role:
|
|
|
439
509
|
left: C.left,
|
|
440
510
|
"--tintora-popover-arrow-offset": `${C.arrowOffset}px`
|
|
441
511
|
} : { visibility: "hidden" }, T = C !== null;
|
|
442
|
-
return
|
|
512
|
+
return s(() => {
|
|
443
513
|
let e = y.current;
|
|
444
|
-
|
|
445
|
-
}, [
|
|
446
|
-
if (b.current && !
|
|
514
|
+
r && T && e && (e.querySelector("[data-autofocus]") ?? e.querySelector(z) ?? e).focus();
|
|
515
|
+
}, [r, T]), a(() => {
|
|
516
|
+
if (b.current && !r) {
|
|
447
517
|
let e = document.activeElement;
|
|
448
518
|
(!e || e === document.body) && v.current?.querySelector("*")?.focus();
|
|
449
519
|
}
|
|
450
|
-
b.current =
|
|
451
|
-
}, [
|
|
520
|
+
b.current = r;
|
|
521
|
+
}, [r]), /* @__PURE__ */ t("span", {
|
|
452
522
|
ref: v,
|
|
453
523
|
className: "tintora-popover-root",
|
|
454
|
-
children: [
|
|
524
|
+
children: [n(l, {
|
|
455
525
|
"aria-haspopup": "dialog",
|
|
456
|
-
"aria-expanded":
|
|
457
|
-
"aria-controls":
|
|
526
|
+
"aria-expanded": r,
|
|
527
|
+
"aria-controls": r ? _ : void 0,
|
|
458
528
|
onClick: S
|
|
459
|
-
}),
|
|
529
|
+
}), r && /* @__PURE__ */ e("div", {
|
|
460
530
|
id: _,
|
|
461
531
|
ref: y,
|
|
462
532
|
role: p,
|
|
@@ -471,31 +541,31 @@ function L({ open: t, onOpenChange: n, trigger: s, title: u, children: f, role:
|
|
|
471
541
|
}
|
|
472
542
|
//#endregion
|
|
473
543
|
//#region src/ProgressBar/ProgressBar.tsx
|
|
474
|
-
function
|
|
475
|
-
let
|
|
476
|
-
return /* @__PURE__ */
|
|
477
|
-
className: d("tintora-progress-bar",
|
|
478
|
-
children: [
|
|
544
|
+
function V({ title: n, progress: r, indeterminate: i, valueLabel: a, className: s, "aria-label": c }) {
|
|
545
|
+
let l = o(), u = i ? void 0 : Math.min(100, Math.max(0, Number.isFinite(r) ? r : 0)), f = u === 100, p = a ?? (i ? "Indeterminate" : `${u}%`);
|
|
546
|
+
return /* @__PURE__ */ t("div", {
|
|
547
|
+
className: d("tintora-progress-bar", s),
|
|
548
|
+
children: [n && /* @__PURE__ */ t("div", {
|
|
479
549
|
className: "tintora-progress-bar__header",
|
|
480
|
-
children: [/* @__PURE__ */
|
|
481
|
-
id:
|
|
482
|
-
children:
|
|
483
|
-
}), /* @__PURE__ */
|
|
550
|
+
children: [/* @__PURE__ */ e("span", {
|
|
551
|
+
id: l,
|
|
552
|
+
children: n
|
|
553
|
+
}), /* @__PURE__ */ e("span", {
|
|
484
554
|
className: "tintora-progress-bar__value",
|
|
485
555
|
children: p
|
|
486
556
|
})]
|
|
487
|
-
}), /* @__PURE__ */
|
|
557
|
+
}), /* @__PURE__ */ e("div", {
|
|
488
558
|
role: "progressbar",
|
|
489
|
-
"aria-label":
|
|
490
|
-
"aria-labelledby":
|
|
491
|
-
"aria-valuemin":
|
|
492
|
-
"aria-valuemax":
|
|
559
|
+
"aria-label": c,
|
|
560
|
+
"aria-labelledby": n ? l : void 0,
|
|
561
|
+
"aria-valuemin": i ? void 0 : 0,
|
|
562
|
+
"aria-valuemax": i ? void 0 : 100,
|
|
493
563
|
"aria-valuenow": u,
|
|
494
|
-
"aria-valuetext":
|
|
564
|
+
"aria-valuetext": a,
|
|
495
565
|
className: "tintora-progress-bar__track",
|
|
496
|
-
children: /* @__PURE__ */
|
|
566
|
+
children: /* @__PURE__ */ e("div", {
|
|
497
567
|
className: d("tintora-progress-bar__fill", {
|
|
498
|
-
"tintora-progress-bar__fill--indeterminate":
|
|
568
|
+
"tintora-progress-bar__fill--indeterminate": i,
|
|
499
569
|
"tintora-progress-bar__fill--complete": f
|
|
500
570
|
}),
|
|
501
571
|
style: u === void 0 ? void 0 : { width: `${u}%` }
|
|
@@ -505,28 +575,28 @@ function R({ title: e, progress: t, indeterminate: n, valueLabel: r, className:
|
|
|
505
575
|
}
|
|
506
576
|
//#endregion
|
|
507
577
|
//#region src/Radio/RadioContext.ts
|
|
508
|
-
var
|
|
509
|
-
function
|
|
510
|
-
let e =
|
|
578
|
+
var H = r(null);
|
|
579
|
+
function U() {
|
|
580
|
+
let e = i(H);
|
|
511
581
|
if (!e) throw Error("Radio must be rendered inside a RadioGroup");
|
|
512
582
|
return e;
|
|
513
583
|
}
|
|
514
584
|
//#endregion
|
|
515
585
|
//#region src/Radio/Radio.tsx
|
|
516
|
-
function
|
|
517
|
-
let
|
|
518
|
-
return /* @__PURE__ */
|
|
519
|
-
className: d("tintora-radio",
|
|
520
|
-
children: [/* @__PURE__ */
|
|
521
|
-
...
|
|
586
|
+
function W({ value: n, className: r, disabled: i, ...a }) {
|
|
587
|
+
let o = U();
|
|
588
|
+
return /* @__PURE__ */ t("span", {
|
|
589
|
+
className: d("tintora-radio", r),
|
|
590
|
+
children: [/* @__PURE__ */ e("input", {
|
|
591
|
+
...a,
|
|
522
592
|
type: "radio",
|
|
523
593
|
className: "tintora-radio__input",
|
|
524
|
-
name:
|
|
525
|
-
value:
|
|
526
|
-
checked:
|
|
527
|
-
disabled:
|
|
528
|
-
onChange: () =>
|
|
529
|
-
}), /* @__PURE__ */
|
|
594
|
+
name: o.name,
|
|
595
|
+
value: n,
|
|
596
|
+
checked: o.value === n,
|
|
597
|
+
disabled: i || o.disabled,
|
|
598
|
+
onChange: () => o.select(n)
|
|
599
|
+
}), /* @__PURE__ */ e("span", {
|
|
530
600
|
className: "tintora-radio__circle",
|
|
531
601
|
"aria-hidden": "true"
|
|
532
602
|
})]
|
|
@@ -534,30 +604,30 @@ function V({ value: e, className: t, disabled: n, ...r }) {
|
|
|
534
604
|
}
|
|
535
605
|
//#endregion
|
|
536
606
|
//#region src/Radio/RadioGroup.tsx
|
|
537
|
-
function
|
|
538
|
-
let u =
|
|
539
|
-
return /* @__PURE__ */
|
|
607
|
+
function G({ value: t, defaultValue: n, onValueChange: r, disabled: i = !1, name: a, className: s, ...c }) {
|
|
608
|
+
let u = o(), [f, p] = l(n ?? null), m = t !== void 0, h = m ? t : f;
|
|
609
|
+
return /* @__PURE__ */ e(H.Provider, {
|
|
540
610
|
value: {
|
|
541
611
|
name: a ?? u,
|
|
542
612
|
value: h,
|
|
543
613
|
select: (e) => {
|
|
544
|
-
e !== h && (m || p(e),
|
|
614
|
+
e !== h && (m || p(e), r?.(e));
|
|
545
615
|
},
|
|
546
|
-
disabled:
|
|
616
|
+
disabled: i
|
|
547
617
|
},
|
|
548
|
-
children: /* @__PURE__ */
|
|
549
|
-
...
|
|
618
|
+
children: /* @__PURE__ */ e("div", {
|
|
619
|
+
...c,
|
|
550
620
|
role: "radiogroup",
|
|
551
|
-
className: d("tintora-radio-group",
|
|
621
|
+
className: d("tintora-radio-group", s)
|
|
552
622
|
})
|
|
553
623
|
});
|
|
554
624
|
}
|
|
555
625
|
//#endregion
|
|
556
626
|
//#region src/SearchInput/SearchInput.tsx
|
|
557
|
-
function
|
|
558
|
-
return /* @__PURE__ */
|
|
559
|
-
className: d("tintora-search-input",
|
|
560
|
-
children: [/* @__PURE__ */
|
|
627
|
+
function K({ className: n, disabled: r, ...i }) {
|
|
628
|
+
return /* @__PURE__ */ t("label", {
|
|
629
|
+
className: d("tintora-search-input", r && "tintora-search-input--disabled", n),
|
|
630
|
+
children: [/* @__PURE__ */ t("svg", {
|
|
561
631
|
className: "tintora-search-input__icon",
|
|
562
632
|
viewBox: "0 0 24 24",
|
|
563
633
|
fill: "none",
|
|
@@ -565,107 +635,107 @@ function U({ className: e, disabled: t, ...n }) {
|
|
|
565
635
|
strokeWidth: "2",
|
|
566
636
|
strokeLinecap: "round",
|
|
567
637
|
"aria-hidden": "true",
|
|
568
|
-
children: [/* @__PURE__ */
|
|
638
|
+
children: [/* @__PURE__ */ e("circle", {
|
|
569
639
|
cx: "11",
|
|
570
640
|
cy: "11",
|
|
571
641
|
r: "7"
|
|
572
|
-
}), /* @__PURE__ */
|
|
573
|
-
}), /* @__PURE__ */
|
|
574
|
-
...
|
|
642
|
+
}), /* @__PURE__ */ e("path", { d: "M20 20l-3.5-3.5" })]
|
|
643
|
+
}), /* @__PURE__ */ e("input", {
|
|
644
|
+
...i,
|
|
575
645
|
type: "search",
|
|
576
|
-
disabled:
|
|
646
|
+
disabled: r,
|
|
577
647
|
className: "tintora-search-input__input"
|
|
578
648
|
})]
|
|
579
649
|
});
|
|
580
650
|
}
|
|
581
651
|
//#endregion
|
|
582
652
|
//#region src/Select/SelectContext.ts
|
|
583
|
-
var
|
|
584
|
-
let e =
|
|
653
|
+
var q = r(null), J = () => {
|
|
654
|
+
let e = i(q);
|
|
585
655
|
if (!e) throw Error("SelectOption must be rendered inside a Select");
|
|
586
656
|
return e;
|
|
587
657
|
};
|
|
588
658
|
//#endregion
|
|
589
659
|
//#region src/Select/SelectOption.tsx
|
|
590
|
-
function ee({ label:
|
|
591
|
-
let { select:
|
|
592
|
-
return /* @__PURE__ */
|
|
593
|
-
id:
|
|
660
|
+
function ee({ label: t, value: n, disabled: r }) {
|
|
661
|
+
let { select: i, activate: a, optionId: o, value: s, activeValue: c } = J();
|
|
662
|
+
return /* @__PURE__ */ e("div", {
|
|
663
|
+
id: o(n),
|
|
594
664
|
role: "option",
|
|
595
|
-
"aria-selected":
|
|
596
|
-
"aria-disabled":
|
|
597
|
-
className: d("tintora-select__option",
|
|
598
|
-
onClick: () =>
|
|
599
|
-
onMouseMove: () => !
|
|
600
|
-
children:
|
|
665
|
+
"aria-selected": s === n,
|
|
666
|
+
"aria-disabled": r || void 0,
|
|
667
|
+
className: d("tintora-select__option", c === n && "tintora-select__option--active"),
|
|
668
|
+
onClick: () => i(n),
|
|
669
|
+
onMouseMove: () => !r && a(n),
|
|
670
|
+
children: t
|
|
601
671
|
});
|
|
602
672
|
}
|
|
603
673
|
//#endregion
|
|
604
674
|
//#region src/Select/Select.tsx
|
|
605
|
-
var
|
|
606
|
-
function
|
|
607
|
-
let b =
|
|
608
|
-
for (let
|
|
675
|
+
var Y = 4;
|
|
676
|
+
function X({ defaultValue: n, options: r, disabled: i, value: s, placeholder: u, onValueChange: f, name: p, className: m, onClick: h, onKeyDown: g, onKeyUp: _, "aria-label": v, ...y }) {
|
|
677
|
+
let b = o(), x = c(null), S = c(null), C = c(null), [w, T] = l(n ?? null), [E, D] = l(!1), [O, k] = l(-1), A = s !== void 0, j = A ? s : w, P = r.findIndex((e) => e.value === j), F = (e) => r[e]?.disabled !== !0, I = () => r.findIndex((e, t) => F(t)), L = (e, t) => {
|
|
678
|
+
for (let n = e + t; n >= 0 && n < r.length; n += t) if (F(n)) return n;
|
|
609
679
|
return e;
|
|
610
680
|
}, R = () => {
|
|
611
|
-
let e = L(
|
|
612
|
-
return e ===
|
|
613
|
-
}, z = (e) =>
|
|
614
|
-
|
|
681
|
+
let e = L(r.length, -1);
|
|
682
|
+
return e === r.length ? -1 : e;
|
|
683
|
+
}, z = (e) => r.findIndex((t) => t.value === e), B = () => {
|
|
684
|
+
k(P >= 0 && F(P) ? P : I()), D(!0);
|
|
615
685
|
}, V = () => D(!1), H = (e) => {
|
|
616
686
|
let t = z(e);
|
|
617
|
-
t < 0 || !F(t) || (V(), e !==
|
|
687
|
+
t < 0 || !F(t) || (V(), e !== j && (A || T(e), f?.(e)));
|
|
618
688
|
}, U = (e) => {
|
|
619
689
|
if (g?.(e), e.defaultPrevented) return;
|
|
620
|
-
let { key:
|
|
621
|
-
if (
|
|
690
|
+
let { key: t } = e;
|
|
691
|
+
if (t === "Tab") return V();
|
|
622
692
|
if (!E) {
|
|
623
693
|
[
|
|
624
694
|
"Enter",
|
|
625
695
|
" ",
|
|
626
696
|
"ArrowDown",
|
|
627
697
|
"ArrowUp"
|
|
628
|
-
].includes(
|
|
698
|
+
].includes(t) && (e.preventDefault(), B());
|
|
629
699
|
return;
|
|
630
700
|
}
|
|
631
|
-
let
|
|
701
|
+
let n = {
|
|
632
702
|
ArrowDown: () => O < 0 ? I() : L(O, 1),
|
|
633
703
|
ArrowUp: () => O < 0 ? I() : L(O, -1),
|
|
634
704
|
Home: I,
|
|
635
705
|
End: R
|
|
636
706
|
};
|
|
637
|
-
|
|
638
|
-
},
|
|
707
|
+
t in n ? (e.preventDefault(), k(n[t]())) : t === "Enter" || t === " " ? (e.preventDefault(), O >= 0 ? H(r[O].value) : V()) : t === "Escape" && (e.preventDefault(), V());
|
|
708
|
+
}, W = (e) => {
|
|
639
709
|
_?.(e), e.key === " " && e.preventDefault();
|
|
640
|
-
},
|
|
710
|
+
}, G = N(E, C, () => {
|
|
641
711
|
let e = C.current, t = S.current;
|
|
642
712
|
if (!e || !t) return null;
|
|
643
|
-
let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom +
|
|
713
|
+
let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + Y + r <= window.innerHeight, a = n.top - Y - r >= 0;
|
|
644
714
|
return {
|
|
645
|
-
top: i || !a ? n.bottom +
|
|
715
|
+
top: i || !a ? n.bottom + Y : n.top - Y - r,
|
|
646
716
|
left: n.left,
|
|
647
717
|
minWidth: n.width
|
|
648
718
|
};
|
|
649
|
-
}, []),
|
|
719
|
+
}, []), K = (e) => {
|
|
650
720
|
h?.(e), !e.defaultPrevented && (E ? V() : B());
|
|
651
721
|
};
|
|
652
|
-
|
|
722
|
+
M(E, x, V), a(() => {
|
|
653
723
|
E && O >= 0 && C.current?.children.item(O)?.scrollIntoView?.({ block: "nearest" });
|
|
654
724
|
}, [E, O]);
|
|
655
|
-
let
|
|
656
|
-
return /* @__PURE__ */
|
|
725
|
+
let J = (e) => `${b}-option-${z(e)}`, X = E ? r[O]?.value ?? null : null, Z = r[P]?.label;
|
|
726
|
+
return /* @__PURE__ */ e(q.Provider, {
|
|
657
727
|
value: {
|
|
658
|
-
value:
|
|
728
|
+
value: j,
|
|
659
729
|
activeValue: X,
|
|
660
730
|
select: H,
|
|
661
|
-
optionId:
|
|
662
|
-
activate: (e) =>
|
|
731
|
+
optionId: J,
|
|
732
|
+
activate: (e) => k(z(e))
|
|
663
733
|
},
|
|
664
|
-
children: /* @__PURE__ */
|
|
734
|
+
children: /* @__PURE__ */ t("div", {
|
|
665
735
|
ref: x,
|
|
666
736
|
className: "tintora-select",
|
|
667
737
|
children: [
|
|
668
|
-
/* @__PURE__ */
|
|
738
|
+
/* @__PURE__ */ t("button", {
|
|
669
739
|
...y,
|
|
670
740
|
ref: S,
|
|
671
741
|
type: "button",
|
|
@@ -674,16 +744,16 @@ function q({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u,
|
|
|
674
744
|
"aria-haspopup": "listbox",
|
|
675
745
|
"aria-expanded": E,
|
|
676
746
|
"aria-controls": E ? b : void 0,
|
|
677
|
-
"aria-activedescendant": X === null ? void 0 :
|
|
678
|
-
disabled:
|
|
747
|
+
"aria-activedescendant": X === null ? void 0 : J(X),
|
|
748
|
+
disabled: i,
|
|
679
749
|
className: d("tintora-select__trigger", m),
|
|
680
|
-
onClick:
|
|
750
|
+
onClick: K,
|
|
681
751
|
onKeyDown: U,
|
|
682
|
-
onKeyUp:
|
|
683
|
-
children: [/* @__PURE__ */
|
|
752
|
+
onKeyUp: W,
|
|
753
|
+
children: [/* @__PURE__ */ e("span", {
|
|
684
754
|
className: d("tintora-select__value", Z === void 0 && "tintora-select__value--placeholder"),
|
|
685
755
|
children: Z ?? u
|
|
686
|
-
}), /* @__PURE__ */
|
|
756
|
+
}), /* @__PURE__ */ e("svg", {
|
|
687
757
|
className: "tintora-select__chevron",
|
|
688
758
|
width: "10",
|
|
689
759
|
height: "10",
|
|
@@ -694,25 +764,25 @@ function q({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u,
|
|
|
694
764
|
strokeLinecap: "round",
|
|
695
765
|
strokeLinejoin: "round",
|
|
696
766
|
"aria-hidden": "true",
|
|
697
|
-
children: /* @__PURE__ */
|
|
767
|
+
children: /* @__PURE__ */ e("path", { d: "M6 9l6 6 6-6" })
|
|
698
768
|
})]
|
|
699
769
|
}),
|
|
700
|
-
E && /* @__PURE__ */
|
|
770
|
+
E && /* @__PURE__ */ e("div", {
|
|
701
771
|
ref: C,
|
|
702
772
|
id: b,
|
|
703
773
|
role: "listbox",
|
|
704
774
|
"aria-label": v,
|
|
705
775
|
popover: "manual",
|
|
706
776
|
className: "tintora-select__menu",
|
|
707
|
-
style:
|
|
777
|
+
style: G ?? {},
|
|
708
778
|
onMouseDown: (e) => e.preventDefault(),
|
|
709
|
-
children:
|
|
779
|
+
children: r.map((t) => /* @__PURE__ */ e(ee, { ...t }, t.value))
|
|
710
780
|
}),
|
|
711
|
-
p && /* @__PURE__ */
|
|
781
|
+
p && /* @__PURE__ */ e("input", {
|
|
712
782
|
type: "hidden",
|
|
713
783
|
name: p,
|
|
714
|
-
value:
|
|
715
|
-
disabled:
|
|
784
|
+
value: j ?? "",
|
|
785
|
+
disabled: i
|
|
716
786
|
})
|
|
717
787
|
]
|
|
718
788
|
})
|
|
@@ -720,39 +790,39 @@ function q({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u,
|
|
|
720
790
|
}
|
|
721
791
|
//#endregion
|
|
722
792
|
//#region src/Skeleton/Skeleton.tsx
|
|
723
|
-
function
|
|
724
|
-
let
|
|
725
|
-
...
|
|
726
|
-
...
|
|
793
|
+
function Z({ width: t, height: n, className: r, style: i, ...a }) {
|
|
794
|
+
let o = {
|
|
795
|
+
...t !== void 0 && { width: t },
|
|
796
|
+
...n !== void 0 && { height: n }
|
|
727
797
|
};
|
|
728
|
-
return /* @__PURE__ */
|
|
729
|
-
...
|
|
798
|
+
return /* @__PURE__ */ e("span", {
|
|
799
|
+
...a,
|
|
730
800
|
"aria-hidden": "true",
|
|
731
|
-
className: d("tintora-skeleton",
|
|
801
|
+
className: d("tintora-skeleton", r),
|
|
732
802
|
style: {
|
|
733
|
-
...
|
|
734
|
-
...
|
|
803
|
+
...o,
|
|
804
|
+
...i
|
|
735
805
|
}
|
|
736
806
|
});
|
|
737
807
|
}
|
|
738
808
|
//#endregion
|
|
739
809
|
//#region src/Switch/Switch.tsx
|
|
740
|
-
function
|
|
741
|
-
let
|
|
742
|
-
checked:
|
|
743
|
-
defaultChecked:
|
|
744
|
-
onCheckedChange:
|
|
810
|
+
function te({ checked: n, defaultChecked: r, onCheckedChange: i, className: a, ...o }) {
|
|
811
|
+
let s = S({
|
|
812
|
+
checked: n,
|
|
813
|
+
defaultChecked: r,
|
|
814
|
+
onCheckedChange: i
|
|
745
815
|
});
|
|
746
|
-
return /* @__PURE__ */
|
|
747
|
-
className: d("tintora-switch",
|
|
748
|
-
children: [/* @__PURE__ */
|
|
749
|
-
...
|
|
816
|
+
return /* @__PURE__ */ t("span", {
|
|
817
|
+
className: d("tintora-switch", a),
|
|
818
|
+
children: [/* @__PURE__ */ e("input", {
|
|
819
|
+
...o,
|
|
750
820
|
type: "checkbox",
|
|
751
821
|
role: "switch",
|
|
752
822
|
className: "tintora-switch__input",
|
|
753
|
-
checked:
|
|
754
|
-
onChange:
|
|
755
|
-
}), /* @__PURE__ */
|
|
823
|
+
checked: s.checked,
|
|
824
|
+
onChange: s.onChange
|
|
825
|
+
}), /* @__PURE__ */ e("span", {
|
|
756
826
|
className: "tintora-switch__track",
|
|
757
827
|
"aria-hidden": "true"
|
|
758
828
|
})]
|
|
@@ -760,36 +830,36 @@ function Y({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ..
|
|
|
760
830
|
}
|
|
761
831
|
//#endregion
|
|
762
832
|
//#region src/Tag/Tag.tsx
|
|
763
|
-
function
|
|
764
|
-
return /* @__PURE__ */
|
|
765
|
-
...
|
|
766
|
-
className: d("tintora-tag", `tintora-tag--${
|
|
767
|
-
children:
|
|
833
|
+
function ne({ children: t, className: n, variant: r = "neutral", size: i = "medium", ...a }) {
|
|
834
|
+
return /* @__PURE__ */ e("span", {
|
|
835
|
+
...a,
|
|
836
|
+
className: d("tintora-tag", `tintora-tag--${r}`, `tintora-tag--${i}`, n),
|
|
837
|
+
children: t
|
|
768
838
|
});
|
|
769
839
|
}
|
|
770
840
|
//#endregion
|
|
771
841
|
//#region src/TextField/TextField.tsx
|
|
772
|
-
function
|
|
773
|
-
let p =
|
|
774
|
-
return /* @__PURE__ */
|
|
775
|
-
className: d("tintora-textfield",
|
|
842
|
+
function re({ label: n, hint: r, error: i, id: a, className: s, disabled: c, "aria-describedby": l, "aria-invalid": u, ...f }) {
|
|
843
|
+
let p = o(), m = a ?? p, h = `${m}-message`, g = i ?? r;
|
|
844
|
+
return /* @__PURE__ */ t("div", {
|
|
845
|
+
className: d("tintora-textfield", c && "tintora-textfield--disabled", s),
|
|
776
846
|
children: [
|
|
777
|
-
/* @__PURE__ */
|
|
847
|
+
/* @__PURE__ */ e("label", {
|
|
778
848
|
htmlFor: m,
|
|
779
849
|
className: "tintora-textfield__label",
|
|
780
|
-
children:
|
|
850
|
+
children: n
|
|
781
851
|
}),
|
|
782
|
-
/* @__PURE__ */
|
|
852
|
+
/* @__PURE__ */ e("input", {
|
|
783
853
|
...f,
|
|
784
854
|
id: m,
|
|
785
|
-
disabled:
|
|
855
|
+
disabled: c,
|
|
786
856
|
className: "tintora-textfield__input",
|
|
787
|
-
"aria-invalid":
|
|
788
|
-
"aria-describedby": d(g && h,
|
|
857
|
+
"aria-invalid": i ? !0 : u,
|
|
858
|
+
"aria-describedby": d(g && h, l) || void 0
|
|
789
859
|
}),
|
|
790
|
-
g && /* @__PURE__ */
|
|
860
|
+
g && /* @__PURE__ */ e("span", {
|
|
791
861
|
id: h,
|
|
792
|
-
className: d("tintora-textfield__hint",
|
|
862
|
+
className: d("tintora-textfield__hint", i && "tintora-textfield__hint--error"),
|
|
793
863
|
children: g
|
|
794
864
|
})
|
|
795
865
|
]
|
|
@@ -797,8 +867,8 @@ function Z({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "ari
|
|
|
797
867
|
}
|
|
798
868
|
//#endregion
|
|
799
869
|
//#region src/Toast/ToastIcons.tsx
|
|
800
|
-
function
|
|
801
|
-
return /* @__PURE__ */
|
|
870
|
+
function ie() {
|
|
871
|
+
return /* @__PURE__ */ e("svg", {
|
|
802
872
|
width: "20",
|
|
803
873
|
height: "20",
|
|
804
874
|
viewBox: "0 0 24 24",
|
|
@@ -809,11 +879,11 @@ function te() {
|
|
|
809
879
|
strokeLinejoin: "round",
|
|
810
880
|
"aria-hidden": "true",
|
|
811
881
|
style: { flex: "0 0 auto" },
|
|
812
|
-
children: /* @__PURE__ */
|
|
882
|
+
children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" })
|
|
813
883
|
});
|
|
814
884
|
}
|
|
815
|
-
function
|
|
816
|
-
return /* @__PURE__ */
|
|
885
|
+
function ae() {
|
|
886
|
+
return /* @__PURE__ */ e("svg", {
|
|
817
887
|
width: "20",
|
|
818
888
|
height: "20",
|
|
819
889
|
viewBox: "0 0 24 24",
|
|
@@ -824,11 +894,11 @@ function ne() {
|
|
|
824
894
|
strokeLinejoin: "round",
|
|
825
895
|
"aria-hidden": "true",
|
|
826
896
|
style: { flex: "0 0 auto" },
|
|
827
|
-
children: /* @__PURE__ */
|
|
897
|
+
children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
|
|
828
898
|
});
|
|
829
899
|
}
|
|
830
|
-
function
|
|
831
|
-
return /* @__PURE__ */
|
|
900
|
+
function oe() {
|
|
901
|
+
return /* @__PURE__ */ e("svg", {
|
|
832
902
|
width: "20",
|
|
833
903
|
height: "20",
|
|
834
904
|
viewBox: "0 0 24 24",
|
|
@@ -839,11 +909,11 @@ function re() {
|
|
|
839
909
|
strokeLinejoin: "round",
|
|
840
910
|
"aria-hidden": "true",
|
|
841
911
|
style: { flex: "0 0 auto" },
|
|
842
|
-
children: /* @__PURE__ */
|
|
912
|
+
children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
|
|
843
913
|
});
|
|
844
914
|
}
|
|
845
|
-
function
|
|
846
|
-
return /* @__PURE__ */
|
|
915
|
+
function se() {
|
|
916
|
+
return /* @__PURE__ */ e("svg", {
|
|
847
917
|
width: "20",
|
|
848
918
|
height: "20",
|
|
849
919
|
viewBox: "0 0 24 24",
|
|
@@ -854,11 +924,11 @@ function ie() {
|
|
|
854
924
|
strokeLinejoin: "round",
|
|
855
925
|
"aria-hidden": "true",
|
|
856
926
|
style: { flex: "0 0 auto" },
|
|
857
|
-
children: /* @__PURE__ */
|
|
927
|
+
children: /* @__PURE__ */ e("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" })
|
|
858
928
|
});
|
|
859
929
|
}
|
|
860
|
-
function
|
|
861
|
-
return /* @__PURE__ */
|
|
930
|
+
function ce() {
|
|
931
|
+
return /* @__PURE__ */ e("svg", {
|
|
862
932
|
width: "14",
|
|
863
933
|
height: "14",
|
|
864
934
|
viewBox: "0 0 24 24",
|
|
@@ -867,34 +937,34 @@ function ae() {
|
|
|
867
937
|
strokeWidth: "2.2",
|
|
868
938
|
strokeLinecap: "round",
|
|
869
939
|
"aria-hidden": "true",
|
|
870
|
-
children: /* @__PURE__ */
|
|
940
|
+
children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
|
|
871
941
|
});
|
|
872
942
|
}
|
|
873
943
|
//#endregion
|
|
874
944
|
//#region src/Toast/Toast.tsx
|
|
875
945
|
var Q = {
|
|
876
|
-
success: /* @__PURE__ */
|
|
877
|
-
error: /* @__PURE__ */
|
|
878
|
-
info: /* @__PURE__ */
|
|
879
|
-
warning: /* @__PURE__ */
|
|
946
|
+
success: /* @__PURE__ */ e(ie, {}),
|
|
947
|
+
error: /* @__PURE__ */ e(ae, {}),
|
|
948
|
+
info: /* @__PURE__ */ e(oe, {}),
|
|
949
|
+
warning: /* @__PURE__ */ e(se, {})
|
|
880
950
|
};
|
|
881
|
-
function
|
|
882
|
-
let [m, h] =
|
|
883
|
-
|
|
884
|
-
b.current =
|
|
885
|
-
}, [
|
|
886
|
-
if (
|
|
951
|
+
function le({ status: n, children: r, action: i, onDismiss: o, duration: s = 5e3, timerBar: u = !1, className: f, ...p }) {
|
|
952
|
+
let [m, h] = l(!1), [g, _] = l(!1), v = m || g, y = A(o), b = c(s);
|
|
953
|
+
a(() => {
|
|
954
|
+
b.current = s;
|
|
955
|
+
}, [s]), a(() => {
|
|
956
|
+
if (s <= 0 || v) return;
|
|
887
957
|
let e = Date.now(), t = setTimeout(() => y.current(), b.current);
|
|
888
958
|
return () => {
|
|
889
959
|
clearTimeout(t), b.current -= Date.now() - e;
|
|
890
960
|
};
|
|
891
961
|
}, [
|
|
892
|
-
|
|
962
|
+
s,
|
|
893
963
|
v,
|
|
894
964
|
y
|
|
895
965
|
]);
|
|
896
|
-
let x = u &&
|
|
897
|
-
return /* @__PURE__ */
|
|
966
|
+
let x = u && s > 0, S = { "--tintora-toast-animation-duration": `${s}ms` };
|
|
967
|
+
return /* @__PURE__ */ t("div", {
|
|
898
968
|
...p,
|
|
899
969
|
role: "status",
|
|
900
970
|
className: d("tintora-toast", x && "tintora-toast--timer", v && "tintora-toast--paused", f),
|
|
@@ -911,25 +981,25 @@ function oe({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3
|
|
|
911
981
|
p.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || _(!1);
|
|
912
982
|
},
|
|
913
983
|
children: [
|
|
914
|
-
|
|
915
|
-
/* @__PURE__ */
|
|
984
|
+
n && Q[n],
|
|
985
|
+
/* @__PURE__ */ e("span", {
|
|
916
986
|
className: "tintora-toast__message",
|
|
917
|
-
children:
|
|
987
|
+
children: r
|
|
918
988
|
}),
|
|
919
|
-
|
|
989
|
+
i && /* @__PURE__ */ e("button", {
|
|
920
990
|
type: "button",
|
|
921
991
|
className: "tintora-toast__action",
|
|
922
|
-
onClick:
|
|
923
|
-
children:
|
|
992
|
+
onClick: i.onClick,
|
|
993
|
+
children: i.label
|
|
924
994
|
}),
|
|
925
|
-
/* @__PURE__ */
|
|
995
|
+
/* @__PURE__ */ e("button", {
|
|
926
996
|
type: "button",
|
|
927
997
|
className: "tintora-toast__close",
|
|
928
998
|
"aria-label": "Dismiss",
|
|
929
|
-
onClick:
|
|
930
|
-
children: /* @__PURE__ */
|
|
999
|
+
onClick: o,
|
|
1000
|
+
children: /* @__PURE__ */ e(ce, {})
|
|
931
1001
|
}),
|
|
932
|
-
x && /* @__PURE__ */
|
|
1002
|
+
x && /* @__PURE__ */ e("span", {
|
|
933
1003
|
className: "tintora-toast__progress",
|
|
934
1004
|
style: S
|
|
935
1005
|
})
|
|
@@ -938,20 +1008,20 @@ function oe({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3
|
|
|
938
1008
|
}
|
|
939
1009
|
//#endregion
|
|
940
1010
|
//#region src/Toggle/ToggleContext.ts
|
|
941
|
-
var $ =
|
|
942
|
-
function
|
|
943
|
-
let e =
|
|
1011
|
+
var $ = r(null);
|
|
1012
|
+
function ue() {
|
|
1013
|
+
let e = i($);
|
|
944
1014
|
if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
|
|
945
1015
|
return e;
|
|
946
1016
|
}
|
|
947
1017
|
//#endregion
|
|
948
1018
|
//#region src/Toggle/Toggle.tsx
|
|
949
|
-
function
|
|
950
|
-
let [p, m] =
|
|
1019
|
+
function de({ children: n, value: r, defaultValue: i, onValueChange: a, disabled: o = !1, className: u, ...f }) {
|
|
1020
|
+
let [p, m] = l(i), h = r !== void 0, g = h ? r : p, _ = n.findIndex((e) => e.props.value === g), v = c(null), [y, b] = l({
|
|
951
1021
|
x: 0,
|
|
952
1022
|
width: 0
|
|
953
1023
|
});
|
|
954
|
-
|
|
1024
|
+
s(() => {
|
|
955
1025
|
let e = v.current;
|
|
956
1026
|
if (!e) return;
|
|
957
1027
|
let t = () => {
|
|
@@ -973,20 +1043,20 @@ function ce({ children: e, value: t, defaultValue: n, onValueChange: r, disabled
|
|
|
973
1043
|
"--tintora-toggle-thumb-x": `${y.x}px`,
|
|
974
1044
|
"--tintora-toggle-thumb-width": `${y.width}px`
|
|
975
1045
|
};
|
|
976
|
-
return /* @__PURE__ */
|
|
1046
|
+
return /* @__PURE__ */ e($.Provider, {
|
|
977
1047
|
value: {
|
|
978
1048
|
value: g,
|
|
979
1049
|
select: (e) => {
|
|
980
|
-
e !== g && (h || m(e),
|
|
1050
|
+
e !== g && (h || m(e), a?.(e));
|
|
981
1051
|
},
|
|
982
|
-
disabled:
|
|
1052
|
+
disabled: o
|
|
983
1053
|
},
|
|
984
|
-
children: /* @__PURE__ */
|
|
1054
|
+
children: /* @__PURE__ */ t("div", {
|
|
985
1055
|
...f,
|
|
986
1056
|
role: "group",
|
|
987
1057
|
ref: v,
|
|
988
|
-
className: d("tintora-toggle",
|
|
989
|
-
children: [
|
|
1058
|
+
className: d("tintora-toggle", o && "tintora-toggle--disabled", u),
|
|
1059
|
+
children: [n, /* @__PURE__ */ e("span", {
|
|
990
1060
|
"aria-hidden": "true",
|
|
991
1061
|
className: "tintora-toggle__thumb",
|
|
992
1062
|
style: x
|
|
@@ -996,76 +1066,76 @@ function ce({ children: e, value: t, defaultValue: n, onValueChange: r, disabled
|
|
|
996
1066
|
}
|
|
997
1067
|
//#endregion
|
|
998
1068
|
//#region src/Toggle/ToggleItem.tsx
|
|
999
|
-
function
|
|
1000
|
-
let
|
|
1001
|
-
|
|
1069
|
+
function fe({ value: t, children: n, className: r, disabled: i, onClick: a, ...o }) {
|
|
1070
|
+
let s = ue(), c = (e) => {
|
|
1071
|
+
a?.(e), e.defaultPrevented || s.select(t);
|
|
1002
1072
|
};
|
|
1003
|
-
return /* @__PURE__ */
|
|
1004
|
-
...
|
|
1073
|
+
return /* @__PURE__ */ e("button", {
|
|
1074
|
+
...o,
|
|
1005
1075
|
type: "button",
|
|
1006
|
-
className: d("tintora-toggle__item",
|
|
1007
|
-
"aria-pressed":
|
|
1008
|
-
disabled:
|
|
1009
|
-
onClick:
|
|
1010
|
-
children:
|
|
1076
|
+
className: d("tintora-toggle__item", r),
|
|
1077
|
+
"aria-pressed": s.value === t,
|
|
1078
|
+
disabled: i || s.disabled,
|
|
1079
|
+
onClick: c,
|
|
1080
|
+
children: n
|
|
1011
1081
|
});
|
|
1012
1082
|
}
|
|
1013
1083
|
//#endregion
|
|
1014
1084
|
//#region src/Tooltip/Tooltip.tsx
|
|
1015
|
-
var
|
|
1016
|
-
function
|
|
1017
|
-
let m =
|
|
1085
|
+
var pe = 100;
|
|
1086
|
+
function me({ title: r, content: i, shortcut: s, children: u, className: f, placement: p = "top" }) {
|
|
1087
|
+
let m = o(), [h, g] = l(!1), _ = c(null), v = c(null), y = c(void 0), b = () => {
|
|
1018
1088
|
window.clearTimeout(y.current), g(!0);
|
|
1019
1089
|
}, x = () => {
|
|
1020
|
-
window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1),
|
|
1021
|
-
}, S =
|
|
1090
|
+
window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), pe);
|
|
1091
|
+
}, S = N(h, v, () => {
|
|
1022
1092
|
let e = v.current, t = _.current?.firstElementChild;
|
|
1023
|
-
return !e || !t ? null :
|
|
1093
|
+
return !e || !t ? null : R(t.getBoundingClientRect(), {
|
|
1024
1094
|
width: e.offsetWidth,
|
|
1025
1095
|
height: e.offsetHeight
|
|
1026
1096
|
}, p);
|
|
1027
1097
|
}, [
|
|
1028
1098
|
p,
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1099
|
+
r,
|
|
1100
|
+
i,
|
|
1101
|
+
s
|
|
1032
1102
|
]);
|
|
1033
|
-
|
|
1103
|
+
j(h, () => g(!1)), a(() => () => window.clearTimeout(y.current), []);
|
|
1034
1104
|
let C = S ? {
|
|
1035
1105
|
top: S.top,
|
|
1036
1106
|
left: S.left,
|
|
1037
1107
|
"--tintora-tooltip-arrow-offset": `${S.arrowOffset}px`
|
|
1038
1108
|
} : { visibility: "hidden" };
|
|
1039
|
-
return /* @__PURE__ */
|
|
1109
|
+
return /* @__PURE__ */ t("span", {
|
|
1040
1110
|
ref: _,
|
|
1041
1111
|
className: "tintora-tooltip",
|
|
1042
1112
|
onMouseEnter: b,
|
|
1043
1113
|
onMouseLeave: x,
|
|
1044
1114
|
onFocus: b,
|
|
1045
1115
|
onBlur: x,
|
|
1046
|
-
children: [
|
|
1116
|
+
children: [n(u, { "aria-describedby": d(u.props["aria-describedby"], h && m) || void 0 }), h && /* @__PURE__ */ t("div", {
|
|
1047
1117
|
id: m,
|
|
1048
1118
|
ref: v,
|
|
1049
1119
|
role: "tooltip",
|
|
1050
1120
|
popover: "manual",
|
|
1051
1121
|
style: C,
|
|
1052
|
-
className: d("tintora-tooltip__content", `tintora-tooltip__content--${S?.placement ?? p}`,
|
|
1122
|
+
className: d("tintora-tooltip__content", `tintora-tooltip__content--${S?.placement ?? p}`, r && "tintora-tooltip__content--rich", f),
|
|
1053
1123
|
children: [
|
|
1054
|
-
|
|
1124
|
+
r && /* @__PURE__ */ e("span", {
|
|
1055
1125
|
className: "tintora-tooltip__title",
|
|
1056
|
-
children:
|
|
1126
|
+
children: r
|
|
1057
1127
|
}),
|
|
1058
|
-
/* @__PURE__ */
|
|
1128
|
+
/* @__PURE__ */ e("span", {
|
|
1059
1129
|
className: "tintora-tooltip__text",
|
|
1060
|
-
children:
|
|
1130
|
+
children: i
|
|
1061
1131
|
}),
|
|
1062
|
-
|
|
1132
|
+
s && /* @__PURE__ */ e("kbd", {
|
|
1063
1133
|
className: "tintora-tooltip__shortcut",
|
|
1064
|
-
children:
|
|
1134
|
+
children: s
|
|
1065
1135
|
})
|
|
1066
1136
|
]
|
|
1067
1137
|
})]
|
|
1068
1138
|
});
|
|
1069
1139
|
}
|
|
1070
1140
|
//#endregion
|
|
1071
|
-
export {
|
|
1141
|
+
export { m as Alert, g as Avatar, y as Button, b as Card, C as Checkbox, w as Chip, T as Dot, D as IconButton, k as Modal, B as Popover, V as ProgressBar, W as Radio, G as RadioGroup, K as SearchInput, X as Select, x as SelectableCard, Z as Skeleton, v as Spinner, te as Switch, ne as Tag, re as TextField, le as Toast, de as Toggle, fe as ToggleItem, me as Tooltip };
|