@cfx-dev/ui-components 4.3.12 → 4.3.13

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

@@ -15,6 +15,7 @@ type InputTypeSpecificProps = {
     value?: number | string;
 };
 export type InputProps = InputTypeSpecificProps & {
+    name?: string;
     id?: string;
     size?: ResponsiveValueType<InputSize>;
     theme?: InputTheme;

package/dist/components/Input/Input.js

@@ -1,22 +1,22 @@
-import { jsxs as X, jsx as t } from "react/jsx-runtime";
+import { jsxs as $, 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 b } 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__fullWidth__5a033", Q = "cfxui__Input__input__07830", U = "cfxui__Input__empty__3b36a", Y = "cfxui__Input__placeholderIcon__4d079", Z = "cfxui__Input__decorator__3b81f", ee = "cfxui__Input__small__c1513", le = "cfxui__Input__large__92d72", te = "cfxui__Input__onlight__7d0b7", ae = "cfxui__Input__backdropBlur__fdde1", l = {
-  root: O,
-  fullWidth: P,
-  input: Q,
-  empty: U,
-  placeholderIcon: Y,
-  decorator: Z,
-  small: ee,
-  large: le,
-  onlight: te,
-  backdropBlur: ae,
+import { Icon as q } from "../Icon/Icon.js";
+import H from "../IconButton/IconButton.js";
+import { Indicator as J } from "../Indicator/Indicator.js";
+import { clsx as C } from "../../utils/clsx.js";
+import { getValue as L } from "../../utils/getValue.js";
+import { ui as O } from "../../utils/ui/ui.js";
+const P = "cfxui__Input__root__6392b", Q = "cfxui__Input__fullWidth__5a033", U = "cfxui__Input__input__07830", Y = "cfxui__Input__empty__3b36a", Z = "cfxui__Input__placeholderIcon__4d079", ee = "cfxui__Input__decorator__3b81f", le = "cfxui__Input__small__c1513", te = "cfxui__Input__large__92d72", ae = "cfxui__Input__onlight__7d0b7", ie = "cfxui__Input__backdropBlur__fdde1", l = {
+  root: P,
+  fullWidth: Q,
+  input: U,
+  empty: Y,
+  placeholderIcon: Z,
+  decorator: ee,
+  small: le,
+  large: te,
+  onlight: ae,
+  backdropBlur: ie,
   "inputSizeinitial-large": "cfxui__Input__inputSizeinitial-large__12afb",
   "inputSizeinitial-small": "cfxui__Input__inputSizeinitial-small__33905",
   "inputSizesmall-large": "cfxui__Input__inputSizesmall-large__e2689",
@@ -32,113 +32,115 @@ const O = "cfxui__Input__root__6392b", P = "cfxui__Input__fullWidth__5a033", Q =
   "inputSizexlarge-large": "cfxui__Input__inputSizexlarge-large__1ef2c",
   "inputSizexlarge-small": "cfxui__Input__inputSizexlarge-small__7f6ab"
 };
-function ie(n) {
+function ne(n) {
   const {
-    decorator: c,
-    loading: p,
-    type: a,
-    hasValue: u,
-    onCleare: _
+    decorator: o,
+    loading: m,
+    type: p,
+    hasValue: a,
+    onCleare: u
   } = n;
-  return p ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(H, {}) }) : c ? /* @__PURE__ */ t("div", { className: l.decorator, children: J(c) }) : a === "search" && u ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(q, { size: "xsmall", areaSize: "large", name: "Close", onClick: _ }) }) : null;
+  return m ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(J, {}) }) : o ? /* @__PURE__ */ t("div", { className: l.decorator, children: L(o) }) : p === "search" && a ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(H, { size: "xsmall", areaSize: "large", name: "Close", onClick: u }) }) : null;
 }
