@cfx-dev/ui-components 2.1.5 → 2.1.7

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 (7) hide show
  1. package/dist/assets/Modal.css +1 -1
  2. package/dist/assets/global.css +1 -1
  3. package/dist/components/Button/ButtonShowcase.js +44 -33
  4. package/dist/components/Modal/Modal.d.ts +1 -1
  5. package/dist/components/Modal/Modal.js +14 -14
  6. package/dist/styles-scss/tokens.scss +3 -3
  7. package/package.json +1 -1
package/dist/components/Button/ButtonShowcase.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
2
  import l from "react";
3
- import { Flex as i } from "../Layout/Flex/Flex.js";
4
- import { Text as n } from "../Text/Text.js";
3
+ import { Flex as n } from "../Layout/Flex/Flex.js";
4
+ import { Text as i } from "../Text/Text.js";
5
5
  import { Button as t } from "./Button.js";
6
6
  import { ButtonBar as c } from "./ButtonBar.js";
7
- function a() {
8
- return /* @__PURE__ */ r(i, { gap: "large", vertical: !0, children: [
9
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
10
- /* @__PURE__ */ e(n, { children: "Default" }),
7
+ function o() {
8
+ return /* @__PURE__ */ r(n, { gap: "large", vertical: !0, children: [
9
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
10
+ /* @__PURE__ */ e(i, { children: "Default" }),
11
11
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
12
12
  t,
13
13
  {
@@ -17,8 +17,8 @@ function a() {
17
17
  }
18
18
  ) })
19
19
  ] }),
20
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
21
- /* @__PURE__ */ e(n, { children: "Primary" }),
20
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
21
+ /* @__PURE__ */ e(i, { children: "Primary" }),
22
22
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
23
23
  t,
24
24
  {
@@ -28,8 +28,8 @@ function a() {
28
28
  }
29
29
  ) })
30
30
  ] }),
31
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
32
- /* @__PURE__ */ e(n, { children: "Secondary" }),
31
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
32
+ /* @__PURE__ */ e(i, { children: "Secondary" }),
33
33
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
34
34
  t,
35
35
  {
@@ -39,8 +39,8 @@ function a() {
39
39
  }
40
40
  ) })
41
41
  ] }),
42
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
43
- /* @__PURE__ */ e(n, { children: "On Light" }),
42
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
43
+ /* @__PURE__ */ e(i, { children: "On Light" }),
44
44
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
45
45
  t,
46
46
  {
@@ -50,8 +50,8 @@ function a() {
50
50
  }
51
51
  ) })
52
52
  ] }),
53
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
54
- /* @__PURE__ */ e(n, { children: "Quick Link" }),
53
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
54
+ /* @__PURE__ */ e(i, { children: "Quick Link" }),
55
55
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
56
56
  t,
57
57
  {
@@ -61,8 +61,8 @@ function a() {
61
61
  }
62
62
  ) })
63
63
  ] }),
64
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
65
- /* @__PURE__ */ e(n, { children: "No Icon" }),
64
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
65
+ /* @__PURE__ */ e(i, { children: "No Icon" }),
66
66
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
67
67
  t,
68
68
  {
@@ -71,8 +71,8 @@ function a() {
71
71
  }
72
72
  ) })
73
73
  ] }),
74
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
75
- /* @__PURE__ */ e(n, { children: "Full Width" }),
74
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
75
+ /* @__PURE__ */ e(i, { children: "Full Width" }),
76
76
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
77
77
  t,
78
78
  {
@@ -83,19 +83,30 @@ function a() {
83
83
  }
84
84
  ) })
85
85
  ] }),
86
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
87
- /* @__PURE__ */ e(n, { children: "Linked" }),
88
- /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
89
- t,
90
- {
91
- text: "Sign In",
92
- theme: "linked",
93
- icon: "ExternalLink"
94
- }
95
- ) })
86
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
87
+ /* @__PURE__ */ e(i, { children: "Linked" }),
88
+ /* @__PURE__ */ r(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
89
+ /* @__PURE__ */ e(
90
+ t,
91
+ {
92
+ text: "Sign In",
93
+ theme: "linked",
94
+ icon: "ExternalLink"
95
+ }
96
+ ),
97
+ /* @__PURE__ */ e(
98
+ t,
99
+ {
100
+ disabled: !0,
101
+ text: "Copy",
102
+ theme: "linked",
103
+ icon: "Copy"
104
+ }
105
+ )
106
+ ] })
96
107
  ] }),
97
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
98
- /* @__PURE__ */ e(n, { children: "Button Bar" }),
108
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
109
+ /* @__PURE__ */ e(i, { children: "Button Bar" }),
99
110
  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
100
111
  /* @__PURE__ */ e(t, { text: "Sign In", theme: "primary", icon: "Users" }),
101
112
  /* @__PURE__ */ e(t, { text: "Register", theme: "secondary", icon: "Users" }),
@@ -103,8 +114,8 @@ function a() {
103
114
  /* @__PURE__ */ e(t, { text: "Create Account", theme: "default", icon: "Users" })
104
115
  ] }) })
105
116
  ] }),
106
- /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
107
- /* @__PURE__ */ e(n, { children: "Long text" }),
117
+ /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
118
+ /* @__PURE__ */ e(i, { children: "Long text" }),
108
119
  /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
109
120
  t,
110
121
  {
@@ -116,7 +127,7 @@ function a() {
116
127
  ] })
