@cfx-dev/ui-components 2.0.4 → 2.0.6

package/dist/components/NavList/NavList.js

@@ -1,33 +1,33 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import d from "react";
-import { Interactive as _ } from "../Interactive/Interactive.js";
-import { clsx as v } from "../../utils/clsx.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import v from "react";
+import { Interactive as d } from "../Interactive/Interactive.js";
+import { clsx as _ } from "../../utils/clsx.js";
 import { noop as f } from "../../utils/functional.js";
-import { getValue as c } from "../../utils/getValue.js";
-import '../../assets/NavList.css';const p = "_root_14z0z_1", z = "_item_14z0z_5", N = "_active_14z0z_20", h = "_icon_14z0z_30", t = {
+import { getValue as i } from "../../utils/getValue.js";
+import '../../assets/NavList.css';const p = "_root_u7cv2_1", u = "_item_u7cv2_5", N = "_active_u7cv2_20", h = "_icon_u7cv2_30", c = {
   root: p,
-  item: z,
+  item: u,
   active: N,
   icon: h
-}, g = d.forwardRef(function(e, r) {
+}, k = v.forwardRef(function(e, r) {
   const {
     items: n,
     activeItemId: s,
     onActivate: a = f
   } = e, m = n.map((o) => /* @__PURE__ */ l(
-    _,
+    d,
     {
-      className: v(t.item, { [t.active]: o.id === s }),
+      className: _(c.item, { [c.active]: o.id === s }),
       onClick: () => a(o.id),
       children: [
-        !!o.icon && /* @__PURE__ */ i("div", { className: t.icon, children: c(o.icon) }),
-        /* @__PURE__ */ i("div", { className: t.label, children: c(o.label) })
+        !!o.icon && /* @__PURE__ */ t("div", { className: c.icon, children: i(o.icon) }),
+        /* @__PURE__ */ t("div", { className: c.label, children: i(o.label) })
       ]
     },
     o.id
   ));
-  return /* @__PURE__ */ i("div", { ref: r, className: t.root, children: m });
+  return /* @__PURE__ */ t("div", { ref: r, className: c.root, children: m });
 });
 export {
-  g as NavList
+  k as NavList
 };

package/dist/components/Radio/Radio.js

@@ -1,30 +1,30 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import s from "react";
-import { clsx as g } from "../../utils/clsx.js";
-import '../../assets/Radio.css';const h = "_root_e4x8g_1", u = "_indicator_e4x8g_29", p = "_disabled_e4x8g_44", e = {
-  root: h,
-  "size-normal": "_size-normal_e4x8g_19",
-  "size-large": "_size-large_e4x8g_22",
-  indicator: u,
-  disabled: p
+import { clsx as h } from "../../utils/clsx.js";
+import '../../assets/Radio.css';const u = "_root_1yglr_1", p = "_indicator_1yglr_29", x = "_disabled_1yglr_44", e = {
+  root: u,
+  "size-normal": "_size-normal_1yglr_19",
+  "size-large": "_size-large_1yglr_22",
+  indicator: p,
+  disabled: x
 };
-let i = 1;
-function I(l) {
+let r = 1;
+function C(n) {
   const {
     checked: a,
-    onChange: r,
+    onChange: i,
     label: d,
     size: c = "normal",
     className: _,
     disabled: t = !1
-  } = l, m = s.useRef(i);
+  } = n, m = s.useRef(r);
   s.useEffect(() => {
-    i += 1;
+    r += 1;
   }, []);
-  const x = () => {
-    r(!a);
-  }, n = s.useId(), b = g(e.root, _, e[`size-${c}`], { [e.disabled]: t });
-  return /* @__PURE__ */ f("label", { className: b, htmlFor: n, children: [
+  const b = () => {
+    i(!a);
+  }, l = s.useId(), f = h(e.root, _, e[`size-${c}`], { [e.disabled]: t });
+  return /* @__PURE__ */ g("label", { className: f, htmlFor: l, children: [
     /* @__PURE__ */ o(
       "input",
       {
@@ -32,8 +32,8 @@ function I(l) {
         tabIndex: m.current,
         checked: a,
         disabled: t,
-        onChange: x,
-        id: n
+        onChange: b,
+        id: l
       }
     ),
     /* @__PURE__ */ o("div", { className: e.indicator }),
@@ -41,5 +41,5 @@ function I(l) {
   ] });
 }
 export {
-  I as Radio
+  C as Radio
 };

package/dist/components/Select/Select.js

@@ -3041,7 +3041,7 @@ function dn(e) {
 function As(e) {
   return Co({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { fillRule: "evenodd", d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" } }] })(e);
 }
-const Ts = "_content_18ito_1", Os = "_option_18ito_1", Ns = "_trigger_18ito_1", Is = "_small_18ito_5", _s = "_large_18ito_9", Ms = "_fullWidth_18ito_118", Ls = "_icon_18ito_122", Ds = "_app_18ito_1", ks = "_arrow_18ito_142", Q = {
+const Ts = "_content_1ksgn_1", Os = "_option_1ksgn_1", Ns = "_trigger_1ksgn_1", Is = "_small_1ksgn_5", _s = "_large_1ksgn_9", Ms = "_fullWidth_1ksgn_118", Ls = "_icon_1ksgn_122", Ds = "_app_1ksgn_1", ks = "_arrow_1ksgn_142", Q = {
   content: Ts,
   option: Os,
   trigger: Ns,

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/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) {
@@ -310,3 +319,26 @@ $zindexMap: (
 @function zindex($index) {
   @return map.get($zindexMap, $index);
 }
+
+$mediaMap: (
+  'xsmall': 360px,
+  'small': 768px,
+  'medium': 1024px,
+  'large': 1300px,
+);
+
+@mixin media-max($size: 'medium', $fix: 'empty') {
+  @if $fix == 'empty' {
+    @media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
+  } @else {
+    @media (min-width: $fix) { @content; }
+  }
+}
+
+@mixin media-min($size: 'medium', $fix: 'empty') {
+  @if $fix == 'empty' {
+    @media (min-width: map.get($mediaMap, $size)) { @content; }
+  } @else {
+    @media (min-width: $fix) { @content; }
+  }
+}