@cfx-dev/ui-components 5.1.0 → 5.1.1

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 (5) hide show
  1. package/dist/assets/css/Tabular.css +1 -1
  2. package/dist/assets/general/global.css +1 -1
  3. package/dist/components/Tabular/Tabular.js +72 -62
  4. package/dist/styles-scss/_ui.scss +8 -0
  5. package/package.json +1 -1
package/dist/components/Tabular/Tabular.js CHANGED
@@ -1,21 +1,31 @@
1
- import { jsx as b, jsxs as N } from "react/jsx-runtime";
2
- import x, { createElement as C } from "react";
1
+ import { jsx as o, jsxs as N } from "react/jsx-runtime";
2
+ import z, { createElement as C } from "react";
3
3
  import { Dot as v } from "../Dot/Dot.js";
4
- import { clsx as d } from "../../utils/clsx.js";
4
+ import { clsx as x } from "../../utils/clsx.js";
5
5
  import { ui as k } from "../../utils/ui/ui.js";
6
6
  const R = "cfxui__Tabular__reset__b1dbc", I = "cfxui__Tabular__item__98cc3", y = "cfxui__Tabular__root__0ff05", j = "cfxui__Tabular__active__1ae95", A = "cfxui__Tabular__hasNotification__c372f", L = "cfxui__Tabular__content__3a95a", a = {
7
7
  reset: R,
8
8
  "tabular-size-initial-large": "cfxui__Tabular__tabular-size-initial-large__9451f",
9
9
  item: I,
10
10
  "tabular-size-initial-small": "cfxui__Tabular__tabular-size-initial-small__4dad8",
11
+ "tabular-size-xsmall-large": "cfxui__Tabular__tabular-size-xsmall-large__02621",
12
+ "tabular-size-xsmall-small": "cfxui__Tabular__tabular-size-xsmall-small__e39ed",
11
13
  "tabular-size-small-large": "cfxui__Tabular__tabular-size-small-large__1390c",
12
14
  "tabular-size-small-small": "cfxui__Tabular__tabular-size-small-small__cc6e3",
15
+ "tabular-size-small-plus-large": "cfxui__Tabular__tabular-size-small-plus-large__c06f9",
16
+ "tabular-size-small-plus-small": "cfxui__Tabular__tabular-size-small-plus-small__ff5cb",
17
+ "tabular-size-small-xplus-large": "cfxui__Tabular__tabular-size-small-xplus-large__229d6",
18
+ "tabular-size-small-xplus-small": "cfxui__Tabular__tabular-size-small-xplus-small__a8d46",
13
19
  "tabular-size-small-medium-large": "cfxui__Tabular__tabular-size-small-medium-large__241e8",
14
20
  "tabular-size-small-medium-small": "cfxui__Tabular__tabular-size-small-medium-small__b6c66",
21
+ "tabular-size-small-xmedium-large": "cfxui__Tabular__tabular-size-small-xmedium-large__e8e89",
22
+ "tabular-size-small-xmedium-small": "cfxui__Tabular__tabular-size-small-xmedium-small__099a7",
15
23
  "tabular-size-medium-large": "cfxui__Tabular__tabular-size-medium-large__2ff04",
16
24
  "tabular-size-medium-small": "cfxui__Tabular__tabular-size-medium-small__b397b",
17
25
  "tabular-size-medium-large-large": "cfxui__Tabular__tabular-size-medium-large-large__8b35a",
18
26
  "tabular-size-medium-large-small": "cfxui__Tabular__tabular-size-medium-large-small__cec0c",
27
+ "tabular-size-medium-xlarge-large": "cfxui__Tabular__tabular-size-medium-xlarge-large__79167",
28
+ "tabular-size-medium-xlarge-small": "cfxui__Tabular__tabular-size-medium-xlarge-small__b152b",
19
29
  "tabular-size-large-large": "cfxui__Tabular__tabular-size-large-large__e3c30",
20
30
  "tabular-size-large-small": "cfxui__Tabular__tabular-size-large-small__193f0",
21
31
  "tabular-size-xlarge-large": "cfxui__Tabular__tabular-size-xlarge-large__e1e19",
@@ -29,97 +39,97 @@ const R = "cfxui__Tabular__reset__b1dbc", I = "cfxui__Tabular__item__98cc3", y =
29
39
  };