-function pe(n) {
+function de(n) {
   const {
-    id: c,
+    id: o,
+    name: m,
     fullWidth: p = !1,
     value: a,
     onChange: u,
-    onSubmit: _,
-    onKeyDown: d,
-    pattern: f,
-    tabIndex: C,
-    loading: N = !1,
-    spellCheck: y = !0,
-    autofocus: k = !1,
-    disabled: R = !1,
-    className: w,
-    containerClassName: v,
-    placeholder: s = "",
-    placeholderIcon: m,
-    type: x = "text",
-    size: E = "normal",
-    theme: B = "default",
-    decorator: V,
-    backdropBlur: W = !1,
-    ref: D
-  } = n, [g, F] = i.useState(a), I = typeof g < "u" && g !== "" && g !== null || typeof a < "u" && a !== "" && a !== null;
-  let S, z, h;
+    onSubmit: d,
+    onKeyDown: f,
+    pattern: g,
+    tabIndex: N,
+    loading: y = !1,
+    spellCheck: k = !0,
+    autofocus: R = !1,
+    disabled: w = !1,
+    className: v,
+    containerClassName: E,
+    placeholder: c = "",
+    placeholderIcon: s,
+    type: I = "text",
+    size: B = "normal",
+    theme: V = "default",
+    decorator: W,
+    backdropBlur: D = !1,
+    ref: F
+  } = n, [x, A] = i.useState(a), S = typeof x < "u" && x !== "" && x !== null || typeof a < "u" && a !== "" && a !== null;
+  let z, h, b;
   if (n.type === "number") {
     const {
       min: e,
-      max: o,
-      step: T
+      max: r,
+      step: X
     } = n;
-    h = T ?? 1, S = e ?? Number.MIN_SAFE_INTEGER, z = o ?? Number.MAX_SAFE_INTEGER;
+    b = X ?? 1, z = e ?? Number.MIN_SAFE_INTEGER, h = r ?? Number.MAX_SAFE_INTEGER;
   }
-  const r = i.useCallback((e) => {
-    F(e), u && u(e);
-  }, [u]), A = i.useCallback(
+  const _ = i.useCallback((e) => {
+    A(e), u && u(e);
+  }, [u]), K = i.useCallback(
     (e) => {
       const {
-        value: o
+        value: r
       } = e.target;
-      if (f) {
-        f.test(o) && r(o);
+      if (g) {
+        g.test(r) && _(r);
         return;
       }
-      r(o);
+      _(r);
     },
-    [r, f]
-  ), K = i.useCallback((e) => {
-    d && d(e), _ && e.key === "Enter" && _();
-  }, [d, _]), M = i.useCallback(() => {
-    r("");
-  }, [r]), j = b(
+    [_, g]
+  ), M = i.useCallback((e) => {
+    f && f(e), d && e.key === "Enter" && d();
+  }, [f, d]), j = i.useCallback(() => {
+    _("");
+  }, [_]), G = C(
     l.root,
-    l[B],
-    v,
-    L.getResponsiveFlatClassnames("input-size", E).map((e) => l[e]),
+    l[V],
+    E,
+    O.getResponsiveFlatClassnames("input-size", B).map((e) => l[e]),
     {
       [l.fullWidth]: p,
-      [l.backdropBlur]: W,
-      [l.empty]: !I
+      [l.backdropBlur]: D,
+      [l.empty]: !S
     }
-  ), G = i.useMemo(() => s ? m ? `     ${s.trim()}` : s.trim() : "", [s, m]);
-  return /* @__PURE__ */ X("div", { className: j, children: [
+  ), T = i.useMemo(() => c ? s ? `     ${c.trim()}` : c.trim() : "", [c, s]);
+  return /* @__PURE__ */ $("div", { className: G, children: [
     /* @__PURE__ */ t(
       "input",
       {
-        id: c,
-        ref: D,
-        type: x,
-        tabIndex: C,
-        autoFocus: k,
-        className: b(l.input, w),
+        id: o,
+        name: m,
+        ref: F,
+        type: I,
+        tabIndex: N,
+        autoFocus: R,
+        className: C(l.input, v),
         value: a,
-        placeholder: G,
-        disabled: R,
-        onChange: A,
-        onKeyDown: K,
-        spellCheck: y,
-        min: S,
-        max: z,
-        step: h
+        placeholder: T,
+        disabled: w,
+        onChange: K,
+        onKeyDown: M,
+        spellCheck: k,
+        min: z,
+        max: h,
+        step: b
       }
     ),
-    m && /* @__PURE__ */ t($, { name: m, className: l.placeholderIcon }),
+    s && /* @__PURE__ */ t(q, { name: s, className: l.placeholderIcon }),
     /* @__PURE__ */ t(
-      ie,
+      ne,
       {
-        decorator: V,
-        loading: N,
-        type: x,
-        hasValue: I,
-        onCleare: M
+        decorator: W,
+        loading: y,
+        type: I,
+        hasValue: S,
+        onCleare: j
       }
     )
   ] });
 }
 export {
-  pe as default
+  de as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.3.12",
+  "version": "4.3.13",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",