@konstructio/ui 0.0.9 → 0.0.10

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 (41) hide show
  1. package/dist/{Modal-Ca3bkvvt.js → Modal-L73dmnHv.js} +240 -235
  2. package/dist/components/AlertDialog/AlertDialog.js +37 -30
  3. package/dist/components/AlertDialog/AlertDialog.types.d.ts +7 -2
  4. package/dist/components/Autocomplete/Autocomplete.js +42 -37
  5. package/dist/components/Autocomplete/components/List/List.js +60 -0
  6. package/dist/components/Autocomplete/components/{List.types.d.ts → List/List.types.d.ts} +3 -3
  7. package/dist/components/Autocomplete/components/{List.variants.js → List/List.variants.js} +1 -1
  8. package/dist/components/Autocomplete/components/index.d.ts +1 -0
  9. package/dist/components/Autocomplete/components/index.js +4 -0
  10. package/dist/components/Breadcrumb/Breadcrumb.js +44 -39
  11. package/dist/components/Card/Card.js +30 -25
  12. package/dist/components/Checkbox/Checkbox.js +56 -51
  13. package/dist/components/Dropdown/components/ListItem/ListItem.js +18 -17
  14. package/dist/components/Dropdown/components/Wrapper.js +15 -15
  15. package/dist/components/Input/Input.js +4 -4
  16. package/dist/components/Modal/Modal.js +1 -1
  17. package/dist/components/Modal/components/Footer/Footer.js +5 -4
  18. package/dist/components/Modal/components/Header/Header.js +4 -3
  19. package/dist/components/Modal/components/Wrapper/Wrapper.js +4 -3
  20. package/dist/components/Modal/components/index.js +1 -1
  21. package/dist/components/NumberInput/NumberInput.js +78 -69
  22. package/dist/components/ProgressBar/ProgressBar.js +6 -6
  23. package/dist/components/Radio/Radio.js +21 -18
  24. package/dist/components/RadioGroup/RadioGroup.js +26 -22
  25. package/dist/components/RadioGroup/RadioGroup.types.d.ts +4 -3
  26. package/dist/components/Range/Range.js +40 -40
  27. package/dist/components/Slider/Slider.js +25 -25
  28. package/dist/components/Switch/Switch.js +30 -30
  29. package/dist/components/Tag/Tag.js +5 -4
  30. package/dist/components/TagSelect/TagSelect.js +24 -24
  31. package/dist/components/TextArea/TextArea.js +17 -16
  32. package/dist/components/Toast/Toast.js +103 -97
  33. package/dist/components/Tooltip/Tooltip.js +12 -12
  34. package/dist/components/index.js +1 -1
  35. package/dist/index.js +1 -1
  36. package/dist/package.json +1 -1
  37. package/package.json +1 -1
  38. package/dist/components/Autocomplete/components/List.js +0 -57
  39. /package/dist/components/Autocomplete/components/{List.d.ts → List/List.d.ts} +0 -0
  40. /package/dist/components/Autocomplete/components/{List.types.js → List/List.types.js} +0 -0
  41. /package/dist/components/Autocomplete/components/{List.variants.d.ts → List/List.variants.d.ts} +0 -0
@@ -1,16 +1,16 @@
1
- import { jsxs as x, jsx as u } from "react/jsx-runtime";
1
+ import { jsxs as P, jsx as u } from "react/jsx-runtime";
2
2
  import * as h from "react";
3
- import { forwardRef as I, useState as _, useRef as H, useId as A, useImperativeHandle as M, useEffect as $, useCallback as j } from "react";
4
- import { c as z, a as B, d as q } from "../../index-8vgf-x5i.js";
5
- import { u as F } from "../../index-DoOsnuB6.js";
6
- import { u as O, a as V } from "../../index-BxeV34ij.js";
7
- import { P } from "../../index-BaNV0qac.js";
8
- import { cn as D } from "../../utils/index.js";
3
+ import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeHandle as $, useEffect as j, useCallback as z } from "react";
4
+ import { c as B, a as q, d as F } from "../../index-8vgf-x5i.js";
5
+ import { u as O } from "../../index-DoOsnuB6.js";
6
+ import { u as V, a as D } from "../../index-BxeV34ij.js";
7
+ import { P as g } from "../../index-BaNV0qac.js";
9
8
  import "../../contexts/theme.context.js";
10
9
  import { useTheme as L } from "../../contexts/theme.hook.js";
11
10
  import "../../js.cookie-OLEfuq_g.js";
11
+ import { cn as x } from "../../utils/index.js";
12
12
  import { switchVariants as U, thumbVariants as W } from "./Switch.variants.js";
