@ioca/react 1.4.76 → 1.4.77

package/lib/es/components/image/list.js

@@ -1,43 +1,48 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import usePreview from '../../js/usePreview/index.js';
-import { getSuffixByUrl, getFileType } from '../../js/utils.js';
-import Flex from '../flex/flex.js';
-import Image from './image.js';
-
+import { getFileType, getSuffixByUrl } from "../../js/utils.js";
+import flex_default from "../flex/index.js";
+import usePreview from "../../js/usePreview/index.js";
+import Image from "./image.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/image/list.tsx
 function List(props) {
-    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
-    const preview = usePreview();
-    const files = useMemo(() => {
-        return items.map((item) => {
-            const o = {
-                src: "",
-            };
-            if (typeof item === "string") {
-                o.src = item;
-            }
-            else {
-                Object.assign(o, item);
-            }
-            o.suffix = getSuffixByUrl(o.src) || "";
-            o.type = getFileType(o.suffix, item["type"]);
-            return o;
-        });
-    }, [items]);
-    const handleClick = (e, i) => {
-        onClick?.(e);
-        previewable &&
-            preview({
-                items: files,
-                initial: i,
-            });
-    };
-    if (!files.length)
-        return "";
-    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
-            return (jsx(Image, { src: img.src, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
-        }) }));
+	const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
+	const preview = usePreview();
+	const files = useMemo(() => {
+		return items.map((item) => {
+			const o = { src: "" };
+			if (typeof item === "string") o.src = item;
+			else Object.assign(o, item);
+			o.suffix = getSuffixByUrl(o.src) || "";
+			o.type = getFileType(o.suffix, item["type"]);
+			return o;
+		});
+	}, [items]);
+	const handleClick = (e, i) => {
+		onClick?.(e);
+		previewable && preview({
+			items: files,
+			initial: i
+		});
+	};
+	if (!files.length) return "";
+	return /* @__PURE__ */ jsx(flex_default, {
+		className: "i-image-list",
+		gap,
+		columns,
+		wrap,
+		direction,
+		children: files.map((img, i) => {
+			return /* @__PURE__ */ jsx(Image, {
+				src: img.src,
+				usePreview: false,
+				onClick: (e) => handleClick(e, i),
+				...restProps
+			}, i);
+		})
+	});
 }
-
+//#endregion
 export { List as default };
-//# sourceMappingURL=list.js.map
+
+//# sourceMappingURL=list.js.map

