@cfx-dev/ui-components 2.1.23 → 3.0.0

package/dist/components/Table/Table.js

@@ -1,35 +1,35 @@
 import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import l, { useState as k } from "react";
-import v from "../Checkbox/Checkbox.js";
-import y from "../IconButton/IconButton.js";
-import { Text as I } from "../Text/Text.js";
-import { clsx as p } from "../../utils/clsx.js";
-import '../../assets/Table.css';const $ = "_tableIcon_jm0lw_1", S = "_iconButton_jm0lw_1", z = "_root_jm0lw_21", A = "_radio_jm0lw_38", E = "_radioContent_jm0lw_42", O = "_pointer_jm0lw_49", g = "_selectedRow_jm0lw_52", F = "_headerText_jm0lw_56", H = "_headerContent_jm0lw_65", V = "_hidden_jm0lw_84", o = {
-  tableIcon: $,
-  iconButton: S,
-  root: z,
-  radio: A,
-  radioContent: E,
-  pointer: O,
-  selectedRow: g,
-  headerText: F,
-  headerContent: H,
-  hidden: V
+import s, { useState as k } from "react";
+import y from "../Checkbox/Checkbox.js";
+import I from "../IconButton/IconButton.js";
+import { Text as $ } from "../Text/Text.js";
+import { clsx as f } from "../../utils/clsx.js";
+const S = "_tableIcon_jm0lw_1", z = "_iconButton_jm0lw_1", A = "_root_jm0lw_21", E = "_radio_jm0lw_38", O = "_radioContent_jm0lw_42", g = "_pointer_jm0lw_49", F = "_selectedRow_jm0lw_52", H = "_headerText_jm0lw_56", V = "_headerContent_jm0lw_65", q = "_hidden_jm0lw_84", o = {
+  tableIcon: S,
+  iconButton: z,
+  root: A,
+  radio: E,
+  radioContent: O,
+  pointer: g,
+  selectedRow: F,
+  headerText: H,
+  headerContent: V,
+  hidden: q
 };
-function q(r) {
+function D(r) {
   const {
     className: e,
     color: n = "inherit"
-  } = r, i = p(o.tableIcon, o.iconButton, e);
-  return /* @__PURE__ */ t(y, { ...r, className: i, color: n });
+  } = r, i = f(o.tableIcon, o.iconButton, e);
+  return /* @__PURE__ */ t(I, { ...r, className: i, color: n });
 }
-function D(r) {
+function G(r) {
   const {
     item: e,
     onSortClick: n
-  } = r, i = l.useCallback(() => {
+  } = r, i = s.useCallback(() => {
     n && n(e.sortKey || e.text);
-  }, [e.sortKey, e.text, n]), s = p(o.headerContent, {
+  }, [e.sortKey, e.text, n]), a = f(o.headerContent, {
     [o.sortable]: e.sortable,
     [o.empty]: !e.text
   });
@@ -38,9 +38,9 @@ function D(r) {
     {
       className: e.sortable ? o.pointer : void 0,
       onClick: e.sortable ? i : void 0,
-      children: /* @__PURE__ */ C("div", { className: s, children: [
+      children: /* @__PURE__ */ C("div", { className: a, children: [
         /* @__PURE__ */ t(
-          I,
+          $,
           {
             className: o.headerText,
             color: "secondary",
@@ -52,7 +52,7 @@ function D(r) {
           }
         ),
         !!e.sortable && /* @__PURE__ */ t(
-          q,
+          D,
           {
             name: "Sort",
             onClick: i
@@ -62,106 +62,107 @@ function D(r) {
     }
   );
 }
-function G(r) {
+function J(r) {
   const {
     index: e,
     includeRadio: n = !1,
     loading: i,
-    selectedRow: s,
-    item: x,
+    selectedRow: a,
+    item: p,
     dataContainer: _,
     onSelectChange: d
-  } = r, u = l.useCallback((a) => {
+  } = r, u = s.useCallback((c) => {
     d(
-      a ? e : null
+      c ? e : null
     );
-  }, [d, e]), b = l.useCallback(() => {
+  }, [d, e]), b = s.useCallback(() => {
     d(e);
-  }, [d, e]), f = p({
-    [o.selectedRow]: s === e,
+  }, [d, e]), x = f({
+    [o.selectedRow]: a === e,
     [o.pointer]: n
   });
   return /* @__PURE__ */ C(
     "tr",
     {
-      className: f,
+      className: x,
       onClick: n ? b : void 0,
       children: [
-        n && /* @__PURE__ */ t("td", { className: p(o.radio, { [o.hidden]: i }), children: /* @__PURE__ */ t("div", { className: o.radioContent, children: /* @__PURE__ */ t(
-          v,
+        n && /* @__PURE__ */ t("td", { className: f(o.radio, { [o.hidden]: i }), children: /* @__PURE__ */ t("div", { className: o.radioContent, children: /* @__PURE__ */ t(
+          y,
           {
             size: "small",
             onCheckedChange: u,
             "aria-label": `${e}`,
-            checked: s === e
+            checked: a === e
           }
         ) }) }),
-        x.map((a, w) => {
+        p.map((c, w) => {
           let h;
-          return l.isValidElement(a) ? h = a : _ ? h = l.createElement(_, { item: a }) : h = String(a), /* @__PURE__ */ t("td", { children: h }, `item-${w}`);
+          return s.isValidElement(c) ? h = c : _ ? h = s.createElement(_, { item: c }) : h = String(c), /* @__PURE__ */ t("td", { children: h }, `item-${w}`);
         })
       ]
     },
     `row-${e}`
   );
 }
-function U({
+function W({
   headers: r = [],
   data: e = [],
   includeRadio: n = !1,
   loading: i = !1,
-  onSelectChange: s,
-  dataContainer: x,
+  onSelectChange: a,
+  dataContainer: p,
   selectedRow: _ = null,
   sortBy: d,
   sortOrder: u = "asc",
-  onSortChange: b
+  onSortChange: b,
+  className: x
 }) {
-  const [f, a] = k(_), [w, h] = k(d), [j, N] = k(u), T = l.useCallback((c) => {
-    const R = w === c && j === "asc" ? "desc" : "asc";
-    h(c), N(R), b == null || b(c, R);
-  }, [b, w, j]), B = l.useCallback(
-    (c) => {
-      const m = c === f ? null : c;
-      a(m), s == null || s(m);
+  const [c, w] = k(_), [h, j] = k(d), [N, R] = k(u), B = s.useCallback((l) => {
+    const T = h === l && N === "asc" ? "desc" : "asc";
+    j(l), R(T), b == null || b(l, T);
+  }, [b, h, N]), v = s.useCallback(
+    (l) => {
+      const m = l === c ? null : l;
+      w(m), a == null || a(m);
     },
-    [s, f]
+    [a, c]
   );
-  return l.useEffect(() => {
-    a(_);
-  }, [_]), l.useEffect(() => {
-    h(d);
-  }, [d]), l.useEffect(() => {
-    N(u);
-  }, [u]), /* @__PURE__ */ t("div", { className: o.root, children: /* @__PURE__ */ C("table", { children: [
+  return s.useEffect(() => {
+    w(_);
+  }, [_]), s.useEffect(() => {
+    j(d);
+  }, [d]), s.useEffect(() => {
+    R(u);
+  }, [u]), /* @__PURE__ */ t("div", { className: f(o.root, x), children: /* @__PURE__ */ C("table", { children: [
     /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
       n && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
-      r.map((c, m) => /* @__PURE__ */ t(
-        D,
+      r.map((l, m) => /* @__PURE__ */ t(
+        G,
         {
-          item: c,
-          onSortClick: T
+          item: l,
+          onSortClick: B
         },
         `header-${m}`
       ))
     ] }) }),
-    /* @__PURE__ */ t("tbody", { children: e.map((c, m) => /* @__PURE__ */ t(
-      G,
+    /* @__PURE__ */ t("tbody", { children: e.map((l, m) => /* @__PURE__ */ t(
+      J,
       {
         index: m,
-        item: c,
+        item: l,
         includeRadio: n,
         loading: i,
-        selectedRow: f,
-        onSelectChange: B,
-        dataContainer: x
+        selectedRow: c,
+        onSelectChange: v,
+        dataContainer: p
       },
       `row-${m}`
     )) })
   ] }) });
 }
 export {
-  U as Table,
-  D as TableHeaderItem,
-  q as TableIconButton
+  W as Table,
+  G as TableHeaderItem,
+  D as TableIconButton
 };

package/dist/components/Tabular/Tabular.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as x } from "react/jsx-runtime";
 import h, { createElement as k } from "react";
 import { Dot as v } from "../Dot/Dot.js";
 import { clsx as b } from "../../utils/clsx.js";
-import '../../assets/Tabular.css';const C = "_reset_1xcn9_1", p = "_root_1xcn9_5", I = "_item_1xcn9_17", R = "_active_1xcn9_38", g = "_hasNotification_1xcn9_65", T = "_content_1xcn9_68", a = {
+const C = "_reset_1xcn9_1", p = "_root_1xcn9_5", I = "_item_1xcn9_17", R = "_active_1xcn9_38", g = "_hasNotification_1xcn9_65", T = "_content_1xcn9_68", a = {
   reset: C,
   root: p,
   "theme-dark": "_theme-dark_1xcn9_11",

package/dist/components/Text/Text.js

@@ -3,7 +3,7 @@ import l from "react";
 import { ui as C } from "../ui.js";
 import { clsx as w } from "../../utils/clsx.js";
 import { getColor as A } from "../../utils/color.js";
-import '../../assets/Text.css';const O = "_root_e9tvt_1", R = "_centered_e9tvt_1", S = "_underlined_e9tvt_4", $ = "_truncated_e9tvt_7", E = "_typographic_e9tvt_15", N = "_block_e9tvt_26", o = {
+const O = "_root_14isi_1", R = "_centered_14isi_4", S = "_underlined_14isi_7", $ = "_truncated_14isi_10", E = "_typographic_14isi_18", N = "_block_14isi_28", o = {
   root: O,
   centered: R,
   underlined: S,
@@ -40,9 +40,9 @@ import '../../assets/Text.css';const O = "_root_e9tvt_1", R = "_centered_e9tvt_1
     userSelectable: u = !1,
     underlined: y = !1,
     children: g,
-    className: v
-  } = t, x = n === "div", T = w(o.root, v, {
-    [o.block]: x,
+    className: x
+  } = t, T = n === "div", v = w(o.root, x, {
+    [o.block]: T,
     [o.centered]: d,
     [o.truncated]: m,
     [o.underlined]: y,
@@ -60,7 +60,7 @@ import '../../assets/Text.css';const O = "_root_e9tvt_1", R = "_centered_e9tvt_1
     letterSpacing: `var(--letter-spacing-${p})`,
     fontWeight: `var(--font-weight-${f})`
   };
-  return h && (i.textTransform = "uppercase"), /* @__PURE__ */ s(n, { ref: e, dir: "auto", className: T, style: i, children: g });
+  return h && (i.textTransform = "uppercase"), /* @__PURE__ */ s(n, { ref: e, dir: "auto", className: v, style: i, children: g });
 }), G = l.forwardRef(function(t, e) {
   return /* @__PURE__ */ s(F, { ref: e, ...t, as: "div" });
 });

package/dist/components/Text/TextShowcase.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as t, Fragment as e } from "react/jsx-runtime";
 import a from "react";
 import { Text as c } from "./Text.js";
 import { Separator as d } from "../Separator/Separator.js";
-import '../../assets/TextShowcase.css';const h = "_root_18nng_1", f = {
+const h = "_root_18nng_1", f = {
   root: h
 }, T = "The quick brown fox jumps over the lazy dog.", m = "How vexingly quick daft zebras jump.";
 function u() {

package/dist/components/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import _ from "react";
 import { clsx as g } from "../../utils/clsx.js";
-import '../../assets/Textarea.css';const x = "_root_fya03_1", k = "_small_fya03_7", v = "_large_fya03_11", C = "_error_fya03_15", N = "_disabled_fya03_19", e = {
+const x = "_root_fya03_1", k = "_small_fya03_7", v = "_large_fya03_11", C = "_error_fya03_15", N = "_disabled_fya03_19", e = {
   root: x,
   "full-width": "_full-width_fya03_4",
   small: k,

package/dist/components/Title/Title.js

@@ -5,7 +5,7 @@ import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as M } from "../../utils/hooks/useOutlet.js";
 import { mergeRefs as C } from "../../utils/mergeRefs.js";
-import '../../assets/Title.css';const N = "_wrapper_11ky5_1", $ = "_appearance_11ky5_1", A = "_animated_11ky5_26", F = "_root_11ky5_71", I = "_shortcut_11ky5_84", _ = {
+const N = "_wrapper_11ky5_1", $ = "_appearance_11ky5_1", A = "_animated_11ky5_26", F = "_root_11ky5_71", I = "_shortcut_11ky5_84", _ = {
   wrapper: N,
   appearance: $,
   animated: A,

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as p } from "react/jsx-runtime";
 import l from "react";
 import { Interactive as D } from "../Interactive/Interactive.js";
 import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/ToggleGroup.css';const j = "_root_1500i_1", k = "_disabled_1500i_6", E = "_descripted_1500i_10", L = "_multiline_1500i_13", O = "_options_1500i_17", S = "_option_1500i_17", w = "_description_1500i_24", G = "_active_1500i_69", e = {
+const j = "_root_1500i_1", k = "_disabled_1500i_6", E = "_descripted_1500i_10", L = "_multiline_1500i_13", O = "_options_1500i_17", S = "_option_1500i_17", w = "_description_1500i_24", G = "_active_1500i_69", e = {
   root: j,
   disabled: k,
   descripted: E,

package/dist/main.d.ts

@@ -19,6 +19,7 @@ export { ClipboardButton } from './components/ClipboardButton';
 export { Checkbox } from './components/Checkbox';
 export { Button } from './components/Button/Button';
 export { LinkButton } from './components/Button/LinkButton';
+export { Link, ButtonLink, getLinkClassName, } from './components/Link';
 export { ButtonBar } from './components/Button/ButtonBar';
 export { Avatar } from './components/Avatar';
 export { BackdropPortal, BACKDROP_OUTLET_ID } from './components/BackdropPortal/BackdropPortal';
@@ -66,6 +67,8 @@ export { Textarea } from './components/Textarea/Textarea';
 export { Title, TITLE_OUTLET_ID } from './components/Title/Title';
 export { InputDropzone } from './components/InputDropzone';
 export { Skeleton } from './components/Skeleton';
+export type { FlexProps } from './components/Layout/Flex/Flex';
+export type { LinkProps, LinkBaseProps } from './components/Link';
 export type { ButtonProps, ButtonTheme } from './components/Button/Button';
 export type { TitleProps, FixedOn } from './components/Title/Title';
 export type { IconButtonProps } from './components/IconButton';