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