13
- var k = "Switch", [X, de] = z(k), [G, J] = X(k), g = h.forwardRef(
13
+ var k = "Switch", [X, de] = B(k), [G, J] = X(k), R = h.forwardRef(
14
14
  (e, s) => {
15
15
  const {
16
16
  __scopeSwitch: t,
@@ -23,27 +23,27 @@ var k = "Switch", [X, de] = z(k), [G, J] = X(k), g = h.forwardRef(
23
23
  onCheckedChange: m,
24
24
  form: r,
25
25
  ...d
26
- } = e, [l, b] = h.useState(null), v = F(s, (C) => b(C)), f = h.useRef(!1), w = l ? r || !!l.closest("form") : !0, [S = !1, E] = B({
26
+ } = e, [l, b] = h.useState(null), v = O(s, (C) => b(C)), f = h.useRef(!1), w = l ? r || !!l.closest("form") : !0, [S = !1, T] = q({
27
27
  prop: n,
28
28
  defaultProp: p,
29
29
  onChange: m
30
30
  });
31
- return /* @__PURE__ */ x(G, { scope: t, checked: S, disabled: a, children: [
31
+ return /* @__PURE__ */ P(G, { scope: t, checked: S, disabled: a, children: [
32
32
  /* @__PURE__ */ u(
33
- P.button,
33
+ g.button,
34
34
  {
35
35
  type: "button",
36
36
  role: "switch",
37
37
  "aria-checked": S,
38
38
  "aria-required": o,
39
- "data-state": N(S),
39
+ "data-state": E(S),
40
40
  "data-disabled": a ? "" : void 0,
41
41
  disabled: a,
42
42
  value: i,
43
43
  ...d,
44
44
  ref: v,
45
- onClick: q(e.onClick, (C) => {
46
- E((T) => !T), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
45
+ onClick: F(e.onClick, (C) => {
46
+ T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
47
47
  })
48
48
  }
49
49
  ),
@@ -64,14 +64,14 @@ var k = "Switch", [X, de] = z(k), [G, J] = X(k), g = h.forwardRef(
64
64
  ] });
65
65
  }
66
66
  );
67
- g.displayName = k;
68
- var R = "SwitchThumb", y = h.forwardRef(
67
+ R.displayName = k;
68
+ var y = "SwitchThumb", N = h.forwardRef(
69
69
  (e, s) => {
70
- const { __scopeSwitch: t, ...c } = e, n = J(R, t);
70
+ const { __scopeSwitch: t, ...c } = e, n = J(y, t);
71
71
  return /* @__PURE__ */ u(
72
- P.span,
72
+ g.span,
73
73
  {
74
- "data-state": N(n.checked),
74
+ "data-state": E(n.checked),
75
75
  "data-disabled": n.disabled ? "" : void 0,
76
76
  ...c,
77
77
  ref: s
@@ -79,9 +79,9 @@ var R = "SwitchThumb", y = h.forwardRef(
79
79
  );
80
80
  }
81
81
  );
82
- y.displayName = R;
82
+ N.displayName = y;
83
83
  var K = (e) => {
84
- const { control: s, checked: t, bubbles: c = !0, ...n } = e, p = h.useRef(null), o = O(t), a = V(s);
84
+ const { control: s, checked: t, bubbles: c = !0, ...n } = e, p = h.useRef(null), o = V(t), a = D(s);
85
85
  return h.useEffect(() => {
86
86
  const i = p.current, m = window.HTMLInputElement.prototype, d = Object.getOwnPropertyDescriptor(m, "checked").set;
87
87
  if (o !== t && d) {
@@ -108,11 +108,11 @@ var K = (e) => {
108
108
  }
109
109
  );
110
110
  };
111
- function N(e) {
111
+ function E(e) {
112
112
  return e ? "checked" : "unchecked";
113
113
  }
114
- var Q = g, Y = y;
115
- const le = I(
114
+ var Q = R, Y = N;
115
+ const le = _(
116
116
  ({
117
117
  name: e,
118
118
  defaultChecked: s,
@@ -122,18 +122,18 @@ const le = I(
122
122
  className: p,
123
123
  label: o
124
124
  }, a) => {
125
- const [i, m] = _(s ?? !1), r = H(null), d = A(), { theme: l } = L(), b = c ?? l, v = e ? `${d}-${e}` : d;
126
- M(a, () => r.current, [r]), $(() => {
125
+ const [i, m] = H(s ?? !1), r = A(null), d = M(), { theme: l } = L(), b = c ?? l, v = e ? `${d}-${e}` : d;
126
+ $(a, () => r.current, [r]), j(() => {
127
127
  r.current && (r.current.value = `${i}`);
128
128
  }, [i]);
129
- const f = j(
129
+ const f = z(
130
130
  (w) => m(w),
131
131
  []
132
132
  );
133
- return /* @__PURE__ */ x(
133
+ return /* @__PURE__ */ P(
134
134
  "div",
135
135
  {
136
- className: D(
136
+ className: x(
137
137
  "w-full flex gap-3",
138
138
  t === "vertical" ? "flex-col" : "flex-row"
139
139
  ),
@@ -153,7 +153,7 @@ const le = I(
153
153
  id: v,
154
154
  defaultChecked: s,
155
155
  onCheckedChange: f,
156
- className: U({ theme: b, className: p }),
156
+ className: x(U({ theme: b, className: p })),
157
157
  "aria-label": o,
158
158
  children: /* @__PURE__ */ u(
159
159
  Y,
@@ -1,6 +1,7 @@
1
- import { jsx as a } from "react/jsx-runtime";
2
- import { tagVariants as i } from "./Tag.variants.js";
3
- const m = ({ label: r, color: t }) => /* @__PURE__ */ a("div", { className: i({ color: t }), children: /* @__PURE__ */ a("span", { className: "text-inherit", children: r }) });
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { cn as i } from "../../utils/index.js";
3
+ import { tagVariants as m } from "./Tag.variants.js";
4
+ const n = ({ label: t, color: a }) => /* @__PURE__ */ r("div", { className: i(m({ color: a })), children: /* @__PURE__ */ r("span", { className: "text-inherit", children: t }) });
4
5
  export {
5
- m as Tag
6
+ n as Tag
6
7
  };
@@ -1,58 +1,58 @@
1
- import { jsxs as p, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as u, jsx as e } from "react/jsx-runtime";
2
2
  import { forwardRef as g, useId as w, useRef as C, useImperativeHandle as T, useEffect as R } from "react";
3
3
  import "../../contexts/theme.context.js";
4
4
  import { useTheme as S } from "../../contexts/theme.hook.js";
5
5
  import "../../js.cookie-OLEfuq_g.js";
6
- import { cn as u } from "../../utils/index.js";
6
+ import { cn as r } from "../../utils/index.js";
7
7
  import { Tag as d } from "../Tag/Tag.js";
8
8
  import { useTagSelect as k } from "./hooks/useTagSelect.js";
9
9
  import { tagSelectVariants as I, tagListVariants as V, tagItemVariants as j } from "./TagSelect.variants.js";
10
10
  import { C as y } from "../../chevron-up-CvquEaNg.js";
11
- const B = g(({ label: n, name: r, options: f, placeholder: h = "Select a value...", theme: l }, x) => {
12
- const s = w(), { theme: o } = S(), t = C(null), {
13
- isOpen: a,
14
- selectedTag: c,
15
- value: m,
11
+ const B = g(({ label: s, name: l, options: f, placeholder: h = "Select a value...", theme: o }, x) => {
12
+ const c = w(), { theme: a } = S(), t = C(null), {
13
+ isOpen: i,
14
+ selectedTag: m,
15
+ value: p,
16
16
  wrapperRef: b,
17
17
  handleClickTag: N,
18
18
  handleOpenDropdown: v
19
19
  } = k();
20
20
  return T(x, () => t.current, [t]), R(() => {
21
- t.current && (t.current.value = m);
22
- }, [m]), /* @__PURE__ */ p("div", { ref: b, className: "flex flex-col w-full relative", children: [
23
- n ? /* @__PURE__ */ e("label", { className: "m-2 cursor-pointer", htmlFor: r ?? s, children: n }) : null,
24
- /* @__PURE__ */ p(
21
+ t.current && (t.current.value = p);
22
+ }, [p]), /* @__PURE__ */ u("div", { ref: b, className: "flex flex-col w-full relative", children: [
23
+ s ? /* @__PURE__ */ e("label", { className: "m-2 cursor-pointer", htmlFor: l ?? c, children: s }) : null,
24
+ /* @__PURE__ */ u(
25
25
  "div",
26
26
  {
27
- id: r ?? s,
28
- className: I({ theme: l ?? o }),
27
+ id: l ?? c,
28
+ className: r(I({ theme: o ?? a })),
29
29
  role: "combobox",
30
30
  onClick: v,
31
- "aria-expanded": a,
31
+ "aria-expanded": i,
32
32
  children: [
33
- c ? /* @__PURE__ */ e(d, { ...c }) : /* @__PURE__ */ e("span", { className: "text-base text-inherit", children: h }),
33
+ m ? /* @__PURE__ */ e(d, { ...m }) : /* @__PURE__ */ e("span", { className: "text-base text-inherit", children: h }),
34
34
  /* @__PURE__ */ e(
35
35
  y,
36
36
  {
37
- className: u(
37
+ className: r(
38
38
  "w-4 h-4 text-inherit transition-all duration-50",
39
- a ? "rotate-0" : "rotate-180"
39
+ i ? "rotate-0" : "rotate-180"
40
40
  )
41
41
  }
42
42
  )
43
43
  ]
44
44
  }
45
45
  ),
46
- /* @__PURE__ */ e("input", { ref: t, type: "text", name: r, className: "hidden" }),
47
- a ? /* @__PURE__ */ e(
46
+ /* @__PURE__ */ e("input", { ref: t, type: "text", name: l, className: "hidden" }),
47
+ i ? /* @__PURE__ */ e(
48
48
  "ul",
49
49
  {
50
50
  role: "listbox",
51
- className: u(V({ theme: l ?? o })),
52
- children: f.map((i) => /* @__PURE__ */ e(
51
+ className: r(V({ theme: o ?? a })),
52
+ children: f.map((n) => /* @__PURE__ */ e(
53
53
  "li",
54
54
  {
55
- className: j({ theme: l ?? o }),
55
+ className: r(j({ theme: o ?? a })),
56
56
  role: "option",
57
57
  children: /* @__PURE__ */ e(
58
58
  "button",
@@ -60,8 +60,8 @@ const B = g(({ label: n, name: r, options: f, placeholder: h = "Select a value..
60
60
  type: "button",
61
61
  role: "button",
62
62
  className: "m-0 p-0 w-full",
63
- onClick: () => N(i),
64
- children: /* @__PURE__ */ e(d, { label: i.label, color: i.color })
63
+ onClick: () => N(n),
64
+ children: /* @__PURE__ */ e(d, { label: n.label, color: n.color })
65
65
  }
66
66
  )
67
67
  }
@@ -1,34 +1,35 @@
1
- import { jsxs as h, jsx as a } from "react/jsx-runtime";
1
+ import { jsxs as h, jsx as s } from "react/jsx-runtime";
2
2
  import { forwardRef as v, useId as N, useState as T, useCallback as j } from "react";
3
- import { textAreaVariants as A } from "./TextArea.variants.js";
4
3
  import "../../contexts/theme.context.js";
5
- import { useTheme as I } from "../../contexts/theme.hook.js";
4
+ import { useTheme as A } from "../../contexts/theme.hook.js";
6
5
  import "../../js.cookie-OLEfuq_g.js";
7
- const S = v(
8
- ({ initialValue: m, label: t, name: o, placeholder: l, rows: c = 3, theme: i, onChange: e }, u) => {
9
- const r = N(), { theme: d } = I(), s = o ? `${r}-name` : r, [p, x] = T(m ?? ""), f = j(
10
- (n) => {
11
- x(n.target.value), e == null || e();
6
+ import { cn as I } from "../../utils/index.js";
7
+ import { textAreaVariants as V } from "./TextArea.variants.js";
8
+ const q = v(
9
+ ({ initialValue: o, label: t, name: a, placeholder: l, rows: c = 3, theme: i, onChange: e }, p) => {
10
+ const r = N(), { theme: u } = A(), m = a ? `${r}-name` : r, [d, f] = T(o ?? ""), n = j(
11
+ (x) => {
12
+ f(x.target.value), e == null || e();
12
13
  },
13
14
  [e]
14
15
  );
15
16
  return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", children: [
16
- t ? /* @__PURE__ */ a("label", { htmlFor: s, className: "cursor-pointer", children: t }) : null,
17
- /* @__PURE__ */ a(
17
+ t ? /* @__PURE__ */ s("label", { htmlFor: m, className: "cursor-pointer", children: t }) : null,
18
+ /* @__PURE__ */ s(
18
19
  "textarea",
19
20
  {
20
- id: s,
21
- ref: u,
22
- className: A({ theme: i ?? d }),
21
+ id: m,
22
+ ref: p,
23
+ className: I(V({ theme: i ?? u })),
23
24
  rows: c,
24
25
  placeholder: l,
25
- value: p,
26
- onChange: f
26
+ value: d,
27
+ onChange: n
27
28
  }
28
29
  )
29
30
  ] });
30
31
  }
31
32
  );
32
33
  export {
33
- S as TextArea
34
+ q as TextArea
34
35
  };