package/lib/es/components/image/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../packages/components/image/list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { getFileType, getSuffixByUrl } from \"../../js/utils\";\nimport Flex from \"../flex\";\nimport Image from \"./image\";\nimport { IImageList } from \"./type\";\n\nexport default function List(props: IImageList) {\n\tconst {\n\t\titems = [],\n\t\tgap = 8,\n\t\tcolumns,\n\t\twrap,\n\t\tdirection,\n\t\tusePreview: previewable,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\tconst preview = usePreview();\n\n\tconst files = useMemo(() => {\n\t\treturn items.map((item) => {\n\t\t\tconst o: TPreviewItem = {\n\t\t\t\tsrc: \"\",\n\t\t\t};\n\t\t\tif (typeof item === \"string\") {\n\t\t\t\to.src = item;\n\t\t\t} else {\n\t\t\t\tObject.assign(o, item);\n\t\t\t}\n\n\t\t\to.suffix = getSuffixByUrl(o.src) || \"\";\n\t\t\to.type = getFileType(o.suffix, item[\"type\"]);\n\n\t\t\treturn o;\n\t\t});\n\t}, [items]);\n\n\tconst handleClick = (e, i) => {\n\t\tonClick?.(e);\n\n\t\tpreviewable &&\n\t\t\tpreview({\n\t\t\t\titems: files,\n\t\t\t\tinitial: i,\n\t\t\t});\n\t};\n\n\tif (!files.length) return \"\";\n\n\treturn (\n\t\t<Flex\n\t\t\tclassName='i-image-list'\n\t\t\tgap={gap}\n\t\t\tcolumns={columns}\n\t\t\twrap={wrap}\n\t\t\tdirection={direction}\n\t\t>\n\t\t\t{files.map((img, i) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Image\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tsrc={img.src}\n\t\t\t\t\t\tusePreview={false}\n\t\t\t\t\t\tonClick={(e) => handleClick(e, i)}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Flex>\n\t);\n}\n"],"names":["_jsx"],"mappings":";;;;;;;AAQc,SAAU,IAAI,CAAC,KAAiB,EAAA;IAC7C,MAAM,EACL,KAAK,GAAG,EAAE,EACV,GAAG,GAAG,CAAC,EACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,UAAU,EAAE,WAAW,EACvB,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK;AACT,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;AAC1B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AACzB,YAAA,MAAM,CAAC,GAAiB;AACvB,gBAAA,GAAG,EAAE,EAAE;aACP;AACD,YAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC7B,gBAAA,CAAC,CAAC,GAAG,GAAG,IAAI;YACb;iBAAO;AACN,gBAAA,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC;YACvB;YAEA,CAAC,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE;AACtC,YAAA,CAAC,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAE5C,YAAA,OAAO,CAAC;AACT,QAAA,CAAC,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,QAAA,OAAO,GAAG,CAAC,CAAC;QAEZ,WAAW;AACV,YAAA,OAAO,CAAC;AACP,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,OAAO,EAAE,CAAC;AACV,aAAA,CAAC;AACJ,IAAA,CAAC;IAED,IAAI,CAAC,KAAK,CAAC,MAAM;AAAE,QAAA,OAAO,EAAE;AAE5B,IAAA,QACCA,GAAA,CAAC,IAAI,EAAA,EACJ,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACrB,YAAA,QACCA,GAAA,CAAC,KAAK,EAAA,EAEL,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,KAC7B,SAAS,EAAA,EAJR,CAAC,CAKL;QAEJ,CAAC,CAAC,EAAA,CACI;AAET;;;;"}
+{"version":3,"file":"list.js","names":["Flex"],"sources":["../../../../packages/components/image/list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { getFileType, getSuffixByUrl } from \"../../js/utils\";\nimport Flex from \"../flex\";\nimport Image from \"./image\";\nimport { IImageList } from \"./type\";\n\nexport default function List(props: IImageList) {\n\tconst {\n\t\titems = [],\n\t\tgap = 8,\n\t\tcolumns,\n\t\twrap,\n\t\tdirection,\n\t\tusePreview: previewable,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\tconst preview = usePreview();\n\n\tconst files = useMemo(() => {\n\t\treturn items.map((item) => {\n\t\t\tconst o: TPreviewItem = {\n\t\t\t\tsrc: \"\",\n\t\t\t};\n\t\t\tif (typeof item === \"string\") {\n\t\t\t\to.src = item;\n\t\t\t} else {\n\t\t\t\tObject.assign(o, item);\n\t\t\t}\n\n\t\t\to.suffix = getSuffixByUrl(o.src) || \"\";\n\t\t\to.type = getFileType(o.suffix, item[\"type\"]);\n\n\t\t\treturn o;\n\t\t});\n\t}, [items]);\n\n\tconst handleClick = (e, i) => {\n\t\tonClick?.(e);\n\n\t\tpreviewable &&\n\t\t\tpreview({\n\t\t\t\titems: files,\n\t\t\t\tinitial: i,\n\t\t\t});\n\t};\n\n\tif (!files.length) return \"\";\n\n\treturn (\n\t\t<Flex\n\t\t\tclassName='i-image-list'\n\t\t\tgap={gap}\n\t\t\tcolumns={columns}\n\t\t\twrap={wrap}\n\t\t\tdirection={direction}\n\t\t>\n\t\t\t{files.map((img, i) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Image\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tsrc={img.src}\n\t\t\t\t\t\tusePreview={false}\n\t\t\t\t\t\tonClick={(e) => handleClick(e, i)}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Flex>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,SAAwB,KAAK,OAAmB;CAC/C,MAAM,EACL,QAAQ,EAAE,EACV,MAAM,GACN,SACA,MACA,WACA,YAAY,aACZ,SACA,GAAG,cACA;CACJ,MAAM,UAAU,YAAY;CAE5B,MAAM,QAAQ,cAAc;AAC3B,SAAO,MAAM,KAAK,SAAS;GAC1B,MAAM,IAAkB,EACvB,KAAK,IACL;AACD,OAAI,OAAO,SAAS,SACnB,GAAE,MAAM;OAER,QAAO,OAAO,GAAG,KAAK;AAGvB,KAAE,SAAS,eAAe,EAAE,IAAI,IAAI;AACpC,KAAE,OAAO,YAAY,EAAE,QAAQ,KAAK,QAAQ;AAE5C,UAAO;IACN;IACA,CAAC,MAAM,CAAC;CAEX,MAAM,eAAe,GAAG,MAAM;AAC7B,YAAU,EAAE;AAEZ,iBACC,QAAQ;GACP,OAAO;GACP,SAAS;GACT,CAAC;;AAGJ,KAAI,CAAC,MAAM,OAAQ,QAAO;AAE1B,QACC,oBAACA,cAAD;EACC,WAAU;EACL;EACI;EACH;EACK;YAEV,MAAM,KAAK,KAAK,MAAM;AACtB,UACC,oBAAC,OAAD;IAEC,KAAK,IAAI;IACT,YAAY;IACZ,UAAU,MAAM,YAAY,GAAG,EAAE;IACjC,GAAI;IACH,EALI,EAKJ;IAEF;EACI,CAAA"}

package/lib/es/components/input/container.js

@@ -1,14 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/input/container.tsx
 function InputContainer(props) {
-    const { as: As = "label", label, className, labelInline, style, children, status, tip, required, } = props;
-    return (jsxs(As, { className: classNames("i-input-label", className, {
-            "i-input-inline": labelInline,
-        }), style: style, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label] })), children, tip && (jsx("span", { className: classNames("i-input-message", {
-                    [`i-input-${status}`]: status !== "normal",
-                }), children: tip }))] }));
+	const { as: As = "label", label, className, labelInline, style, children, status, tip, required } = props;
+	return /* @__PURE__ */ jsxs(As, {
+		className: classNames("i-input-label", className, { "i-input-inline": labelInline }),
+		style,
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: "i-input-label-text",
+				children: [required && /* @__PURE__ */ jsx("span", {
+					className: "error",
+					children: "*"
+				}), label]
+			}),
+			children,
+			tip && /* @__PURE__ */ jsx("span", {
+				className: classNames("i-input-message", { [`i-input-${status}`]: status !== "normal" }),
+				children: tip
+			})
+		]
+	});
 }
