@cfx-dev/ui-components 2.1.12 → 2.1.13

package/dist/components/Table/Table.js

@@ -1,85 +1,89 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import l, { useState as C } from "react";
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import s, { useState as p } from "react";
 import B from "../Checkbox/Checkbox.js";
-import $ from "../IconButton/IconButton.js";
-import { Text as T } from "../Text/Text.js";
-import { clsx as x } from "../../utils/clsx.js";
-import '../../assets/Table.css';const j = "_root_1v0yo_1", z = "_radio_1v0yo_14", A = "_pointer_1v0yo_21", E = "_selectedRow_1v0yo_24", O = "_headerContent_1v0yo_34", S = "_sortable_1v0yo_40", F = "_empty_1v0yo_40", H = "_sortButton_1v0yo_43", r = {
-  root: j,
-  radio: z,
-  pointer: A,
-  selectedRow: E,
-  headerContent: O,
-  sortable: S,
-  empty: F,
-  sortButton: H
+import T from "../IconButton/IconButton.js";
+import { Text as $ } from "../Text/Text.js";
+import { clsx as k } from "../../utils/clsx.js";
+import '../../assets/Table.css';const j = "_iconButton_1yv0x_1", z = "_root_1yv0x_21", A = "_radio_1yv0x_34", E = "_radioContent_1yv0x_37", O = "_pointer_1yv0x_44", S = "_selectedRow_1yv0x_47", F = "_headerContent_1yv0x_57", l = {
+  iconButton: j,
+  root: z,
+  radio: A,
+  radioContent: E,
+  pointer: O,
+  selectedRow: S,
+  headerContent: F
 };
-function V(h) {
+function H(r) {
+  const {
+    className: e,
+    color: o = "inherit"
+  } = r, n = k(l.iconButton, e);
+  return /* @__PURE__ */ t(T, { ...r, className: n, color: o });
+}
+function I(r) {
   const {
     item: e,
     onSortClick: o
-  } = h, s = l.useCallback(() => {
+  } = r, n = s.useCallback(() => {
     o && o(e.sortKey || e.text);
-  }, [e.sortKey, e.text, o]), b = x(r.headerContent, {
-    [r.sortable]: e.sortable,
-    [r.empty]: !e.text
+  }, [e.sortKey, e.text, o]), _ = k(l.headerContent, {
+    [l.sortable]: e.sortable,
+    [l.empty]: !e.text
   });
   return /* @__PURE__ */ t(
     "th",
     {
-      className: e.sortable ? r.pointer : void 0,
-      onClick: e.sortable ? s : void 0,
-      children: /* @__PURE__ */ y("div", { className: b, children: [
-        /* @__PURE__ */ t(T, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
+      className: e.sortable ? l.pointer : void 0,
+      onClick: e.sortable ? n : void 0,
+      children: /* @__PURE__ */ C("div", { className: _, children: [
+        /* @__PURE__ */ t($, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
         !!e.sortable && /* @__PURE__ */ t(
-          $,
+          H,
           {
-            className: r.sortButton,
-            color: "secondary",
             name: "Sort",
-            onClick: s
+            onClick: n
           }
         )
       ] })
     }
   );
 }
-function q(h) {
+function V(r) {
   const {
     index: e,
     includeRadio: o = !1,
-    selectedRow: s,
-    item: b,
-    dataContainer: m,
-    onSelectChange: a
-  } = h, f = l.useCallback((n) => {
-    a(
-      n ? e : null
+    selectedRow: n,
+    item: _,
+    dataContainer: h,
+    onSelectChange: i
+  } = r, f = s.useCallback((a) => {
+    i(
+      a ? e : null
     );
-  }, [a, e]), _ = l.useCallback(() => {
-    a(e);
-  }, [a, e]), p = x({
-    [r.selectedRow]: s === e,
-    [r.pointer]: o
+  }, [i, e]), u = s.useCallback(() => {
+    i(e);
+  }, [i, e]), b = k({
+    [l.selectedRow]: n === e,
+    [l.pointer]: o
   });
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ C(
     "tr",
     {
-      className: p,
-      onClick: o ? _ : void 0,
+      className: b,
+      onClick: o ? u : void 0,
       children: [
-        o && /* @__PURE__ */ t("td", { className: r.radio, children: /* @__PURE__ */ t(
+        o && /* @__PURE__ */ t("td", { className: l.radio, children: /* @__PURE__ */ t("div", { className: l.radioContent, children: /* @__PURE__ */ t(
           B,
           {
             size: "small",
             onCheckedChange: f,
             "aria-label": `${e}`,
-            checked: s === e
+            checked: n === e
           }
-        ) }),
-        b.map((n, u) => {
-          let d;
-          return l.isValidElement(n) ? d = n : m ? d = l.createElement(m, { item: n }) : d = String(n), /* @__PURE__ */ t("td", { children: d }, `item-${u}`);
+        ) }) }),
+        _.map((a, x) => {
+          let m;
+          return s.isValidElement(a) ? m = a : h ? m = s.createElement(h, { item: a }) : m = String(a), /* @__PURE__ */ t("td", { children: m }, `item-${x}`);
         })
       ]
     },
@@ -87,59 +91,60 @@ function q(h) {
   );
 }
 function M({
-  headers: h = [],
+  headers: r = [],
   data: e = [],
   includeRadio: o = !1,
-  onSelectChange: s,
-  dataContainer: b,
-  selectedRow: m = null,
-  sortBy: a,
+  onSelectChange: n,
+  dataContainer: _,
+  selectedRow: h = null,
+  sortBy: i,
   sortOrder: f = "asc",
-  onSortChange: _
+  onSortChange: u
 }) {
-  const [p, n] = C(m), [u, d] = C(a), [k, v] = C(f), R = l.useCallback((c) => {
-    const w = u === c && k === "asc" ? "desc" : "asc";
-    d(c), v(w), _ == null || _(c, w);
-  }, [_, u, k]), N = l.useCallback(
+  const [b, a] = p(h), [x, m] = p(i), [v, w] = p(f), N = s.useCallback((c) => {
+    const y = x === c && v === "asc" ? "desc" : "asc";
+    m(c), w(y), u == null || u(c, y);
+  }, [u, x, v]), R = s.useCallback(
     (c) => {
-      const i = c === p ? null : c;
-      n(i), s == null || s(i);
+      const d = c === b ? null : c;
+      a(d), n == null || n(d);
     },
-    [s, p]
+    [n, b]
   );
-  return l.useEffect(() => {
-    n(m);
-  }, [m]), l.useEffect(() => {
-    d(a);
-  }, [a]), l.useEffect(() => {
-    v(f);
-  }, [f]), /* @__PURE__ */ t("div", { className: r.root, children: /* @__PURE__ */ y("table", { children: [
-    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ y("tr", { children: [
+  return s.useEffect(() => {
+    a(h);
+  }, [h]), s.useEffect(() => {
+    m(i);
+  }, [i]), s.useEffect(() => {
+    w(f);
+  }, [f]), /* @__PURE__ */ t("div", { className: l.root, children: /* @__PURE__ */ C("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
       o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
-      h.map((c, i) => /* @__PURE__ */ t(
-        V,
+      r.map((c, d) => /* @__PURE__ */ t(
+        I,
         {
           item: c,
-          onSortClick: R
+          onSortClick: N
         },
-        `header-${i}`
+        `header-${d}`
       ))
     ] }) }),
-    /* @__PURE__ */ t("tbody", { children: e.map((c, i) => /* @__PURE__ */ t(
-      q,
+    /* @__PURE__ */ t("tbody", { children: e.map((c, d) => /* @__PURE__ */ t(
+      V,
       {
-        index: i,
+        index: d,
         item: c,
         includeRadio: o,
-        selectedRow: p,
-        onSelectChange: N,
-        dataContainer: b
+        selectedRow: b,
+        onSelectChange: R,
+        dataContainer: _
       },
-      `row-${i}`
+      `row-${d}`
     )) })
   ] }) });
 }
 export {
   M as Table,
-  V as TableHeaderItem
+  I as TableHeaderItem,
+  H as TableIconButton
 };

package/dist/components/Tabular/Tabular.js

@@ -1,12 +1,12 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import f, { createElement as k } from "react";
+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 h } from "../../utils/clsx.js";
-import '../../assets/Tabular.css';const C = "_reset_17apb_1", x = "_root_17apb_5", I = "_item_17apb_16", R = "_active_17apb_37", g = "_hasNotification_17apb_64", T = "_content_17apb_67", e = {
+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 = {
   reset: C,
-  root: x,
-  "theme-dark": "_theme-dark_17apb_10",
-  "theme-light": "_theme-light_17apb_13",
+  root: p,
+  "theme-dark": "_theme-dark_1xcn9_11",
+  "theme-light": "_theme-light_1xcn9_14",
   item: I,
   active: R,
   hasNotification: g,
@@ -14,77 +14,77 @@ import '../../assets/Tabular.css';const C = "_reset_17apb_1", x = "_root_17apb_5
 };
 function m(_) {
   const {
-    items: s,
+    items: i,
     activeItem: o,
-    onActivate: a,
-    itemClassName: i,
-    ...c
-  } = _, n = f.useCallback((t) => {
-    a && a(t);
-  }, [a]);
-  return /* @__PURE__ */ r(m.Root, { ...c, children: s.map((t) => /* @__PURE__ */ k(
+    onActivate: e,
+    itemClassName: c,
+    ...n
+  } = _, s = h.useCallback((t) => {
+    e && e(t);
+  }, [e]);
+  return /* @__PURE__ */ r(m.Root, { ...n, children: i.map((t) => /* @__PURE__ */ k(
     m.Item,
     {
       ...t,
-      className: i,
+      className: c,
       key: t.id,
       active: t.id === o,
-      onClick: n
+      onClick: s
     }
   )) });
 }
-m.Root = function(s) {
+m.Root = function(i) {
   const {
     children: o,
-    className: a,
-    ariaLabel: i,
-    tabIndex: c,
-    theme: n = "dark",
+    className: e,
+    ariaLabel: c,
+    tabIndex: n,
+    theme: s = "dark",
     role: t = "tablist"
-  } = s, l = h(e.root, e[`theme-${n}`], a);
+  } = i, l = b(a.root, a[`theme-${s}`], e);
   return /* @__PURE__ */ r(
     "div",
     {
       role: t,
-      "aria-label": i,
-      tabIndex: c,
+      "aria-label": c,
+      tabIndex: n,
       className: l,
       children: o
     }
   );
 };
-m.Item = function(s) {
+m.Item = function(i) {
   const {
     id: o,
-    label: a,
-    onClick: i,
-    ariaLabel: c,
-    ariaControls: n,
+    label: e,
+    onClick: c,
+    ariaLabel: n,
+    ariaControls: s,
     className: t,
     active: l = !1,
-    disabled: b = !1,
-    hasNotification: d = !1
-  } = s, p = f.useCallback(() => {
-    b || i(o);
-  }, [b, i, o]), N = h(e.reset, e.item, t, {
-    [e.active]: l,
-    [e.hasNotification]: d
+    disabled: d = !1,
+    hasNotification: f = !1
+  } = i, N = h.useCallback(() => {
+    d || c(o);
+  }, [d, c, o]), u = b(a.reset, a.item, t, {
+    [a.active]: l,
+    [a.hasNotification]: f
   });
   return /* @__PURE__ */ r(
     "button",
     {
-      disabled: b,
+      disabled: d,
       type: "button",
       role: "tab",
-      className: N,
-      onClick: p,
-      "aria-label": c,
-      "aria-controls": n,
-      "data-text": a,
+      className: u,
+      onClick: N,
+      "aria-label": n,
+      "aria-controls": s,
+      "data-text": e,
       "aria-selected": l,
-      children: /* @__PURE__ */ u("span", { className: e.content, children: [
-        a,
-        d && /* @__PURE__ */ r(v, { color: "green", className: e.notification })
+      children: /* @__PURE__ */ x("span", { className: a.content, children: [
+        e,
+        f && /* @__PURE__ */ r(v, { color: "green", className: a.notification })
       ] })
     }
   );

package/dist/main.d.ts

@@ -60,7 +60,7 @@ export { Style, useContextualStyle } from './components/Style/Style';
 export { Switch } from './components/Switch';
 export { ToggleGroup } from './components/ToggleGroup/ToggleGroup';
 export { Tabular } from './components/Tabular';
-export { Table } from './components/Table/Table';
+export { Table, TableIconButton, } from './components/Table/Table';
 export { Text, TextBlock, getTextOpacity, } from './components/Text';
 export { Textarea } from './components/Textarea/Textarea';
 export { Title, TITLE_OUTLET_ID } from './components/Title/Title';

package/dist/main.js

@@ -3,13 +3,13 @@ import { clsx as f } from "./utils/clsx.js";
 import { getValue as m } from "./utils/getValue.js";
 import { usePopoverController as l } from "./utils/hooks/usePopoverController.js";
 import { useInstance as i } from "./utils/hooks/useInstance.js";
-import { useDynamicRef as c } from "./utils/hooks/useDynamicRef.js";
+import { useDynamicRef as s } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
-import { useWindowResize as L } from "./utils/hooks/useWindowResize.js";
+import { useWindowResize as B } from "./utils/hooks/useWindowResize.js";
 import { useOutlet as y } from "./utils/hooks/useOutlet.js";
-import { identity as S, invoke as C, noop as A, returnFalse as k, returnTrue as O } from "./utils/functional.js";
-import { Linkify as b, defaultLinkReplacer as E, defaultLinkReplacerx as D, isExternalUrl as _, linkify as h, linkifyx as v, matchLinkNodes as F, matchLinks as U } from "./utils/links.js";
+import { identity as S, invoke as C, noop as A, returnFalse as b, returnTrue as k } from "./utils/functional.js";
+import { Linkify as P, defaultLinkReplacer as E, defaultLinkReplacerx as D, isExternalUrl as _, linkify as h, linkifyx as v, matchLinkNodes as F, matchLinks as U } from "./utils/links.js";
 import { clamp as K, clamp01 as N } from "./utils/math.js";
 import { isFalseString as w, isTrueString as G, normalizeSlashes as Y, replaceRange as H, splitByIndices as M, unicodeCharAt as W } from "./utils/string.js";
 import { debounce as q, throttle as J } from "./utils/execution.js";
@@ -18,14 +18,14 @@ import { default as $ } from "./components/IconButton/IconButton.js";
 import { Accordion as ro, AccordionContent as eo, AccordionHeader as to, AccordionItem as po, AccordionTrigger as fo } from "./components/Accordion/Accordion.js";
 import { CLIPBOARD_TITLE_APPEARANCE as mo, default as ao } from "./components/ClipboardButton/ClipboardButton.js";
 import { default as no } from "./components/Checkbox/Checkbox.js";
-import { Button as so } from "./components/Button/Button.js";
+import { Button as co } from "./components/Button/Button.js";
 import { LinkButton as uo } from "./components/Button/LinkButton.js";
 import { ButtonBar as To } from "./components/Button/ButtonBar.js";
-import { Avatar as Lo } from "./components/Avatar/Avatar.js";
+import { Avatar as Bo } from "./components/Avatar/Avatar.js";
 import { BACKDROP_OUTLET_ID as yo, BackdropPortal as Ro } from "./components/BackdropPortal/BackdropPortal.js";
 import { Badge as Co } from "./components/Badge/Badge.js";
-import { ControlBox as ko } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as Po } from "./components/CountryFlag/CountryFlag.js";
+import { ControlBox as bo } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as Oo } from "./components/CountryFlag/CountryFlag.js";
 import { Decorate as Eo } from "./components/Decorate/Decorate.js";
 import { Dot as _o } from "./components/Dot/Dot.js";
 import { FLYOUT_OUTLET_ID as vo, Flyout as Fo } from "./components/Flyout/Flyout.js";
@@ -44,15 +44,15 @@ import { Box as fr } from "./components/Layout/Box/Box.js";
 import { Center as mr } from "./components/Layout/Center/Center.js";
 import { Flex as lr } from "./components/Layout/Flex/Flex.js";
 import { FlexRestricter as ir } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as cr } from "./components/Layout/Pad/Pad.js";
+import { Pad as sr } from "./components/Layout/Pad/Pad.js";
 import { Page as dr } from "./components/Layout/Page/Page.js";
 import { R as Tr } from "./Rail-nVRissv6.js";
-import { Scrollable as Lr } from "./components/Layout/Scrollable/Scrollable.js";
+import { Scrollable as Br } from "./components/Layout/Scrollable/Scrollable.js";
 import { VirtualScrollable as yr } from "./components/Layout/Scrollable/VirtualScrollable.js";
 import { Loaf as Sr } from "./components/Loaf/Loaf.js";
 import { Modal as Ar } from "./components/Modal/Modal.js";
-import { NavList as Or } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as br, Overlay as Er } from "./components/Overlay/Overlay.js";
+import { NavList as kr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Pr, Overlay as Er } from "./components/Overlay/Overlay.js";
 import { Popover as _r } from "./components/Popover/Popover.js";
 import { PremiumBadge as vr } from "./components/PremiumBadge/PremiumBadge.js";
 import { Prose as Ur } from "./components/Prose/Prose.js";
@@ -65,34 +65,34 @@ import { Style as qr, useContextualStyle as Jr } from "./components/Style/Style.
 import { default as Xr } from "./components/Switch/Switch.js";
 import { ToggleGroup as $r } from "./components/ToggleGroup/ToggleGroup.js";
 import { Tabular as re } from "./components/Tabular/Tabular.js";
-import { Table as te } from "./components/Table/Table.js";
-import { Text as fe, TextBlock as xe, getTextOpacity as me } from "./components/Text/Text.js";
-import { Textarea as le } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as ie, Title as se } from "./components/Title/Title.js";
-import { default as ue } from "./components/InputDropzone/InputDropzone.js";
+import { Table as te, TableIconButton as pe } from "./components/Table/Table.js";
+import { Text as xe, TextBlock as me, getTextOpacity as ae } from "./components/Text/Text.js";
+import { Textarea as ne } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as ce, Title as se } from "./components/Title/Title.js";
+import { default as de } from "./components/InputDropzone/InputDropzone.js";
 import "./components/InputDropzone/ItemPreview.js";
-import { OnScreenSensor as Ie } from "./components/OnScreenSensor.js";
-import { ui as ge } from "./components/ui.js";
-import { Symbols as Be } from "./components/Symbols.js";
+import { OnScreenSensor as Te } from "./components/OnScreenSensor.js";
+import { ui as Be } from "./components/ui.js";
+import { Symbols as ye } from "./components/Symbols.js";
 export {
   ro as Accordion,
   eo as AccordionContent,
   to as AccordionHeader,
   po as AccordionItem,
   fo as AccordionTrigger,
-  Lo as Avatar,
+  Bo as Avatar,
   yo as BACKDROP_OUTLET_ID,
   Ro as BackdropPortal,
   Co as Badge,
   fr as Box,
-  so as Button,
+  co as Button,
   To as ButtonBar,
   mo as CLIPBOARD_TITLE_APPEARANCE,
   mr as Center,
   no as Checkbox,
   ao as ClipboardButton,
-  ko as ControlBox,
-  Po as CountryFlag,
+  bo as ControlBox,
+  Oo as CountryFlag,
   Eo as Decorate,
   _o as Dot,
   vo as FLYOUT_OUTLET_ID,
@@ -107,19 +107,19 @@ export {
   jo as Indicator,
   Jo as InfoPanel,
   Xo as Input,
-  ue as InputDropzone,
+  de as InputDropzone,
   rr as Interactive,
   tr as Island,
   uo as LinkButton,
-  b as Linkify,
+  P as Linkify,
   Sr as Loaf,
   zo as Logos,
   Ar as Modal,
-  Or as NavList,
-  br as OVERLAY_OUTLET_ID,
-  Ie as OnScreenSensor,
+  kr as NavList,
+  Pr as OVERLAY_OUTLET_ID,
+  Te as OnScreenSensor,
   Er as Overlay,
-  cr as Pad,
+  sr as Pad,
   dr as Page,
   _r as Popover,
   vr as PremiumBadge,
@@ -127,20 +127,21 @@ export {
   Kr as Radio,
   Tr as Rail,
   $o as RichInput,
-  Lr as Scrollable,
+  Br as Scrollable,
   Vr as Select,
   Gr as Separator,
   Hr as Shroud,
   Wr as Spacer,
   qr as Style,
   Xr as Switch,
-  Be as Symbols,
-  ie as TITLE_OUTLET_ID,
+  ye as Symbols,
+  ce as TITLE_OUTLET_ID,
   te as Table,
+  pe as TableIconButton,
   re as Tabular,
-  fe as Text,
-  xe as TextBlock,
-  le as Textarea,
+  xe as Text,
+  me as TextBlock,
+  ne as Textarea,
   se as Title,
   $r as ToggleGroup,
   yr as VirtualScrollable,
@@ -151,7 +152,7 @@ export {
   E as defaultLinkReplacer,
   D as defaultLinkReplacerx,
   X as getColor,
-  me as getTextOpacity,
+  ae as getTextOpacity,
   m as getValue,
   S as identity,
   C as invoke,
@@ -166,18 +167,18 @@ export {
   A as noop,
   Y as normalizeSlashes,
   H as replaceRange,
-  k as returnFalse,
-  O as returnTrue,
+  b as returnFalse,
+  k as returnTrue,
   M as splitByIndices,
   J as throttle,
-  ge as ui,
+  Be as ui,
   W as unicodeCharAt,
   Jr as useContextualStyle,
-  c as useDynamicRef,
+  s as useDynamicRef,
   d as useGlobalKeyboardEvent,
   i as useInstance,
   T as useKeyboardClose,
   y as useOutlet,
   l as usePopoverController,
-  L as useWindowResize
+  B as useWindowResize
 };

package/dist/styles-scss/tokens.scss

@@ -127,6 +127,11 @@ $control-heights: (
   @include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: .1));
   @include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
   @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
+
+  @include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: .1));
+  @include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: .2));
+  @include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: .2));
+  @include ui.define-color-token('input-onlight-disabled-border', ui.color('primary', $alpha: .1));
 }
 
 @mixin accordion-tokens() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.12",
+  "version": "2.1.13",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",