@cfx-dev/ui-components 4.2.23 → 4.3.0

package/dist/components/Input/Input.js

@@ -1,21 +1,21 @@
-import { jsxs as G, jsx as i } from "react/jsx-runtime";
-import n from "react";
-import { Icon as T } from "../Icon/Icon.js";
-import W from "../IconButton/IconButton.js";
-import { Indicator as X } from "../Indicator/Indicator.js";
-import { clsx as $ } from "../../utils/clsx.js";
-import { getValue as q } from "../../utils/getValue.js";
-import { ui as H } from "../../utils/ui/ui.js";
-const J = "cfxui__Input__root__6392b", L = "cfxui__Input__input__07830", O = "cfxui__Input__empty__3b36a", P = "cfxui__Input__placeholderIcon__4d079", Q = "cfxui__Input__decorator__3b81f", U = "cfxui__Input__small__c1513", Y = "cfxui__Input__large__92d72", Z = "cfxui__Input__onlight__7d0b7", e = {
-  root: J,
+import { jsxs as X, jsx as t } from "react/jsx-runtime";
+import i from "react";
+import { Icon as $ } from "../Icon/Icon.js";
+import q from "../IconButton/IconButton.js";
+import { Indicator as H } from "../Indicator/Indicator.js";
+import { clsx as C } from "../../utils/clsx.js";
+import { getValue as J } from "../../utils/getValue.js";
+import { ui as L } from "../../utils/ui/ui.js";
+const O = "cfxui__Input__root__6392b", P = "cfxui__Input__input__07830", Q = "cfxui__Input__empty__3b36a", U = "cfxui__Input__placeholderIcon__4d079", Y = "cfxui__Input__decorator__3b81f", Z = "cfxui__Input__small__c1513", ee = "cfxui__Input__large__92d72", le = "cfxui__Input__onlight__7d0b7", l = {
+  root: O,
   "full-width": "cfxui__Input__full-width__587b3",
-  input: L,
-  empty: O,
-  placeholderIcon: P,
-  decorator: Q,
-  small: U,
-  large: Y,
-  onlight: Z,
+  input: P,
+  empty: Q,
+  placeholderIcon: U,
+  decorator: Y,
+  small: Z,
+  large: ee,
+  onlight: le,
   "backdrop-blur": "cfxui__Input__backdrop-blur__6922f",
   "input-size-initial-large": "cfxui__Input__input-size-initial-large__41d16",
   "input-size-initial-small": "cfxui__Input__input-size-initial-small__5c106",
@@ -32,100 +32,113 @@ const J = "cfxui__Input__root__6392b", L = "cfxui__Input__input__07830", O = "cf
   "input-size-xlarge-large": "cfxui__Input__input-size-xlarge-large__38b57",
   "input-size-xlarge-small": "cfxui__Input__input-size-xlarge-small__00b5b"
 };
-function ee(x) {
+function te(n) {
   const {
-    decorator: t,
-    loading: s,
-    type: o,
-    hasValue: c,
-    onCleare: a
-  } = x;
-  return s ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(X, {}) }) : t ? /* @__PURE__ */ i("div", { className: e.decorator, children: q(t) }) : o === "search" && c ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: a }) }) : null;
+    decorator: o,
+    loading: p,
+    type: a,
+    hasValue: _,
+    onCleare: u
+  } = n;
+  return p ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(H, {}) }) : o ? /* @__PURE__ */ t("div", { className: l.decorator, children: J(o) }) : a === "search" && _ ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(q, { size: "xsmall", areaSize: "large", name: "Close", onClick: u }) }) : null;
 }