-
+//#endregion
 export { InputContainer as default };
-//# sourceMappingURL=container.js.map
+
+//# sourceMappingURL=container.js.map

package/lib/es/components/input/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../../../packages/components/input/container.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { IInputContainer } from \"./type\";\n\nexport default function InputContainer(props: IInputContainer) {\n\tconst {\n\t\tas: As = \"label\",\n\t\tlabel,\n\t\tclassName,\n\t\tlabelInline,\n\t\tstyle,\n\t\tchildren,\n\t\tstatus,\n\t\ttip,\n\t\trequired,\n\t} = props;\n\n\treturn (\n\t\t<As\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<span className='i-input-label-text'>\n\t\t\t\t\t{required && <span className='error'>*</span>}\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{children}\n\n\t\t\t{tip && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={classNames(\"i-input-message\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tip}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</As>\n\t);\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAGc,SAAU,cAAc,CAAC,KAAsB,EAAA;IAC5D,MAAM,EACL,EAAE,EAAE,EAAE,GAAG,OAAO,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,QAAQ,GACR,GAAG,KAAK;IAET,QACCA,IAAA,CAAC,EAAE,EAAA,EACF,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE;AACjD,YAAA,gBAAgB,EAAE,WAAW;AAC7B,SAAA,CAAC,EACF,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAEX,KAAK,KACLA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClC,QAAQ,IAAIC,cAAM,SAAS,EAAC,OAAO,EAAA,QAAA,EAAA,GAAA,EAAA,CAAS,EAC5C,KAAK,CAAA,EAAA,CACA,CACP,EAEA,QAAQ,EAER,GAAG,KACHA,cACC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;AACxC,oBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;AAC1C,iBAAA,CAAC,YAED,GAAG,EAAA,CACE,CACP,CAAA,EAAA,CACG;AAEP;;;;"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../../packages/components/input/container.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { IInputContainer } from \"./type\";\n\nexport default function InputContainer(props: IInputContainer) {\n\tconst {\n\t\tas: As = \"label\",\n\t\tlabel,\n\t\tclassName,\n\t\tlabelInline,\n\t\tstyle,\n\t\tchildren,\n\t\tstatus,\n\t\ttip,\n\t\trequired,\n\t} = props;\n\n\treturn (\n\t\t<As\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<span className='i-input-label-text'>\n\t\t\t\t\t{required && <span className='error'>*</span>}\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\n\t\t\t{children}\n\n\t\t\t{tip && (\n\t\t\t\t<span\n\t\t\t\t\tclassName={classNames(\"i-input-message\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{tip}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</As>\n\t);\n}\n"],"mappings":";;;AAGA,SAAwB,eAAe,OAAwB;CAC9D,MAAM,EACL,IAAI,KAAK,SACT,OACA,WACA,aACA,OACA,UACA,QACA,KACA,aACG;AAEJ,QACC,qBAAC,IAAD;EACC,WAAW,WAAW,iBAAiB,WAAW,EACjD,kBAAkB,aAClB,CAAC;EACK;YAJR;GAME,SACA,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,YAAY,oBAAC,QAAD;KAAM,WAAU;eAAQ;KAAQ,CAAA,EAC5C,MACK;;GAGP;GAEA,OACA,oBAAC,QAAD;IACC,WAAW,WAAW,mBAAmB,GACvC,WAAW,WAAW,WAAW,UAClC,CAAC;cAED;IACK,CAAA;GAEJ"}

