@cfx-dev/ui-components 4.3.6 → 4.3.8

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 (9) hide show
  1. package/dist/assets/css/Radio.css +1 -1
  2. package/dist/assets/css/ToggleGroup.css +1 -1
  3. package/dist/assets/general/global.css +1 -1
  4. package/dist/components/ToggleGroup/ToggleGroup.d.ts +16 -4
  5. package/dist/components/ToggleGroup/ToggleGroup.js +72 -63
  6. package/dist/components/ToggleGroup/ToggleGroupShowcase.js +56 -19
  7. package/dist/styles-scss/global.scss +1 -1
  8. package/dist/styles-scss/tokens.scss +4 -7
  9. package/package.json +1 -1
package/dist/components/ToggleGroup/ToggleGroup.d.ts CHANGED
@@ -1,18 +1,30 @@
1
1
  import { default as React } from 'react';
2
2
 
3
- export interface ToggleGroupOption {
3
+ export declare enum ToggleGroupSizeEnum {
4
+ normal = "normal",
5
+ large = "large"
6
+ }
7
+ export type ToggleGroupSizeType = keyof typeof ToggleGroupSizeEnum;
8
+ export interface ToggleGroupOptionType {
4
9
  value: string;
5
10
  label: React.ReactNode;
6
11
  icon?: React.ReactNode;
7
- description?: string;
8
12
  }
13
+ export interface ToggleGroupOptionProps {
14
+ option: ToggleGroupOptionType;
15
+ onClick: (value: string) => void;
16
+ active?: boolean;
17
+ disabled?: boolean;
18
+ }
19
+ export declare const ToggleGroupOption: React.NamedExoticComponent<ToggleGroupOptionProps>;
9
20
  export interface ToggleGroupProps {
10
21
  value: string;
11
- options: ToggleGroupOption[];
12
- onChange: <T extends string>(value: T) => void;
22
+ options: ToggleGroupOptionType[];
23
+ onChange: (value: string) => void;
13
24
  className?: string;
14
25
  disabled?: boolean;
15
26
  multiline?: boolean;
16
27
  fullWidth?: boolean;
28
+ size?: ToggleGroupSizeType;
17
29
  }
18
30
  export declare const ToggleGroup: React.NamedExoticComponent<ToggleGroupProps>;
package/dist/components/ToggleGroup/ToggleGroup.js CHANGED
@@ -1,68 +1,77 @@
1
- import { jsxs as d, jsx as p } from "react/jsx-runtime";
2
- import n from "react";
3
- import { Interactive as C } from "../Interactive/Interactive.js";
4
- import { clsx as _ } from "../../utils/clsx.js";
5
- const M = "cfxui__ToggleGroup__root__fb460", D = "cfxui__ToggleGroup__disabled__75462", j = "cfxui__ToggleGroup__descripted__8e168", k = "cfxui__ToggleGroup__fullWidth__0c589", E = "cfxui__ToggleGroup__description__9429c", L = "cfxui__ToggleGroup__options__7bc0c", O = "cfxui__ToggleGroup__option__8436c", S = "cfxui__ToggleGroup__active__84da0", w = "cfxui__ToggleGroup__multiline__6b784", o = {
6
- root: M,
7
- disabled: D,
8
- descripted: j,
9
- fullWidth: k,
10
- description: E,
11
- options: L,
12
- option: O,
13
- active: S,
14
- multiline: w
15
- }, f = (r, s) => {
16
- var e;
17
- return ((e = s.find((i) => i.value === r)) == null ? void 0 : e.description) || "";
18
- }, z = n.memo(function(s) {
1
+ import { jsxs as m, jsx as d } from "react/jsx-runtime";
2
+ import g from "react";
3
+ import { clsx as f } from "../../utils/clsx.js";
4
+ const b = "cfxui__ToggleGroup__unsetAll__6911e", x = "cfxui__ToggleGroup__root__fb460", v = "cfxui__ToggleGroup__disabled__75462", h = "cfxui__ToggleGroup__fullWidth__0c589", G = "cfxui__ToggleGroup__large__ad624", T = "cfxui__ToggleGroup__options__7bc0c", C = "cfxui__ToggleGroup__option__8436c", W = "cfxui__ToggleGroup__active__84da0", k = "cfxui__ToggleGroup__multiline__6b784", o = {
5
+ unsetAll: b,
6
+ root: x,
7
+ disabled: v,
8
+ fullWidth: h,
9
+ large: G,
10
+ options: T,
11
+ option: C,
12
+ active: W,
13
+ multiline: k
14
+ };
15
+ var N = /* @__PURE__ */ ((t) => (t.normal = "normal", t.large = "large", t))(N || {});
16
+ const A = g.memo(function(_) {
17
+ const {
18
+ option: s,
19
+ onClick: e,
20
+ active: c = !1,
21
+ disabled: i = !1
22
+ } = _, {
23
+ value: l,
24
+ label: a,
25
+ icon: n
26
+ } = s, u = g.useCallback(() => {
27
+ e(l);
28
+ }, [e, l]);
29
+ return /* @__PURE__ */ m(
30
+ "button",
31
+ {
32
+ type: "button",
33
+ className: f(o.unsetAll, o.option, {
34
+ [o.active]: c
35
+ }),
36
+ tabIndex: i ? 0 : 1,
37
+ onClick: u,
38
+ disabled: i,
39
+ children: [
40
+ n || null,
41
+ a
42
+ ]
43
+ },
44
+ l
45
+ );
46
+ }), w = g.memo(function(_) {
19
47
  const {
20
- value: e,
21
- options: i,
22
- onChange: u,
23
- className: m = "",
24
- disabled: g = !1,
25
- multiline: h = !1,
26
- fullWidth: a = !1
27
- } = s, [c, l] = n.useState(f(e, i)), v = n.useMemo(
28
- () => i.map((t, G) => {
29
- const T = () => {
30
- u(t.value);
31
- }, b = () => {
32
- l(t.description || "");
33
- }, N = () => {
34
- l(f(e, i));
35
- }, W = _(o.option, {
36
- [o.active]: t.value === e
37
- });
38
- return /* @__PURE__ */ d(
39
- C,
40
- {
41
- className: W,
42
- tabIndex: G,
43
- onClick: T,
44
- onMouseEnter: b,
45
- onMouseLeave: N,
46
- children: [
47
- t.icon || null,
48
- t.label
49
- ]
50
- },
51
- t.value
52
- );
53
- }),
54
- [e, i, u, l]
55
- ), x = _(o.root, m, {
56
- [o.disabled]: g,
57
- [o.descripted]: c,
58
- [o.multiline]: h,
59
- [o.fullWidth]: a
48
+ value: s,
49
+ options: e,
50
+ onChange: c,
51
+ className: i = "",
52
+ disabled: l = !1,
53
+ multiline: a = !1,
54
+ fullWidth: n = !1,
55
+ size: u = "normal"
56
+ /* normal */
57
+ } = _, p = f(o.root, o[u], i, {
58
+ [o.disabled]: l,
59
+ [o.multiline]: a,
60
+ [o.fullWidth]: n
60
61
  });
61
- return /* @__PURE__ */ d("div", { className: x, children: [
62
- /* @__PURE__ */ p("div", { className: _(o.options, { [o.fullWidth]: a }), children: v }),
63
- c && /* @__PURE__ */ p("div", { className: o.description, children: c })
64
- ] });
62
+ return /* @__PURE__ */ d("div", { className: p, children: /* @__PURE__ */ d("div", { className: f(o.options, { [o.fullWidth]: n }), children: e.map((r) => /* @__PURE__ */ d(
63
+ A,
64
+ {
65
+ option: r,
66
+ onClick: c,
67
+ active: r.value === s,
68
+ disabled: l
69
+ },
70
+ r.value
71
+ )) }) });
65
72
  });
66
73
  export {
67
- z as ToggleGroup
74
+ w as ToggleGroup,
75
+ A as ToggleGroupOption,
76
+ N as ToggleGroupSizeEnum
68
77
  };
package/dist/components/ToggleGroup/ToggleGroupShowcase.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
2
  import u from "react";
3
3
  import r from "../Flex/Flex.js";
4
- import { Text as a } from "../Text/Text.js";
4
+ import { Text as o } from "../Text/Text.js";
5
5
  import "../../utils/ui/ui.js";
6
- import { ToggleGroup as i } from "./ToggleGroup.js";
7
- const n = [
6
+ import { ToggleGroup as n } from "./ToggleGroup.js";
7
+ const a = [
8
8
  {
9
9
  value: "weekly",
10
10
  label: "Weekly"
@@ -14,47 +14,84 @@ const n = [
14
14
  label: "Monthly"
15
15
  }
16
16
  ];
17
- function c() {
18
- const [o, t] = u.useState("weekly");
17
+ function d() {
18
+ const [i, t] = u.useState("weekly");
19
19
  return /* @__PURE__ */ l(r, { gap: "large", vertical: !0, children: [
20
20
  /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
21
- /* @__PURE__ */ e(a, { children: "Default ToggleGroup" }),
21
+ /* @__PURE__ */ e(o, { children: "Default ToggleGroup" }),
22
22
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
23
- i,
23
+ n,
24
24
  {
25
- value: o,
25
+ value: i,
26
26
  onChange: t,
27
- options: n
27
+ options: a
28
28
  }
29
29
  ) })
30
30
  ] }),
31
31
  /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
32
- /* @__PURE__ */ e(a, { children: "Full Width ToggleGroup" }),
32
+ /* @__PURE__ */ e(o, { children: "Full Width ToggleGroup" }),
33
33
  /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
34
- i,
34
+ n,
35
35
  {
36
- value: o,
36
+ value: i,
37
37
  onChange: t,
38
- options: n,
38
+ options: a,
39
39
  fullWidth: !0
40
40
  }
41
41
  ) })
42
42
  ] }),