117
128
  ] });
118
129
  }
119
- const g = l.memo(a);
130
+ const g = l.memo(o);
120
131
  export {
121
132
  g as default
122
133
  };
package/dist/components/Modal/Modal.d.ts CHANGED
@@ -19,6 +19,6 @@ export declare namespace Modal {
19
19
  }
20
20
  export interface ModalHeaderProps {
21
21
  title: string;
22
- description?: string;
22
+ description?: React.ReactNode;
23
23
  }
24
24
  export type ModalFooterProps = ButtonBarProps;
package/dist/components/Modal/Modal.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import { jsxs as c, jsx as r } from "react/jsx-runtime";
2
- import C from "react";
2
+ import u from "react";
3
3
  import "../Button/Button.js";
4
- import { ButtonBar as N } from "../Button/ButtonBar.js";
4
+ import { ButtonBar as C } from "../Button/ButtonBar.js";
5
5
  import "../Button/LinkButton.js";
6
- import k from "../IconButton/IconButton.js";
6
+ import N from "../IconButton/IconButton.js";
7
7
  import { Overlay as t } from "../Overlay/Overlay.js";
8
8
  import { Text as d } from "../Text/Text.js";
9
9
  import { clsx as m } from "../../utils/clsx.js";
10
10
  import "../../utils/hooks/useGlobalKeyboardEvent.js";
11
11
  import { useKeyboardClose as y } from "../../utils/hooks/useKeyboardClose.js";
12
12
  import "../../index-2hJuj4UN.js";
13
- import '../../assets/Modal.css';const B = "_root_1u329_1", x = "_close_1u329_26", g = "_header_1u329_32", v = "_footer_1u329_38", s = {
13
+ import '../../assets/Modal.css';const B = "_root_1hqka_1", q = "_close_1hqka_26", x = "_header_1hqka_32", g = "_footer_1hqka_42", s = {
14
14
  root: B,
15
- "modal-appearance": "_modal-appearance_1u329_1",
16
- close: x,
17
- header: g,
18
- footer: v
15
+ "modal-appearance": "_modal-appearance_1hqka_1",
16
+ close: q,
17
+ header: x,
18
+ footer: g
19
19
  };
20
20
  function p(l) {
21
21
  const {
@@ -23,17 +23,17 @@ function p(l) {
23
23
  children: a,
24
24
  className: e,
25
25
  backdropClassName: f,
26
- contentClassName: u,
26
+ contentClassName: h,
27
27
  ariaDescribedby: _,
28
28
  ariaLabelledby: b,
29
29
  disableBackdropClose: i = !1,
30
- disableFocusLock: h = !1
31
- } = l, n = C.useCallback(() => {
30
+ disableFocusLock: k = !1
31
+ } = l, n = u.useCallback(() => {
32
32
  i || !o || o();
33
33
  }, [o, i]);
34
34
  return y(n), /* @__PURE__ */ c(t, { children: [
35
35
  /* @__PURE__ */ r(t.Backdrop, { onClick: n, className: f }),
36
- /* @__PURE__ */ r(t.Content, { className: u, disableFocusLock: h, children: /* @__PURE__ */ c(
36
+ /* @__PURE__ */ r(t.Content, { className: h, disableFocusLock: k, children: /* @__PURE__ */ c(
37
37
  "div",
38
38
  {
39
39
  role: "dialog",
@@ -41,7 +41,7 @@ function p(l) {
41
41
  "aria-labelledby": b,
42
42
  className: m(s.root, e),
43
43
  children: [
44
- !!o && /* @__PURE__ */ r(k, { className: s.close, name: "Close", onClick: o }),
44
+ !!o && /* @__PURE__ */ r(N, { className: s.close, name: "Close", onClick: o }),
45
45
  a
46
46
  ]
47
47
  }
@@ -77,7 +77,7 @@ p.Footer = function(o) {
77
77
  className: a,
78
78
  ...e
79
79
  } = o;
80
- return /* @__PURE__ */ r(N, { ...e, className: m(s.footer, a) });
80
+ return /* @__PURE__ */ r(C, { ...e, className: m(s.footer, a) });
81
81
  };
82
82
  export {
83
83
  p as Modal
package/dist/styles-scss/tokens.scss CHANGED
@@ -259,11 +259,11 @@ $control-heights: (
259
259
  @include ui.define-color-token('button-linked-background', transparent);
260
260
  @include ui.define-color-token('button-linked-hover-text', ui.color('red'));
261
261
  @include ui.define-color-token('button-linked-hover-border', transparent);
262
- @include ui.define-color-token('button-linked-hover-background', ui.color('bg-dark'));
262
+ @include ui.define-color-token('button-linked-hover-background', #24293B);
263
263
  @include ui.define-color-token('button-linked-active-text', ui.color('red'));
264
264
  @include ui.define-color-token('button-linked-active-border', transparent);
265
- @include ui.define-color-token('button-linked-active-background', ui.color('bg-dark'));
266
- @include ui.define-color-token('button-linked-disabled-text', ui.color('tertiary', $alpha: .4));
265
+ @include ui.define-color-token('button-linked-active-background', #24293B);
266
+ @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: .4));
267
267
  @include ui.define-color-token('button-linked-disabled-border', transparent);
268
268
  @include ui.define-color-token('button-linked-disabled-background', transparent);
269
269
 
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.5",
4
+ "version": "2.1.7",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",