@cfx-dev/ui-components 2.1.9 → 2.1.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 (3) hide show
  1. package/dist/assets/Tabular.css +1 -1
  2. package/dist/components/Tabular/Tabular.js +45 -45
  3. package/package.json +1 -1
package/dist/assets/Tabular.css CHANGED
@@ -1 +1 @@
1
- ._reset_cctkn_1{all:unset}._root_cctkn_5{display:flex;align-items:center;--notification-gap: var(--tabular-notification-gap, initial)}._root_cctkn_5._theme-dark_cctkn_10{--color: var(--color-tabular-color-dark)}._root_cctkn_5._theme-light_cctkn_13{--color: var(--color-tabular-color-light)}._root_cctkn_5 ._item_cctkn_16{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;height:var(--tabular-item-height, initial);cursor:pointer;padding:0 var(--tabular-item-padding, initial);color:var(--color);text-transform:uppercase;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal)}._root_cctkn_5 ._item_cctkn_16:disabled{opacity:.5;cursor:not-allowed}._root_cctkn_5 ._item_cctkn_16{transition:all .25s ease,outline-offset 0s,outline 0s}._root_cctkn_5 ._item_cctkn_16:not(:disabled)._active_cctkn_37{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset;font-weight:var(--font-weight-bold)}._root_cctkn_5 ._item_cctkn_16:not(:disabled):hover{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset}._root_cctkn_5 ._item_cctkn_16:not(:disabled):focus-visible,._root_cctkn_5 ._item_cctkn_16:not(:disabled):focus-visible:hover{box-shadow:0 0 0 var(--tabular-item-border-size, initial) var(--color) inset}._root_cctkn_5 ._item_cctkn_16:after{content:attr(data-text);content:attr(data-text)/"";height:0px;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal);text-transform:uppercase}@media speech{._root_cctkn_5 ._item_cctkn_16:after{display:none}}._root_cctkn_5 ._item_cctkn_16._hasNotification_cctkn_64:after{padding-right:calc(var(--notification-gap) + var(--quant))}._root_cctkn_5 ._item_cctkn_16 ._content_cctkn_67{display:inline-flex;align-items:flex-start;gap:var(--notification-gap)}
1
+ ._reset_17apb_1{all:unset}._root_17apb_5{display:flex;align-items:center;--notification-gap: var(--tabular-notification-gap, initial)}._root_17apb_5._theme-dark_17apb_10{--color: var(--color-tabular-color-dark)}._root_17apb_5._theme-light_17apb_13{--color: var(--color-tabular-color-light)}._root_17apb_5 ._item_17apb_16{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;height:var(--tabular-item-height, initial);cursor:pointer;padding:0 var(--tabular-item-padding, initial);color:var(--color);text-transform:capitalize;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal)}._root_17apb_5 ._item_17apb_16:disabled{opacity:.5;cursor:not-allowed}._root_17apb_5 ._item_17apb_16{transition:all .25s ease,outline-offset 0s,outline 0s}._root_17apb_5 ._item_17apb_16:not(:disabled)._active_17apb_37{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset;font-weight:var(--font-weight-bold)}._root_17apb_5 ._item_17apb_16:not(:disabled):hover{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset}._root_17apb_5 ._item_17apb_16:not(:disabled):focus-visible,._root_17apb_5 ._item_17apb_16:not(:disabled):focus-visible:hover{box-shadow:0 0 0 var(--tabular-item-border-size, initial) var(--color) inset}._root_17apb_5 ._item_17apb_16:after{content:attr(data-text);content:attr(data-text)/"";height:0px;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal);text-transform:capitalize}@media speech{._root_17apb_5 ._item_17apb_16:after{display:none}}._root_17apb_5 ._item_17apb_16._hasNotification_17apb_64:after{padding-right:calc(var(--notification-gap) + var(--quant))}._root_17apb_5 ._item_17apb_16 ._content_17apb_67{display:inline-flex;align-items:flex-start;gap:var(--notification-gap)}
package/dist/components/Tabular/Tabular.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx as r, jsxs as u } from "react/jsx-runtime";
2
- import h, { createElement as v } from "react";
3
- import { Dot as C } from "../Dot/Dot.js";
4
- import { clsx as k } from "../../utils/clsx.js";
5
- import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5", I = "_item_cctkn_16", R = "_active_cctkn_37", g = "_hasNotification_cctkn_64", T = "_content_cctkn_67", a = {
6
- reset: p,
2
+ import f, { createElement as k } from "react";
3
+ import { Dot as v } from "../Dot/Dot.js";
4
+ import { clsx as h } from "../../utils/clsx.js";
5
+ import '../../assets/Tabular.css';const C = "_reset_17apb_1", x = "_root_17apb_5", I = "_item_17apb_16", R = "_active_17apb_37", g = "_hasNotification_17apb_64", T = "_content_17apb_67", e = {
6
+ reset: C,
7
7
  root: x,
8
- "theme-dark": "_theme-dark_cctkn_10",
9
- "theme-light": "_theme-light_cctkn_13",
8
+ "theme-dark": "_theme-dark_17apb_10",
9
+ "theme-light": "_theme-light_17apb_13",
10
10
  item: I,
11
11
  active: R,
12
12
  hasNotification: g,
@@ -14,77 +14,77 @@ import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5
14
14
  };