43
43
  /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
44
- /* @__PURE__ */ e(a, { children: "Disabled ToggleGroup" }),
44
+ /* @__PURE__ */ e(o, { children: "Disabled ToggleGroup" }),
45
45
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
46
- i,
46
+ n,
47
47
  {
48
- value: o,
48
+ value: i,
49
49
  onChange: t,
50
- options: n,
50
+ options: a,
51
51
  disabled: !0
52
52
  }
53
53
  ) })
54
+ ] }),
55
+ /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
56
+ /* @__PURE__ */ e(o, { children: "Multiline ToggleGroup" }),
57
+ /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
58
+ n,
59
+ {
60
+ value: i,
61
+ onChange: t,
62
+ options: a,
63
+ multiline: !0
64
+ }
65
+ ) })
66
+ ] }),
67
+ /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
68
+ /* @__PURE__ */ e(o, { children: "Multiline Full Width ToggleGroup" }),
69
+ /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
70
+ n,
71
+ {
72
+ value: i,
73
+ onChange: t,
74
+ options: a,
75
+ multiline: !0,
76
+ fullWidth: !0
77
+ }
78
+ ) })
79
+ ] }),
80
+ /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
81
+ /* @__PURE__ */ e(o, { children: "ToggleGroup Size Large" }),
82
+ /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
83
+ n,
84
+ {
85
+ value: i,
86
+ onChange: t,
87
+ options: a,
88
+ size: "large"
89
+ }
90
+ ) })
54
91
  ] })