30
40
  function n(f) {
31
41
  const {
32
- items: s,
33
- activeItem: i,
34
- onActivate: e,
35
- itemClassName: r,
42
+ items: t,
43
+ activeItem: s,
44
+ onActivate: l,
45
+ itemClassName: i,
36
46
  size: u = "medium",
37
- className: c,
38
- ItemComponent: m,
39
- ..._
40
- } = f, l = x.useCallback((t) => {
41
- e && e(t);
42
- }, [e]), o = d(
47
+ className: m,
48
+ ItemComponent: c,
49
+ ...r
50
+ } = f, e = z.useCallback((_) => {
51
+ l && l(_);
52
+ }, [l]), b = x(
43
53
  a.root,
44
- c
54
+ m
45
55
  );
46
- return /* @__PURE__ */ b(n.Root, { ..._, className: o, children: s.map((t) => /* @__PURE__ */ C(
56
+ return /* @__PURE__ */ o(n.Root, { ...r, className: b, children: t.map((_) => /* @__PURE__ */ C(
47
57
  n.Item,
48
58
  {
49
- ...t,
50
- Component: m,
51
- className: r,
52
- key: t.id,
53
- active: t.id === i,
54
- onClick: l,
59
+ ..._,
60
+ Component: c,
61
+ className: i,
62
+ key: _.id,
63
+ active: _.id === s,
64
+ onClick: e,
55
65
  size: u
56
66
  }
57
67
  )) });
58
68
  }
59
- n.Root = function(s) {
69
+ n.Root = function(t) {
60
70
  const {
61
- children: i,
62
- className: e,
63
- ariaLabel: r,
71
+ children: s,
72
+ className: l,
73
+ ariaLabel: i,
64
74
  tabIndex: u,
65
- theme: c = "dark",
66
- role: m = "tablist",
67
- style: _
68
- } = s, l = d(a.root, a[`theme-${c}`], e);
69
- return /* @__PURE__ */ b(
75
+ theme: m = "dark",
76
+ role: c = "tablist",
77
+ style: r
78
+ } = t, e = x(a.root, a[`theme-${m}`], l);
79
+ return /* @__PURE__ */ o(
70
80
  "div",
71
81
  {
72
- role: m,
73
- "aria-label": r,
82
+ role: c,
83
+ "aria-label": i,
74
84
  tabIndex: u,
75
- className: l,
76
- style: _,
77
- children: i
85
+ className: e,
86
+ style: r,
87
+ children: s
78
88
  }
79
89
  );
80
90
  };
81
- n.Item = function(s) {
91
+ n.Item = function(t) {
82
92
  const {
83
- id: i,
84
- label: e,
85
- onClick: r,
93
+ id: s,
94
+ label: l,
95
+ onClick: i,
86
96
  ariaLabel: u,
87
- ariaControls: c,
88
- className: m,
89
- active: _ = !1,
90
- disabled: l = !1,
91
- hasNotification: o = !1,
92
- size: t,
93
- Component: z,
97
+ ariaControls: m,
98
+ className: c,
99
+ active: r = !1,
100
+ disabled: e = !1,
101
+ hasNotification: b = !1,
102
+ size: _,
103
+ Component: d,
94
104
  ...g
95
- } = s, T = x.useCallback(() => {
96
- l || r(i);
97
- }, [l, r, i]), h = d(
105
+ } = t, T = z.useCallback(() => {
106
+ e || i(s);
107
+ }, [e, i, s]), p = x(
98
108
  a.reset,
99
109
  a.item,
100
- m,
101
- k.getResponsiveFlatClassnames("tabular-size", t).map((p) => a[p]),
110
+ c,
111
+ k.getResponsiveFlatClassnames("tabular-size", _).map((h) => a[h]),
102
112
  {
103
- [a.active]: _,
104
- [a.hasNotification]: o
113
+ [a.active]: r,
114
+ [a.hasNotification]: b
105
115
  }
106
116
  );
107
- return /* @__PURE__ */ b(
108
- z || "button",
117
+ return /* @__PURE__ */ o(
118
+ d || "button",
109
119
  {
110
- disabled: l,
120
+ disabled: e,
111
121
  type: "button",
112
122
  role: "tab",
113
- className: h,
123
+ className: p,
114
124
  onClick: T,
115
125
  "aria-label": u,
116
- "aria-controls": c,
117
- "data-text": e,
118
- "aria-selected": _,
126
+ "aria-controls": m,
127
+ "data-text": l,
128
+ "aria-selected": r,
119
129
  ...g,
120
130
  children: /* @__PURE__ */ N("span", { className: a.content, children: [
121
- e,
122
- o && /* @__PURE__ */ b(v, { color: "green", className: a.notification })
131
+ l,
132
+ b && /* @__PURE__ */ o(v, { color: "green", className: a.notification })
123
133
  ] })
124
134
  }
125
135
  );
package/dist/styles-scss/_ui.scss CHANGED
@@ -455,10 +455,18 @@ $zindexMap: (
455
455
 
456
456
  $mediaMap: (
457
457
  'initial': 0px,
458
+ 'xsmall': 320px,
459
+ // small - depricated
458
460
  'small': 360px,
461
+ 'small-plus': 393px,
462
+ 'small-xplus': 500px,
463
+ // small-medium - depricated
459
464
  'small-medium': 640px,
465
+ 'small-xmedium': 768px,
460
466
  'medium': 1024px,
467
+ // medium-large - depricated
461
468
  'medium-large': 1280px,
469
+ 'medium-xlarge': 1440px,
462
470
  'large': 1920px,
463
471
  'xlarge': 2560px,
464
472
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
- "version": "5.1.0",
3
+ "version": "5.1.1",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "dist/main.js",