package/lib/es/components/input/index.js

@@ -1,6 +1,7 @@
-import Input from './input.js';
+import Input from "./input.js";
+//#region packages/components/input/index.tsx
+var input_default = Input;
+//#endregion
+export { input_default as default };
 
-
-
-export { Input as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib/es/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/components/input/index.tsx"],"sourcesContent":["import Input from \"./input\";\n\nexport default Input;\n"],"mappings":";;AAEA,IAAA,gBAAe"}

package/lib/es/components/input/input.js

@@ -1,75 +1,111 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { VisibilityRound, VisibilityOffRound } from '@ricons/material';
-import classNames from 'classnames';
-import { useState, useMemo, useEffect } from 'react';
-import Helpericon from '../utils/helpericon/helpericon.js';
-import InputContainer from './container.js';
-import Number from './number.js';
-import Range from './range.js';
-import Textarea from './textarea.js';
-
+import helpericon_default from "../utils/helpericon/index.js";
+import InputContainer from "./container.js";
+import Number from "./number.js";
+import Range from "./range.js";
+import Textarea from "./textarea.js";
+import classNames from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { VisibilityOffRound, VisibilityRound } from "/Users/iann/codes/ioca-react/node_modules/.pnpm/@ricons+material@0.12.0/node_modules/@ricons/material/es/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/input/input.tsx
 const Input = ((props) => {
-    const { ref, type = "text", label, name, value = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, underline, required, maxLength, onChange, onEnter, onClear, style, ...restProps } = props;
-    const [inputValue, setInputValue] = useState(value);
-    const [inputType, setInputType] = useState(type);
-    const [visible, setVisible] = useState(false);
-    const handleChange = (e) => {
-        const v = e.target.value;
-        setInputValue(v);
-        onChange?.(v, e);
-    };
-    const handleKeydown = (e) => {
-        e.code === "Enter" && onEnter?.(e);
-    };
-    const handleHelperClick = () => {
-        if (type === "password" && !hideVisible) {
-            setVisible((v) => {
-                const next = !v;
-                setInputType(next ? "text" : "password");
-                return next;
-            });
-            return;
-        }
-        const v = "";
-        setInputValue(v);
-        onChange?.(v);
-        onClear?.();
-    };
-    const HelperIcon = useMemo(() => {
-        if (type === "password") {
-            return visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
-        }
-        return undefined;
-    }, [type, visible]);
-    useEffect(() => {
-        setInputValue(value);
-    }, [value]);
-    const inputProps = {
-        ref,
-        type: inputType,
-        name,
-        value: inputValue,
-        maxLength,
-        className: classNames("i-input", `i-input-${type}`),
-        onChange: handleChange,
-        onKeyDown: handleKeydown,
-        ...restProps,
-    };
-    useEffect(() => {
-        setInputType(type);
-        setVisible(false);
-    }, [type]);
-    const clearable = clear && inputValue;
-    const showHelper = type === "password" && !!inputValue;
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-                "i-input-underline": underline,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), maxLength && inputValue?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [inputValue.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+	const { ref, type = "text", label, name, value = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, underline, required, maxLength, onChange, onEnter, onClear, style, ...restProps } = props;
+	const [inputValue, setInputValue] = useState(value);
+	const [inputType, setInputType] = useState(type);
+	const [visible, setVisible] = useState(false);
+	const handleChange = (e) => {
+		const v = e.target.value;
+		setInputValue(v);
+		onChange?.(v, e);
+	};
+	const handleKeydown = (e) => {
+		e.code === "Enter" && onEnter?.(e);
+	};
+	const handleHelperClick = () => {
+		if (type === "password" && !hideVisible) {
+			setVisible((v) => {
+				const next = !v;
+				setInputType(next ? "text" : "password");
+				return next;
+			});
+			return;
+		}
+		const v = "";
+		setInputValue(v);
+		onChange?.(v);
+		onClear?.();
+	};
+	const HelperIcon = useMemo(() => {
+		if (type === "password") return visible ? /* @__PURE__ */ jsx(VisibilityRound, {}) : /* @__PURE__ */ jsx(VisibilityOffRound, {});
+	}, [type, visible]);
+	useEffect(() => {
+		setInputValue(value);
+	}, [value]);
+	const inputProps = {
+		ref,
+		type: inputType,
+		name,
+		value: inputValue,
+		maxLength,
+		className: classNames("i-input", `i-input-${type}`),
+		onChange: handleChange,
+		onKeyDown: handleKeydown,
+		...restProps
+	};
+	useEffect(() => {
+		setInputType(type);
+		setVisible(false);
+	}, [type]);
+	const clearable = clear && inputValue;
+	const showHelper = type === "password" && !!inputValue;
+	return /* @__PURE__ */ jsx(InputContainer, {
+		label,
+		labelInline,
+		className,
+		style: {
+			width,
+			...style
+		},
+		tip: message ?? tip,
+		status,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classNames("i-input-item", {
+				[`i-input-${status}`]: status !== "normal",
+				"i-input-borderless": !border,
+				"i-input-underline": underline
+			}),
+			children: [
+				prepend && /* @__PURE__ */ jsx("div", {
+					className: "i-input-prepend",
+					children: prepend
+				}),
+				/* @__PURE__ */ jsx("input", { ...inputProps }),
+				maxLength && inputValue?.length > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "color-8 pr-4 font-sm",
+					children: [
+						inputValue.length,
+						" / ",
+						maxLength
+					]
+				}),
+				/* @__PURE__ */ jsx(helpericon_default, {
+					active: !!clearable || showHelper,
+					icon: HelperIcon,
+					onClick: handleHelperClick
+				}),
+				append && /* @__PURE__ */ jsx("div", {
+					className: "i-input-append",
+					children: append
+				})
+			]
+		})
+	});
 });
 Input.Textarea = Textarea;
 Input.Number = Number;
 Input.Range = Range;
