@cfx-dev/ui-components 1.0.0 → 2.0.0

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

@@ -1,9 +1,12 @@
-export type TextColor = 'inherit' | 'main' | 'primary' | 'teal' | 'success' | 'warning' | 'error';
-export type TextSize = 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';
+import { GetColorProps } from '../../utils/color';
+
+export type TextSize = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
 export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';
 export type TextOpacity = '0' | '25' | '50' | '75' | '100';
+export type TextAs = 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextLetterSpacing = 'normal' | 'large';
 interface TextPropsBase {
-    asDiv?: boolean;
+    as?: TextAs;
     centered?: boolean;
     truncated?: boolean;
     /**
@@ -15,18 +18,17 @@ interface TextPropsBase {
      */
     userSelectable?: boolean;
     uppercase?: boolean;
+    underlined?: boolean;
     size?: TextSize;
     weight?: TextWeight;
-    family?: 'primary' | 'secondary' | 'monospace';
+    letterSpacing?: TextLetterSpacing;
+    family?: 'primary' | 'secondary';
     children?: React.ReactNode;
     className?: string;
 }
-interface TextPropsFullControl extends TextPropsBase {
-    color?: TextColor;
+export interface TextColorProps extends GetColorProps {
     opacity?: TextOpacity;
 }
-interface TextPropsColorToken extends TextPropsBase {
-    colorToken: string;
+export interface TextProps extends TextPropsBase, TextColorProps {
 }
-export type TextProps = TextPropsFullControl | TextPropsColorToken;
 export {};

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { TextProps } from './Text.types';
+
+interface TextShowcaseProps {
+    items: {
+        textProps: TextProps;
+        title: string;
+        descriptions: string[];
+    }[];
+}
+declare const _default: React.NamedExoticComponent<TextShowcaseProps>;
+export default _default;

package/dist/components/Text/TextShowcase.js

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

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

@@ -0,0 +1,2 @@
+export { Text, TextBlock, TEXT_OPACITY_MAP, DEFAULT_TEXT_COLOR, getTextOpacity, } from './Text';
+export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, } from './Text.types';

package/dist/components/Text/index.js

@@ -0,0 +1,8 @@
+import { DEFAULT_TEXT_COLOR as e, TEXT_OPACITY_MAP as x, Text as O, TextBlock as _, getTextOpacity as o } from "./Text.js";
+export {
+  e as DEFAULT_TEXT_COLOR,
+  x as TEXT_OPACITY_MAP,
+  O as Text,
+  _ as TextBlock,
+  o as getTextOpacity
+};

package/dist/components/Textarea/Textarea.js

@@ -1,57 +1,57 @@
-import { jsx as t, jsxs as z } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import _ from "react";
 import { clsx as p } from "../../utils/clsx.js";
-import '../../assets/Textarea.css';const k = "_root_1gmfx_1", v = "_small_1gmfx_7", C = "_large_1gmfx_11", N = "_error_1gmfx_15", w = "_disabled_1gmfx_19", e = {
-  root: k,
-  "full-width": "_full-width_1gmfx_4",
-  small: v,
-  large: C,
-  error: N,
-  disabled: w,
-  "resize-none": "_resize-none_1gmfx_57",
-  "resize-vertical": "_resize-vertical_1gmfx_60",
-  "resize-horizontal": "_resize-horizontal_1gmfx_63",
-  "resize-both": "_resize-both_1gmfx_66",
-  "backdrop-blur": "_backdrop-blur_1gmfx_83"
+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"
 };
-function B(n) {
+function I(n) {
   const {
     value: c,
-    onChange: r,
-    label: o,
+    onChange: a,
+    label: r,
     placeholder: i,
     rows: d,
-    resize: m = "none",
-    disabled: a = !1,
-    autofocus: f,
-    className: g,
-    backdropBlur: x = !1
-  } = n, b = _.useCallback(
-    (h) => {
-      r(h.target.value);
+    resize: b = "none",
+    disabled: o = !1,
+    autofocus: u,
+    className: h,
+    backdropBlur: m = !1
+  } = n, j = _.useCallback(
+    (y) => {
+      a(y.target.value);
     },
-    [r]
+    [a]
   ), l = _.useId(), s = /* @__PURE__ */ t(
     "textarea",
     {
-      autoFocus: f,
+      autoFocus: u,
       id: l,
-      className: e[`resize-${m}`],
+      className: e[`resize-${b}`],
       rows: d,
       value: c,
-      disabled: a,
-      onChange: b,
+      disabled: o,
+      onChange: j,
       placeholder: i
     }
-  ), u = p(e.root, g, {
-    [e.disabled]: a,
-    [e["backdrop-blur"]]: x
+  ), z = p(e.root, h, {
+    [e.disabled]: o,
+    [e["backdrop-blur"]]: m
   });
-  return /* @__PURE__ */ t("div", { className: u, children: o ? /* @__PURE__ */ z("label", { htmlFor: l, children: [
-    o,
+  return /* @__PURE__ */ t("div", { className: z, children: r ? /* @__PURE__ */ f("label", { htmlFor: l, children: [
+    r,
     s
   ] }) : s });
 }
 export {
-  B as Textarea
+  I as Textarea
 };

package/dist/components/Title/Title.d.ts

@@ -1,14 +1,18 @@
 import { default as React } from 'react';
 
 export declare const TITLE_OUTLET_ID = "title-outlet";
-type FixedOn = 'top' | 'top-left' | 'right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left';
+export type FixedOn = 'top' | 'top-left' | 'right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left';
 type TitleChildren = ((ref: React.RefObject<any>) => React.ReactNode) | React.ReactElement;
 export interface TitleProps {
+    children: TitleChildren;
     title?: React.ReactNode;
     delay?: number;
     animated?: boolean;
+    suppressMouseActivation?: boolean;
     fixedOn?: FixedOn;
-    children: TitleChildren;
+    active?: boolean;
+    className?: string;
+    rootClassName?: string;
 }
 export declare function Title(props: TitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Title/Title.js

@@ -1,114 +1,120 @@
-import { jsxs as T, Fragment as w, jsx as p } from "react/jsx-runtime";
-import f from "react";
-import { clsx as O } from "../../utils/clsx.js";
-import { useOutlet as k } from "../../utils/hooks.js";
-import { mergeRefs as y } from "../../utils/mergeRefs.js";
-import '../../assets/Title.css';const C = "_wrapper_1l1sn_1", R = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
-  wrapper: C,
-  appearance: R,
-  animated: $,
-  "fixed-on-top": "_fixed-on-top_1l1sn_29",
-  "fixed-on-top-left": "_fixed-on-top-left_1l1sn_35",
-  "fixed-on-bottom": "_fixed-on-bottom_1l1sn_41",
-  "fixed-on-bottom-left": "_fixed-on-bottom-left_1l1sn_47",
-  "fixed-on-bottom-right": "_fixed-on-bottom-right_1l1sn_53",
-  "fixed-on-left": "_fixed-on-left_1l1sn_59",
-  "fixed-on-right": "_fixed-on-right_1l1sn_65",
-  root: M,
-  shortcut: N
-}, i = 10, S = "title-outlet";
-function F(l, a, [e, n]) {
-  const r = l ? n : n - 20, s = l ? e : e + 16;
+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 "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import { useOutlet as M } from "../../utils/hooks/useOutlet.js";
+import { mergeRefs as C } from "../../utils/mergeRefs.js";
+import '../../assets/Title.css';const N = "_wrapper_11ky5_1", $ = "_appearance_11ky5_1", A = "_animated_11ky5_26", F = "_root_11ky5_71", I = "_shortcut_11ky5_84", _ = {
+  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",
+  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;
   return {
-    // Prefer top and left for element to snap to the pixel grid
-    // as when using transform it will become blurry in most of the cases as top and left values are floats
-    top: `${r}px`,
+    top: `${n}px`,
     left: `${s}px`,
-    // transform: `translate(${left}px, ${top}px)`,
     maxWidth: `calc(100vw - ${s}px - 10px)`,
     animationDelay: `${a}ms`
   };
 }
-function I(l, a) {
+function D(u, a) {
   const {
     x: e,
-    y: n,
-    width: r,
+    y: r,
+    width: n,
     height: s
-  } = l.getBoundingClientRect();
-  let t = 0, c = 0;
+  } = u.getBoundingClientRect();
+  let c = 0, t = 0;
   switch (a) {
-    case "top": {
-      t = e + r / 2, c = n - i;
+    case "top":
+      c = e + n / 2, t = r - f;
       break;
-    }
-    case "top-left": {
-      t = e, c = n - i;
+    case "top-left":
+      c = e, t = r - f;
       break;
-    }
-    case "bottom": {
-      t = e + r / 2, c = n + s + i;
+    case "bottom":
+      c = e + n / 2, t = r + s + f;
       break;
-    }
-    case "bottom-left": {
-      t = e, c = n + s + i;
+    case "bottom-left":
+      c = e, t = r + s + f;
       break;
-    }
-    case "bottom-right": {
-      t = e + r, c = n + s + i;
+    case "bottom-right":
+      c = e + n, t = r + s + f;
       break;
-    }
-    case "left": {
-      t = e - i, c = n + s / 2;
+    case "left":
+      c = e - f, t = r + s / 2;
       break;
-    }
-    case "right": {
-      t = e + r + i, c = n + s / 2;
+    case "right":
+      c = e + n + f, t = r + s / 2;
       break;
-    }
   }
-  return [t, c];
+  return [c, t];
 }
-function B(l) {
+function G(u) {
   const {
     title: a,
     children: e,
-    animated: n = !0,
-    fixedOn: r = "bottom",
-    delay: s = 0
-  } = l, t = f.useRef(r);
-  t.current = r;
-  const c = k(S), o = f.useRef(null), [g, x] = f.useState(!1), [E, _] = f.useState([0, 0]);
-  f.useEffect(() => {
+    animated: r = !0,
+    fixedOn: n = "bottom",
+    delay: s = 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(() => {
     if (!o.current)
       return;
-    const d = (u) => {
-      t.current && o.current ? _(I(o.current, t.current)) : _([u.clientX, u.clientY]), x(!0);
-    }, v = () => {
-      x(!1);
-    }, b = (u) => {
-      t.current || _([u.clientX, u.clientY]);
+    const p = (l) => {
+      m.current && o.current ? d.current = D(o.current, m.current) : d.current = [l.clientX, l.clientY], t || x(!0);
+    }, E = () => {
+      t || x(!1);
+    }, g = (l) => {
+      m.current || (d.current = [l.clientX, l.clientY]);
     };
-    return o.current.addEventListener("mouseenter", d), o.current.addEventListener("mouseleave", v), o.current.addEventListener("mousemove", b), () => {
-      o.current && (o.current.removeEventListener("mouseenter", d), o.current.removeEventListener("mouseleave", v), o.current.removeEventListener("mousemove", b));
+    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));
     };
-  }, []);
-  let h = null;
-  if (g && a) {
-    const d = O(m.wrapper, m[`fixed-on-${r}`], {
-      [m.animated]: n
-    });
-    h = /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p("div", { className: d, style: F(!!r, s, E), children: /* @__PURE__ */ p("div", { className: m.root, children: a }) }) });
-  }
-  const L = typeof e == "function" ? e(o) : f.cloneElement(e, {
-    ref: y(o, e.props.ref)
-  });
-  return /* @__PURE__ */ T(w, { children: [
-    L,
-    h
+  }, [t]);
+  const T = i.useMemo(() => {
+    if (!b || !a)
+      return null;
+    const p = L(
+      _.wrapper,
+      _[`fixed-on-${n}`],
+      {
+        [_.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, {
+      ref: C(o, e.props.ref)
+    }),
+    [e, o]
+  );
+  return /* @__PURE__ */ O(R, { children: [
+    w,
+    T
   ] });
 }
 export {
   S as TITLE_OUTLET_ID,
-  B as Title
+  G as Title
 };

package/dist/components/Title/TitleShowcase.d.ts

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

package/dist/components/Title/TitleShowcase.js

@@ -0,0 +1,22 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import i from "react";
+import { Flex as r } from "../Layout/Flex/Flex.js";
+import { Text as o } from "../Text/Text.js";
+import { Title as l } from "./Title.js";
+function a() {
+  return /* @__PURE__ */ e(r, { gap: "large", vertical: !0, children: /* @__PURE__ */ t(r, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ e(o, { children: "Hover case" }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      l,
+      {
+        title: "This is a title",
+        fixedOn: "bottom",
+        children: /* @__PURE__ */ e("span", { style: { marginTop: "100px" }, children: "Hover me" })
+      }
+    ) })
+  ] }) });
+}
+const d = i.memo(a);
+export {
+  d as default
+};

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export interface ToggleGroupOption {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: string;
+}
+export interface ToggleGroupProps {
+    value: string;
+    options: ToggleGroupOption[];
+    onChange: <T extends string>(value: T) => void;
+    className?: string;
+    disabled?: boolean;
+    multiline?: boolean;
+}
+export declare const ToggleGroup: React.NamedExoticComponent<ToggleGroupProps>;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,65 @@
+import { jsxs as d, jsx as p } from "react/jsx-runtime";
+import l from "react";
+import { Interactive as g } 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,
+  multiline: E,
+  options: L,
+  option: O,
+  description: S,
+  active: G
+}, m = (a, i) => {
+  var o;
+  return ((o = i.find((t) => t.value === a)) == null ? void 0 : o.description) || "";
+}, y = l.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 = () => {
+        r(s.value);
+      }, b = () => {
+        c(s.description || "");
+      }, C = () => {
+        c(m(o, t));
+      }, M = _(e.option, {
+        [e.active]: s.value === o
+      });
+      return /* @__PURE__ */ d(
+        g,
+        {
+          className: M,
+          tabIndex: w,
+          onClick: N,
+          onMouseEnter: b,
+          onMouseLeave: C,
+          children: [
+            s.icon || null,
+            s.label
+          ]
+        },
+        s.value
+      );
+    }),
+    [o, t, r, c]
+  ), h = _(e.root, u, {
+    [e.disabled]: v,
+    [e.descripted]: n,
+    [e.multiline]: f
+  });
+  return /* @__PURE__ */ d("div", { className: h, children: [
+    /* @__PURE__ */ p("div", { className: e.options, children: k }),
+    n && /* @__PURE__ */ p("div", { className: e.description, children: n })
+  ] });
+});
+export {
+  y as ToggleGroup
+};

package/dist/iconBase-C6DV9qqL.js

@@ -0,0 +1,60 @@
+import i from "react";
+var s = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+}, f = i.createContext && i.createContext(s), l = function() {
+  return l = Object.assign || function(e) {
+    for (var n, t = 1, r = arguments.length; t < r; t++) {
+      n = arguments[t];
+      for (var a in n) Object.prototype.hasOwnProperty.call(n, a) && (e[a] = n[a]);
+    }
+    return e;
+  }, l.apply(this, arguments);
+}, y = function(e, n) {
+  var t = {};
+  for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && n.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var a = 0, r = Object.getOwnPropertySymbols(e); a < r.length; a++)
+    n.indexOf(r[a]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[a]) && (t[r[a]] = e[r[a]]);
+  return t;
+};
+function m(e) {
+  return e && e.map(function(n, t) {
+    return i.createElement(n.tag, l({
+      key: t
+    }, n.attr), m(n.child));
+  });
+}
+function h(e) {
+  return function(n) {
+    return i.createElement(g, l({
+      attr: l({}, e.attr)
+    }, n), m(e.child));
+  };
+}
+function g(e) {
+  var n = function(t) {
+    var r = e.attr, a = e.size, c = e.title, d = y(e, ["attr", "size", "title"]), o = a || t.size || "1em", u;
+    return t.className && (u = t.className), e.className && (u = (u ? u + " " : "") + e.className), i.createElement("svg", l({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, t.attr, r, d, {
+      className: u,
+      style: l(l({
+        color: e.color || t.color
+      }, t.style), e.style),
+      height: o,
+      width: o,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), c && i.createElement("title", null, c), e.children);
+  };
+  return f !== void 0 ? i.createElement(f.Consumer, null, function(t) {
+    return n(t);
+  }) : n(s);
+}
+export {
+  h as G
+};