@cfx-dev/ui-components 0.0.19 → 0.0.20

package/dist/components/Shroud/Shroud.js

@@ -1,34 +1,34 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import o from "react";
-import { a as p, b as v } from "../../hooks-GAujvL7d.js";
-import { ui as x } from "../ui.js";
-import '../../assets/Shroud.css';const _ = "_root_7v6x1_1", b = "_tile_7v6x1_6", e = {
+import s from "react";
+import { ui as p } from "../ui.js";
+import { useOutletBefore as v, useWindowResize as x } from "../../utils/hooks.js";
+import '../../assets/Shroud.css';const _ = "_root_7v6x1_1", g = "_tile_7v6x1_6", e = {
   root: _,
-  tile: b
-}, S = o.forwardRef(function(c, n) {
+  tile: g
+}, S = s.forwardRef(function(c, n) {
   const {
     forRef: r
-  } = c, [u, d] = o.useState({}), f = p("pre-title"), i = o.useCallback(() => {
+  } = c, [u, d] = s.useState({}), f = v("title"), i = s.useCallback(() => {
     if (!r.current)
       return;
-    const s = r.current.getBoundingClientRect(), h = {
-      x: s.x,
-      y: s.y,
-      w: s.width,
-      h: s.height,
+    const o = r.current.getBoundingClientRect(), h = {
+      x: o.x,
+      y: o.y,
+      w: o.width,
+      h: o.height,
       sw: globalThis.screen.availWidth,
       sh: globalThis.screen.availHeight
     };
     d(
       Object.fromEntries(
-        Object.entries(h).flatMap(([a, l]) => [
-          [`--${a}`, x.px(l)],
-          [`--${a}-raw`, l]
+        Object.entries(h).flatMap(([l, a]) => [
+          [`--${l}`, p.px(a)],
+          [`--${l}-raw`, a]
         ])
       )
     );
   }, []);
-  return o.useEffect(i, []), v(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m("div", { ref: n, className: e.root, style: u, children: [
+  return s.useEffect(i, []), x(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),

package/dist/components/Switch/Switch.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as p } from "react/jsx-runtime";
 import d from "react";
-import { clsx as _ } from "../../utils/clsx.js";
 import { Interactive as S } from "../Interactive/Interactive.js";
+import { clsx as _ } from "../../utils/clsx.js";
 import '../../assets/Switch.css';const g = "_root_11dd4_1", j = "_disabled_11dd4_7", k = "_descripted_11dd4_11", w = "_multiline_11dd4_14", E = "_options_11dd4_18", L = "_option_11dd4_18", O = "_description_11dd4_25", I = "_active_11dd4_73", e = {
   root: g,
   disabled: j,

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+interface ITableProps {
+    headers: string[];
+    data: Array<Array<string | number | Date | React.ReactNode>>;
+    includeRadio?: boolean;
+    onSelectChange?: (rowIndex: number) => void;
+    dataContainer?: React.FC<{
+        item: string | number | Date | React.ReactNode;
+    }> | undefined;
+    useSort?: boolean;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
+}
+declare function Table({ headers, data, includeRadio, onSelectChange, dataContainer, useSort, sortBy: initialSortBy, sortOrder: initialSortOrder, onSortChange, }: ITableProps): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/Table/Table.js

@@ -0,0 +1,61 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import o, { useState as i } from "react";
+import { F, a as A } from "../../index.esm-BkynlSN6.js";
+import '../../assets/Table.css';const E = "_selectedRow_1jg2j_23", _ = {
+  "table-responsive": "_table-responsive_1jg2j_1",
+  selectedRow: E
+};
+function S({
+  headers: h = [],
+  data: w = [],
+  includeRadio: n = !1,
+  onSelectChange: c,
+  dataContainer: p,
+  useSort: m = !1,
+  sortBy: j,
+  sortOrder: v = "asc",
+  onSortChange: d
+}) {
+  const [b, f] = i(null), [u, y] = i(j), [R, k] = i(v), O = (e) => {
+    const l = u === e && R === "asc" ? "desc" : "asc";
+    y(e), k(l), d == null || d(e, l);
+  }, $ = o.useCallback((e) => {
+    f(parseInt(e.target.value, 10)), c == null || c(parseInt(e.target.value, 10));
+  }, [f, c]);
+  return /* @__PURE__ */ t("div", { className: _.table, children: /* @__PURE__ */ a("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ a("tr", { children: [
+      n && /* @__PURE__ */ t("th", { children: "Select Row" }),
+      h.map((e, s) => /* @__PURE__ */ a("th", { onClick: () => m && O(e), children: [
+        e,
+        m && u === e && /* @__PURE__ */ t("span", { children: R === "asc" ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(A, {}) })
+      ] }, `header-${s}`))
+    ] }) }),
+    /* @__PURE__ */ t("tbody", { children: w.map((e, s) => /* @__PURE__ */ a(
+      "tr",
+      {
+        className: b === s ? _.selectedRow : "",
+        children: [
+          n && /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
+            "input",
+            {
+              type: "radio",
+              name: "tableRowSelect",
+              value: s,
+              checked: b === s,
+              onChange: $,
+              "aria-label": `${s}`
+            }
+          ) }),
+          e.map((l, B) => {
+            let r;
+            return o.isValidElement(l) ? r = l : p ? r = o.createElement(p, { item: l }) : r = String(l), /* @__PURE__ */ t("td", { children: r }, `item-${B}`);
+          })
+        ]
+      },
+      `row-${s}`
+    )) })
+  ] }) });
+}
+export {
+  S as default
+};

package/dist/components/Tabular/Tabular.d.ts

@@ -15,7 +15,7 @@ export declare function Tabular(props: TabularProps): import("react/jsx-runtime"
 export declare namespace Tabular {
     var Root: (props: TabularRootProps) => import("react/jsx-runtime").JSX.Element;
     var Item: React.ForwardRefExoticComponent<Pick<TabularItem, "label" | "disabled" | "icon"> & {
-        active?: boolean | undefined;
+        active?: boolean;
         onClick?(): void;
     } & React.RefAttributes<HTMLDivElement>>;
 }

package/dist/components/Text/Text.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type TextColor = 'inherit' | 'main' | 'primary' | 'teal' | 'success' | 'warning' | 'error';
 export type TextSize = 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';
 export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';

package/dist/components/Title/Title.js

@@ -1,8 +1,8 @@
 import { jsxs as L, Fragment as k, jsx as p } from "react/jsx-runtime";
 import f from "react";
 import { clsx as O } from "../../utils/clsx.js";
-import { a as y } from "../../hooks-GAujvL7d.js";
-import C from "../../utils/mergeRefs.js";
+import { useOutlet as y } from "../../utils/hooks.js";
+import { mergeRefs as C } from "../../utils/mergeRefs.js";
 import '../../assets/Title.css';const R = "_wrapper_1l1sn_1", T = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
   wrapper: R,
   appearance: T,

package/dist/{extends-Dk_bSU3E.js → extends-hS2Bh-Yp.js}

@@ -2,8 +2,7 @@ function e() {
   return e = Object.assign ? Object.assign.bind() : function(t) {
     for (var n = 1; n < arguments.length; n++) {
       var r = arguments[n];
-      for (var a in r)
-        ({}).hasOwnProperty.call(r, a) && (t[a] = r[a]);
+      for (var a in r) ({}).hasOwnProperty.call(r, a) && (t[a] = r[a]);
     }
     return t;
   }, e.apply(null, arguments);