55
92
  ] });
56
93
  }
57
- const f = u.memo(c);
94
+ const v = u.memo(d);
58
95
  export {
59
- f as default
96
+ v as default
60
97
  };
package/dist/styles-scss/global.scss CHANGED
@@ -12,7 +12,7 @@ body {
12
12
  // initiat tokens
13
13
  @include tokens.color-tokens;
14
14
  @include tokens.offset-tokens;
15
- @include tokens.control-height-tokens;
15
+ @include tokens.control-tokens;
16
16
  @include tokens.text-tokens;
17
17
  @include tokens.border-radius-tokens;
18
18
  @include tokens.switch-tokens;
package/dist/styles-scss/tokens.scss CHANGED
@@ -79,7 +79,9 @@
79
79
  }
80
80
  }
81
81
 
82
- @mixin control-height-tokens() {
82
+ @mixin control-tokens() {
83
+ @include ui.define-color-token('control-focus-outline', ui.color('primary', $alpha: .5));
84
+
83
85
  @each $name, $value in ui.$controlHeightsMap {
84
86
  @include ui.def('control-height-#{$name}', $value);
85
87
  }
@@ -286,6 +288,7 @@
286
288
  }
287
289
 
288
290
  /**
291
+ * LEGACY
289
292
  * Look for usages by searching for `ui.color-token('name')`
290
293
  */
291
294
  @mixin color-tokens() {
@@ -343,10 +346,4 @@
343
346
  @include ui.define-color-token('navlist-item-hover-border', transparent);
344
347
  @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
345
348
  @include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: .65));
346
- @include ui.define-color-token('toggle-description-text', ui.color('main', 950, .5));
347
- @include ui.define-color-token('toggle-border', ui.color('main', 950, .25));
348
- @include ui.define-color-token('toggle-background', ui.color('main', 950, .1));
349
- @include ui.define-color-token('toggle-hover-background', ui.color('main', 200));
350
- @include ui.define-color-token('toggle-active-text', ui.color('main'));
351
- @include ui.define-color-token('toggle-active-background', ui.color('main', 950, .75));
352
349
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "4.3.6",
4
+ "version": "4.3.8",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",