-const se = n.forwardRef(function(t, s) {
+function ce(n) {
   const {
     id: o,
-    fullWidth: c = !1,
+    fullWidth: p = !1,
     value: a,
-    onChange: m,
-    onSubmit: p,
+    onChange: _,
+    onSubmit: u,
     onKeyDown: d,
     pattern: f,
-    tabIndex: b,
-    loading: C = !1,
-    spellCheck: y = !0,
-    autofocus: N = !1,
-    disabled: k = !1,
-    className: v = "",
-    placeholder: _ = "",
-    placeholderIcon: r,
-    type: z = "text",
-    size: w = "normal",
-    theme: E = "default",
-    decorator: R,
-    backdropBlur: V = !1
-  } = t, [g, S] = n.useState(a), h = typeof g < "u" && g !== "" && g !== null || typeof a < "u" && a !== "" && a !== null, D = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, F = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, u = n.useCallback((l) => {
-    S(l), m && m(l);
-  }, [m]), A = n.useCallback(
-    (l) => {
+    tabIndex: N,
+    loading: y = !1,
+    spellCheck: k = !0,
+    autofocus: w = !1,
+    disabled: R = !1,
+    className: v,
+    containerClassName: E,
+    placeholder: c = "",
+    placeholderIcon: m,
+    type: x = "text",
+    size: V = "normal",
+    theme: S = "default",
+    decorator: D,
+    backdropBlur: F = !1,
+    ref: A
+  } = n, [g, K] = i.useState(a), I = typeof g < "u" && g !== "" && g !== null || typeof a < "u" && a !== "" && a !== null;
+  let z, h, b;
+  if (n.type === "number") {
+    const {
+      min: e,
+      max: r,
+      step: W
+    } = n;
+    b = W ?? 1, z = e ?? Number.MIN_SAFE_INTEGER, h = r ?? Number.MAX_SAFE_INTEGER;
+  }
+  const s = i.useCallback((e) => {
+    K(e), _ && _(e);
+  }, [_]), M = i.useCallback(
+    (e) => {
       const {
-        value: I
-      } = l.target;
+        value: r
+      } = e.target;
       if (f) {
-        f.test(I) && u(I);
+        f.test(r) && s(r);
         return;
       }
-      u(I);
+      s(r);
     },
-    [u, f]
-  ), K = n.useCallback((l) => {
-    d && d(l), p && l.key === "Enter" && p();
-  }, [d, p]), M = n.useCallback(() => {
-    u("");
-  }, [u]), j = $(
-    e.root,
-    e[E],
-    v,
-    H.getResponsiveFlatClassnames("input-size", w).map((l) => e[l]),
+    [s, f]
+  ), j = i.useCallback((e) => {
+    d && d(e), u && e.key === "Enter" && u();
+  }, [d, u]), B = i.useCallback(() => {
+    s("");
+  }, [s]), G = C(
+    l.root,
+    l[S],
+    E,
+    L.getResponsiveFlatClassnames("input-size", V).map((e) => l[e]),
     {
-      [e["full-width"]]: c,
-      [e["backdrop-blur"]]: V,
-      [e.empty]: !h
+      [l["full-width"]]: p,
+      [l["backdrop-blur"]]: F,
+      [l.empty]: !I
     }
-  ), B = n.useMemo(() => _ ? r ? `     ${_.trim()}` : _.trim() : "", [_, r]);
-  return /* @__PURE__ */ G("div", { className: j, children: [
-    /* @__PURE__ */ i(
+  ), T = i.useMemo(() => c ? m ? `     ${c.trim()}` : c.trim() : "", [c, m]);
+  return /* @__PURE__ */ X("div", { className: G, children: [
+    /* @__PURE__ */ t(
       "input",
       {
         id: o,
-        ref: s,
-        type: z,
-        tabIndex: b,
-        autoFocus: N,
-        className: e.input,
+        ref: A,
+        type: x,
+        tabIndex: N,
+        autoFocus: w,
+        className: C(l.input, v),
         value: a,
-        placeholder: B,
-        disabled: k,
-        onChange: A,
-        onKeyDown: K,
-        spellCheck: y,
-        min: D,
-        max: F
+        placeholder: T,
+        disabled: R,
+        onChange: M,
+        onKeyDown: j,
+        spellCheck: k,
+        min: z,
+        max: h,
+        step: b
       }
     ),
-    r && /* @__PURE__ */ i(T, { name: r, className: e.placeholderIcon }),
-    /* @__PURE__ */ i(
-      ee,
+    m && /* @__PURE__ */ t($, { name: m, className: l.placeholderIcon }),
+    /* @__PURE__ */ t(
+      te,
       {
-        decorator: R,
-        loading: C,
-        type: z,
-        hasValue: h,
-        onCleare: M
+        decorator: D,
+        loading: y,
+        type: x,
+        hasValue: I,
+        onCleare: B
       }
     )
   ] });
-});
+}
 export {
-  se as default
+  ce as default
 };

package/dist/components/Input/InputShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import i from "react";
-import { Flex as r } from "../Layout/Flex/Flex.js";
+import r from "../Layout/Flex/Flex.js";
 import { Text as a } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import c from "./Input.js";

package/dist/components/Input/RichInput.d.ts

@@ -12,9 +12,10 @@ export interface RichInputProps {
     onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
     rendered: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
     placeholder?: string;
     autoFocus?: boolean;
     withClearButton?: boolean;
 }
-declare const RichInput: React.ForwardRefExoticComponent<RichInputProps & React.RefAttributes<HTMLDivElement>>;
+declare function RichInput(props: RichInputProps): import("react/jsx-runtime").JSX.Element;
 export default RichInput;

package/dist/components/Input/RichInput.js

@@ -1,16 +1,17 @@
-import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import { jsxs as B, jsx as l } from "react/jsx-runtime";
 import i from "react";
-import { Button as y } from "../Button/Button.js";
-import { clsx as B } from "../../utils/clsx.js";
+import D from "../Button/Button.js";
+import { clsx as F } from "../../utils/clsx.js";
+import "../../utils/links.js";
 import { useDynamicRef as _ } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import "../../index-2hJuj4UN.js";
-import { ui as D } from "../../utils/ui/ui.js";
-const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b298", j = "cfxui__RichInput__clear__5538b", c = {
-  root: L,
-  renderer: T,
-  clear: j,
+import "../../index-Cl_RnsqN.js";
+import { ui as L } from "../../utils/ui/ui.js";
+const T = "cfxui__RichInput__root__57e6e", j = "cfxui__RichInput__renderer__8b298", w = "cfxui__RichInput__clear__5538b", c = {
+  root: T,
+  renderer: j,
+  clear: w,
   "richinput-size-initial-large": "cfxui__RichInput__richinput-size-initial-large__cdc8c",
   "richinput-size-initial-small": "cfxui__RichInput__richinput-size-initial-small__c3ec0",
   "richinput-size-small-large": "cfxui__RichInput__richinput-size-small-large__1e06d",
@@ -25,21 +26,23 @@ const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b29
   "richinput-size-large-small": "cfxui__RichInput__richinput-size-large-small__bd0d0",
   "richinput-size-xlarge-large": "cfxui__RichInput__richinput-size-xlarge-large__ae9e6",
   "richinput-size-xlarge-small": "cfxui__RichInput__richinput-size-xlarge-small__41461"
-}, P = i.forwardRef(function(o, m) {
+};
+function P(o) {
   const {
-    size: p = "normal",
+    size: m = "normal",
     value: n,
-    onChange: h,
-    onFocus: f,
-    onBlur: d,
-    onSelect: g,
-    onKeyDown: z,
-    className: R,
-    rendered: x,
-    placeholder: I,
-    autoFocus: C,
-    withClearButton: b = !1
-  } = o, u = i.useRef(null), r = i.useRef(null), a = _(h), s = _(g), S = i.useCallback((e) => {
+    onChange: p,
+    onFocus: h,
+    onBlur: f,
+    onSelect: d,
+    onKeyDown: g,
+    className: z,
+    rendered: R,
+    placeholder: x,
+    autoFocus: I,
+    withClearButton: C = !1,
+    ref: b
+  } = o, u = i.useRef(null), r = i.useRef(null), a = _(p), s = _(d), S = i.useCallback((e) => {
     a.current(e.target.value);
   }, []), k = i.useCallback(() => {
     var e;
@@ -51,32 +54,32 @@ const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b29
     s.current(t.selectionStart, t.selectionEnd, t.selectionDirection);
   }, []), v = i.useCallback((e) => {
     r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
-  }, []), F = B(
+  }, []), y = F(
     c.root,
-    R,
-    D.getResponsiveFlatClassnames("richinput-size", p).map((e) => c[e])
+    z,
+    L.getResponsiveFlatClassnames("richinput-size", m).map((e) => c[e])
   );
-  return /* @__PURE__ */ w("div", { ref: m, className: F, children: [
+  return /* @__PURE__ */ B("div", { ref: b, className: y, children: [
     /* @__PURE__ */ l(
       "input",
       {
         ref: u,
-        autoFocus: C,
+        autoFocus: I,
         type: "text",
         value: n,
         onChange: S,
-        placeholder: I,
-        onBlur: d,
-        onFocus: f,
+        placeholder: x,
+        onBlur: f,
+        onFocus: h,
         onScroll: v,
         onSelect: N,
-        onKeyDown: z
+        onKeyDown: g
       }
     ),
-    /* @__PURE__ */ l("div", { ref: r, className: c.renderer, children: x }),
-    b && n && /* @__PURE__ */ l("div", { className: c.clear, children: /* @__PURE__ */ l(y, { icon: "Close", onClick: k }) })
+    /* @__PURE__ */ l("div", { ref: r, className: c.renderer, children: R }),
+    C && n && /* @__PURE__ */ l("div", { className: c.clear, children: /* @__PURE__ */ l(D, { icon: "Close", onClick: k }) })
   ] });
-});
+}
 export {
   P as default
 };

package/dist/components/InputDropzone/InputDropzone.d.ts

@@ -6,7 +6,7 @@ export type FileError = DropzoneFileError;
 export type ErrorCode = DropzoneErrorCode;
 export interface FileRejection {
     file: FileWithPath;
-    errors: FileError[];
+    errors: readonly FileError[];
 }
 export interface InputDropzoneProps extends DropzoneOptions {
     value?: FileWithPath[];