@cfx-dev/ui-components 3.0.2 → 3.0.3

package/dist/components/Tabular/Tabular.js

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

package/dist/components/Text/Text.js

@@ -3,7 +3,7 @@ import l from "react";
 import { ui as C } from "../ui.js";
 import { clsx as w } from "../../utils/clsx.js";
 import { getColor as A } from "../../utils/color.js";
-const O = "_root_14isi_1", R = "_centered_14isi_4", S = "_underlined_14isi_7", $ = "_truncated_14isi_10", E = "_typographic_14isi_18", N = "_block_14isi_28", o = {
+const O = "cfxui__Text__root__2fe11", R = "cfxui__Text__centered__4d7bd", S = "cfxui__Text__underlined__5860e", $ = "cfxui__Text__truncated__417f4", E = "cfxui__Text__typographic__d8155", N = "cfxui__Text__block__cb1b6", o = {
   root: O,
   centered: R,
   underlined: S,
@@ -28,39 +28,39 @@ const O = "_root_14isi_1", R = "_centered_14isi_4", S = "_underlined_14isi_7", $
   return typeof e == "string" || typeof e == "number" ? e : t;
 }, D = "primary", F = l.forwardRef(function(t, e) {
   const {
-    family: c,
+    family: n,
     size: a = "normal",
-    weight: f = "normal",
-    letterSpacing: p = "normal",
-    as: n = "span",
-    centered: d = !1,
-    truncated: m = !1,
-    typographic: _ = !1,
-    uppercase: h = !1,
-    userSelectable: u = !1,
-    underlined: y = !1,
-    children: g,
-    className: x
-  } = t, T = n === "div", v = w(o.root, x, {
-    [o.block]: T,
-    [o.centered]: d,
-    [o.truncated]: m,
-    [o.underlined]: y,
-    [o.typographic]: _,
-    [C.cls.userSelectableText]: u
-  }), b = A({
+    weight: _ = "normal",
+    letterSpacing: f = "normal",
+    as: c = "span",
+    centered: p = !1,
+    truncated: d = !1,
+    typographic: u = !1,
+    uppercase: m = !1,
+    userSelectable: x = !1,
+    underlined: h = !1,
+    children: y,
+    className: T
+  } = t, g = c === "div", b = w(o.root, T, {
+    [o.block]: g,
+    [o.centered]: p,
+    [o.truncated]: d,
+    [o.underlined]: h,
+    [o.typographic]: u,
+    [C.cls.userSelectableText]: x
+  }), v = A({
     ...t,
     color: t.color || D,
     opacity: P(t.opacity)
-  }), k = typeof c == "string" ? c : B[n] || "primary", i = {
-    color: b,
+  }), k = typeof n == "string" ? n : B[c] || "primary", i = {
+    color: v,
     fontFamily: `var(--font-family-${k})`,
     fontSize: `var(--font-size-${a})`,
     lineHeight: `var(--line-height-${a})`,
-    letterSpacing: `var(--letter-spacing-${p})`,
-    fontWeight: `var(--font-weight-${f})`
+    letterSpacing: `var(--letter-spacing-${f})`,
+    fontWeight: `var(--font-weight-${_})`
   };
-  return h && (i.textTransform = "uppercase"), /* @__PURE__ */ s(n, { ref: e, dir: "auto", className: v, style: i, children: g });
+  return m && (i.textTransform = "uppercase"), /* @__PURE__ */ s(c, { ref: e, dir: "auto", className: b, style: i, children: y });
 }), G = l.forwardRef(function(t, e) {
   return /* @__PURE__ */ s(F, { ref: e, ...t, as: "div" });
 });

package/dist/components/Text/TextShowcase.js

@@ -1,38 +1,38 @@
 import { jsx as o, jsxs as t, Fragment as e } from "react/jsx-runtime";
-import a from "react";
+import p from "react";
 import { Text as c } from "./Text.js";
 import { Separator as d } from "../Separator/Separator.js";
-const h = "_root_18nng_1", f = {
+const h = "cfxui__TextShowcase__root__a3632", _ = {
   root: h
-}, T = "The quick brown fox jumps over the lazy dog.", m = "How vexingly quick daft zebras jump.";
+}, f = "The quick brown fox jumps over the lazy dog.", T = "How vexingly quick daft zebras jump.";
 function u() {
   return /* @__PURE__ */ t(e, { children: [
-    T,
+    f,
     /* @__PURE__ */ o("br", {}),
-    m
+    T
   ] });
 }
-const _ = {
+const x = {
   color: "secondary"
 };
-function x(l) {
+function m(a) {
   const {
-    items: p
-  } = l;
-  return /* @__PURE__ */ o("div", { className: f.root, children: p.map((r) => /* @__PURE__ */ t(e, { children: [
+    items: l
+  } = a;
+  return /* @__PURE__ */ o("div", { className: _.root, children: l.map((r) => /* @__PURE__ */ t(e, { children: [
     /* @__PURE__ */ t("div", { children: [
       /* @__PURE__ */ o(c, { ...r.textProps, children: r.title }),
       /* @__PURE__ */ o("br", {}),
-      /* @__PURE__ */ t(c, { ..._, children: [
-        r.descriptions.map((n, s) => /* @__PURE__ */ t(e, { children: [
-          n,
-          s < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
+      /* @__PURE__ */ t(c, { ...x, children: [
+        r.descriptions.map((s, n) => /* @__PURE__ */ t(e, { children: [
+          s,
+          n < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
         ] })),
-        Object.entries(r.textProps).map(([n, s], i) => /* @__PURE__ */ t(e, { children: [
+        Object.entries(r.textProps).map(([s, n], i) => /* @__PURE__ */ t(e, { children: [
           r.descriptions.length > 0 && i === 0 && /* @__PURE__ */ o(d, { content: "props", offset: "large" }),
-          n,
+          s,
           ": ",
-          s.toString(),
+          n.toString(),
           i < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
         ] }))
       ] })
@@ -40,7 +40,7 @@ function x(l) {
     /* @__PURE__ */ o(c, { ...r.textProps, children: /* @__PURE__ */ o(u, {}) })
   ] })) });
 }
-const j = a.memo(x);
+const E = p.memo(m);
 export {
-  j as default
+  E as default
 };

package/dist/components/Textarea/Textarea.js

@@ -1,56 +1,56 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import _ from "react";
-import { clsx as g } from "../../utils/clsx.js";
-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",
+import { jsx as l, jsxs as T } from "react/jsx-runtime";
+import s from "react";
+import { clsx as p } from "../../utils/clsx.js";
+const g = "cfxui__Textarea__root__688b1", k = "cfxui__Textarea__small__e7551", v = "cfxui__Textarea__large__09eeb", C = "cfxui__Textarea__error__932cb", N = "cfxui__Textarea__disabled__5d783", e = {
+  root: g,
+  "full-width": "cfxui__Textarea__full-width__975d6",
   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"
+  "resize-none": "cfxui__Textarea__resize-none__1130d",
+  "resize-vertical": "cfxui__Textarea__resize-vertical__f856e",
+  "resize-horizontal": "cfxui__Textarea__resize-horizontal__b4b8f",
+  "resize-both": "cfxui__Textarea__resize-both__004b8",
+  "backdrop-blur": "cfxui__Textarea__backdrop-blur__45372"
 };
-function I(n) {
+function I(c) {
   const {
-    value: c,
+    value: i,
     onChange: a,
     label: r,
-    placeholder: i,
+    placeholder: n,
     rows: d,
-    resize: f = "none",
-    disabled: o = !1,
-    autofocus: b,
-    className: u,
-    backdropBlur: h = !1
-  } = n, m = _.useCallback(
-    (y) => {
-      a(y.target.value);
+    resize: x = "none",
+    disabled: _ = !1,
+    autofocus: u,
+    className: b,
+    backdropBlur: f = !1
+  } = c, h = s.useCallback(
+    (z) => {
+      a(z.target.value);
     },
     [a]
-  ), l = _.useId(), s = /* @__PURE__ */ t(
+  ), o = s.useId(), t = /* @__PURE__ */ l(
     "textarea",
     {
-      autoFocus: b,
-      id: l,
-      className: e[`resize-${f}`],
+      autoFocus: u,
+      id: o,
+      className: e[`resize-${x}`],
       rows: d,
-      value: c,
-      disabled: o,
-      onChange: m,
-      placeholder: i
+      value: i,
+      disabled: _,
+      onChange: h,
+      placeholder: n
     }
-  ), z = g(e.root, u, {
-    [e.disabled]: o,
-    [e["backdrop-blur"]]: h
+  ), m = p(e.root, b, {
+    [e.disabled]: _,
+    [e["backdrop-blur"]]: f
   });
-  return /* @__PURE__ */ t("div", { className: z, children: r ? /* @__PURE__ */ p("label", { htmlFor: l, children: [
+  return /* @__PURE__ */ l("div", { className: m, children: r ? /* @__PURE__ */ T("label", { htmlFor: o, children: [
     r,
-    s
-  ] }) : s });
+    t
+  ] }) : t });
 }
 export {
   I as Textarea

package/dist/components/Title/Title.js

@@ -1,117 +1,117 @@
-import { jsx as h, jsxs as O, Fragment as R } from "react/jsx-runtime";
-import i from "react";
-import { clsx as L } from "../../utils/clsx.js";
+import { jsx as h, jsxs as k, Fragment as M } from "react/jsx-runtime";
+import s from "react";
+import { clsx as w } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import { useOutlet as M } from "../../utils/hooks/useOutlet.js";
+import { useOutlet as y } from "../../utils/hooks/useOutlet.js";
 import { mergeRefs as C } from "../../utils/mergeRefs.js";
-const N = "_wrapper_11ky5_1", $ = "_appearance_11ky5_1", A = "_animated_11ky5_26", F = "_root_11ky5_71", I = "_shortcut_11ky5_84", _ = {
+const N = "cfxui__Title__wrapper__ec63b", $ = "cfxui__Title__appearance__9b5a4", A = "cfxui__Title__animated__151a8", F = "cfxui__Title__root__0f286", I = "cfxui__Title__shortcut__85352", p = {
   wrapper: N,
   appearance: $,
   animated: A,
-  "fixed-on-top": "_fixed-on-top_11ky5_29",
-  "fixed-on-top-left": "_fixed-on-top-left_11ky5_35",
-  "fixed-on-bottom": "_fixed-on-bottom_11ky5_41",
-  "fixed-on-bottom-left": "_fixed-on-bottom-left_11ky5_47",
-  "fixed-on-bottom-right": "_fixed-on-bottom-right_11ky5_53",
-  "fixed-on-left": "_fixed-on-left_11ky5_59",
-  "fixed-on-right": "_fixed-on-right_11ky5_65",
+  "fixed-on-top": "cfxui__Title__fixed-on-top__100f6",
+  "fixed-on-top-left": "cfxui__Title__fixed-on-top-left__ec383",
+  "fixed-on-bottom": "cfxui__Title__fixed-on-bottom__a00c2",
+  "fixed-on-bottom-left": "cfxui__Title__fixed-on-bottom-left__3bcbd",
+  "fixed-on-bottom-right": "cfxui__Title__fixed-on-bottom-right__58fb5",
+  "fixed-on-left": "cfxui__Title__fixed-on-left__01d9d",
+  "fixed-on-right": "cfxui__Title__fixed-on-right__2c799",
   root: F,
   shortcut: I
-}, f = 10, S = "title-outlet";
-function j(u, a, [e, r]) {
-  const n = u ? r : r - 20, s = u ? e : e + 16;
+}, a = 10, S = "title-outlet";
+function j(u, f, [e, r]) {
+  const n = u ? r : r - 20, i = u ? e : e + 16;
   return {
     top: `${n}px`,
-    left: `${s}px`,
-    maxWidth: `calc(100vw - ${s}px - 10px)`,
-    animationDelay: `${a}ms`
+    left: `${i}px`,
+    maxWidth: `calc(100vw - ${i}px - 10px)`,
+    animationDelay: `${f}ms`
   };
 }
-function D(u, a) {
+function D(u, f) {
   const {
     x: e,
     y: r,
     width: n,
-    height: s
+    height: i
   } = u.getBoundingClientRect();
   let c = 0, t = 0;
-  switch (a) {
+  switch (f) {
     case "top":
-      c = e + n / 2, t = r - f;
+      c = e + n / 2, t = r - a;
       break;
     case "top-left":
-      c = e, t = r - f;
+      c = e, t = r - a;
       break;
     case "bottom":
-      c = e + n / 2, t = r + s + f;
+      c = e + n / 2, t = r + i + a;
       break;
     case "bottom-left":
-      c = e, t = r + s + f;
+      c = e, t = r + i + a;
       break;
     case "bottom-right":
-      c = e + n, t = r + s + f;
+      c = e + n, t = r + i + a;
       break;
     case "left":
-      c = e - f, t = r + s / 2;
+      c = e - a, t = r + i / 2;
       break;
     case "right":
-      c = e + n + f, t = r + s / 2;
+      c = e + n + a, t = r + i / 2;
       break;
   }
   return [c, t];
 }
 function G(u) {
   const {
-    title: a,
+    title: f,
     children: e,
     animated: r = !0,
     fixedOn: n = "bottom",
-    delay: s = 0,
+    delay: i = 0,
     className: c = "",
     suppressMouseActivation: t = !1,
-    active: v = !1,
-    rootClassName: k = ""
-  } = u, m = i.useRef(n), d = i.useRef([0, 0]);
-  m.current = n;
-  const y = M(S), o = i.useRef(null), [b, x] = i.useState(!1);
-  i.useEffect(() => {
-    t && x(v);
-  }, [v, t]), i.useEffect(() => {
+    active: b = !1,
+    rootClassName: v = ""
+  } = u, l = s.useRef(n), m = s.useRef([0, 0]);
+  l.current = n;
+  const T = y(S), o = s.useRef(null), [E, x] = s.useState(!1);
+  s.useEffect(() => {
+    t && x(b);
+  }, [b, t]), s.useEffect(() => {
     if (!o.current)
       return;
-    const p = (l) => {
-      m.current && o.current ? d.current = D(o.current, m.current) : d.current = [l.clientX, l.clientY], t || x(!0);
-    }, E = () => {
+    const d = (_) => {
+      l.current && o.current ? m.current = D(o.current, l.current) : m.current = [_.clientX, _.clientY], t || x(!0);
+    }, g = () => {
       t || x(!1);
-    }, g = (l) => {
-      m.current || (d.current = [l.clientX, l.clientY]);
+    }, L = (_) => {
+      l.current || (m.current = [_.clientX, _.clientY]);
     };
-    return o.current.addEventListener("mouseenter", p), o.current.addEventListener("mouseleave", E), o.current.addEventListener("mousemove", g), () => {
-      o.current && (o.current.removeEventListener("mouseenter", p), o.current.removeEventListener("mouseleave", E), o.current.removeEventListener("mousemove", g));
+    return o.current.addEventListener("mouseenter", d), o.current.addEventListener("mouseleave", g), o.current.addEventListener("mousemove", L), () => {
+      o.current && (o.current.removeEventListener("mouseenter", d), o.current.removeEventListener("mouseleave", g), o.current.removeEventListener("mousemove", L));
     };
   }, [t]);
-  const T = i.useMemo(() => {
-    if (!b || !a)
+  const O = s.useMemo(() => {
+    if (!E || !f)
       return null;
-    const p = L(
-      _.wrapper,
-      _[`fixed-on-${n}`],
+    const d = w(
+      p.wrapper,
+      p[`fixed-on-${n}`],
       {
-        [_.animated]: r
+        [p.animated]: r
       },
       c
     );
-    return /* @__PURE__ */ h(y, { children: /* @__PURE__ */ h("div", { className: p, style: j(!!n, s, d.current), children: /* @__PURE__ */ h("div", { className: L(_.root, k), children: a }) }) });
-  }, [b, a, n, r, y, s, c, k]), w = i.useMemo(
-    () => typeof e == "function" ? e(o) : i.cloneElement(e, {
+    return /* @__PURE__ */ h(T, { children: /* @__PURE__ */ h("div", { className: d, style: j(!!n, i, m.current), children: /* @__PURE__ */ h("div", { className: w(p.root, v), children: f }) }) });
+  }, [E, f, n, r, T, i, c, v]), R = s.useMemo(
+    () => typeof e == "function" ? e(o) : s.cloneElement(e, {
       ref: C(o, e.props.ref)
     }),
     [e, o]
   );
-  return /* @__PURE__ */ O(R, { children: [
-    w,
-    T
+  return /* @__PURE__ */ k(M, { children: [
+    R,
+    O
   ] });
 }
 export {