@companix/uikit 0.0.33 → 0.0.34

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 (91) hide show
  1. package/dist/Avatar/Avatar.scss +64 -0
  2. package/dist/Avatar/helpers.d.ts +10 -0
  3. package/dist/Avatar/index.d.ts +8 -0
  4. package/dist/Avatar/types.d.ts +2 -0
  5. package/dist/Icon/index.d.ts +2 -3
  6. package/dist/Segments/Segments.scss +57 -0
  7. package/dist/Segments/index.d.ts +11 -0
  8. package/dist/bundle.es.js +86 -80
  9. package/dist/bundle.es10.js +78 -39
  10. package/dist/bundle.es11.js +26 -36
  11. package/dist/bundle.es12.js +75 -56
  12. package/dist/bundle.es13.js +39 -19
  13. package/dist/bundle.es14.js +36 -33
  14. package/dist/bundle.es15.js +54 -23
  15. package/dist/bundle.es16.js +21 -45
  16. package/dist/bundle.es17.js +29 -19
  17. package/dist/bundle.es18.js +21 -25
  18. package/dist/bundle.es19.js +45 -38
  19. package/dist/bundle.es2.js +42 -45
  20. package/dist/bundle.es20.js +21 -14
  21. package/dist/bundle.es21.js +28 -33
  22. package/dist/bundle.es22.js +38 -21
  23. package/dist/bundle.es23.js +12 -38
  24. package/dist/bundle.es24.js +32 -114
  25. package/dist/bundle.es25.js +20 -120
  26. package/dist/bundle.es26.js +40 -72
  27. package/dist/bundle.es27.js +115 -32
  28. package/dist/bundle.es28.js +120 -11
  29. package/dist/bundle.es29.js +71 -83
  30. package/dist/bundle.es3.js +2 -8
  31. package/dist/bundle.es30.js +31 -20
  32. package/dist/bundle.es31.js +11 -6
  33. package/dist/bundle.es32.js +83 -32
  34. package/dist/bundle.es33.js +21 -21
  35. package/dist/bundle.es34.js +6 -10
  36. package/dist/bundle.es35.js +33 -23
  37. package/dist/bundle.es36.js +20 -37
  38. package/dist/bundle.es37.js +10 -50
  39. package/dist/bundle.es38.js +22 -40
  40. package/dist/bundle.es39.js +38 -8
  41. package/dist/bundle.es4.js +44 -10
  42. package/dist/bundle.es40.js +48 -21
  43. package/dist/bundle.es41.js +42 -86
  44. package/dist/bundle.es42.js +8 -17
  45. package/dist/bundle.es43.js +24 -19
  46. package/dist/bundle.es44.js +24 -24
  47. package/dist/bundle.es45.js +77 -29
  48. package/dist/bundle.es46.js +18 -3
  49. package/dist/bundle.es47.js +20 -5
  50. package/dist/bundle.es48.js +24 -14
  51. package/dist/bundle.es49.js +39 -14
  52. package/dist/bundle.es5.js +8 -85
  53. package/dist/bundle.es50.js +3 -3
  54. package/dist/bundle.es51.js +5 -3
  55. package/dist/bundle.es52.js +13 -69
  56. package/dist/bundle.es53.js +13 -67
  57. package/dist/bundle.es54.js +3 -70
  58. package/dist/bundle.es55.js +3 -12
  59. package/dist/bundle.es56.js +68 -41
  60. package/dist/bundle.es57.js +67 -14
  61. package/dist/bundle.es58.js +69 -31
  62. package/dist/bundle.es59.js +12 -70
  63. package/dist/bundle.es6.js +11 -85
  64. package/dist/bundle.es60.js +43 -20
  65. package/dist/bundle.es61.js +15 -2
  66. package/dist/bundle.es62.js +32 -14
  67. package/dist/bundle.es63.js +69 -19
  68. package/dist/bundle.es64.js +76 -2
  69. package/dist/bundle.es65.js +49 -21
  70. package/dist/bundle.es66.js +14 -2
  71. package/dist/bundle.es67.js +9 -9
  72. package/dist/bundle.es68.js +2 -76
  73. package/dist/bundle.es69.js +20 -49
  74. package/dist/bundle.es7.js +84 -79
  75. package/dist/bundle.es70.js +2 -2
  76. package/dist/bundle.es71.js +21 -14
  77. package/dist/bundle.es72.js +2 -3
  78. package/dist/bundle.es73.js +20 -3
  79. package/dist/bundle.es74.js +3 -20
  80. package/dist/bundle.es75.js +3 -2
  81. package/dist/bundle.es76.js +14 -20
  82. package/dist/bundle.es77.js +2 -2
  83. package/dist/bundle.es78.js +22 -0
  84. package/dist/bundle.es79.js +4 -0
  85. package/dist/bundle.es8.js +83 -24
  86. package/dist/bundle.es80.js +22 -0
  87. package/dist/bundle.es81.js +4 -0
  88. package/dist/bundle.es9.js +20 -73
  89. package/dist/index.d.ts +6 -0
  90. package/dist/index.scss +2 -0
  91. package/package.json +1 -1
