@cfx-dev/ui-components 4.5.0 → 4.5.3

package/dist/components/Input/Input.js

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

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

@@ -0,0 +1,2 @@
+export type InputSize = 'small' | 'normal' | 'large';
+export type InputTheme = 'default' | 'onlight';

package/dist/components/Input/Input.types.js

@@ -0,0 +1 @@
+

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ResponsiveValueType } from '../../utils/ui';
-import { InputSize } from './Input';
+import { InputSize } from './Input.types';
 
 export interface RichInputProps {
     size?: ResponsiveValueType<InputSize>;

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

@@ -1,4 +1,5 @@
 export { default as Input } from './Input';
 export { default as RichInput } from './RichInput';
-export type { InputSize, InputProps, InputTheme, } from './Input';
+export type { InputProps } from './Input';
+export type { InputSize, InputTheme } from './Input.types';
 export type { RichInputProps } from './RichInput';

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

@@ -19,6 +19,7 @@ export interface InputDropzoneProps extends DropzoneOptions {
     rootAriaLabel?: string;
     dropzoneClassName?: string;
     dropzoneItemClassName?: string;
+    name?: string;
 }
 declare function InputDropzone(props: InputDropzoneProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof InputDropzone>;