@cfx-dev/ui-components 4.5.22 → 5.0.2

package/dist/components/Table/TableBody.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { clsx as a } from "../../utils/clsx.js";
-import { s as l } from "../../Table.module-DffST69u.js";
+import { s as l } from "../../Table.module-CMz5ENmI.js";
 function d(o) {
   const {
     className: s,

package/dist/components/Table/TableCell.js

@@ -4,7 +4,7 @@ import { stringPropFormater as c } from "../RSC/Box/Box.js";
 import h from "../Flex/Flex.js";
 import { clsx as y } from "../../utils/clsx.js";
 import { ui as t } from "../../utils/ui/ui.js";
-import { s } from "../../Table.module-DffST69u.js";
+import { s } from "../../Table.module-CMz5ENmI.js";
 function w(p) {
   const {
     onClick: l,

package/dist/components/Table/TableCellCheckbox.js

@@ -3,7 +3,7 @@ import m from "react";
 import c from "../Checkbox/Checkbox.js";
 import { clsx as i } from "../../utils/clsx.js";
 import f from "./TableCell.js";
-import { s as p } from "../../Table.module-DffST69u.js";
+import { s as p } from "../../Table.module-CMz5ENmI.js";
 function b(l) {
   const {
     checked: o = !1,

package/dist/components/Table/TableHeader.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { clsx as c } from "../../utils/clsx.js";
-import { s as e } from "../../Table.module-DffST69u.js";
+import { s as e } from "../../Table.module-CMz5ENmI.js";
 function d(s) {
   const {
     sticky: a = !1,

package/dist/components/Table/TableIconButton.js

@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
 import a from "react";
 import e from "../IconButton/IconButton.js";
 import { clsx as r } from "../../utils/clsx.js";
-import { s as t } from "../../Table.module-DffST69u.js";
+import { s as t } from "../../Table.module-CMz5ENmI.js";
 function l(o) {
   const {
     className: n,

package/dist/components/Table/TableRoot.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { clsx as s } from "../../utils/clsx.js";
-import { s as l } from "../../Table.module-DffST69u.js";
+import { s as l } from "../../Table.module-CMz5ENmI.js";
 function f(r) {
   const {
     className: o,

package/dist/components/Table/TableRow.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { ColorType } from '../../utils/ui';
 
 export interface TableRowProps extends React.PropsWithChildren {
-    size?: 'small' | 'normal' | 'large';
+    size?: 'small' | 'medium' | 'large';
     selected?: boolean;
     color?: ColorType;
     onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;

package/dist/components/Table/TableRow.js

@@ -1,23 +1,23 @@
 import { jsx as p } from "react/jsx-runtime";
 import { clsx as d } from "../../utils/clsx.js";
 import { getColor as r } from "../../utils/color.js";
-import { s as o } from "../../Table.module-DffST69u.js";
-function u(l) {
+import { s as o } from "../../Table.module-CMz5ENmI.js";
+function x(l) {
   const {
-    size: s = "normal",
+    size: s = "medium",
     selected: a,
     color: t,
     onClick: c,
     className: i,
-    children: n,
-    ref: m
+    children: m,
+    ref: n
   } = l, b = t ? 0.2 : 0, e = t || "secondary";
   return /* @__PURE__ */ p(
     "tr",
     {
       tabIndex: -1,
       role: "row",
-      ref: m,
+      ref: n,
       onClick: c,
       className: d(o.tableRow, o[s], i, {
         [o.interactive]: !!c,
@@ -37,10 +37,10 @@ function u(l) {
           opacity: 0.4
         })
       },
-      children: n
+      children: m
     }
   );
 }
 export {
-  u as default
+  x as default
 };

package/dist/components/TableResponsiveText/TableResponsiveText.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import i from "react";
+import n from "react";
 import l from "../Flex/Flex.js";
 import { clsx as m } from "../../utils/clsx.js";
 import { Text as c } from "../Text/Text.js";
@@ -13,11 +13,11 @@ function f(e) {
   const {
     title: r,
     children: s,
-    rootClassName: n
+    rootClassName: i
   } = e;
-  return /* @__PURE__ */ t(a, { title: r ?? s, children: /* @__PURE__ */ t(l, { gap: "normal", centered: !0, className: m(o.root, n), children: /* @__PURE__ */ t(c, { truncated: !0, ...e, className: o.text }) }) });
+  return /* @__PURE__ */ t(a, { title: r ?? s, children: /* @__PURE__ */ t(l, { gap: "medium", centered: !0, className: m(o.root, i), children: /* @__PURE__ */ t(c, { truncated: !0, ...e, className: o.text }) }) });
 }
-const C = i.memo(f);
+const C = n.memo(f);
 export {
   C as default
 };

package/dist/components/Tabular/TabularShowcase.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import o from "react";
+import d from "react";
 import i from "../Flex/Flex.js";
-import { Text as l } from "../Text/Text.js";
+import { Text as r } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { Tabular as m } from "./Tabular.js";
+import { Tabular as l } from "./Tabular.js";
 const c = [
   {
     id: "item1",
@@ -33,59 +33,59 @@ const c = [
     disabled: !0
   }
 ];
-function n() {
-  const [a, r] = o.useState("item1");
+function o() {
+  const [a, m] = d.useState("item1");
   return /* @__PURE__ */ t(i, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(l, { children: "Default" }),
+    /* @__PURE__ */ t(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Default" }),
       /* @__PURE__ */ e(
-        m,
+        l,
         {
           items: c,
           activeItem: a,
-          onActivate: r
+          onActivate: m
         }
       )
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(l, { children: "Size small" }),
+    /* @__PURE__ */ t(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Size small" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        m,
+        l,
         {
           size: "small",
           items: c,
           activeItem: a,
-          onActivate: r
+          onActivate: m
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(l, { children: "Size medium" }),
+    /* @__PURE__ */ t(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Size medium" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        m,
+        l,
         {
           size: "medium",
           items: c,
           activeItem: a,
-          onActivate: r
+          onActivate: m
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(l, { children: "Size large" }),
+    /* @__PURE__ */ t(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Size large" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        m,
+        l,
         {
           size: "large",
           items: c,
           activeItem: a,
-          onActivate: r
+          onActivate: m
         }
       ) })
     ] })
   ] });
 }
-const I = o.memo(n);
+const I = d.memo(o);
 export {
   I as default
 };

package/dist/components/Text/BodyShowcase.js

@@ -1,133 +1,346 @@
 import { jsx as e } from "react/jsx-runtime";
-import t from "react";
-import i from "./TextShowcase.js";
-const a = [
+import p from "react";
+import s from "./TextShowcase.js";
+const i = [
   {
     textProps: {
-      size: "normal",
+      size: "small",
       as: "p"
     },
-    title: "paragraph",
+    title: "Paragraph",
     descriptions: [
       "Helvetica Now Text Regular",
-      "20px",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(150), 15px"
+      },
+      tablet: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(150), 15px"
+      },
+      desktop: {
+        size: "gs(180), 18px",
+        lineHeight: "150%",
+        paragraph: "gs(160), 16px"
+      },
+      ldesktop: {
+        size: "gs(180), 18px",
+        lineHeight: "150%",
+        paragraph: "gs(160), 16px"
+      }
+    }
   },
   {
     textProps: {
-      size: "normal",
+      size: "small",
       weight: "bold",
       as: "p"
     },
-    title: "paragraph-bold",
+    title: "Paragraph Bold",
     descriptions: [
       "Helvetica Now Text Bold",
-      "20px",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(150), 15px"
+      },
+      tablet: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(150), 15px"
+      },
+      desktop: {
+        size: "gs(180), 18px",
+        lineHeight: "150%",
+        paragraph: "gs(160), 16px"
+      },
+      ldesktop: {
+        size: "gs(180), 18px",
+        lineHeight: "150%",
+        paragraph: "gs(160), 16px"
+      }
+    }
   },
   {
     textProps: {
-      size: "normal",
+      size: "small",
       weight: "bold",
       underlined: !0,
       as: "p"
     },
-    title: "paragraph-hyperlink",
+    title: "Paragraph Hyperlink",
     descriptions: [
       "Helvetica Now Text Bold",
-      "20px Underlined",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(150), 15px"
+      },
+      tablet: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(150), 15px"
+      },
+      desktop: {
+        size: "gs(180), 18px",
+        lineHeight: "150%",
+        paragraph: "gs(160), 16px"
+      },
+      ldesktop: {
+        size: "gs(180), 18px",
+        lineHeight: "150%",
+        paragraph: "gs(160), 16px"
+      }
+    }
   },
   {
     textProps: {
       size: "xsmall"
     },
-    title: "caption",
+    title: "Caption",
     descriptions: [
       "Helvetica Now Text Regular",
-      "18px",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(140), 14px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(140), 14px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(120), 12px"
+      },
+      ldesktop: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(120), 12px"
+      }
+    }
   },
   {
     textProps: {
       size: "xsmall",
       weight: "bold"
     },
-    title: "caption-bold",
+    title: "Caption Bold",
     descriptions: [
       "Helvetica Now Text Bold",
-      "18px",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(140), 14px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(140), 14px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(120), 12px"
+      },
+      ldesktop: {
+        size: "gs(160), 16px",
+        lineHeight: "150%",
+        paragraph: "gs(120), 12px"
+      }
+    }
   },
   {
     textProps: {
       size: "xxsmall"
     },
-    title: "metadata",
+    title: "Metadata",
     descriptions: [
       "Helvetica Now Text Regular",
-      "15px",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      ldesktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      }
+    }
   },
   {
     textProps: {
       size: "xxsmall",
       weight: "bold"
     },
-    title: "metadata-bold",
+    title: "Metadata Bold",
     descriptions: [
       "Helvetica Now Text Bold",
-      "15px",
-      "150% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      ldesktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      }
+    }
   },
   {
     textProps: {
       size: "xxsmall",
       uppercase: !0,
-      letterSpacing: "large"
+      letterSpacing: "xlarge"
     },
     title: "All Caps",
     descriptions: [
       "Helvetica Now Text Regular",
-      "15px",
-      "150% Line Height",
-      "-2.5% Letter Spacing"
-    ]
+      "1px Letter Spacing"
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      ldesktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      }
+    }
   },
   {
     textProps: {
       size: "xxsmall",
       weight: "bold",
       uppercase: !0,
+      letterSpacing: "xlarge"
+    },
+    title: "All Caps Bold",
+    descriptions: [
+      "Helvetica Now Text Bold",
+      "1px Letter Spacing"
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      },
+      ldesktop: {
+        size: "gs(120), 12px",
+        lineHeight: "150%",
+        paragraph: "gs(110), 10px"
+      }
+    }
+  },
+  {
+    textProps: {
+      size: "xxxsmall",
       letterSpacing: "large"
     },
-    title: "All Caps-Bold",
+    title: "Tooltip",
     descriptions: [
       "Helvetica Now Text Bold",
-      "15px",
-      "150% Line Height",
-      "-2.5% Letter Spacing"
-    ]
+      "0px Letter Spacing"
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(110), 10px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      tablet: {
+        size: "gs(110), 10px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      desktop: {
+        size: "gs(110), 10px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      ldesktop: {
+        size: "gs(110), 10px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      }
+    }
   }
 ];
-function l() {
-  return /* @__PURE__ */ e(i, { items: a });
+function t() {
+  return /* @__PURE__ */ e(s, { items: i });
 }
-const s = t.memo(l);
+const l = p.memo(t);
 export {
-  s as default
+  l as default
 };