@cfx-dev/ui-components 2.0.3 → 2.0.5

package/dist/components/Switch/Switch.js

@@ -11,16 +11,16 @@ import '../../assets/Switch.css';var S = "Switch", [z, Y] = B(S), [A, O] = z(S),
       checked: c,
       defaultChecked: d,
       required: u,
-      disabled: r,
+      disabled: n,
       value: h = "on",
       onCheckedChange: m,
       ...v
-    } = t, [n, f] = a.useState(null), x = H(s, (p) => f(p)), w = a.useRef(!1), k = n ? !!n.closest("form") : !0, [l = !1, g] = I({
+    } = t, [r, f] = a.useState(null), T = H(s, (p) => f(p)), w = a.useRef(!1), k = r ? !!r.closest("form") : !0, [l = !1, x] = I({
       prop: c,
       defaultProp: d,
       onChange: m
     });
-    return /* @__PURE__ */ N(A, { scope: e, checked: l, disabled: r, children: [
+    return /* @__PURE__ */ N(A, { scope: e, checked: l, disabled: n, children: [
       /* @__PURE__ */ i(
         _.button,
         {
@@ -28,27 +28,27 @@ import '../../assets/Switch.css';var S = "Switch", [z, Y] = B(S), [A, O] = z(S),
           role: "switch",
           "aria-checked": l,
           "aria-required": u,
-          "data-state": T(l),
-          "data-disabled": r ? "" : void 0,
-          disabled: r,
+          "data-state": y(l),
+          "data-disabled": n ? "" : void 0,
+          disabled: n,
           value: h,
           ...v,
-          ref: x,
+          ref: T,
           onClick: M(t.onClick, (p) => {
-            g((E) => !E), k && (w.current = p.isPropagationStopped(), w.current || p.stopPropagation());
+            x((E) => !E), k && (w.current = p.isPropagationStopped(), w.current || p.stopPropagation());
           })
         }
       ),
       k && /* @__PURE__ */ i(
         $,
         {
-          control: n,
+          control: r,
           bubbles: !w.current,
           name: o,
           value: h,
           checked: l,
           required: u,
-          disabled: r,
+          disabled: n,
           style: { transform: "translateX(-100%)" }
         }
       )
@@ -56,13 +56,13 @@ import '../../assets/Switch.css';var S = "Switch", [z, Y] = B(S), [A, O] = z(S),
   }
 );
 P.displayName = S;
-var R = "SwitchThumb", y = a.forwardRef(
+var R = "SwitchThumb", g = a.forwardRef(
   (t, s) => {
     const { __scopeSwitch: e, ...o } = t, c = O(R, e);
     return /* @__PURE__ */ i(
       _.span,
       {
-        "data-state": T(c.checked),
+        "data-state": y(c.checked),
         "data-disabled": c.disabled ? "" : void 0,
         ...o,
         ref: s
@@ -70,14 +70,14 @@ var R = "SwitchThumb", y = a.forwardRef(
     );
   }
 );
-y.displayName = R;
+g.displayName = R;
 var $ = (t) => {
-  const { control: s, checked: e, bubbles: o = !0, ...c } = t, d = a.useRef(null), u = j(e), r = q(s);
+  const { control: s, checked: e, bubbles: o = !0, ...c } = t, d = a.useRef(null), u = j(e), n = q(s);
   return a.useEffect(() => {
-    const h = d.current, m = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(m, "checked").set;
-    if (u !== e && n) {
+    const h = d.current, m = window.HTMLInputElement.prototype, r = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (u !== e && r) {
       const f = new Event("click", { bubbles: o });
-      n.call(h, e), h.dispatchEvent(f);
+      r.call(h, e), h.dispatchEvent(f);
     }
   }, [u, e, o]), /* @__PURE__ */ i(
     "input",
@@ -90,7 +90,7 @@ var $ = (t) => {
       ref: d,
       style: {
         ...t.style,
-        ...r,
+        ...n,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -99,11 +99,11 @@ var $ = (t) => {
     }
   );
 };
-function T(t) {
+function y(t) {
   return t ? "checked" : "unchecked";
 }
-var D = P, F = y;
-const L = "_switchUnset_adsuh_1", W = "_switchRoot_adsuh_5", X = "_switchThumb_adsuh_30", b = {
+var D = P, F = g;
+const L = "_switchUnset_tpmng_1", W = "_switchRoot_tpmng_5", X = "_switchThumb_tpmng_30", b = {
   switchUnset: L,
   switchRoot: W,
   switchThumb: X

package/dist/components/Table/Table.js

@@ -1,60 +1,79 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import o, { useState as d } from "react";
-import { G as R } from "../../iconBase-C6DV9qqL.js";
-import '../../assets/Table.css';function x(r) {
-  return R({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z" } }] })(r);
-}
-function L(r) {
-  return R({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z" } }] })(r);
-}
-const z = "_selectedRow_1jg2j_23", w = {
-  "table-responsive": "_table-responsive_1jg2j_1",
-  selectedRow: z
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import f, { useState as m } from "react";
+import O from "../Checkbox/Checkbox.js";
+import j from "../IconButton/IconButton.js";
+import '../../assets/Table.css';const x = "_pointer_19b0f_18", A = "_selectedRow_19b0f_22", E = "_headerContent_19b0f_40", z = "_sortButton_19b0f_47", l = {
+  "table-responsive": "_table-responsive_19b0f_1",
+  pointer: x,
+  selectedRow: A,
+  headerContent: E,
+  sortButton: z
 };
-function G({
-  headers: r = [],
-  data: _ = [],
-  includeRadio: p = !1,
-  onSelectChange: l,
-  dataContainer: u,
-  useSort: h = !1,
-  sortBy: j,
-  sortOrder: y = "asc",
-  onSortChange: i
+function F({
+  headers: u = [],
+  data: B = [],
+  includeRadio: r = !1,
+  onSelectChange: c,
+  dataContainer: b,
+  useSort: n = !1,
+  sortBy: k,
+  sortOrder: v = "asc",
+  onSortChange: d
 }) {
-  const [m, f] = d(null), [b, g] = d(j), [v, B] = d(y), k = (t) => {
-    const c = b === t && v === "asc" ? "desc" : "asc";
-    g(t), B(c), i == null || i(t, c);
-  }, O = o.useCallback((t) => {
-    f(parseInt(t.target.value, 10)), l == null || l(parseInt(t.target.value, 10));
-  }, [f, l]);
-  return /* @__PURE__ */ e("div", { className: w.table, children: /* @__PURE__ */ n("table", { children: [
-    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { children: [
-      p && /* @__PURE__ */ e("th", { children: "Select Row" }),
-      r.map((t, s) => /* @__PURE__ */ n("th", { onClick: () => h && k(t), children: [
-        t,
-        h && b === t && /* @__PURE__ */ e("span", { children: v === "asc" ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(x, {}) })
-      ] }, `header-${s}`))
+  const [p, y] = m(null), [R, w] = m(k), [$, N] = m(v), _ = (e) => {
+    const t = R === e && $ === "asc" ? "desc" : "asc";
+    w(e), N(t), d == null || d(e, t);
+  }, h = f.useCallback(
+    (e, s) => {
+      if (typeof e == "boolean") {
+        const t = e ? s : null;
+        y(t), t !== null && (c == null || c(t));
+      }
+    },
+    [c]
+  );
+  return /* @__PURE__ */ o("div", { className: l.tableResponsive, children: /* @__PURE__ */ i("table", { children: [
+    /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ i("tr", { children: [
+      r && /* @__PURE__ */ o("th", { "aria-label": "Select Row" }),
+      u.map((e, s) => /* @__PURE__ */ o(
+        "th",
+        {
+          className: n ? l.pointer : "",
+          onClick: () => n && _(e),
+          children: /* @__PURE__ */ i("div", { className: l.headerContent, children: [
+            e,
+            n && /* @__PURE__ */ o(
+              j,
+              {
+                className: l.sortButton,
+                color: "secondary",
+                name: "Sort",
+                onClick: n ? () => _(e) : void 0
+              }
+            )
+          ] })
+        },
+        `header-${s}`
+      ))
     ] }) }),
-    /* @__PURE__ */ e("tbody", { children: _.map((t, s) => /* @__PURE__ */ n(
+    /* @__PURE__ */ o("tbody", { children: B.map((e, s) => /* @__PURE__ */ i(
       "tr",
       {
-        className: m === s ? w.selectedRow : "",
+        className: `${p === s ? l.selectedRow : ""} ${r ? l.pointer : ""}`,
+        onClick: r ? () => h(!0, s) : void 0,
         children: [
-          p && /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
-            "input",
+          r && /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(
+            O,
             {
-              type: "radio",
-              name: "tableRowSelect",
-              value: s,
-              checked: m === s,
-              onChange: O,
-              "aria-label": `${s}`
+              size: "small",
+              onCheckedChange: (t) => h(t, s),
+              "aria-label": `${s}`,
+              checked: p === s
             }
           ) }),
-          t.map((c, $) => {
+          e.map((t, C) => {
             let a;
-            return o.isValidElement(c) ? a = c : u ? a = o.createElement(u, { item: c }) : a = String(c), /* @__PURE__ */ e("td", { children: a }, `item-${$}`);
+            return f.isValidElement(t) ? a = t : b ? a = f.createElement(b, { item: t }) : a = String(t), /* @__PURE__ */ o("td", { children: a }, `item-${C}`);
           })
         ]
       },
@@ -63,5 +82,5 @@ function G({
   ] }) });
 }
 export {
-  G as Table
+  F as Table
 };

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function TableShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableShowcase>;
+export default _default;

package/dist/components/Table/TableShowcase.js

@@ -0,0 +1,55 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import d from "react";
+import { Badge as l } from "../Badge/Badge.js";
+import { Flex as a } from "../Layout/Flex/Flex.js";
+import "../Interactive/Interactive.js";
+import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
+import "../Layout/Scrollable/VirtualScrollable.js";
+import { Text as r } from "../Text/Text.js";
+import { Table as o } from "./Table.js";
+const i = [
+  [
+    "Cell 1",
+    "Cell 2",
+    "Cell 3",
+    new Date(2023, 0, 1).toLocaleDateString(),
+    /* @__PURE__ */ e(l, { color: "error", children: "Error" }, "1")
+  ],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
+  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
+  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")]
+], n = ["Header 1", "Header 2", "Header 3", "Date", "Item"];
+function C() {
+  return /* @__PURE__ */ t(a, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(a, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Table" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
+    ] }),
+    /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Table with scroll" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            height: "400px",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
+        }
+      )
+    ] })
+  ] });
+}
+const B = d.memo(C);
+export {
+  B as default
+};

package/dist/components/Tabular/Tabular.js

@@ -1,90 +1,90 @@
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
-import f, { createElement as u } from "react";
-import { Dot as j } from "../Dot/Dot.js";
-import { clsx as v } from "../../utils/clsx.js";
-import '../../assets/Tabular.css';const k = "_reset_hzvjz_1", C = "_root_hzvjz_5", p = "_item_hzvjz_16", x = "_active_hzvjz_37", I = "_hasNotification_hzvjz_64", R = "_content_hzvjz_67", a = {
-  reset: k,
-  root: C,
-  "theme-dark": "_theme-dark_hzvjz_10",
-  "theme-light": "_theme-light_hzvjz_13",
-  item: p,
-  active: x,
-  hasNotification: I,
-  content: R
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import h, { createElement as v } from "react";
+import { Dot as C } from "../Dot/Dot.js";
+import { clsx as k } from "../../utils/clsx.js";
+import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5", I = "_item_cctkn_16", R = "_active_cctkn_37", g = "_hasNotification_cctkn_64", T = "_content_cctkn_67", a = {
+  reset: p,
+  root: x,
+  "theme-dark": "_theme-dark_cctkn_10",
+  "theme-light": "_theme-light_cctkn_13",
+  item: I,
+  active: R,
+  hasNotification: g,
+  content: T
 };
-function m(h) {
+function m(_) {
   const {
-    items: s,
+    items: i,
     activeItem: o,
     onActivate: e,
-    itemClassName: i,
-    ...c
-  } = h, n = f.useCallback((t) => {
+    itemClassName: c,
+    ...n
+  } = _, s = h.useCallback((t) => {
     e && e(t);
   }, [e]);
-  return /* @__PURE__ */ r(m.Root, { ...c, children: s.map((t) => /* @__PURE__ */ u(
+  return /* @__PURE__ */ r(m.Root, { ...n, children: i.map((t) => /* @__PURE__ */ v(
     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: e,
-    ariaLabel: i,
-    tabIndex: c,
-    theme: n = "dark",
+    ariaLabel: c,
+    tabIndex: n,
+    theme: s = "dark",
     role: t = "tablist"
-  } = s, l = v(a.root, a[`theme-${n}`], e);
+  } = i, l = k(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: e,
-    onClick: i,
-    ariaLabel: c,
-    ariaControls: n,
+    onClick: c,
+    ariaLabel: n,
+    ariaControls: s,
     className: t,
     active: l = !1,
-    disabled: _ = !1,
-    hasNotification: d = !1
-  } = s, b = f.useCallback(() => {
-    _ || i(o);
-  }, [_, i, o]), z = v(a.reset, a.item, t, {
+    disabled: d = !1,
+    hasNotification: f = !1
+  } = i, b = h.useCallback(() => {
+    d || c(o);
+  }, [d, c, o]), N = k(a.reset, a.item, t, {
     [a.active]: l,
-    [a.hasNotification]: d
+    [a.hasNotification]: f
   });
   return /* @__PURE__ */ r(
     "button",
     {
-      disabled: _,
+      disabled: d,
       type: "button",
       role: "tab",
-      className: z,
+      className: N,
       onClick: b,
-      "aria-label": c,
-      "aria-controls": n,
+      "aria-label": n,
+      "aria-controls": s,
       "data-text": e,
       "aria-selected": l,
-      children: /* @__PURE__ */ N("span", { className: a.content, children: [
+      children: /* @__PURE__ */ u("span", { className: a.content, children: [
         e,
-        d && /* @__PURE__ */ r(j, { color: "green", className: a.notification })
+        f && /* @__PURE__ */ r(C, { color: "green", className: a.notification })
       ] })
     }
   );

package/dist/components/Textarea/Textarea.js

@@ -1,18 +1,18 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import _ from "react";
-import { clsx as p } from "../../utils/clsx.js";
-import '../../assets/Textarea.css';const g = "_root_1ayj5_1", x = "_small_1ayj5_7", k = "_large_1ayj5_11", v = "_error_1ayj5_15", C = "_disabled_1ayj5_19", e = {
-  root: g,
-  "full-width": "_full-width_1ayj5_4",
-  small: x,
-  large: k,
-  error: v,
-  disabled: C,
-  "resize-none": "_resize-none_1ayj5_63",
-  "resize-vertical": "_resize-vertical_1ayj5_66",
-  "resize-horizontal": "_resize-horizontal_1ayj5_69",
-  "resize-both": "_resize-both_1ayj5_72",
-  "backdrop-blur": "_backdrop-blur_1ayj5_110"
+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 = {
+  root: x,
+  "full-width": "_full-width_fya03_4",
+  small: k,
+  large: v,
+  error: C,
+  disabled: N,
+  "resize-none": "_resize-none_fya03_63",
+  "resize-vertical": "_resize-vertical_fya03_66",
+  "resize-horizontal": "_resize-horizontal_fya03_69",
+  "resize-both": "_resize-both_fya03_72",
+  "backdrop-blur": "_backdrop-blur_fya03_110"
 };
 function I(n) {
   const {
@@ -21,12 +21,12 @@ function I(n) {
     label: r,
     placeholder: i,
     rows: d,
-    resize: b = "none",
+    resize: f = "none",
     disabled: o = !1,
-    autofocus: u,
-    className: h,
-    backdropBlur: m = !1
-  } = n, j = _.useCallback(
+    autofocus: b,
+    className: u,
+    backdropBlur: h = !1
+  } = n, m = _.useCallback(
     (y) => {
       a(y.target.value);
     },
@@ -34,20 +34,20 @@ function I(n) {
   ), l = _.useId(), s = /* @__PURE__ */ t(
     "textarea",
     {
-      autoFocus: u,
+      autoFocus: b,
       id: l,
-      className: e[`resize-${b}`],
+      className: e[`resize-${f}`],
       rows: d,
       value: c,
       disabled: o,
-      onChange: j,
+      onChange: m,
       placeholder: i
     }
-  ), z = p(e.root, h, {
+  ), z = g(e.root, u, {
     [e.disabled]: o,
-    [e["backdrop-blur"]]: m
+    [e["backdrop-blur"]]: h
   });
-  return /* @__PURE__ */ t("div", { className: z, children: r ? /* @__PURE__ */ f("label", { htmlFor: l, children: [
+  return /* @__PURE__ */ t("div", { className: z, children: r ? /* @__PURE__ */ p("label", { htmlFor: l, children: [
     r,
     s
   ] }) : s });

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,46 +1,46 @@
 import { jsxs as d, jsx as p } from "react/jsx-runtime";
-import l from "react";
-import { Interactive as g } from "../Interactive/Interactive.js";
+import a from "react";
+import { Interactive as x } from "../Interactive/Interactive.js";
 import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/ToggleGroup.css';const x = "_root_11k2w_1", D = "_disabled_11k2w_7", j = "_descripted_11k2w_11", E = "_multiline_11k2w_14", L = "_options_11k2w_18", O = "_option_11k2w_18", S = "_description_11k2w_25", G = "_active_11k2w_70", e = {
-  root: x,
-  disabled: D,
-  descripted: j,
+import '../../assets/ToggleGroup.css';const D = "_root_1ha4w_1", j = "_disabled_1ha4w_7", k = "_descripted_1ha4w_11", E = "_multiline_1ha4w_14", L = "_options_1ha4w_18", O = "_option_1ha4w_18", S = "_description_1ha4w_25", G = "_active_1ha4w_70", e = {
+  root: D,
+  disabled: j,
+  descripted: k,
   multiline: E,
   options: L,
   option: O,
   description: S,
   active: G
-}, m = (a, i) => {
+}, m = (l, i) => {
   var o;
-  return ((o = i.find((t) => t.value === a)) == null ? void 0 : o.description) || "";
-}, y = l.memo(function(i) {
+  return ((o = i.find((t) => t.value === l)) == null ? void 0 : o.description) || "";
+}, y = a.memo(function(i) {
   const {
     value: o,
     options: t,
     onChange: r,
     className: u = "",
-    disabled: v = !1,
-    multiline: f = !1
-  } = i, [n, c] = l.useState(m(o, t)), k = l.useMemo(
-    () => t.map((s, w) => {
-      const N = () => {
+    disabled: h = !1,
+    multiline: v = !1
+  } = i, [n, c] = a.useState(m(o, t)), f = a.useMemo(
+    () => t.map((s, N) => {
+      const b = () => {
         r(s.value);
-      }, b = () => {
-        c(s.description || "");
       }, C = () => {
+        c(s.description || "");
+      }, M = () => {
         c(m(o, t));
-      }, M = _(e.option, {
+      }, g = _(e.option, {
         [e.active]: s.value === o
       });
       return /* @__PURE__ */ d(
-        g,
+        x,
         {
-          className: M,
-          tabIndex: w,
-          onClick: N,
-          onMouseEnter: b,
-          onMouseLeave: C,
+          className: g,
+          tabIndex: N,
+          onClick: b,
+          onMouseEnter: C,
+          onMouseLeave: M,
           children: [
             s.icon || null,
             s.label
@@ -50,13 +50,13 @@ import '../../assets/ToggleGroup.css';const x = "_root_11k2w_1", D = "_disabled_
       );
     }),
     [o, t, r, c]
-  ), h = _(e.root, u, {
-    [e.disabled]: v,
+  ), w = _(e.root, u, {
+    [e.disabled]: h,
     [e.descripted]: n,
-    [e.multiline]: f
+    [e.multiline]: v
   });
-  return /* @__PURE__ */ d("div", { className: h, children: [
-    /* @__PURE__ */ p("div", { className: e.options, children: k }),
+  return /* @__PURE__ */ d("div", { className: w, children: [
+    /* @__PURE__ */ p("div", { className: e.options, children: f }),
     n && /* @__PURE__ */ p("div", { className: e.description, children: n })
   ] });
 });

package/dist/styles-scss/_ui.scss

@@ -198,7 +198,7 @@ $cfxui-color-alpha: (
 
 @mixin animated($props: 'all', $subClass: '&') {
   #{$subClass} {
-    transition: #{$props} .2s ease,
+    transition: #{$props} .25s ease,
       outline-offset 0s,
       outline 0s;
   }
@@ -272,6 +272,12 @@ $cfxui-color-alpha: (
   ::-webkit-scrollbar {
     width: use('scrollable-thumb-size');
   }
+  ::-webkit-scrollbar:horizontal {
+    height: use('scrollable-thumb-size');
+  }
+  ::-webkit-scrollbar-track {
+    background-color: color-token('scrollbar-track-background');
+  }
   ::-webkit-scrollbar-thumb {
     @include border-radius('pill');
   
@@ -284,6 +290,9 @@ $cfxui-color-alpha: (
       background-color: color-token('scrollbar-active');
     }
   }
+  ::-webkit-scrollbar-corner {
+    display: none;
+  }
 }
 
 @mixin placeholder-color($color) {