-
+//#endregion
 export { Input as default };
-//# sourceMappingURL=input.js.map
+
+//# sourceMappingURL=input.js.map

package/lib/es/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../packages/components/input/input.tsx"],"sourcesContent":["import { VisibilityOffRound, VisibilityRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport {\n\tChangeEvent,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\ttype KeyboardEvent,\n} from \"react\";\nimport \"../../css/input.css\";\nimport Helpericon from \"../utils/helpericon\";\nimport InputContainer from \"./container\";\nimport Number from \"./number\";\nimport Range from \"./range\";\nimport Textarea from \"./textarea\";\nimport type { CompositionInput, IInput } from \"./type\";\n\nconst Input = ((props: IInput) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tlabel,\n\t\tname,\n\t\tvalue = \"\",\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tclassName,\n\t\tstatus = \"normal\",\n\t\tmessage,\n\t\ttip,\n\t\tclear,\n\t\twidth,\n\t\thideVisible,\n\t\tborder,\n\t\tunderline,\n\t\trequired,\n\t\tmaxLength,\n\t\tonChange,\n\t\tonEnter,\n\t\tonClear,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [inputType, setInputType] = useState(type);\n\tconst [visible, setVisible] = useState(false);\n\n\tconst handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst v = e.target.value;\n\n\t\tsetInputValue(v);\n\t\tonChange?.(v, e);\n\t};\n\n\tconst handleKeydown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\te.code === \"Enter\" && onEnter?.(e);\n\t};\n\n\tconst handleHelperClick = () => {\n\t\tif (type === \"password\" && !hideVisible) {\n\t\t\tsetVisible((v) => {\n\t\t\t\tconst next = !v;\n\t\t\t\tsetInputType(next ? \"text\" : \"password\");\n\t\t\t\treturn next;\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\tconst v = \"\";\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t\tonClear?.();\n\t};\n\n\tconst HelperIcon = useMemo(() => {\n\t\tif (type === \"password\") {\n\t\t\treturn visible ? <VisibilityRound /> : <VisibilityOffRound />;\n\t\t}\n\n\t\treturn undefined;\n\t}, [type, visible]);\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\tconst inputProps = {\n\t\tref,\n\t\ttype: inputType,\n\t\tname,\n\t\tvalue: inputValue,\n\t\tmaxLength,\n\t\tclassName: classNames(\"i-input\", `i-input-${type}`),\n\t\tonChange: handleChange,\n\t\tonKeyDown: handleKeydown,\n\t\t...restProps,\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputType(type);\n\t\tsetVisible(false);\n\t}, [type]);\n\n\tconst clearable = clear && inputValue;\n\tconst showHelper = type === \"password\" && !!inputValue;\n\n\treturn (\n\t\t<InputContainer\n\t\t\tlabel={label}\n\t\t\tlabelInline={labelInline}\n\t\t\tclassName={className}\n\t\t\tstyle={{ width, ...style }}\n\t\t\ttip={message ?? tip}\n\t\t\tstatus={status}\n\t\t\trequired={required}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\"i-input-underline\": underline,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{prepend && <div className='i-input-prepend'>{prepend}</div>}\n\n\t\t\t\t<input {...inputProps} />\n\n\t\t\t\t{maxLength && inputValue?.length > 0 && (\n\t\t\t\t\t<span className='color-8 pr-4 font-sm'>\n\t\t\t\t\t\t{inputValue.length} / {maxLength}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive={!!clearable || showHelper}\n\t\t\t\t\ticon={HelperIcon}\n\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t/>\n\n\t\t\t\t{append && <div className='i-input-append'>{append}</div>}\n\t\t\t</div>\n\t\t</InputContainer>\n\t);\n}) as CompositionInput;\n\nInput.Textarea = Textarea;\nInput.Number = Number;\nInput.Range = Range;\n\nexport default Input;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../../packages/components/input/input.tsx"],"sourcesContent":["import { VisibilityOffRound, VisibilityRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport {\n\tChangeEvent,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\ttype KeyboardEvent,\n} from \"react\";\nimport \"../../css/input.css\";\nimport Helpericon from \"../utils/helpericon\";\nimport InputContainer from \"./container\";\nimport Number from \"./number\";\nimport Range from \"./range\";\nimport Textarea from \"./textarea\";\nimport type { CompositionInput, IInput } from \"./type\";\n\nconst Input = ((props: IInput) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tlabel,\n\t\tname,\n\t\tvalue = \"\",\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tclassName,\n\t\tstatus = \"normal\",\n\t\tmessage,\n\t\ttip,\n\t\tclear,\n\t\twidth,\n\t\thideVisible,\n\t\tborder,\n\t\tunderline,\n\t\trequired,\n\t\tmaxLength,\n\t\tonChange,\n\t\tonEnter,\n\t\tonClear,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [inputType, setInputType] = useState(type);\n\tconst [visible, setVisible] = useState(false);\n\n\tconst handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst v = e.target.value;\n\n\t\tsetInputValue(v);\n\t\tonChange?.(v, e);\n\t};\n\n\tconst handleKeydown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\te.code === \"Enter\" && onEnter?.(e);\n\t};\n\n\tconst handleHelperClick = () => {\n\t\tif (type === \"password\" && !hideVisible) {\n\t\t\tsetVisible((v) => {\n\t\t\t\tconst next = !v;\n\t\t\t\tsetInputType(next ? \"text\" : \"password\");\n\t\t\t\treturn next;\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\tconst v = \"\";\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t\tonClear?.();\n\t};\n\n\tconst HelperIcon = useMemo(() => {\n\t\tif (type === \"password\") {\n\t\t\treturn visible ? <VisibilityRound /> : <VisibilityOffRound />;\n\t\t}\n\n\t\treturn undefined;\n\t}, [type, visible]);\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\tconst inputProps = {\n\t\tref,\n\t\ttype: inputType,\n\t\tname,\n\t\tvalue: inputValue,\n\t\tmaxLength,\n\t\tclassName: classNames(\"i-input\", `i-input-${type}`),\n\t\tonChange: handleChange,\n\t\tonKeyDown: handleKeydown,\n\t\t...restProps,\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputType(type);\n\t\tsetVisible(false);\n\t}, [type]);\n\n\tconst clearable = clear && inputValue;\n\tconst showHelper = type === \"password\" && !!inputValue;\n\n\treturn (\n\t\t<InputContainer\n\t\t\tlabel={label}\n\t\t\tlabelInline={labelInline}\n\t\t\tclassName={className}\n\t\t\tstyle={{ width, ...style }}\n\t\t\ttip={message ?? tip}\n\t\t\tstatus={status}\n\t\t\trequired={required}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\"i-input-underline\": underline,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{prepend && <div className='i-input-prepend'>{prepend}</div>}\n\n\t\t\t\t<input {...inputProps} />\n\n\t\t\t\t{maxLength && inputValue?.length > 0 && (\n\t\t\t\t\t<span className='color-8 pr-4 font-sm'>\n\t\t\t\t\t\t{inputValue.length} / {maxLength}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive={!!clearable || showHelper}\n\t\t\t\t\ticon={HelperIcon}\n\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t/>\n\n\t\t\t\t{append && <div className='i-input-append'>{append}</div>}\n\t\t\t</div>\n\t\t</InputContainer>\n\t);\n}) as CompositionInput;\n\nInput.Textarea = Textarea;\nInput.Number = Number;\nInput.Range = Range;\n\nexport default Input;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,UAAU,UAAkB;CACjC,MAAM,EACL,KACA,OAAO,QACP,OACA,MACA,QAAQ,IACR,SACA,QACA,aACA,WACA,SAAS,UACT,SACA,KACA,OACA,OACA,aACA,QACA,WACA,UACA,WACA,UACA,SACA,SACA,OACA,GAAG,cACA;CAEJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,MAAqC;EAC1D,MAAM,IAAI,EAAE,OAAO;AAEnB,gBAAc,EAAE;AAChB,aAAW,GAAG,EAAE;;CAGjB,MAAM,iBAAiB,MAAuC;AAC7D,IAAE,SAAS,WAAW,UAAU,EAAE;;CAGnC,MAAM,0BAA0B;AAC/B,MAAI,SAAS,cAAc,CAAC,aAAa;AACxC,eAAY,MAAM;IACjB,MAAM,OAAO,CAAC;AACd,iBAAa,OAAO,SAAS,WAAW;AACxC,WAAO;KACN;AACF;;EAGD,MAAM,IAAI;AACV,gBAAc,EAAE;AAChB,aAAW,EAAE;AACb,aAAW;;CAGZ,MAAM,aAAa,cAAc;AAChC,MAAI,SAAS,WACZ,QAAO,UAAU,oBAAC,iBAAD,EAAmB,CAAA,GAAG,oBAAC,oBAAD,EAAsB,CAAA;IAI5D,CAAC,MAAM,QAAQ,CAAC;AAEnB,iBAAgB;AACf,gBAAc,MAAM;IAClB,CAAC,MAAM,CAAC;CAEX,MAAM,aAAa;EAClB;EACA,MAAM;EACN;EACA,OAAO;EACP;EACA,WAAW,WAAW,WAAW,WAAW,OAAO;EACnD,UAAU;EACV,WAAW;EACX,GAAG;EACH;AAED,iBAAgB;AACf,eAAa,KAAK;AAClB,aAAW,MAAM;IACf,CAAC,KAAK,CAAC;CAEV,MAAM,YAAY,SAAS;CAC3B,MAAM,aAAa,SAAS,cAAc,CAAC,CAAC;AAE5C,QACC,oBAAC,gBAAD;EACQ;EACM;EACF;EACX,OAAO;GAAE;GAAO,GAAG;GAAO;EAC1B,KAAK,WAAW;EACR;EACE;YAEV,qBAAC,OAAD;GACC,WAAW,WAAW,gBAAgB;KACpC,WAAW,WAAW,WAAW;IAClC,sBAAsB,CAAC;IACvB,qBAAqB;IACrB,CAAC;aALH;IAOE,WAAW,oBAAC,OAAD;KAAK,WAAU;eAAmB;KAAc,CAAA;IAE5D,oBAAC,SAAD,EAAO,GAAI,YAAa,CAAA;IAEvB,aAAa,YAAY,SAAS,KAClC,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACE,WAAW;MAAO;MAAI;MAClB;;IAGP,oBAAC,oBAAD;KACC,QAAQ,CAAC,CAAC,aAAa;KACvB,MAAM;KACN,SAAS;KACT,CAAA;IAEA,UAAU,oBAAC,OAAD;KAAK,WAAU;eAAkB;KAAa,CAAA;IACrD;;EACU,CAAA;;AAIlB,MAAM,WAAW;AACjB,MAAM,SAAS;AACf,MAAM,QAAQ"}