15
15
  function m(_) {
16
16
  const {
17
- items: i,
17
+ items: s,
18
18
  activeItem: o,
19
- onActivate: e,
20
- itemClassName: c,
21
- ...n
22
- } = _, s = h.useCallback((t) => {
23
- e && e(t);
24
- }, [e]);
25
- return /* @__PURE__ */ r(m.Root, { ...n, children: i.map((t) => /* @__PURE__ */ v(
19
+ onActivate: a,
20
+ itemClassName: i,
21
+ ...c
22
+ } = _, n = f.useCallback((t) => {
23
+ a && a(t);
24
+ }, [a]);
25
+ return /* @__PURE__ */ r(m.Root, { ...c, children: s.map((t) => /* @__PURE__ */ k(
26
26
  m.Item,
27
27
  {
28
28
  ...t,
29
- className: c,
29
+ className: i,
30
30
  key: t.id,
31
31
  active: t.id === o,
32
- onClick: s
32
+ onClick: n
33
33
  }
34
34
  )) });
35
35
  }
36
- m.Root = function(i) {
36
+ m.Root = function(s) {
37
37
  const {
38
38
  children: o,
39
- className: e,
40
- ariaLabel: c,
41
- tabIndex: n,
42
- theme: s = "dark",
39
+ className: a,
40
+ ariaLabel: i,
41
+ tabIndex: c,
42
+ theme: n = "dark",
43
43
  role: t = "tablist"
44
- } = i, l = k(a.root, a[`theme-${s}`], e);
44
+ } = s, l = h(e.root, e[`theme-${n}`], a);
45
45
  return /* @__PURE__ */ r(
46
46
  "div",
47
47
  {
48
48
  role: t,
49
- "aria-label": c,
50
- tabIndex: n,
49
+ "aria-label": i,
50
+ tabIndex: c,
51
51
  className: l,
52
52
  children: o
53
53
  }
54
54
  );
55
55
  };
56
- m.Item = function(i) {
56
+ m.Item = function(s) {
57
57
  const {
58
58
  id: o,
59
- label: e,
60
- onClick: c,
61
- ariaLabel: n,
62
- ariaControls: s,
59
+ label: a,
60
+ onClick: i,
61
+ ariaLabel: c,
62
+ ariaControls: n,
63
63
  className: t,
64
64
  active: l = !1,
65
- disabled: d = !1,
66
- hasNotification: f = !1
67
- } = i, b = h.useCallback(() => {
68
- d || c(o);
69
- }, [d, c, o]), N = k(a.reset, a.item, t, {
70
- [a.active]: l,
71
- [a.hasNotification]: f
65
+ disabled: b = !1,
66
+ hasNotification: d = !1
67
+ } = s, p = f.useCallback(() => {
68
+ b || i(o);
69
+ }, [b, i, o]), N = h(e.reset, e.item, t, {
70
+ [e.active]: l,
71
+ [e.hasNotification]: d
72
72
  });
73
73
  return /* @__PURE__ */ r(
74
74
  "button",
75
75
  {
76
- disabled: d,
76
+ disabled: b,
77
77
  type: "button",
78
78
  role: "tab",
79
79
  className: N,
80
- onClick: b,
81
- "aria-label": n,
82
- "aria-controls": s,
83
- "data-text": e,
80
+ onClick: p,
81
+ "aria-label": c,
82
+ "aria-controls": n,
83
+ "data-text": a,
84
84
  "aria-selected": l,
85
- children: /* @__PURE__ */ u("span", { className: a.content, children: [
86
- e,
87
- f && /* @__PURE__ */ r(C, { color: "green", className: a.notification })
85
+ children: /* @__PURE__ */ u("span", { className: e.content, children: [
86
+ a,
87
+ d && /* @__PURE__ */ r(v, { color: "green", className: e.notification })
88
88
  ] })
89
89
  }
90
90
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "2.1.9",
4
+ "version": "2.1.10",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",