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
@@ -0,0 +1,74 @@
1
+ "use client";
2
+ import { clsx as e } from "../utils/clsx.js";
3
+ import { useLatest as t } from "../hooks/useLatest.js";
4
+ /* empty css */
5
+ import { CloseIcon as n, ErrorIcon as r, InfoIcon as i, SuccessIcon as a, WarningIcon as o } from "./ToastIcons.js";
6
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
+ import { useEffect as l, useRef as u, useState as d } from "react";
8
+ //#region src/Toast/Toast.tsx
9
+ var f = {
10
+ success: /* @__PURE__ */ s(a, {}),
11
+ error: /* @__PURE__ */ s(r, {}),
12
+ info: /* @__PURE__ */ s(i, {}),
13
+ warning: /* @__PURE__ */ s(o, {})
14
+ };
15
+ function p({ status: r, children: i, action: a, onDismiss: o, duration: p = 5e3, timerBar: m = !1, className: h, ...g }) {
16
+ let [_, v] = d(!1), [y, b] = d(!1), x = _ || y, S = t(o), C = u(p);
17
+ l(() => {
18
+ C.current = p;
19
+ }, [p]), l(() => {
20
+ if (p <= 0 || x) return;
21
+ let e = Date.now(), t = setTimeout(() => S.current(), C.current);
22
+ return () => {
23
+ clearTimeout(t), C.current -= Date.now() - e;
24
+ };
25
+ }, [
26
+ p,
27
+ x,
28
+ S
29
+ ]);
30
+ let w = m && p > 0, T = { "--tintora-toast-animation-duration": `${p}ms` };
31
+ return /* @__PURE__ */ c("div", {
32
+ ...g,
33
+ role: "status",
34
+ className: e("tintora-toast", w && "tintora-toast--timer", x && "tintora-toast--paused", h),
35
+ onMouseEnter: (e) => {
36
+ g.onMouseEnter?.(e), v(!0);
37
+ },
38
+ onMouseLeave: (e) => {
39
+ g.onMouseLeave?.(e), v(!1);
40
+ },
41
+ onFocus: (e) => {
42
+ g.onFocus?.(e), b(!0);
43
+ },
44
+ onBlur: (e) => {
45
+ g.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || b(!1);
46
+ },
47
+ children: [
48
+ r && f[r],
49
+ /* @__PURE__ */ s("span", {
50
+ className: "tintora-toast__message",
51
+ children: i
52
+ }),
53
+ a && /* @__PURE__ */ s("button", {
54
+ type: "button",
55
+ className: "tintora-toast__action",
56
+ onClick: a.onClick,
57
+ children: a.label
58
+ }),
59
+ /* @__PURE__ */ s("button", {
60
+ type: "button",
61
+ className: "tintora-toast__close",
62
+ "aria-label": "Dismiss",
63
+ onClick: o,
64
+ children: /* @__PURE__ */ s(n, {})
65
+ }),
66
+ w && /* @__PURE__ */ s("span", {
67
+ className: "tintora-toast__progress",
68
+ style: T
69
+ })
70
+ ]
71
+ });
72
+ }
73
+ //#endregion
74
+ export { p as Toast };
@@ -0,0 +1 @@
1
+ let e=require("react/jsx-runtime");function t(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-success)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8`})})}function n(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-error)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6`})})}function r(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-info)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01`})})}function i(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-warning)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`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`})})}function a(){return(0,e.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.2`,strokeLinecap:`round`,"aria-hidden":`true`,children:(0,e.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})})}exports.CloseIcon=a,exports.ErrorIcon=n,exports.InfoIcon=r,exports.SuccessIcon=t,exports.WarningIcon=i;
@@ -0,0 +1,77 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ //#region src/Toast/ToastIcons.tsx
3
+ function t() {
4
+ return /* @__PURE__ */ e("svg", {
5
+ width: "20",
6
+ height: "20",
7
+ viewBox: "0 0 24 24",
8
+ fill: "none",
9
+ stroke: "var(--tintora-toast-icon-success)",
10
+ strokeWidth: "2",
11
+ strokeLinecap: "round",
12
+ strokeLinejoin: "round",
13
+ "aria-hidden": "true",
14
+ style: { flex: "0 0 auto" },
15
+ 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" })
16
+ });
17
+ }
18
+ function n() {
19
+ return /* @__PURE__ */ e("svg", {
20
+ width: "20",
21
+ height: "20",
22
+ viewBox: "0 0 24 24",
23
+ fill: "none",
24
+ stroke: "var(--tintora-toast-icon-error)",
25
+ strokeWidth: "2",
26
+ strokeLinecap: "round",
27
+ strokeLinejoin: "round",
28
+ "aria-hidden": "true",
29
+ style: { flex: "0 0 auto" },
30
+ 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" })
31
+ });
32
+ }
33
+ function r() {
34
+ return /* @__PURE__ */ e("svg", {
35
+ width: "20",
36
+ height: "20",
37
+ viewBox: "0 0 24 24",
38
+ fill: "none",
39
+ stroke: "var(--tintora-toast-icon-info)",
40
+ strokeWidth: "2",
41
+ strokeLinecap: "round",
42
+ strokeLinejoin: "round",
43
+ "aria-hidden": "true",
44
+ style: { flex: "0 0 auto" },
45
+ children: /* @__PURE__ */ e("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
46
+ });
47
+ }
48
+ function i() {
49
+ return /* @__PURE__ */ e("svg", {
50
+ width: "20",
51
+ height: "20",
52
+ viewBox: "0 0 24 24",
53
+ fill: "none",
54
+ stroke: "var(--tintora-toast-icon-warning)",
55
+ strokeWidth: "2",
56
+ strokeLinecap: "round",
57
+ strokeLinejoin: "round",
58
+ "aria-hidden": "true",
59
+ style: { flex: "0 0 auto" },
60
+ 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" })
61
+ });
62
+ }
63
+ function a() {
64
+ return /* @__PURE__ */ e("svg", {
65
+ width: "14",
66
+ height: "14",
67
+ viewBox: "0 0 24 24",
68
+ fill: "none",
69
+ stroke: "currentColor",
70
+ strokeWidth: "2.2",
71
+ strokeLinecap: "round",
72
+ "aria-hidden": "true",
73
+ children: /* @__PURE__ */ e("path", { d: "M18 6L6 18M6 6l12 12" })
74
+ });
75
+ }
76
+ //#endregion
77
+ export { a as CloseIcon, n as ErrorIcon, r as InfoIcon, t as SuccessIcon, i as WarningIcon };
@@ -0,0 +1 @@
1
+ "use client";const e=require("../utils/clsx.cjs");;/* empty css */const t=require("./ToggleContext.cjs");let n=require("react/jsx-runtime"),r=require("react");function i({children:i,value:a,defaultValue:o,onValueChange:s,disabled:c=!1,className:l,...u}){let[d,f]=(0,r.useState)(o),p=a!==void 0,m=p?a:d,h=i.findIndex(e=>e.props.value===m),g=(0,r.useRef)(null),[_,v]=(0,r.useState)({x:0,width:0});(0,r.useLayoutEffect)(()=>{let e=g.current;if(!e)return;let t=()=>{let t=e.children.item(h);if(!t)return;let n={x:t.offsetLeft,width:t.offsetWidth};v(e=>e.x===n.x&&e.width===n.width?e:n)};t();let n=new ResizeObserver(t);return n.observe(e),()=>{n.disconnect()}},[h]);let y={"--tintora-toggle-thumb-x":`${_.x}px`,"--tintora-toggle-thumb-width":`${_.width}px`};return(0,n.jsx)(t.ToggleContext.Provider,{value:{value:m,select:e=>{e!==m&&(p||f(e),s?.(e))},disabled:c},children:(0,n.jsxs)(`div`,{...u,role:`group`,ref:g,className:e.clsx(`tintora-toggle`,c&&`tintora-toggle--disabled`,l),children:[i,(0,n.jsx)(`span`,{"aria-hidden":`true`,className:`tintora-toggle__thumb`,style:y})]})})}exports.Toggle=i;
@@ -0,0 +1,57 @@
1
+ "use client";
2
+ import { clsx as e } from "../utils/clsx.js";
3
+ /* empty css */
4
+ import { ToggleContext as t } from "./ToggleContext.js";
5
+ import { jsx as n, jsxs as r } from "react/jsx-runtime";
6
+ import { useLayoutEffect as i, useRef as a, useState as o } from "react";
7
+ //#region src/Toggle/Toggle.tsx
8
+ function s({ children: s, value: c, defaultValue: l, onValueChange: u, disabled: d = !1, className: f, ...p }) {
9
+ let [m, h] = o(l), g = c !== void 0, _ = g ? c : m, v = s.findIndex((e) => e.props.value === _), y = a(null), [b, x] = o({
10
+ x: 0,
11
+ width: 0
12
+ });
13
+ i(() => {
14
+ let e = y.current;
15
+ if (!e) return;
16
+ let t = () => {
17
+ let t = e.children.item(v);
18
+ if (!t) return;
19
+ let n = {
20
+ x: t.offsetLeft,
21
+ width: t.offsetWidth
22
+ };
23
+ x((e) => e.x === n.x && e.width === n.width ? e : n);
24
+ };
25
+ t();
26
+ let n = new ResizeObserver(t);
27
+ return n.observe(e), () => {
28
+ n.disconnect();
29
+ };
30
+ }, [v]);
31
+ let S = {
32
+ "--tintora-toggle-thumb-x": `${b.x}px`,
33
+ "--tintora-toggle-thumb-width": `${b.width}px`
34
+ };
35
+ return /* @__PURE__ */ n(t.Provider, {
36
+ value: {
37
+ value: _,
38
+ select: (e) => {
39
+ e !== _ && (g || h(e), u?.(e));
40
+ },
41
+ disabled: d
42
+ },
43
+ children: /* @__PURE__ */ r("div", {
44
+ ...p,
45
+ role: "group",
46
+ ref: y,
47
+ className: e("tintora-toggle", d && "tintora-toggle--disabled", f),
48
+ children: [s, /* @__PURE__ */ n("span", {
49
+ "aria-hidden": "true",
50
+ className: "tintora-toggle__thumb",
51
+ style: S
52
+ })]
53
+ })
54
+ });
55
+ }
56
+ //#endregion
57
+ export { s as Toggle };
@@ -0,0 +1 @@
1
+ "use client";let e=require("react");var t=(0,e.createContext)(null);function n(){let n=(0,e.useContext)(t);if(!n)throw Error(`ToggleItem must be rendered inside a Toggle`);return n}exports.ToggleContext=t,exports.useToggleContext=n;
@@ -0,0 +1,11 @@
1
+ "use client";
2
+ import { createContext as e, useContext as t } from "react";
3
+ //#region src/Toggle/ToggleContext.ts
4
+ var n = e(null);
5
+ function r() {
6
+ let e = t(n);
7
+ if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
8
+ return e;
9
+ }
10
+ //#endregion
11
+ export { n as ToggleContext, r as useToggleContext };
@@ -0,0 +1 @@
1
+ "use client";const e=require("../utils/clsx.cjs"),t=require("./ToggleContext.cjs");let n=require("react/jsx-runtime");function r({value:r,children:i,className:a,disabled:o,onClick:s,...c}){let l=t.useToggleContext(),u=e=>{s?.(e),e.defaultPrevented||l.select(r)};return(0,n.jsx)(`button`,{...c,type:`button`,className:e.clsx(`tintora-toggle__item`,a),"aria-pressed":l.value===r,disabled:o||l.disabled,onClick:u,children:i})}exports.ToggleItem=r;
@@ -0,0 +1,21 @@
1
+ "use client";
2
+ import { clsx as e } from "../utils/clsx.js";
3
+ import { useToggleContext as t } from "./ToggleContext.js";
4
+ import { jsx as n } from "react/jsx-runtime";
5
+ //#region src/Toggle/ToggleItem.tsx
6
+ function r({ value: r, children: i, className: a, disabled: o, onClick: s, ...c }) {
7
+ let l = t(), u = (e) => {
8
+ s?.(e), e.defaultPrevented || l.select(r);
9
+ };
10
+ return /* @__PURE__ */ n("button", {
11
+ ...c,
12
+ type: "button",
13
+ className: e("tintora-toggle__item", a),
14
+ "aria-pressed": l.value === r,
15
+ disabled: o || l.disabled,
16
+ onClick: u,
17
+ children: i
18
+ });
19
+ }
20
+ //#endregion
21
+ export { r as ToggleItem };
@@ -0,0 +1 @@
1
+ "use client";const e=require("../utils/clsx.cjs"),t=require("../hooks/useEscapeKey.cjs"),n=require("../hooks/useTopLayerPosition.cjs"),r=require("../utils/placement.cjs");;/* empty css */let i=require("react/jsx-runtime"),a=require("react");var o=100;function s({title:s,content:c,shortcut:l,children:u,className:d,placement:f=`top`}){let p=(0,a.useId)(),[m,h]=(0,a.useState)(!1),g=(0,a.useRef)(null),_=(0,a.useRef)(null),v=(0,a.useRef)(void 0),y=()=>{window.clearTimeout(v.current),h(!0)},b=()=>{window.clearTimeout(v.current),v.current=window.setTimeout(()=>h(!1),o)},x=n.useTopLayerPosition(m,_,()=>{let e=_.current,t=g.current?.firstElementChild;return!e||!t?null:r.getPosition(t.getBoundingClientRect(),{width:e.offsetWidth,height:e.offsetHeight},f)},[f,s,c,l]);t.useEscapeKey(m,()=>h(!1)),(0,a.useEffect)(()=>()=>window.clearTimeout(v.current),[]);let S=x?{top:x.top,left:x.left,"--tintora-tooltip-arrow-offset":`${x.arrowOffset}px`}:{visibility:`hidden`};return(0,i.jsxs)(`span`,{ref:g,className:`tintora-tooltip`,onMouseEnter:y,onMouseLeave:b,onFocus:y,onBlur:b,children:[(0,a.cloneElement)(u,{"aria-describedby":e.clsx(u.props[`aria-describedby`],m&&p)||void 0}),m&&(0,i.jsxs)(`div`,{id:p,ref:_,role:`tooltip`,popover:`manual`,style:S,className:e.clsx(`tintora-tooltip__content`,`tintora-tooltip__content--${x?.placement??f}`,s&&`tintora-tooltip__content--rich`,d),children:[s&&(0,i.jsx)(`span`,{className:`tintora-tooltip__title`,children:s}),(0,i.jsx)(`span`,{className:`tintora-tooltip__text`,children:c}),l&&(0,i.jsx)(`kbd`,{className:`tintora-tooltip__shortcut`,children:l})]})]})}exports.Tooltip=s;
@@ -0,0 +1,66 @@
1
+ "use client";
2
+ import { clsx as e } from "../utils/clsx.js";
3
+ import { useEscapeKey as t } from "../hooks/useEscapeKey.js";
4
+ import { useTopLayerPosition as n } from "../hooks/useTopLayerPosition.js";
5
+ import { getPosition as r } from "../utils/placement.js";
6
+ /* empty css */
7
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
8
+ import { cloneElement as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
9
+ //#region src/Tooltip/Tooltip.tsx
10
+ var d = 100;
11
+ function f({ title: f, content: p, shortcut: m, children: h, className: g, placement: _ = "top" }) {
12
+ let v = c(), [y, b] = u(!1), x = l(null), S = l(null), C = l(void 0), w = () => {
13
+ window.clearTimeout(C.current), b(!0);
14
+ }, T = () => {
15
+ window.clearTimeout(C.current), C.current = window.setTimeout(() => b(!1), d);
16
+ }, E = n(y, S, () => {
17
+ let e = S.current, t = x.current?.firstElementChild;
18
+ return !e || !t ? null : r(t.getBoundingClientRect(), {
19
+ width: e.offsetWidth,
20
+ height: e.offsetHeight
21
+ }, _);
22
+ }, [
23
+ _,
24
+ f,
25
+ p,
26
+ m
27
+ ]);
28
+ t(y, () => b(!1)), s(() => () => window.clearTimeout(C.current), []);
29
+ let D = E ? {
30
+ top: E.top,
31
+ left: E.left,
32
+ "--tintora-tooltip-arrow-offset": `${E.arrowOffset}px`
33
+ } : { visibility: "hidden" };
34
+ return /* @__PURE__ */ a("span", {
35
+ ref: x,
36
+ className: "tintora-tooltip",
37
+ onMouseEnter: w,
38
+ onMouseLeave: T,
39
+ onFocus: w,
40
+ onBlur: T,
41
+ children: [o(h, { "aria-describedby": e(h.props["aria-describedby"], y && v) || void 0 }), y && /* @__PURE__ */ a("div", {
42
+ id: v,
43
+ ref: S,
44
+ role: "tooltip",
45
+ popover: "manual",
46
+ style: D,
47
+ className: e("tintora-tooltip__content", `tintora-tooltip__content--${E?.placement ?? _}`, f && "tintora-tooltip__content--rich", g),
48
+ children: [
49
+ f && /* @__PURE__ */ i("span", {
50
+ className: "tintora-tooltip__title",
51
+ children: f
52
+ }),
53
+ /* @__PURE__ */ i("span", {
54
+ className: "tintora-tooltip__text",
55
+ children: p
56
+ }),
57
+ m && /* @__PURE__ */ i("kbd", {
58
+ className: "tintora-tooltip__shortcut",
59
+ children: m
60
+ })
61
+ ]
62
+ })]
63
+ });
64
+ }
65
+ //#endregion
66
+ export { f as Tooltip };
@@ -0,0 +1 @@
1
+ let e=require("react");function t({checked:t,defaultChecked:n=!1,onCheckedChange:r}){let[i,a]=(0,e.useState)(n),o=t!==void 0;return{checked:o?t:i,onChange:e=>{o||a(e.target.checked),r?.(e.target.checked)}}}exports.useCheckedState=t;
@@ -0,0 +1,13 @@
1
+ import { useState as e } from "react";
2
+ //#region src/hooks/useCheckedState.ts
3
+ function t({ checked: t, defaultChecked: n = !1, onCheckedChange: r }) {
4
+ let [i, a] = e(n), o = t !== void 0;
5
+ return {
6
+ checked: o ? t : i,
7
+ onChange: (e) => {
8
+ o || a(e.target.checked), r?.(e.target.checked);
9
+ }
10
+ };
11
+ }
12
+ //#endregion
13
+ export { t as useCheckedState };
@@ -0,0 +1 @@
1
+ const e=require("./useLatest.cjs");let t=require("react");function n(n,r){let i=e.useLatest(r);(0,t.useEffect)(()=>{if(!n)return;let e=e=>{e.key===`Escape`&&i.current()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[n,i])}exports.useEscapeKey=n;
@@ -0,0 +1,15 @@
1
+ import { useLatest as e } from "./useLatest.js";
2
+ import { useEffect as t } from "react";
3
+ //#region src/hooks/useEscapeKey.ts
4
+ function n(n, r) {
5
+ let i = e(r);
6
+ t(() => {
7
+ if (!n) return;
8
+ let e = (e) => {
9
+ e.key === "Escape" && i.current();
10
+ };
11
+ return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
12
+ }, [n, i]);
13
+ }
14
+ //#endregion
15
+ export { n as useEscapeKey };
@@ -0,0 +1 @@
1
+ let e=require("react");function t(t){let n=(0,e.useRef)(t);return(0,e.useEffect)(()=>{n.current=t},[t]),n}exports.useLatest=t;
@@ -0,0 +1,10 @@
1
+ import { useEffect as e, useRef as t } from "react";
2
+ //#region src/hooks/useLatest.ts
3
+ function n(n) {
4
+ let r = t(n);
5
+ return e(() => {
6
+ r.current = n;
7
+ }, [n]), r;
8
+ }
9
+ //#endregion
10
+ export { n as useLatest };
@@ -0,0 +1 @@
1
+ const e=require("./useLatest.cjs");let t=require("react");function n(n,r,i){let a=e.useLatest(i);(0,t.useEffect)(()=>{if(!n)return;let e=e=>{r.current?.contains(e.target)||a.current()};return document.addEventListener(`pointerdown`,e),()=>document.removeEventListener(`pointerdown`,e)},[n,r,a])}exports.useOutsidePress=n;
@@ -0,0 +1,19 @@
1
+ import { useLatest as e } from "./useLatest.js";
2
+ import { useEffect as t } from "react";
3
+ //#region src/hooks/useOutsidePress.ts
4
+ function n(n, r, i) {
5
+ let a = e(i);
6
+ t(() => {
7
+ if (!n) return;
8
+ let e = (e) => {
9
+ r.current?.contains(e.target) || a.current();
10
+ };
11
+ return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
12
+ }, [
13
+ n,
14
+ r,
15
+ a
16
+ ]);
17
+ }
18
+ //#endregion
19
+ export { n as useOutsidePress };
@@ -0,0 +1 @@
1
+ let e=require("react");function t(t,n,r,i){let[a,o]=(0,e.useState)(null);return(0,e.useLayoutEffect)(()=>{let e=n.current;if(!t||!e){o(null);return}e.showPopover();let i=()=>o(r()),a=t=>{e.contains(t.target)||i()};return i(),window.addEventListener(`scroll`,a,!0),window.addEventListener(`resize`,i),()=>{window.removeEventListener(`scroll`,a,!0),window.removeEventListener(`resize`,i)}},[t,n,...i]),a}exports.useTopLayerPosition=t;
@@ -0,0 +1,25 @@
1
+ import { useLayoutEffect as e, useState as t } from "react";
2
+ //#region src/hooks/useTopLayerPosition.ts
3
+ function n(n, r, i, a) {
4
+ let [o, s] = t(null);
5
+ return e(() => {
6
+ let e = r.current;
7
+ if (!n || !e) {
8
+ s(null);
9
+ return;
10
+ }
11
+ e.showPopover();
12
+ let t = () => s(i()), a = (n) => {
13
+ e.contains(n.target) || t();
14
+ };
15
+ return t(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", t), () => {
16
+ window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", t);
17
+ };
18
+ }, [
19
+ n,
20
+ r,
21
+ ...a
22
+ ]), o;
23
+ }
24
+ //#endregion
25
+ export { n as useTopLayerPosition };
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("react");function n(e){var t,r,i=``;if(typeof e==`string`||typeof e==`number`)i+=e;else if(typeof e==`object`){if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(r=n(e[t]))&&(i&&(i+=` `),i+=r)}else for(r in e)e[r]&&(i&&(i+=` `),i+=r)}return i}function r(){for(var e,t,r=0,i=``,a=arguments.length;r<a;r++)(e=arguments[r])&&(t=n(e))&&(i&&(i+=` `),i+=t);return i}var i={info:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01`}),success:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8`}),warning:(0,e.jsx)(`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`}),error:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6`})},a=({status:t})=>(0,e.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-status-${t}-fg)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`,marginTop:1},children:i[t]});function o({status:t=`info`,variant:n=`alert`,title:i,children:o,action:s,onDismiss:c,className:l,...u}){return(0,e.jsxs)(`div`,{...u,role:n===`alert`&&t===`error`?`alert`:`status`,className:r(`tintora-alert`,n===`announcement`?`tintora-alert--announcement`:`tintora-alert--${t}`,l),children:[n===`alert`&&(0,e.jsx)(a,{status:t}),(0,e.jsxs)(`div`,{className:r(`tintora-alert__content`,n===`announcement`&&`tintora-alert__content--announcement`),children:[i&&(0,e.jsx)(`span`,{className:`tintora-alert__content__title`,children:i}),o&&(0,e.jsx)(`span`,{className:`tintora-alert__content__sub-title`,children:o}),s&&(0,e.jsx)(`button`,{type:`button`,onClick:s.onClick,className:r(`tintora-alert__content__action`,n===`alert`&&`tintora-alert__content__action--${t}`),children:s.label})]}),n===`alert`&&c&&(0,e.jsx)(`button`,{type:`button`,"aria-label":`Dismiss`,className:`tintora-alert__close`,onClick:c,children:(0,e.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,"aria-hidden":`true`,children:(0,e.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})})})]})}function s(e){if(!e.length)return``;let t=e.trim().split(/\s+/).map(e=>e.match(/\p{L}\p{M}*/u)?.[0]).filter(e=>!!e);return`${t[0]??``}${t.length>1?t.at(-1)??``:``}`.toLocaleUpperCase()}function c({name:n,src:i,size:a=`medium`,className:o,...c}){let[l,u]=(0,t.useState)(),d=!!i&&i!==l;return(0,e.jsx)(`span`,{role:`img`,"aria-label":n,...c,className:r(`tintora-avatar`,`tintora-avatar--${a}`,o),children:d?(0,e.jsx)(`img`,{src:i,alt:``,onError:()=>u(i)}):s(n)})}function l(e,t){if(e.target!==e.currentTarget)return;let{left:n,right:r,top:i,bottom:a}=e.currentTarget.getBoundingClientRect();(e.clientX<n||e.clientX>r||e.clientY<i||e.clientY>a)&&t()}var u=e=>typeof e==`number`?`${e}px`:e;function d({open:n,from:i=`right`,width:a,height:o,children:s,onClose:c,className:d,...f}){let p=(0,t.useRef)(null);(0,t.useEffect)(()=>{let e=p.current;e&&(n&&!e.open?(e.showModal(),e.querySelector(`[data-autofocus]`)?.focus()):!n&&e.open&&e.close())},[n]);let m={...f.style,...a!==void 0&&{"--tintora-drawer-width":u(a)},...o!==void 0&&{"--tintora-drawer-height":u(o)}};return(0,e.jsx)(`dialog`,{...f,ref:p,className:r(`tintora-drawer`,`tintora-drawer--from-${i}`,d),onCancel:e=>{e.preventDefault(),c()},onClick:e=>l(e,c),style:m,children:s})}function f({title:n,children:i,className:a,...o}){let s=(0,t.useId)();return(0,e.jsxs)(d,{...o,from:`bottom`,"aria-labelledby":s,className:r(`tintora-bottom-sheet`,a),children:[(0,e.jsx)(`span`,{className:`tintora-bottom-sheet__grabber`,"aria-hidden":`true`}),(0,e.jsx)(`div`,{id:s,className:`tintora-bottom-sheet__title`,children:n}),i]})}function p({selected:t=!1,className:n,children:i,...a}){return(0,e.jsxs)(`button`,{type:`button`,...a,"aria-pressed":t,className:r(`tintora-bottom-sheet__option`,n),children:[(0,e.jsx)(`span`,{children:i}),(0,e.jsx)(`svg`,{className:`tintora-bottom-sheet__check`,width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.4`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,e.jsx)(`path`,{d:`M5 12.5l4.5 4.5L19 7.5`})})]})}var m={small:{width:16,height:16,strokeWidth:3.5},medium:{width:24,height:24,strokeWidth:3},large:{width:40,height:40,strokeWidth:2.4}};function h({size:t=`medium`,color:n=`accent`}){let{width:r,height:i,strokeWidth:a}=m[t];return(0,e.jsxs)(`svg`,{className:`tintora-spinner`,width:r,height:i,viewBox:`0 0 24 24`,fill:`none`,role:`img`,"aria-label":`Loading`,children:[(0,e.jsx)(`circle`,{cx:`12`,cy:`12`,r:`9`,stroke:`currentColor`,strokeOpacity:n===`accent`?.25:.35,strokeWidth:a}),(0,e.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9`,stroke:n===`accent`?`var(--tintora-control-fill)`:`currentColor`,strokeWidth:a,strokeLinecap:`round`})]})}function g({children:t,className:n,variant:i,size:a=`medium`,leadingIcon:o,trailingIcon:s,type:c=`button`,loading:l=!1,disabled:u,...d}){return(0,e.jsxs)(`button`,{type:c,className:r(`tintora-button`,`tintora-button--${i}`,`tintora-button--${a}`,{"tintora-button--leading-icon":!!o||l,"tintora-button--loading":l,"tintora-button--trailing-icon":!!s},n),disabled:u||l,"aria-busy":l||void 0,...d,children:[l&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:(0,e.jsx)(h,{size:`small`,color:`current`})}),!l&&o&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:o}),t,s&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:s})]})}function _({as:t=`article`,variant:n=`surface`,className:i,...a}){return(0,e.jsx)(t,{...a,className:r(`tintora-card`,`tintora-card--${n}`,i)})}function v({selected:t=!1,className:n,...i}){return(0,e.jsx)(`button`,{...i,type:`button`,"aria-pressed":t,className:r(`tintora-card`,`tintora-card--surface`,`tintora-card--selectable`,t&&`tintora-card--selected`,n)})}function y({checked:e,defaultChecked:n=!1,onCheckedChange:r}){let[i,a]=(0,t.useState)(n),o=e!==void 0;return{checked:o?e:i,onChange:e=>{o||a(e.target.checked),r?.(e.target.checked)}}}function b({checked:n,defaultChecked:i,onCheckedChange:a,indeterminate:o=!1,className:s,...c}){let l=(0,t.useRef)(null),u=y({checked:n,defaultChecked:i,onCheckedChange:a});return(0,t.useLayoutEffect)(()=>{l.current&&(l.current.indeterminate=o)}),(0,e.jsxs)(`span`,{className:r(`tintora-checkbox`,s),children:[(0,e.jsx)(`input`,{...c,ref:l,type:`checkbox`,className:`tintora-checkbox__input`,checked:u.checked,onChange:u.onChange}),(0,e.jsxs)(`span`,{className:`tintora-checkbox__box`,"aria-hidden":`true`,children:[(0,e.jsx)(`svg`,{className:`tintora-checkbox__check`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,e.jsx)(`path`,{d:`M5 12.5l4.5 4.5L19 7.5`})}),(0,e.jsx)(`svg`,{className:`tintora-checkbox__dash`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,children:(0,e.jsx)(`path`,{d:`M6 12h12`})})]})]})}function x({children:t,selected:n,className:i,"aria-pressed":a,...o}){return(0,e.jsx)(`button`,{...o,type:`button`,className:r(`tintora-chip`,i),"aria-pressed":n??a,children:t})}function S({variant:t=`unread`,label:n,className:i,...a}){return(0,e.jsx)(`span`,{...a,className:r(`tintora-dot`,`tintora-dot--${t}`,i),role:n?`img`:void 0,"aria-label":n,"aria-hidden":!n||void 0})}var C={round:`secondary`,field:`secondary`,nav:`ghost`};function w({icon:t,variant:n=`round`,size:i,selected:a,className:o,...s}){let c=n===`round`?i??`large`:void 0;return(0,e.jsx)(g,{...s,variant:C[n],"aria-current":a?`page`:void 0,className:r(`tintora-icon-button`,`tintora-icon-button--${n}`,c&&`tintora-icon-button--${c}`,o),...c&&{size:c},children:(0,e.jsx)(`span`,{className:`tintora-icon-button__icon`,"aria-hidden":`true`,children:t})})}var T=()=>(0,e.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,children:(0,e.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})});function E({open:n,onClose:i,title:a,description:o,icon:s,status:c=`info`,actions:u,size:d=`md`,align:f=`start`,role:p=`dialog`,closeButton:m=!0,className:h,children:g,..._}){let v=(0,t.useRef)(null),y=(0,t.useId)(),b=(0,t.useId)();return(0,t.useEffect)(()=>{let e=v.current;e&&(n&&!e.open?(e.showModal(),e.querySelector(`[data-autofocus]`)?.focus()):!n&&e.open&&e.close())},[n]),(0,e.jsxs)(`dialog`,{..._,ref:v,role:p,"aria-labelledby":y,"aria-describedby":o?b:void 0,className:r(`tintora-modal`,`tintora-modal--${d}`,f===`center`&&`tintora-modal--center`,h),onCancel:e=>{e.preventDefault(),i()},onClick:e=>{p===`dialog`&&l(e,i)},children:[s&&(0,e.jsx)(`span`,{className:r(`tintora-modal__icon`,`tintora-modal__icon--${c}`),"aria-hidden":`true`,children:s}),(0,e.jsxs)(`div`,{className:`tintora-modal__text`,children:[(0,e.jsx)(`h2`,{id:y,className:`tintora-modal__title`,children:a}),o&&(0,e.jsx)(`p`,{id:b,className:`tintora-modal__description`,children:o})]}),m&&(0,e.jsx)(w,{className:`tintora-modal__close`,size:`medium`,"aria-label":`Close`,icon:(0,e.jsx)(T,{}),onClick:i}),g,u&&(0,e.jsx)(`div`,{className:`tintora-modal__actions`,children:u})]})}function D(e){let n=(0,t.useRef)(e);return(0,t.useEffect)(()=>{n.current=e},[e]),n}function O(e,n){let r=D(n);(0,t.useEffect)(()=>{if(!e)return;let t=e=>{e.key===`Escape`&&r.current()};return document.addEventListener(`keydown`,t),()=>document.removeEventListener(`keydown`,t)},[e,r])}function k(e,n,r){let i=D(r);(0,t.useEffect)(()=>{if(!e)return;let t=e=>{n.current?.contains(e.target)||i.current()};return document.addEventListener(`pointerdown`,t),()=>document.removeEventListener(`pointerdown`,t)},[e,n,i])}function A(e,n,r,i){let[a,o]=(0,t.useState)(null);return(0,t.useLayoutEffect)(()=>{let t=n.current;if(!e||!t){o(null);return}t.showPopover();let i=()=>o(r()),a=e=>{t.contains(e.target)||i()};return i(),window.addEventListener(`scroll`,a,!0),window.addEventListener(`resize`,i),()=>{window.removeEventListener(`scroll`,a,!0),window.removeEventListener(`resize`,i)}},[e,n,...i]),a}var j={gap:10,margin:8,arrowInset:12},M={top:`bottom`,bottom:`top`,left:`right`,right:`left`},N=(e,t,n)=>Math.min(Math.max(e,t),Math.max(t,n));function P(e,t,n,r,{gap:i,margin:a}){let o=t=>{switch(t){case`top`:return e.top;case`bottom`:return r.height-e.bottom;case`left`:return e.left;case`right`:return r.width-e.right}},s=(n===`top`||n===`bottom`?t.height:t.width)+i+a,c=o(n);return c>=s||o(M[n])<=c?n:M[n]}function F(e,t,n,r={width:window.innerWidth,height:window.innerHeight},i={}){let a={...j,...i},{gap:o,margin:s,arrowInset:c}=a,l=P(e,t,n,r,a),u=l===`top`||l===`bottom`,d,f;switch(l){case`top`:d=e.y-t.height-o,f=e.x+e.width/2-t.width/2;break;case`bottom`:d=e.y+e.height+o,f=e.x+e.width/2-t.width/2;break;case`left`:d=e.y+e.height/2-t.height/2,f=e.x-t.width-o;break;case`right`:d=e.y+e.height/2-t.height/2,f=e.x+e.width+o}u?f=N(f,s,r.width-t.width-s):d=N(d,s,r.height-t.height-s);let p=u?e.x+e.width/2-f:e.y+e.height/2-d,m=u?t.width:t.height;return{top:d,left:f,placement:l,arrowOffset:N(p,c,m-c)}}var I=[`button:not([disabled])`,`[href]`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`, `);function L({open:n,onOpenChange:i,trigger:a,title:o,children:s,role:c=`dialog`,size:l=`md`,placement:u=`bottom`,className:d}){let f=(0,t.useId)(),p=(0,t.useRef)(null),m=(0,t.useRef)(null),h=(0,t.useRef)(!1),g=()=>i(!1);O(n,g),k(n,p,g);let _=e=>{a.props.onClick?.(e),e.defaultPrevented||i(!n)},v=A(n,m,()=>{let e=m.current,t=p.current?.firstElementChild;return!e||!t?null:F(t.getBoundingClientRect(),{width:e.offsetWidth,height:e.offsetHeight},u,void 0,{gap:12})},[u,o,s]),y=v?{top:v.top,left:v.left,"--tintora-popover-arrow-offset":`${v.arrowOffset}px`}:{visibility:`hidden`},b=v!==null;return(0,t.useLayoutEffect)(()=>{let e=m.current;n&&b&&e&&(e.querySelector(`[data-autofocus]`)??e.querySelector(I)??e).focus()},[n,b]),(0,t.useEffect)(()=>{if(h.current&&!n){let e=document.activeElement;(!e||e===document.body)&&p.current?.querySelector(`*`)?.focus()}h.current=n},[n]),(0,e.jsxs)(`span`,{ref:p,className:`tintora-popover-root`,children:[(0,t.cloneElement)(a,{"aria-haspopup":`dialog`,"aria-expanded":n,"aria-controls":n?f:void 0,onClick:_}),n&&(0,e.jsx)(`div`,{id:f,ref:m,role:c,"aria-label":o,popover:`manual`,tabIndex:-1,className:r(`tintora-popover`,`tintora-popover--${l}`,`tintora-popover--${v?.placement??u}`,d),style:y,children:s})]})}function R({title:n,progress:i,indeterminate:a,valueLabel:o,className:s,"aria-label":c}){let l=(0,t.useId)(),u=a?void 0:Math.min(100,Math.max(0,Number.isFinite(i)?i:0)),d=u===100,f=o??(a?`Indeterminate`:`${u}%`);return(0,e.jsxs)(`div`,{className:r(`tintora-progress-bar`,s),children:[n&&(0,e.jsxs)(`div`,{className:`tintora-progress-bar__header`,children:[(0,e.jsx)(`span`,{id:l,children:n}),(0,e.jsx)(`span`,{className:`tintora-progress-bar__value`,children:f})]}),(0,e.jsx)(`div`,{role:`progressbar`,"aria-label":c,"aria-labelledby":n?l:void 0,"aria-valuemin":a?void 0:0,"aria-valuemax":a?void 0:100,"aria-valuenow":u,"aria-valuetext":o,className:`tintora-progress-bar__track`,children:(0,e.jsx)(`div`,{className:r(`tintora-progress-bar__fill`,{"tintora-progress-bar__fill--indeterminate":a,"tintora-progress-bar__fill--complete":d}),style:u===void 0?void 0:{width:`${u}%`}})})]})}var z=(0,t.createContext)(null);function B(){let e=(0,t.useContext)(z);if(!e)throw Error(`Radio must be rendered inside a RadioGroup`);return e}function V({value:t,className:n,disabled:i,...a}){let o=B();return(0,e.jsxs)(`span`,{className:r(`tintora-radio`,n),children:[(0,e.jsx)(`input`,{...a,type:`radio`,className:`tintora-radio__input`,name:o.name,value:t,checked:o.value===t,disabled:i||o.disabled,onChange:()=>o.select(t)}),(0,e.jsx)(`span`,{className:`tintora-radio__circle`,"aria-hidden":`true`})]})}function H({value:n,defaultValue:i,onValueChange:a,disabled:o=!1,name:s,className:c,...l}){let u=(0,t.useId)(),[d,f]=(0,t.useState)(i??null),p=n!==void 0,m=p?n:d;return(0,e.jsx)(z.Provider,{value:{name:s??u,value:m,select:e=>{e!==m&&(p||f(e),a?.(e))},disabled:o},children:(0,e.jsx)(`div`,{...l,role:`radiogroup`,className:r(`tintora-radio-group`,c)})})}function U({className:t,disabled:n,...i}){return(0,e.jsxs)(`label`,{className:r(`tintora-search-input`,n&&`tintora-search-input--disabled`,t),children:[(0,e.jsxs)(`svg`,{className:`tintora-search-input__icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,"aria-hidden":`true`,children:[(0,e.jsx)(`circle`,{cx:`11`,cy:`11`,r:`7`}),(0,e.jsx)(`path`,{d:`M20 20l-3.5-3.5`})]}),(0,e.jsx)(`input`,{...i,type:`search`,disabled:n,className:`tintora-search-input__input`})]})}var W=(0,t.createContext)(null),G=()=>{let e=(0,t.useContext)(W);if(!e)throw Error(`SelectOption must be rendered inside a Select`);return e};function K({label:t,value:n,disabled:i}){let{select:a,activate:o,optionId:s,value:c,activeValue:l}=G();return(0,e.jsx)(`div`,{id:s(n),role:`option`,"aria-selected":c===n,"aria-disabled":i||void 0,className:r(`tintora-select__option`,l===n&&`tintora-select__option--active`),onClick:()=>a(n),onMouseMove:()=>!i&&o(n),children:t})}var q=4;function J({defaultValue:n,options:i,disabled:a,value:o,placeholder:s,onValueChange:c,name:l,className:u,onClick:d,onKeyDown:f,onKeyUp:p,"aria-label":m,...h}){let g=(0,t.useId)(),_=(0,t.useRef)(null),v=(0,t.useRef)(null),y=(0,t.useRef)(null),[b,x]=(0,t.useState)(n??null),[S,C]=(0,t.useState)(!1),[w,T]=(0,t.useState)(-1),E=o!==void 0,D=E?o:b,O=i.findIndex(e=>e.value===D),j=e=>i[e]?.disabled!==!0,M=()=>i.findIndex((e,t)=>j(t)),N=(e,t)=>{for(let n=e+t;n>=0&&n<i.length;n+=t)if(j(n))return n;return e},P=()=>{let e=N(i.length,-1);return e===i.length?-1:e},F=e=>i.findIndex(t=>t.value===e),I=()=>{T(O>=0&&j(O)?O:M()),C(!0)},L=()=>C(!1),R=e=>{let t=F(e);t<0||!j(t)||(L(),e!==D&&(E||x(e),c?.(e)))},z=e=>{if(f?.(e),e.defaultPrevented)return;let{key:t}=e;if(t===`Tab`)return L();if(!S){[`Enter`,` `,`ArrowDown`,`ArrowUp`].includes(t)&&(e.preventDefault(),I());return}let n={ArrowDown:()=>w<0?M():N(w,1),ArrowUp:()=>w<0?M():N(w,-1),Home:M,End:P};t in n?(e.preventDefault(),T(n[t]())):t===`Enter`||t===` `?(e.preventDefault(),w>=0?R(i[w].value):L()):t===`Escape`&&(e.preventDefault(),L())},B=e=>{p?.(e),e.key===` `&&e.preventDefault()},V=A(S,y,()=>{let e=y.current,t=v.current;if(!e||!t)return null;let n=t.getBoundingClientRect(),r=e.offsetHeight,i=n.bottom+q+r<=window.innerHeight,a=n.top-q-r>=0;return{top:i||!a?n.bottom+q:n.top-q-r,left:n.left,minWidth:n.width}},[]),H=e=>{d?.(e),!e.defaultPrevented&&(S?L():I())};k(S,_,L),(0,t.useEffect)(()=>{S&&w>=0&&y.current?.children.item(w)?.scrollIntoView?.({block:`nearest`})},[S,w]);let U=e=>`${g}-option-${F(e)}`,G=S?i[w]?.value??null:null,J=i[O]?.label;return(0,e.jsx)(W.Provider,{value:{value:D,activeValue:G,select:R,optionId:U,activate:e=>T(F(e))},children:(0,e.jsxs)(`div`,{ref:_,className:`tintora-select`,children:[(0,e.jsxs)(`button`,{...h,ref:v,type:`button`,role:`combobox`,"aria-label":m,"aria-haspopup":`listbox`,"aria-expanded":S,"aria-controls":S?g:void 0,"aria-activedescendant":G===null?void 0:U(G),disabled:a,className:r(`tintora-select__trigger`,u),onClick:H,onKeyDown:z,onKeyUp:B,children:[(0,e.jsx)(`span`,{className:r(`tintora-select__value`,J===void 0&&`tintora-select__value--placeholder`),children:J??s}),(0,e.jsx)(`svg`,{className:`tintora-select__chevron`,width:`10`,height:`10`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,e.jsx)(`path`,{d:`M6 9l6 6 6-6`})})]}),S&&(0,e.jsx)(`div`,{ref:y,id:g,role:`listbox`,"aria-label":m,popover:`manual`,className:`tintora-select__menu`,style:V??{},onMouseDown:e=>e.preventDefault(),children:i.map(t=>(0,e.jsx)(K,{...t},t.value))}),l&&(0,e.jsx)(`input`,{type:`hidden`,name:l,value:D??``,disabled:a})]})})}function ee({title:t,description:n,children:i,controlPosition:a=`end`,className:o,...s}){return(0,e.jsxs)(`div`,{...s,className:r(`tintora-settings-row`,`tintora-settings-row--control-${a}`,n&&`tintora-settings-row--described`,o),children:[(0,e.jsxs)(`div`,{className:`tintora-settings-row__text`,children:[(0,e.jsx)(`div`,{className:`tintora-settings-row__title`,children:t}),n&&(0,e.jsx)(`div`,{className:`tintora-settings-row__description`,children:n})]}),i]})}function te({width:t,height:n,className:i,style:a,...o}){let s={...t!==void 0&&{width:t},...n!==void 0&&{height:n}};return(0,e.jsx)(`span`,{...o,"aria-hidden":`true`,className:r(`tintora-skeleton`,i),style:{...s,...a}})}function Y({checked:t,defaultChecked:n,onCheckedChange:i,className:a,...o}){let s=y({checked:t,defaultChecked:n,onCheckedChange:i});return(0,e.jsxs)(`span`,{className:r(`tintora-switch`,a),children:[(0,e.jsx)(`input`,{...o,type:`checkbox`,role:`switch`,className:`tintora-switch__input`,checked:s.checked,onChange:s.onChange}),(0,e.jsx)(`span`,{className:`tintora-switch__track`,"aria-hidden":`true`})]})}var X=(0,t.createContext)(null);function Z(){let e=(0,t.useContext)(X);if(!e)throw Error(`Tab must be rendered inside Tabs`);return e}function ne({value:t,className:n,onClick:i,children:a,...o}){let s=Z(),c=s.value===t,l=e=>{i?.(e),e.defaultPrevented||s.select(t)};return(0,e.jsx)(`button`,{...o,type:`button`,role:`tab`,"aria-selected":c,tabIndex:c?0:-1,className:r(`tintora-tab`,n),onClick:l,children:a})}var re=[`ArrowLeft`,`ArrowRight`,`Home`,`End`];function ie({value:n,defaultValue:i,onValueChange:a,variant:o=`segmented`,className:s,children:c,onKeyDown:l,...u}){let[d,f]=(0,t.useState)(i),p=n!==void 0,m=p?n:d,h=e=>{e!==m&&(p||f(e),a?.(e))},g=e=>{if(l?.(e),e.defaultPrevented||!re.includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`[role="tab"]:not(:disabled)`)),n=t.indexOf(e.target);if(n<0)return;e.preventDefault();let r=t.length-1,i=e.key===`Home`?0:e.key===`End`?r:(n+(e.key===`ArrowRight`?1:-1)+t.length)%t.length;t[i].focus(),t[i].click()};return(0,e.jsx)(X.Provider,{value:{value:m,select:h},children:(0,e.jsx)(`div`,{...u,role:`tablist`,className:r(`tintora-tabs`,`tintora-tabs--${o}`,s),onKeyDown:g,children:c})})}function ae({children:t,className:n,variant:i=`neutral`,size:a=`medium`,...o}){return(0,e.jsx)(`span`,{...o,className:r(`tintora-tag`,`tintora-tag--${i}`,`tintora-tag--${a}`,n),children:t})}function oe({label:n,hint:i,error:a,id:o,className:s,disabled:c,"aria-describedby":l,"aria-invalid":u,...d}){let f=(0,t.useId)(),p=o??f,m=`${p}-message`,h=a??i;return(0,e.jsxs)(`div`,{className:r(`tintora-textfield`,c&&`tintora-textfield--disabled`,s),children:[(0,e.jsx)(`label`,{htmlFor:p,className:`tintora-textfield__label`,children:n}),(0,e.jsx)(`input`,{...d,id:p,disabled:c,className:`tintora-textfield__input`,"aria-invalid":a?!0:u,"aria-describedby":r(h&&m,l)||void 0}),h&&(0,e.jsx)(`span`,{id:m,className:r(`tintora-textfield__hint`,a&&`tintora-textfield__hint--error`),children:h})]})}function se(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-success)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8`})})}function ce(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-error)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6`})})}function le(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-info)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01`})})}function Q(){return(0,e.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-warning)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,e.jsx)(`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`})})}function ue(){return(0,e.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.2`,strokeLinecap:`round`,"aria-hidden":`true`,children:(0,e.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})})}var de={success:(0,e.jsx)(se,{}),error:(0,e.jsx)(ce,{}),info:(0,e.jsx)(le,{}),warning:(0,e.jsx)(Q,{})};function fe({status:n,children:i,action:a,onDismiss:o,duration:s=5e3,timerBar:c=!1,className:l,...u}){let[d,f]=(0,t.useState)(!1),[p,m]=(0,t.useState)(!1),h=d||p,g=D(o),_=(0,t.useRef)(s);(0,t.useEffect)(()=>{_.current=s},[s]),(0,t.useEffect)(()=>{if(s<=0||h)return;let e=Date.now(),t=setTimeout(()=>g.current(),_.current);return()=>{clearTimeout(t),_.current-=Date.now()-e}},[s,h,g]);let v=c&&s>0,y={"--tintora-toast-animation-duration":`${s}ms`};return(0,e.jsxs)(`div`,{...u,role:`status`,className:r(`tintora-toast`,v&&`tintora-toast--timer`,h&&`tintora-toast--paused`,l),onMouseEnter:e=>{u.onMouseEnter?.(e),f(!0)},onMouseLeave:e=>{u.onMouseLeave?.(e),f(!1)},onFocus:e=>{u.onFocus?.(e),m(!0)},onBlur:e=>{u.onBlur?.(e),e.currentTarget.contains(e.relatedTarget)||m(!1)},children:[n&&de[n],(0,e.jsx)(`span`,{className:`tintora-toast__message`,children:i}),a&&(0,e.jsx)(`button`,{type:`button`,className:`tintora-toast__action`,onClick:a.onClick,children:a.label}),(0,e.jsx)(`button`,{type:`button`,className:`tintora-toast__close`,"aria-label":`Dismiss`,onClick:o,children:(0,e.jsx)(ue,{})}),v&&(0,e.jsx)(`span`,{className:`tintora-toast__progress`,style:y})]})}var $=(0,t.createContext)(null);function pe(){let e=(0,t.useContext)($);if(!e)throw Error(`ToggleItem must be rendered inside a Toggle`);return e}function me({children:n,value:i,defaultValue:a,onValueChange:o,disabled:s=!1,className:c,...l}){let[u,d]=(0,t.useState)(a),f=i!==void 0,p=f?i:u,m=n.findIndex(e=>e.props.value===p),h=(0,t.useRef)(null),[g,_]=(0,t.useState)({x:0,width:0});(0,t.useLayoutEffect)(()=>{let e=h.current;if(!e)return;let t=()=>{let t=e.children.item(m);if(!t)return;let n={x:t.offsetLeft,width:t.offsetWidth};_(e=>e.x===n.x&&e.width===n.width?e:n)};t();let n=new ResizeObserver(t);return n.observe(e),()=>{n.disconnect()}},[m]);let v={"--tintora-toggle-thumb-x":`${g.x}px`,"--tintora-toggle-thumb-width":`${g.width}px`};return(0,e.jsx)($.Provider,{value:{value:p,select:e=>{e!==p&&(f||d(e),o?.(e))},disabled:s},children:(0,e.jsxs)(`div`,{...l,role:`group`,ref:h,className:r(`tintora-toggle`,s&&`tintora-toggle--disabled`,c),children:[n,(0,e.jsx)(`span`,{"aria-hidden":`true`,className:`tintora-toggle__thumb`,style:v})]})})}function he({value:t,children:n,className:i,disabled:a,onClick:o,...s}){let c=pe(),l=e=>{o?.(e),e.defaultPrevented||c.select(t)};return(0,e.jsx)(`button`,{...s,type:`button`,className:r(`tintora-toggle__item`,i),"aria-pressed":c.value===t,disabled:a||c.disabled,onClick:l,children:n})}var ge=100;function _e({title:n,content:i,shortcut:a,children:o,className:s,placement:c=`top`}){let l=(0,t.useId)(),[u,d]=(0,t.useState)(!1),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useRef)(void 0),h=()=>{window.clearTimeout(m.current),d(!0)},g=()=>{window.clearTimeout(m.current),m.current=window.setTimeout(()=>d(!1),ge)},_=A(u,p,()=>{let e=p.current,t=f.current?.firstElementChild;return!e||!t?null:F(t.getBoundingClientRect(),{width:e.offsetWidth,height:e.offsetHeight},c)},[c,n,i,a]);O(u,()=>d(!1)),(0,t.useEffect)(()=>()=>window.clearTimeout(m.current),[]);let v=_?{top:_.top,left:_.left,"--tintora-tooltip-arrow-offset":`${_.arrowOffset}px`}:{visibility:`hidden`};return(0,e.jsxs)(`span`,{ref:f,className:`tintora-tooltip`,onMouseEnter:h,onMouseLeave:g,onFocus:h,onBlur:g,children:[(0,t.cloneElement)(o,{"aria-describedby":r(o.props[`aria-describedby`],u&&l)||void 0}),u&&(0,e.jsxs)(`div`,{id:l,ref:p,role:`tooltip`,popover:`manual`,style:v,className:r(`tintora-tooltip__content`,`tintora-tooltip__content--${_?.placement??c}`,n&&`tintora-tooltip__content--rich`,s),children:[n&&(0,e.jsx)(`span`,{className:`tintora-tooltip__title`,children:n}),(0,e.jsx)(`span`,{className:`tintora-tooltip__text`,children:i}),a&&(0,e.jsx)(`kbd`,{className:`tintora-tooltip__shortcut`,children:a})]})]})}exports.Alert=o,exports.Avatar=c,exports.BottomSheet=f,exports.BottomSheetOption=p,exports.Button=g,exports.Card=_,exports.Checkbox=b,exports.Chip=x,exports.Dot=S,exports.Drawer=d,exports.IconButton=w,exports.Modal=E,exports.Popover=L,exports.ProgressBar=R,exports.Radio=V,exports.RadioGroup=H,exports.SearchInput=U,exports.Select=J,exports.SelectableCard=v,exports.SettingsRow=ee,exports.Skeleton=te,exports.Spinner=h,exports.Switch=Y,exports.Tab=ne,exports.Tabs=ie,exports.Tag=ae,exports.TextField=oe,exports.Toast=fe,exports.Toggle=me,exports.ToggleItem=he,exports.Tooltip=_e;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css */const e=require("./Alert/Alert2.cjs"),t=require("./Avatar/Avatar2.cjs"),n=require("./Drawer/Drawer2.cjs"),r=require("./BottomSheet/BottomSheet2.cjs"),i=require("./Spinner/Spinner2.cjs"),a=require("./Button/Button2.cjs"),o=require("./Card/Card2.cjs"),s=require("./Checkbox/Checkbox2.cjs"),c=require("./Chip/Chip2.cjs"),l=require("./Dot/Dot2.cjs"),u=require("./IconButton/IconButton2.cjs"),d=require("./Modal/Modal2.cjs"),f=require("./Popover/Popover2.cjs"),p=require("./ProgressBar/ProgressBar2.cjs"),m=require("./Radio/Radio2.cjs"),h=require("./Radio/RadioGroup.cjs"),g=require("./SearchInput/SearchInput2.cjs"),_=require("./Select/Select2.cjs"),v=require("./SettingsRow/SettingsRow2.cjs"),y=require("./Skeleton/Skeleton2.cjs"),b=require("./Switch/Switch2.cjs"),x=require("./Tabs/Tab.cjs"),S=require("./Tabs/Tabs2.cjs"),C=require("./Tag/Tag2.cjs"),w=require("./TextField/TextField2.cjs"),T=require("./Toast/Toast2.cjs"),E=require("./Toggle/Toggle2.cjs"),D=require("./Toggle/ToggleItem.cjs"),O=require("./Tooltip/Tooltip2.cjs");exports.Alert=e.Alert,exports.Avatar=t.Avatar,exports.BottomSheet=r.BottomSheet,exports.BottomSheetOption=r.BottomSheetOption,exports.Button=a.Button,exports.Card=o.Card,exports.Checkbox=s.Checkbox,exports.Chip=c.Chip,exports.Dot=l.Dot,exports.Drawer=n.Drawer,exports.IconButton=u.IconButton,exports.Modal=d.Modal,exports.Popover=f.Popover,exports.ProgressBar=p.ProgressBar,exports.Radio=m.Radio,exports.RadioGroup=h.RadioGroup,exports.SearchInput=g.SearchInput,exports.Select=_.Select,exports.SelectableCard=o.SelectableCard,exports.SettingsRow=v.SettingsRow,exports.Skeleton=y.Skeleton,exports.Spinner=i.Spinner,exports.Switch=b.Switch,exports.Tab=x.Tab,exports.Tabs=S.Tabs,exports.Tag=C.Tag,exports.TextField=w.TextField,exports.Toast=T.Toast,exports.Toggle=E.Toggle,exports.ToggleItem=D.ToggleItem,exports.Tooltip=O.Tooltip;