@@ -1,37 +1,88 @@
1
- import { jsx as u } from "react/jsx-runtime";
2
- import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
3
- import { getColorScheme as v, updateDOM as m } from "./bundle.es57.js";
4
- const i = f({
5
- setColorScheme: () => {
1
+ import { jsx as g } from "react/jsx-runtime";
2
+ import { useRef as _, useMemo as b, useState as P, useEffect as j } from "react";
3
+ import { getNum as v } from "@companix/utils-js";
4
+ import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es58.js";
5
+ import { SelectRightElements as w } from "./bundle.es59.js";
6
+ import { Select as y } from "./bundle.es12.js";
7
+ import { Input as z } from "./bundle.es13.js";
8
+ const r = {
9
+ char: ":",
10
+ toString: (s) => s ? q(s, r.char) : "",
11
+ toValue: (s) => {
12
+ const n = s.split(r.char);
13
+ if (n.length === 2) {
14
+ const [e, i] = [v(n[0]), v(n[1])];
15
+ if (e !== null && i !== null && e < 24 && e >= 0 && i < 60 && i >= 0)
16
+ return { hours: e, minutes: i };
17
+ }
18
+ return null;
6
19
  }
7
- }), y = () => w(i), p = (d) => {
8
- const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
9
- a(e), localStorage.setItem(n, e);
20
+ }, U = (s) => {
21
+ const { value: n, onChange: e, clearButton: i, clearButtonIcon: I, disabled: a, ...T } = s, m = _(null), p = _(null), h = b(() => D(10), []), d = b(() => {
22
+ if (n && !n.minutes.toString().endsWith("0")) {
23
+ const t = n.hours * 6 + Math.trunc(n.minutes / 10), u = [...h];
24
+ return u.splice(t + 1, 0, A(n)), u;
25
+ }
26
+ return h;
27
+ }, [h, n]), [o, l] = P(() => r.toString(n)), x = (t) => {
28
+ l(t);
29
+ const u = r.toValue(t);
30
+ u && e?.(u);
31
+ }, B = (t) => {
32
+ a || m.current && m.current.getAttribute("data-state") === "open" && t.preventDefault();
33
+ }, O = () => {
34
+ r.toValue(o) === null && l(r.toString(n ?? null));
35
+ }, R = (t) => {
36
+ e?.(r.toValue(t)), l(t);
37
+ }, k = (t) => {
38
+ t.stopPropagation(), l(""), e?.(null);
10
39
  };
11
- return c(() => {
12
- const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
13
- if (!e)
14
- return;
15
- const t = () => {
16
- r === "system" && m("system");
17
- };
18
- return e.addEventListener?.("change", t), t(), () => {
19
- e.removeEventListener?.("change", t);
20
- };
21
- }, [r]), c(() => {
22
- if (!window)
23
- return;
24
- const e = (t) => {
25
- t.key === n && (t.newValue ? a(t.newValue) : s(o));
26
- };
27
- return window.addEventListener("storage", e), () => {
28
- window.removeEventListener("storage", e);
29
- };
30
- }, [s, o]), c(() => {
31
- m(r);
32
- }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
40
+ return j(() => {
41
+ if (o && o !== "__:__") {
42
+ const [t, u] = o.split(":"), V = (c) => {
43
+ const [C, S] = c.split(""), [E, M] = [C === "_" ? "0" : C, S === "_" ? "0" : S];
44
+ return E + M;
45
+ }, N = [V(t), V(u)].join(":"), f = r.toValue(N);
46
+ if (f) {
47
+ const c = f.hours * 6 + Math.trunc(f.minutes / 10);
48
+ c !== -1 && p.current && p.current.scrollTo(c);
49
+ }
50
+ }
51
+ }, [d, o]), /* @__PURE__ */ g(
52
+ y,
53
+ {
54
+ minimalOptions: !0,
55
+ options: d,
56
+ onChange: R,
57
+ value: o,
58
+ popoverRef: m,
59
+ scrollRef: p,
60
+ disabled: a,
61
+ children: /* @__PURE__ */ g(
62
+ z,
63
+ {
64
+ ...T,
65
+ value: o,
66
+ disabled: a,
67
+ onClick: B,
68
+ onValueChange: x,
69
+ onBlur: O,
70
+ mask: "99:99",
71
+ placeholder: "00:00",
72
+ rightElement: /* @__PURE__ */ g(
73
+ w,
74
+ {
75
+ clearButton: i,
76
+ clearButtonIcon: I,
77
+ value: !!W(o, [":", "_"]),
78
+ onClear: k
79
+ }
80
+ )
81
+ }
82
+ )
83
+ }
84
+ );
33
85
  };
34
86
  export {
35
- p as ThemeProvider,
36
- y as useTheme
87
+ U as TimePicker
37
88
  };
@@ -1,24 +1,24 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import { memo as n } from "react";
3
- const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
4
- "script",
5
- {
6
- suppressHydrationWarning: !0,
7
- dangerouslySetInnerHTML: {
8
- __html: `(${a.toString()})("${t}", "${o}")`
9
- }
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import f from "classnames";
3
+ import { forwardRef as l } from "react";
4
+ const g = l(
5
+ ({ icon: r, className: t, size: i = "m", ...e }, a) => {
6
+ const [n, c, , , m] = r.icon;
7
+ return /* @__PURE__ */ o(
8
+ "svg",
9
+ {
10
+ ref: a,
11
+ "data-prefix": r.prefix,
12
+ "data-icon": r.iconName,
13
+ viewBox: `0 0 ${n} ${c}`,
14
+ className: f(`icon icon-size-${i}`, t),
15
+ ...e,
16
+ role: "img",
17
+ children: /* @__PURE__ */ o(s, { paths: m })
18
+ }
19
+ );
10
20
  }
11
- )), a = (t, o) => {
12
- const [r, c] = ["theme-light", "theme-dark"];
13
- try {
14
- let e = localStorage.getItem(t) || o;
15
- e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
16
- const s = e === "dark" ? c : r;
17
- document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
18
- } catch {
19
- }
20
- };
21
+ ), s = ({ paths: r }) => Array.isArray(r) ? /* @__PURE__ */ o("g", { children: r.map((t, i) => /* @__PURE__ */ o("path", { fill: "currentColor", d: t }, `-d-${i}`)) }) : /* @__PURE__ */ o("path", { fill: "currentColor", d: r });
21
22
  export {
22
- i as ColorSchemeScript,
23
- a as colorSchemeScript
23
+ g as Icon
24
24
  };
@@ -1,13 +1,9 @@
1
- import { useState as s, useEffect as c } from "react";
2
- const l = (e, a) => {
3
- const [t, o] = s(() => {
4
- const r = localStorage.getItem(e);
5
- return r ? JSON.parse(r) : a;
6
- });
7
- return c(() => {
8
- localStorage.setItem(e, JSON.stringify(t));
9
- }, [t]), [t, o];
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { clamp as o, pc as p } from "@companix/utils-browser";
3
+ const i = ({ appearance: a = "primary", value: e }) => {
4
+ const s = 100 * o(e, 0, 1);
5
+ return /* @__PURE__ */ r("div", { "aria-valuemax": 100, "aria-valuemin": 0, role: "progressbar", className: "progress-bar", children: /* @__PURE__ */ r("div", { className: "progress-bar-thumb", "data-appearance": a, style: { width: p(s) } }) });
10
6
  };
11
7
  export {
12
- l as useLocalStorage
8
+ i as ProgressBar
13
9
  };
@@ -1,27 +1,37 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import { hash as m } from "@companix/utils-js";
3
- import { useRef as n, useMemo as s } from "react";
4
- import { Viewport as u } from "./bundle.es58.js";
5
- const h = (t = {}) => {
6
- const e = {
7
- emit: (r) => {
8
- console.error("uninitialized", r);
9
- }
10
- };
11
- return {
12
- show: (r) => {
13
- e.emit({ ...r, id: m() });
14
- },
15
- Viewport: () => {
16
- const r = n(null);
17
- return s(() => {
18
- e.emit = (o) => {
19
- r.current && r.current.showAlert(o);
20
- };
21
- }, []), /* @__PURE__ */ i(u, { ref: r, ...t });
22
- }
1
+ import { jsx as u } from "react/jsx-runtime";
2
+ import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
3
+ import { getColorScheme as v, updateDOM as m } from "./bundle.es61.js";
4
+ const i = f({
5
+ setColorScheme: () => {
6
+ }
7
+ }), y = () => w(i), p = (d) => {
8
+ const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
9
+ a(e), localStorage.setItem(n, e);
23
10
  };
11
+ return c(() => {
12
+ const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
13
+ if (!e)
14
+ return;
15
+ const t = () => {
16
+ r === "system" && m("system");
17
+ };
18
+ return e.addEventListener?.("change", t), t(), () => {
19
+ e.removeEventListener?.("change", t);
20
+ };
21
+ }, [r]), c(() => {
22
+ if (!window)
23
+ return;
24
+ const e = (t) => {
25
+ t.key === n && (t.newValue ? a(t.newValue) : s(o));
26
+ };
27
+ return window.addEventListener("storage", e), () => {
28
+ window.removeEventListener("storage", e);
29
+ };
30
+ }, [s, o]), c(() => {
31
+ m(r);
32
+ }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
24
33
  };
25
34
  export {
26
- h as createAlertAgent
35
+ p as ThemeProvider,
36
+ y as useTheme
27
37
  };
@@ -1,41 +1,24 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import { hash as r } from "@companix/utils-js";
3
- import { Viewport as a } from "./bundle.es59.js";
4
- import { useRef as c, useMemo as h } from "react";
5
- const m = (i = {}) => {
6
- const o = {
7
- showToast: (e) => {
8
- console.error("uninitialized", e);
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { memo as n } from "react";
3
+ const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
4
+ "script",
5
+ {
6
+ suppressHydrationWarning: !0,
7
+ dangerouslySetInnerHTML: {
8
+ __html: `(${a.toString()})("${t}", "${o}")`
9
9
  }
10
- };
11
- return {
12
- api: {
13
- show: (e) => {
14
- const n = e.id ?? r();
15
- return o.showToast({ ...e, id: n }), n;
16
- }
17
- },
18
- Viewport: (e = {}) => {
19
- const n = c(null);
20
- return h(() => {
21
- o.showToast = (s) => {
22
- n.current && n.current.showToast(s);
23
- };
24
- }, []), /* @__PURE__ */ t(
25
- a,
26
- {
27
- ref: n,
28
- align: e.align ?? i.align,
29
- closeIcon: e.closeIcon ?? i.closeIcon,
30
- duration: e.duration ?? i.duration,
31
- gap: e.gap ?? i.gap,
32
- side: e.side ?? i.side,
33
- swipeThreshold: e.swipeThreshold ?? i.swipeThreshold
34
- }
35
- );
36
- }
37
- };
10
+ }
11
+ )), a = (t, o) => {
12
+ const [r, c] = ["theme-light", "theme-dark"];
13
+ try {
14
+ let e = localStorage.getItem(t) || o;
15
+ e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
16
+ const s = e === "dark" ? c : r;
17
+ document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
18
+ } catch {
19
+ }
38
20
  };
39
21
  export {
40
- m as createToaster
22
+ i as ColorSchemeScript,
23
+ a as colorSchemeScript
41
24
  };
@@ -1,53 +1,13 @@
1
- import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
- import * as t from "@radix-ui/react-toast";
3
- import { attr as T } from "@companix/utils-browser";
4
- import { useState as d, useRef as b, useEffect as j, useLayoutEffect as E } from "react";
5
- import { RemoveListener as I } from "./bundle.es47.js";
6
- const m = (o) => {
7
- const [r, u] = d(!0), [p, f] = d(!1), s = b(null), {
8
- appearance: C = "neutral",
9
- icon: a,
10
- title: n,
11
- description: c,
12
- duration: L,
13
- closeIcon: h,
14
- onClosing: v,
15
- onClosed: N,
16
- closable: x = !0,
17
- onInitialized: g
18
- } = o;
19
- j(() => {
20
- f(!0);
21
- }, []), E(() => {
22
- s.current && g(s.current);
23
- }, []);
24
- const R = (i) => {
25
- i || v(), u(i);
26
- };
27
- return /* @__PURE__ */ l(
28
- t.Root,
29
- {
30
- ref: s,
31
- "data-expanded": !0,
32
- "data-appearance": C,
33
- "data-mounted": T(p),
34
- className: "toaster",
35
- open: r,
36
- onOpenChange: R,
37
- duration: L,
38
- children: [
39
- /* @__PURE__ */ e(I, { callback: N }),
40
- a && /* @__PURE__ */ e("div", { className: "toaster-icon", children: a }),
41
- /* @__PURE__ */ l("div", { className: "toaster-content", children: [
42
- n && /* @__PURE__ */ e(t.Title, { className: "toaster-title", children: n }),
43
- c && /* @__PURE__ */ e(t.Description, { className: "toaster-description", children: c })
44
- ] }),
45
- x && /* @__PURE__ */ e(m.Close, { className: "toaster-close toaster-close-placement", closeIcon: h })
46
- ]
47
- }
48
- );
1
+ import { useState as s, useEffect as c } from "react";
2
+ const l = (e, a) => {
3
+ const [t, o] = s(() => {
4
+ const r = localStorage.getItem(e);
5
+ return r ? JSON.parse(r) : a;
6
+ });
7
+ return c(() => {
8
+ localStorage.setItem(e, JSON.stringify(t));
9
+ }, [t]), [t, o];
49
10
  };
50
- m.Close = ({ closeIcon: o, className: r } = {}) => /* @__PURE__ */ e(t.Close, { className: r, children: o ?? /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" }) }) });
51
11
  export {
52
- m as Toast
12
+ l as useLocalStorage
53
13
  };
@@ -1,45 +1,27 @@
1
- import { jsx as r, Fragment as m } from "react/jsx-runtime";
2
- import { useContext as C, createContext as g, useState as h, useEffect as x, useCallback as u } from "react";
3
- import { Dialog as D } from "./bundle.es18.js";
4
- import { hash as v } from "@companix/utils-js";
5
- const $ = (t) => {
6
- const e = {}, n = {}, l = [], c = v();
7
- for (const o in t)
8
- e[o] = () => {
9
- }, n[o] = () => {
10
- }, l.push(() => /* @__PURE__ */ r(O, { Open: e, Close: n, name: o, Content: t[o] }));
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import { hash as m } from "@companix/utils-js";
3
+ import { useRef as n, useMemo as s } from "react";
4
+ import { Viewport as u } from "./bundle.es62.js";
5
+ const h = (t = {}) => {
6
+ const e = {
7
+ emit: (r) => {
8
+ console.error("uninitialized", r);
9
+ }
10
+ };
11
11
  return {
12
- Open: e,
13
- Close: n,
14
- Overlay: () => /* @__PURE__ */ r(m, { children: l.map((o, s) => /* @__PURE__ */ r(o, {}, `popup-${c}-${s}`)) })
12
+ show: (r) => {
13
+ e.emit({ ...r, id: m() });
14
+ },
15
+ Viewport: () => {
16
+ const r = n(null);
17
+ return s(() => {
18
+ e.emit = (o) => {
19
+ r.current && r.current.showAlert(o);
20
+ };
21
+ }, []), /* @__PURE__ */ i(u, { ref: r, ...t });
22
+ }
15
23
  };
16
- }, O = ({ name: t, Open: e, Close: n, Content: l }) => {
17
- const [{ data: c, open: o }, s] = h({ data: null, open: !1 });
18
- x(() => {
19
- e[t] = (a) => {
20
- s({ data: a, open: !0 });
21
- }, n[t] = () => {
22
- o && p();
23
- };
24
- }, []);
25
- const p = u(() => {
26
- s(({ data: a }) => ({ data: a, open: !1 }));
27
- }, []), f = u(() => {
28
- s({ data: null, open: !1 });
29
- }, []), d = u((a) => {
30
- a || p();
31
- }, []);
32
- return c ? /* @__PURE__ */ r(i.Provider, { value: { open: o, onOpenChange: d, onClosed: f }, children: /* @__PURE__ */ r(l, { data: c, close: p }) }) : null;
33
- }, i = g(null), S = () => {
34
- const t = C(i);
35
- if (!t)
36
- throw new Error("Dialog context not provided");
37
- return t;
38
- }, b = ({ children: t, ...e }) => {
39
- const n = S();
40
- return /* @__PURE__ */ r(D, { ...n, ...e, children: t });
41
24
  };
42
25
  export {
43
- b as DialogShell,
44
- $ as createDialogsRegistry
26
+ h as createAlertAgent
45
27
  };
@@ -1,11 +1,41 @@
1
- import { jsx as c } from "react/jsx-runtime";
2
- import { Popover as m } from "./bundle.es7.js";
3
- const i = (o) => {
4
- const r = {};
5
- for (const t in o)
6
- r[t] = ({ data: e, ...n }) => /* @__PURE__ */ c(m, { content: ({ close: s }) => o[t]({ data: e, close: s }), ...n });
7
- return r;
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { hash as r } from "@companix/utils-js";
3
+ import { Viewport as a } from "./bundle.es63.js";
4
+ import { useRef as c, useMemo as h } from "react";
5
+ const m = (i = {}) => {
6
+ const o = {
7
+ showToast: (e) => {
8
+ console.error("uninitialized", e);
9
+ }
10
+ };
11
+ return {
12
+ api: {
13
+ show: (e) => {
14
+ const n = e.id ?? r();
15
+ return o.showToast({ ...e, id: n }), n;
16
+ }
17
+ },
18
+ Viewport: (e = {}) => {
19
+ const n = c(null);
20
+ return h(() => {
21
+ o.showToast = (s) => {
22
+ n.current && n.current.showToast(s);
23
+ };
24
+ }, []), /* @__PURE__ */ t(
25
+ a,
26
+ {
27
+ ref: n,
28
+ align: e.align ?? i.align,
29
+ closeIcon: e.closeIcon ?? i.closeIcon,
30
+ duration: e.duration ?? i.duration,
31
+ gap: e.gap ?? i.gap,
32
+ side: e.side ?? i.side,
33
+ swipeThreshold: e.swipeThreshold ?? i.swipeThreshold
34
+ }
35
+ );
36
+ }
37
+ };
8
38
  };
9
39
  export {
10
- i as createPopoversRegistry
40
+ m as createToaster
11
41
  };
@@ -1,13 +1,47 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import n from "classnames";
3
- const d = ({ size: r = 40, className: t, width: e = 2, color: i = "inherit" }) => /* @__PURE__ */ o(
4
- "div",
5
- {
6
- style: { width: `${r}px`, height: `${r}px`, color: i, borderWidth: `${e}px` },
7
- className: n("spinner-border", t),
8
- role: "status"
9
- }
1
+ import { jsx as e, jsxs as x, Fragment as h } from "react/jsx-runtime";
2
+ import j from "classnames";
3
+ import { Spinner as k } from "./bundle.es6.js";
4
+ import { forwardRef as w } from "react";
5
+ import { attr as r } from "@companix/utils-browser";
6
+ const F = w(
7
+ ({
8
+ children: d,
9
+ fill: l,
10
+ text: i,
11
+ active: c,
12
+ mode: f = "default",
13
+ appearance: s = "neutral",
14
+ size: p = "md",
15
+ align: u,
16
+ icon: m,
17
+ loading: t,
18
+ className: b,
19
+ iconRight: n,
20
+ Component: o = "button",
21
+ ...a
22
+ }, v) => /* @__PURE__ */ e(
23
+ o,
24
+ {
25
+ ref: v,
26
+ className: j("button", b),
27
+ "data-size": p,
28
+ "data-loading": r(t),
29
+ "data-align": t ? "center" : u ?? (m && n ? "left" : "center"),
30
+ "data-appearance": s,
31
+ "data-mode": f,
32
+ "data-fill": r(l),
33
+ "data-active": r(c),
34
+ type: o === "button" ? "button" : void 0,
35
+ ...a,
36
+ onClick: t ?? a.disabled ? void 0 : a.onClick,
37
+ children: t ? /* @__PURE__ */ e(k, { size: 14, width: 2 }) : /* @__PURE__ */ x(h, { children: [
38
+ m,
39
+ (d ?? i) && /* @__PURE__ */ e("span", { className: "button-text", children: i ?? d }),
40
+ n
41
+ ] })
42
+ }
43
+ )
10
44
  );
11
45
  export {
12
- d as Spinner
46
+ F as Button
13
47
  };
@@ -1,26 +1,53 @@
1
- import { useRef as s, useCallback as c } from "react";
2
- const p = () => {
3
- const t = s(null), r = s({ cb: null }), i = c(() => {
4
- if (t.current && t.current.parentElement) {
5
- const e = t.current.parentElement, u = e.style.getPropertyValue("--radix-popper-anchor-width"), n = e.style.getPropertyValue("transform"), o = new MutationObserver(() => {
6
- e.style.transform !== n && e.style.setProperty("transform", n);
7
- });
8
- o.observe(e, {
9
- attributes: !0,
10
- attributeFilter: ["style"]
11
- }), r.current.cb = () => {
12
- o.disconnect();
13
- }, t.current.style.setProperty("--radix-popover-trigger-width", u);
14
- }
15
- }, []), l = c(() => {
16
- r.current.cb && (r.current.cb(), r.current.cb = null);
1
+ import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
+ import * as t from "@radix-ui/react-toast";
3
+ import { attr as T } from "@companix/utils-browser";
4
+ import { useState as d, useRef as b, useEffect as j, useLayoutEffect as E } from "react";
5
+ import { RemoveListener as I } from "./bundle.es51.js";
6
+ const m = (o) => {
7
+ const [r, u] = d(!0), [p, f] = d(!1), s = b(null), {
8
+ appearance: C = "neutral",
9
+ icon: a,
10
+ title: n,
11
+ description: c,
12
+ duration: L,
13
+ closeIcon: h,
14
+ onClosing: v,
15
+ onClosed: N,
16
+ closable: x = !0,
17
+ onInitialized: g
18
+ } = o;
19
+ j(() => {
20
+ f(!0);
21
+ }, []), E(() => {
22
+ s.current && g(s.current);
17
23
  }, []);
18
- return {
19
- popoverRef: t,
20
- handleAnimationEnd: l,
21
- froozePopoverPosition: i
24
+ const R = (i) => {
25
+ i || v(), u(i);
22
26
  };
27
+ return /* @__PURE__ */ l(
28
+ t.Root,
29
+ {
30
+ ref: s,
31
+ "data-expanded": !0,
32
+ "data-appearance": C,
33
+ "data-mounted": T(p),
34
+ className: "toaster",
35
+ open: r,
36
+ onOpenChange: R,
37
+ duration: L,
38
+ children: [
39
+ /* @__PURE__ */ e(I, { callback: N }),
40
+ a && /* @__PURE__ */ e("div", { className: "toaster-icon", children: a }),
41
+ /* @__PURE__ */ l("div", { className: "toaster-content", children: [
42
+ n && /* @__PURE__ */ e(t.Title, { className: "toaster-title", children: n }),
43
+ c && /* @__PURE__ */ e(t.Description, { className: "toaster-description", children: c })
44
+ ] }),
45
+ x && /* @__PURE__ */ e(m.Close, { className: "toaster-close toaster-close-placement", closeIcon: h })
46
+ ]
47
+ }
48
+ );
23
49
  };
50
+ m.Close = ({ closeIcon: o, className: r } = {}) => /* @__PURE__ */ e(t.Close, { className: r, children: o ?? /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" }) }) });
24
51
  export {
25
- p as useFroozeClosing
52
+ m as Toast
26
53
  };