@ioca/react 1.4.78 → 1.4.80

package/lib/cjs/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":[],"sources":["../../../../packages/components/drawer/drawer.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useTransition } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown, useReactive } from \"../../js/hooks\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { IDrawer } from \"./type\";\n\nfunction Drawer(props: IDrawer) {\n\tconst {\n\t\tvisible,\n\t\tposition = \"left\",\n\t\theader,\n\t\tfooter,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tkeepDOM,\n\t\tclassName,\n\t\tdisabledEsc,\n\t\tchildren,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\n\tconst toggable = useRef(true);\n\tconst state = useReactive({\n\t\tshow: visible,\n\t\tactive: visible,\n\t});\n\tconst [isPending, startTransition] = useTransition();\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current || isPending) return;\n\t\ttoggable.current = false;\n\n\t\tstartTransition(() => {\n\t\t\tstate.active = false;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (!keepDOM) {\n\t\t\t\t\tstate.show = false;\n\t\t\t\t}\n\t\t\t\tonVisibleChange?.(false);\n\t\t\t\ttoggable.current = true;\n\t\t\t\tonClose?.();\n\t\t\t}, 240);\n\t\t});\n\t};\n\n\tconst handleShow = () => {\n\t\tif (!toggable.current || isPending) return;\n\n\t\tstate.show = true;\n\t\tonVisibleChange?.(true);\n\t\ttoggable.current = false;\n\n\t\tstartTransition(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tstate.active = true;\n\t\t\t\ttoggable.current = true;\n\t\t\t});\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tconst handleBackdropClick = () => {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledEsc,\n\t\t}\n\t);\n\n\tif (!state.show) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={classNames(\"i-backdrop-drawer\", className, {\n\t\t\t\t\"i-active\": state.active,\n\t\t\t})}\n\t\t\tonClick={handleBackdropClick}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-drawer\", `i-drawer-${position}`)}\n\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t{header && (\n\t\t\t\t\t<header className='i-drawer-header'>\n\t\t\t\t\t\t{header}\n\n\t\t\t\t\t\t{!hideCloseButton && (\n\t\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\t\tclassName='i-drawer-close'\n\t\t\t\t\t\t\t\tonClick={handleHide}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</header>\n\t\t\t\t)}\n\n\t\t\t\t<div className='i-drawer-content'>{children}</div>\n\n\t\t\t\t{footer && <div className='i-drawer-footer'>{footer}</div>}\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\nexport default Drawer;\n"],"mappings":""}

package/lib/cjs/components/drawer/index.js

@@ -0,0 +1,6 @@
+//#region packages/components/drawer/index.tsx
+var drawer_default = require("./drawer.js").default;
+//#endregion
+exports.default = drawer_default;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/drawer/index.js.map

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

package/lib/cjs/components/dropdown/dropdown.js

@@ -0,0 +1,38 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../list/index.js");
+const require_index$1 = require("../popup/index.js");
+const require_item = require("./item.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/dropdown/dropdown.tsx
+const Dropdown = (props) => {
+	const { visible, width, content, children, ...restProps } = props;
+	const [active, setActive] = (0, react.useState)(visible);
+	if (!content) return children;
+	const handleVisibleChange = (v) => {
+		setActive(v);
+		if (props.onVisibleChange) props.onVisibleChange(v);
+	};
+	(0, react.useEffect)(() => {
+		setActive(visible);
+	}, [visible]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		trigger: "click",
+		position: "bottom",
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+			className: "i-dropdown-content",
+			style: { minWidth: width },
+			children: typeof content === "function" ? content(() => setActive(false)) : content
+		}),
+		...restProps,
+		touchable: true,
+		visible: active,
+		onVisibleChange: handleVisibleChange,
+		children
+	});
+};
+Dropdown.Item = require_item.default;
+//#endregion
+exports.default = Dropdown;
+
+//# sourceMappingURL=dropdown.js.map

package/lib/cjs/components/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../../packages/components/dropdown/dropdown.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport List from \"../list\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport Item from \"./item\";\nimport { IDropdown } from \"./type\";\n\nconst Dropdown = (props: IDropdown) => {\n\tconst { visible, width, content, children, ...restProps } = props;\n\tconst [active, setActive] = useState(visible);\n\n\tif (!content) {\n\t\treturn children;\n\t}\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tsetActive(v);\n\t\tif (props.onVisibleChange) {\n\t\t\tprops.onVisibleChange(v);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetActive(visible);\n\t}, [visible]);\n\n\treturn (\n\t\t<Popup\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tcontent={\n\t\t\t\t<List\n\t\t\t\t\tclassName='i-dropdown-content'\n\t\t\t\t\tstyle={{ minWidth: width }}\n\t\t\t\t>\n\t\t\t\t\t{typeof content === \"function\"\n\t\t\t\t\t\t? content(() => setActive(false))\n\t\t\t\t\t\t: content}\n\t\t\t\t</List>\n\t\t\t}\n\t\t\t{...restProps}\n\t\t\ttouchable\n\t\t\tvisible={active}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children}\n\t\t</Popup>\n\t);\n};\n\nDropdown.Item = Item;\n\nexport default Dropdown;\n"],"mappings":""}

package/lib/cjs/components/dropdown/index.js

@@ -0,0 +1,6 @@
+//#region packages/components/dropdown/index.tsx
+var dropdown_default = require("./dropdown.js").default;
+//#endregion
+exports.default = dropdown_default;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/dropdown/index.js.map

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

package/lib/cjs/components/dropdown/item.js

@@ -0,0 +1,36 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../list/index.js");
+const require_index$1 = require("../popup/index.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/dropdown/item.tsx
+const { Item: ListItem } = require_index.default;
+const Item = (props) => {
+	const { more, moreProps, onClick, ...restProps } = props;
+	const Li = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItem, {
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick?.(e);
+		},
+		...restProps
+	});
+	if (!more) return Li;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		position: "right",
+		touchable: true,
+		arrow: false,
+		align: "start",
+		offset: 10,
+		hideDelay: 240,
+		...moreProps,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+			className: "i-dropdown-content",
+			onClick: (e) => e.stopPropagation(),
+			children: more
+		}),
+		children: Li
+	});
+};
+//#endregion
+exports.default = Item;
+
+//# sourceMappingURL=item.js.map

package/lib/cjs/components/dropdown/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":["List","Popup"],"sources":["../../../../packages/components/dropdown/item.tsx"],"sourcesContent":["import List from \"../list\";\nimport Popup from \"../popup\";\nimport { IDropItem } from \"./type\";\n\nconst { Item: ListItem } = List;\n\nconst Item = (props: IDropItem) => {\n\tconst { more, moreProps, onClick, ...restProps } = props;\n\tconst Li = (\n\t\t<ListItem\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\tonClick?.(e);\n\t\t\t}}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n\n\tif (!more) return Li;\n\n\treturn (\n\t\t<Popup\n\t\t\tposition='right'\n\t\t\ttouchable\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\toffset={10}\n\t\t\thideDelay={240}\n\t\t\t{...moreProps}\n\t\t\tcontent={\n\t\t\t\t<List\n\t\t\t\t\tclassName='i-dropdown-content'\n\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t{more}\n\t\t\t\t</List>\n\t\t\t}\n\t\t>\n\t\t\t{Li}\n\t\t</Popup>\n\t);\n};\n\nexport default Item;\n"],"mappings":";;;;;AAIA,MAAM,EAAE,MAAM,aAAaA,cAAAA;AAE3B,MAAM,QAAQ,UAAqB;CAClC,MAAM,EAAE,MAAM,WAAW,SAAS,GAAG,cAAc;CACnD,MAAM,KACL,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACC,UAAU,MAAM;AACf,KAAE,iBAAiB;AACnB,aAAU,EAAE;;EAEb,GAAI;EACH,CAAA;AAGH,KAAI,CAAC,KAAM,QAAO;AAElB,QACC,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;EACC,UAAS;EACT,WAAA;EACA,OAAO;EACP,OAAM;EACN,QAAQ;EACR,WAAW;EACX,GAAI;EACJ,SACC,iBAAA,GAAA,kBAAA,KAACD,cAAAA,SAAD;GACC,WAAU;GACV,UAAU,MAAM,EAAE,iBAAiB;aAElC;GACK,CAAA;YAGP;EACM,CAAA"}

package/lib/cjs/components/editor/controls.js

@@ -0,0 +1,89 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../button/index.js");
+const require_index$1 = require("../icon/index.js");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+let xss = require("xss");
+xss = require_runtime.__toESM(xss);
+//#region packages/components/editor/controls.tsx
+const { escapeAttrValue } = xss.default;
+const exec = (a, b, c) => {
+	if (typeof document === "undefined") return;
+	return document.execCommand(a, b, c);
+};
+const xssOptions = { onIgnoreTagAttr: function(tag, name, value) {
+	if (["data-", "style"].includes(name.substr(0, 5))) return name + "=\"" + escapeAttrValue(value) + "\"";
+} };
+const fnMap = {
+	bold: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.FormatBoldRound, {}),
+		onClick: () => exec("bold"),
+		tip: "粗体"
+	},
+	italic: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.FormatItalicRound, {}),
+		onClick: () => exec("italic"),
+		tip: "斜体"
+	},
+	underline: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.FormatUnderlinedRound, {}),
+		onClick: () => exec("underline"),
+		tip: "下划线"
+	},
+	strike: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.StrikethroughSRound, {}),
+		onClick: () => exec("strikeThrough"),
+		tip: "删除线"
+	},
+	redo: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.RedoRound, {}),
+		onClick: () => exec("redo"),
+		tip: "重做"
+	},
+	undo: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.UndoRound, {}),
+		onClick: () => exec("undo"),
+		tip: "撤销"
+	},
+	clear: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.ClearAllRound, {}),
+		onClick: () => exec("removeFormat"),
+		tip: "清除格式"
+	}
+};
+const aliasMap = {
+	simple: [
+		"undo",
+		"redo",
+		"bold",
+		"italic",
+		"underline",
+		"strike",
+		"clear"
+	],
+	all: Object.keys(fnMap)
+};
+function getControls(fns, options) {
+	const { controlBtnProps } = options;
+	return (typeof fns === "string" ? aliasMap[fns] : fns).map((k) => {
+		if (fnMap[k]) {
+			const { icon, render, tip, onClick } = fnMap[k];
+			if (render) return render(options);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.default, {
+				...controlBtnProps,
+				onClick,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { icon }), tip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "i-editor-control-tip",
+					children: tip
+				})]
+			}, k);
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}, k);
+	});
+}
+//#endregion
+exports.default = getControls;
+exports.exec = exec;
+exports.xssOptions = xssOptions;
+
+//# sourceMappingURL=controls.js.map

package/lib/cjs/components/editor/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":["FormatBoldRound","FormatItalicRound","FormatUnderlinedRound","StrikethroughSRound","RedoRound","UndoRound","ClearAllRound","Button","Icon","Fragment"],"sources":["../../../../packages/components/editor/controls.tsx"],"sourcesContent":["import {\n\tClearAllRound,\n\tFormatBoldRound,\n\tFormatItalicRound,\n\tFormatUnderlinedRound,\n\tRedoRound,\n\tStrikethroughSRound,\n\tUndoRound,\n} from \"@ricons/material\";\nimport { Fragment } from \"react/jsx-runtime\";\nimport xss from \"xss\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\n\nconst { escapeAttrValue } = xss as unknown as {\n\tescapeAttrValue: (value: string) => string;\n};\n\nexport const exec = (a, b?, c?) => {\n\tif (typeof document === \"undefined\") return;\n\treturn document.execCommand(a, b, c);\n};\n\nexport const xssOptions = {\n\tonIgnoreTagAttr: function (tag, name, value) {\n\t\tif ([\"data-\", \"style\"].includes(name.substr(0, 5))) {\n\t\t\treturn name + '=\"' + escapeAttrValue(value) + '\"';\n\t\t}\n\t},\n};\n\nconst fnMap = {\n\tbold: {\n\t\ticon: <FormatBoldRound />,\n\t\tonClick: () => exec(\"bold\"),\n\t\ttip: \"粗体\",\n\t},\n\titalic: {\n\t\ticon: <FormatItalicRound />,\n\t\tonClick: () => exec(\"italic\"),\n\t\ttip: \"斜体\",\n\t},\n\tunderline: {\n\t\ticon: <FormatUnderlinedRound />,\n\t\tonClick: () => exec(\"underline\"),\n\t\ttip: \"下划线\",\n\t},\n\tstrike: {\n\t\ticon: <StrikethroughSRound />,\n\t\tonClick: () => exec(\"strikeThrough\"),\n\t\ttip: \"删除线\",\n\t},\n\tredo: {\n\t\ticon: <RedoRound />,\n\t\tonClick: () => exec(\"redo\"),\n\t\ttip: \"重做\",\n\t},\n\tundo: {\n\t\ticon: <UndoRound />,\n\t\tonClick: () => exec(\"undo\"),\n\t\ttip: \"撤销\",\n\t},\n\t// color: {\n\t// \ticon: <FormatColorTextRound />,\n\t// \tonClick: () => exec(\"foreColor\", false, \"\"),\n\t// },\n\t// backColor: {\n\t// \ticon: <FormatColorFillRound />,\n\t// \tonClick: () => exec(\"backColor\", false, \"\"),\n\t// },\n\tclear: {\n\t\ticon: <ClearAllRound />,\n\t\tonClick: () => exec(\"removeFormat\"),\n\t\ttip: \"清除格式\",\n\t},\n};\n\nconst aliasMap = {\n\tsimple: [\"undo\", \"redo\", \"bold\", \"italic\", \"underline\", \"strike\", \"clear\"],\n\tall: Object.keys(fnMap),\n};\n\nexport default function getControls(fns, options) {\n\tconst { controlBtnProps } = options;\n\tconst keys = typeof fns === \"string\" ? aliasMap[fns] : fns;\n\n\treturn keys.map((k) => {\n\t\tif (fnMap[k]) {\n\t\t\tconst { icon, render, tip, onClick } = fnMap[k];\n\n\t\t\tif (render) {\n\t\t\t\treturn render(options);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Button key={k} {...controlBtnProps} onClick={onClick}>\n\t\t\t\t\t<Icon icon={icon} />\n\t\t\t\t\t{tip && <span className='i-editor-control-tip'>{tip}</span>}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t}\n\t\treturn <Fragment key={k} />;\n\t});\n}\n"],"mappings":";;;;;;;;AAcA,MAAM,EAAE,oBAAoB,IAAA;AAI5B,MAAa,QAAQ,GAAG,GAAI,MAAO;AAClC,KAAI,OAAO,aAAa,YAAa;AACrC,QAAO,SAAS,YAAY,GAAG,GAAG,EAAE;;AAGrC,MAAa,aAAa,EACzB,iBAAiB,SAAU,KAAK,MAAM,OAAO;AAC5C,KAAI,CAAC,SAAS,QAAQ,CAAC,SAAS,KAAK,OAAO,GAAG,EAAE,CAAC,CACjD,QAAO,OAAO,QAAO,gBAAgB,MAAM,GAAG;GAGhD;AAED,MAAM,QAAQ;CACb,MAAM;EACL,MAAM,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,iBAAD,EAAmB,CAAA;EACzB,eAAe,KAAK,OAAO;EAC3B,KAAK;EACL;CACD,QAAQ;EACP,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;EAC3B,eAAe,KAAK,SAAS;EAC7B,KAAK;EACL;CACD,WAAW;EACV,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,uBAAD,EAAyB,CAAA;EAC/B,eAAe,KAAK,YAAY;EAChC,KAAK;EACL;CACD,QAAQ;EACP,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,qBAAD,EAAuB,CAAA;EAC7B,eAAe,KAAK,gBAAgB;EACpC,KAAK;EACL;CACD,MAAM;EACL,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,WAAD,EAAa,CAAA;EACnB,eAAe,KAAK,OAAO;EAC3B,KAAK;EACL;CACD,MAAM;EACL,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,WAAD,EAAa,CAAA;EACnB,eAAe,KAAK,OAAO;EAC3B,KAAK;EACL;CASD,OAAO;EACN,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,eAAD,EAAiB,CAAA;EACvB,eAAe,KAAK,eAAe;EACnC,KAAK;EACL;CACD;AAED,MAAM,WAAW;CAChB,QAAQ;EAAC;EAAQ;EAAQ;EAAQ;EAAU;EAAa;EAAU;EAAQ;CAC1E,KAAK,OAAO,KAAK,MAAM;CACvB;AAED,SAAwB,YAAY,KAAK,SAAS;CACjD,MAAM,EAAE,oBAAoB;AAG5B,SAFa,OAAO,QAAQ,WAAW,SAAS,OAAO,KAE3C,KAAK,MAAM;AACtB,MAAI,MAAM,IAAI;GACb,MAAM,EAAE,MAAM,QAAQ,KAAK,YAAY,MAAM;AAE7C,OAAI,OACH,QAAO,OAAO,QAAQ;AAGvB,UACC,iBAAA,GAAA,kBAAA,MAACC,cAAAA,SAAD;IAAgB,GAAI;IAA0B;cAA9C,CACC,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD,EAAY,MAAQ,CAAA,EACnB,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAwB;KAAW,CAAA,CACnD;MAHI,EAGJ;;AAGX,SAAO,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,UAAD,EAAoB,EAAL,EAAK;GAC1B"}

package/lib/cjs/components/editor/editor.js

@@ -0,0 +1,91 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_controls = require("./controls.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let xss = require("xss");
+xss = require_runtime.__toESM(xss);
+//#region packages/components/editor/editor.tsx
+const Editor = (props) => {
+	const { ref, width, height = "10em", placeholder, autosize, border = true, richPaste, controls = "simple", className, style, onInput, onPaste, onKeyDown, ...restProps } = props;
+	const editorRef = (0, react.useRef)(null);
+	const controlBtnProps = {
+		square: true,
+		flat: true,
+		size: "small"
+	};
+	const handlePaste = async (e) => {
+		onPaste?.(e);
+		if (richPaste) return;
+		e.preventDefault();
+		require_controls.exec("insertText", false, e.clipboardData.getData("text/plain"));
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		switch (e.key) {
+			case "Tab":
+				e.preventDefault();
+				require_controls.exec("insertHTML", false, "	");
+				break;
+			case "Enter":
+				e.preventDefault();
+				require_controls.exec("insertLineBreak");
+				if (!editorRef.current) return;
+				editorRef.current.scrollBy({
+					top: 20,
+					left: -1e3
+				});
+				if (!autosize) return;
+				editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
+				break;
+			default: break;
+		}
+	};
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			input: editorRef.current,
+			setValue(html) {
+				if (!editorRef.current) return;
+				const safeHtml = (0, xss.default)(html, require_controls.xssOptions);
+				editorRef.current.innerHTML = safeHtml;
+			},
+			getSafeValue() {
+				return (0, xss.default)(editorRef.current?.innerHTML ?? "", require_controls.xssOptions);
+			}
+		};
+	});
+	const handleInput = (e) => {
+		let html = editorRef.current?.innerHTML ?? "";
+		if (["<br>", "\n"].includes(html) && editorRef.current) {
+			html = "";
+			editorRef.current.innerHTML = html;
+		}
+		onInput?.(html, e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("i-editor", className, { "i-editor-borderless": !border }),
+		style: {
+			...style,
+			[autosize ? "minHeight" : "height"]: height,
+			width
+		},
+		children: [controls !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "i-editor-controls",
+			children: require_controls.default(controls, { controlBtnProps })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: editorRef,
+			className: "i-editor-content",
+			"data-placeholder": placeholder,
+			contentEditable: true,
+			onPaste: handlePaste,
+			onInput: handleInput,
+			onKeyDown: handleKeyDown,
+			...restProps
+		})]
+	});
+};
+//#endregion
+exports.default = Editor;
+
+//# sourceMappingURL=editor.js.map

package/lib/cjs/components/editor/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","names":[],"sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useImperativeHandle, useRef } from \"react\";\nimport xss from \"xss\";\nimport { IButton } from \"../button/type\";\nimport getControls, { exec, xssOptions } from \"./controls\";\nimport \"./index.css\";\nimport { IEditor } from \"./type\";\n\nconst Editor = (props: IEditor) => {\n\tconst {\n\t\tref,\n\t\twidth,\n\t\theight = \"10em\",\n\t\tplaceholder,\n\t\tautosize,\n\t\tborder = true,\n\t\trichPaste,\n\t\tcontrols = \"simple\",\n\t\tclassName,\n\t\tstyle,\n\t\tonInput,\n\t\tonPaste,\n\t\tonKeyDown,\n\t\t...restProps\n\t} = props;\n\tconst editorRef = useRef<HTMLDivElement>(null);\n\tconst controlBtnProps: IButton = {\n\t\tsquare: true,\n\t\tflat: true,\n\t\tsize: \"small\",\n\t};\n\n\tconst handlePaste = async (e) => {\n\t\tonPaste?.(e);\n\n\t\tif (richPaste) return;\n\t\te.preventDefault();\n\t\tconst text = e.clipboardData.getData(\"text/plain\");\n\t\texec(\"insertText\", false, text);\n\t};\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tswitch (e.key) {\n\t\t\tcase \"Tab\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertHTML\", false, \"&#09;\");\n\t\t\t\tbreak;\n\t\t\tcase \"Enter\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertLineBreak\");\n\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\teditorRef.current.scrollBy({\n\t\t\t\t\ttop: 20,\n\t\t\t\t\tleft: -1000,\n\t\t\t\t});\n\n\t\t\t\tif (!autosize) return;\n\t\t\t\teditorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\n\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tinput: editorRef.current,\n\t\t\tsetValue(html) {\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\tconst safeHtml = xss(html, xssOptions);\n\n\t\t\t\teditorRef.current.innerHTML = safeHtml;\n\t\t\t},\n\t\t\tgetSafeValue() {\n\t\t\t\tconst html = editorRef.current?.innerHTML ?? \"\";\n\n\t\t\t\treturn xss(html, xssOptions);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst handleInput = (e) => {\n\t\tlet html = editorRef.current?.innerHTML ?? \"\";\n\n\t\tif ([\"<br>\", \"\\n\"].includes(html) && editorRef.current) {\n\t\t\thtml = \"\";\n\t\t\teditorRef.current.innerHTML = html;\n\t\t}\n\n\t\tonInput?.(html, e);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-editor\", className, {\n\t\t\t\t\"i-editor-borderless\": !border,\n\t\t\t})}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\t[autosize ? \"minHeight\" : \"height\"]: height,\n\t\t\t\twidth,\n\t\t\t}}\n\t\t>\n\t\t\t{controls !== \"none\" && (\n\t\t\t\t<div className='i-editor-controls'>\n\t\t\t\t\t{getControls(controls, {\n\t\t\t\t\t\tcontrolBtnProps,\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tref={editorRef}\n\t\t\t\tclassName='i-editor-content'\n\t\t\t\tdata-placeholder={placeholder}\n\t\t\t\tcontentEditable\n\t\t\t\tonPaste={handlePaste}\n\t\t\t\tonInput={handleInput}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Editor;\n"],"mappings":""}

package/lib/cjs/components/editor/index.js

@@ -0,0 +1,6 @@
+//#region packages/components/editor/index.tsx
+var editor_default = require("./editor.js").default;
+//#endregion
+exports.default = editor_default;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/editor/index.js.map

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

package/lib/cjs/components/flex/flex.js

@@ -0,0 +1,31 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/flex/flex.tsx
+const Flex = (props) => {
+	const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
+	const gridColumns = (0, react.useMemo)(() => {
+		if (!columns) return;
+		if (typeof columns === "number") return `repeat(${columns}, 1fr)`;
+		return columns;
+	}, [columns]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...restProps,
+		style: {
+			alignItems: align,
+			justifyContent: justify,
+			gap,
+			flexDirection: direction,
+			flexWrap: wrap === true ? "wrap" : wrap,
+			gridTemplateColumns: gridColumns,
+			...style
+		},
+		className: (0, classnames.default)(className, { [columns ? "grid" : "flex"]: true })
+	});
+};
+//#endregion
+exports.default = Flex;
+
+//# sourceMappingURL=flex.js.map

package/lib/cjs/components/flex/flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","names":[],"sources":["../../../../packages/components/flex/flex.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport \"./index.css\";\nimport { IFlex } from \"./type\";\n\nconst Flex: React.FC<IFlex> = (props: IFlex) => {\n\tconst {\n\t\tas: Component = \"div\" as any,\n\t\talign,\n\t\tjustify,\n\t\tdirection,\n\t\twrap,\n\t\tgap,\n\t\tcolumns,\n\t\tclassName,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\") return `repeat(${columns}, 1fr)`;\n\n\t\treturn columns;\n\t}, [columns]);\n\n\treturn (\n\t\t<Component\n\t\t\t{...restProps}\n\t\t\tstyle={{\n\t\t\t\talignItems: align,\n\t\t\t\tjustifyContent: justify,\n\t\t\t\tgap,\n\t\t\t\tflexDirection: direction,\n\t\t\t\tflexWrap: wrap === true ? \"wrap\" : wrap,\n\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(className, {\n\t\t\t\t[columns ? \"grid\" : \"flex\"]: true,\n\t\t\t})}\n\t\t/>\n\t);\n};\n\nexport default Flex;\n"],"mappings":""}

package/lib/cjs/components/flex/index.js

@@ -0,0 +1,6 @@
+//#region packages/components/flex/index.tsx
+var flex_default = require("./flex.js").default;
+//#endregion
+exports.default = flex_default;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/flex/index.js.map

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

package/lib/cjs/components/form/context.js

@@ -0,0 +1,7 @@
+require("../../_virtual/_rolldown/runtime.js");
+//#region packages/components/form/context.tsx
+const Context = (0, require("react").createContext)({});
+//#endregion
+exports.default = Context;
+
+//# sourceMappingURL=context.js.map

package/lib/cjs/components/form/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../packages/components/form/context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { IFormInstance } from \"./useForm\";\n\nconst Context = createContext({} as IFormInstance);\n\nexport default Context;\n"],"mappings":";;AAGA,MAAM,WAAA,oBAAA,eAAwB,EAAE,CAAkB"}

package/lib/cjs/components/form/field.js

@@ -0,0 +1,71 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_context = require("./context.js");
+let react = require("react");
+let _Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/pubsub-js@1.9.5/node_modules/pubsub-js/src/pubsub.js");
+_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js = require_runtime.__toESM(_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js);
+//#region packages/components/form/field.tsx
+function Field(props) {
+	const { name, required, children } = props;
+	const [fieldValue, setFieldValue] = (0, react.useState)(void 0);
+	const [fieldStatus, setFieldStatus] = (0, react.useState)("normal");
+	const [fieldMessage, setFieldMessage] = (0, react.useState)(void 0);
+	const form = (0, react.useContext)(require_context.default);
+	const { id } = form;
+	const handleChange = (v) => {
+		if (!name) return;
+		form.set(name, v);
+		_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.publish(`${id}:change`, {
+			name,
+			value: v
+		});
+	};
+	const hijackChildren = (0, react.useMemo)(() => {
+		return react.Children.map(children, (node) => {
+			if (!(0, react.isValidElement)(node)) return null;
+			const { onChange } = node.props;
+			return (0, react.cloneElement)(node, {
+				value: fieldValue,
+				status: fieldStatus,
+				message: fieldMessage,
+				required,
+				onChange: (...args) => {
+					handleChange(args[0]);
+					onChange?.(...args);
+					setFieldStatus("normal");
+					setFieldMessage(void 0);
+				}
+			});
+		});
+	}, [
+		children,
+		fieldValue,
+		fieldStatus,
+		fieldMessage,
+		required
+	]);
+	(0, react.useEffect)(() => {
+		if (!name) return;
+		_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.subscribe(`${id}:set:${name}`, (evt, v) => {
+			setFieldValue(v);
+		});
+		_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.subscribe(`${id}:invalid:${name}`, (evt, v) => {
+			if (v?.value !== void 0) setFieldValue(v.value);
+			if (v?.status) setFieldStatus(v.status);
+			if ("message" in (v ?? {})) setFieldMessage(v.message);
+		});
+		Promise.resolve().then(() => {
+			form.set(name, form.cacheData[name] ?? void 0);
+		});
+		return () => {
+			_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.unsubscribe(`${id}:set:${name}`);
+			_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.unsubscribe(`${id}:invalid:${name}`);
+			form.delete(name);
+		};
+	}, [name, children]);
+	if (!name) return children;
+	return hijackChildren;
+}
+//#endregion
+exports.default = Field;
+
+//# sourceMappingURL=field.js.map

package/lib/cjs/components/form/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":["Context","Children"],"sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst [fieldValue, setFieldValue] = useState<any>(undefined);\n\tconst [fieldStatus, setFieldStatus] = useState(\"normal\");\n\tconst [fieldMessage, setFieldMessage] = useState<any>(undefined);\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue: fieldValue,\n\t\t\t\tstatus: fieldStatus,\n\t\t\t\tmessage: fieldMessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tsetFieldStatus(\"normal\");\n\t\t\t\t\tsetFieldMessage(undefined);\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, fieldValue, fieldStatus, fieldMessage, required]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (evt, v) => {\n\t\t\tsetFieldValue(v);\n\t\t});\n\t\tPubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {\n\t\t\tif (v?.value !== undefined) setFieldValue(v.value);\n\t\t\tif (v?.status) setFieldStatus(v.status);\n\t\t\tif (\"message\" in (v ?? {})) setFieldMessage(v.message);\n\t\t});\n\n\t\tPromise.resolve().then(() => {\n\t\t\tform.set(name, form.cacheData[name] ?? undefined);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${id}:set:${name}`);\n\t\t\tPubSub.unsubscribe(`${id}:invalid:${name}`);\n\t\t\tform.delete(name);\n\t\t};\n\t}, [name, children]);\n\n\tif (!name) return children;\n\n\treturn hijackChildren;\n}\n\nexport default Field;\n"],"mappings":";;;;;;AAaA,SAAS,MAAM,OAAe;CAC7B,MAAM,EAAE,MAAM,UAAU,aAAa;CACrC,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAA+B,KAAA,EAAU;CAC5D,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,SAAS;CACxD,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAAiC,KAAA,EAAU;CAChE,MAAM,QAAA,GAAA,MAAA,YAAkBA,gBAAAA,QAAQ;CAChC,MAAM,EAAE,OAAO;CAEf,MAAM,gBAAgB,MAAM;AAC3B,MAAI,CAAC,KAAM;AAEX,OAAK,IAAI,MAAM,EAAE;AACjB,uGAAA,QAAO,QAAQ,GAAG,GAAG,UAAU;GAC9B;GACA,OAAO;GACP,CAAC;;CAGH,MAAM,kBAAA,GAAA,MAAA,eAA+B;AACpC,SAAOC,MAAAA,SAAS,IAAI,WAAW,SAAS;AACvC,OAAI,EAAA,GAAA,MAAA,gBAAgB,KAAK,CAAE,QAAO;GAElC,MAAM,EAAE,aAAa,KAAK;AAE1B,WAAA,GAAA,MAAA,cAAoB,MAAM;IACzB,OAAO;IACP,QAAQ;IACR,SAAS;IACT;IACA,WAAW,GAAG,SAAS;AACtB,kBAAa,KAAK,GAAG;AACrB,gBAAW,GAAG,KAAK;AACnB,oBAAe,SAAS;AACxB,qBAAgB,KAAA,EAAU;;IAE3B,CAAQ;IACR;IACA;EAAC;EAAU;EAAY;EAAa;EAAc;EAAS,CAAC;AAE/D,EAAA,GAAA,MAAA,iBAAgB;AACf,MAAI,CAAC,KAAM;AAEX,uGAAA,QAAO,UAAU,GAAG,GAAG,OAAO,SAAS,KAAK,MAAM;AACjD,iBAAc,EAAE;IACf;AACF,uGAAA,QAAO,UAAU,GAAG,GAAG,WAAW,SAAS,KAAK,MAAM;AACrD,OAAI,GAAG,UAAU,KAAA,EAAW,eAAc,EAAE,MAAM;AAClD,OAAI,GAAG,OAAQ,gBAAe,EAAE,OAAO;AACvC,OAAI,cAAc,KAAK,EAAE,EAAG,iBAAgB,EAAE,QAAQ;IACrD;AAEF,UAAQ,SAAS,CAAC,WAAW;AAC5B,QAAK,IAAI,MAAM,KAAK,UAAU,SAAS,KAAA,EAAU;IAChD;AAEF,eAAa;AACZ,wGAAA,QAAO,YAAY,GAAG,GAAG,OAAO,OAAO;AACvC,wGAAA,QAAO,YAAY,GAAG,GAAG,WAAW,OAAO;AAC3C,QAAK,OAAO,KAAK;;IAEhB,CAAC,MAAM,SAAS,CAAC;AAEpB,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO"}

package/lib/cjs/components/form/form.js

@@ -0,0 +1,64 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_context = require("./context.js");
+const require_field = require("./field.js");
+const require_useForm = require("./useForm.js");
+const require_useConfig = require("./useConfig.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/pubsub-js@1.9.5/node_modules/pubsub-js/src/pubsub.js");
+_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js = require_runtime.__toESM(_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js);
+//#region packages/components/form/form.tsx
+const Form = (props) => {
+	const { form = {}, rules, initialValues, style, className, width, columns, itemMaxWidth, gap = "1em", labelInline, labelWidth, labelRight, children, onKeyDown, onEnter, onChange, ...restProps } = props;
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.keyCode !== 13) return;
+		onEnter?.(e, form.data, form);
+	};
+	const gridColumns = (0, react.useMemo)(() => {
+		if (!columns && !itemMaxWidth) return;
+		if (itemMaxWidth) return `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;
+		if (typeof columns === "number") return `minmax(0, 1fr) `.repeat(columns);
+		return columns;
+	}, [columns]);
+	(0, react.useEffect)(() => {
+		Object.assign(form, {
+			data: { ...initialValues },
+			rules
+		});
+	}, [form]);
+	(0, react.useEffect)(() => {
+		_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.subscribe(`${form.id}:change`, (evt, v) => {
+			onChange?.(v.name, v.value);
+		});
+		return () => {
+			_Users_iann_codes_ioca_react_node_modules__pnpm_pubsub_js_1_9_5_node_modules_pubsub_js_src_pubsub_js.default.unsubscribe(`${form.id}:change`);
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.default, {
+		value: form,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+			style: {
+				...style,
+				width,
+				gap,
+				gridTemplateColumns: gridColumns,
+				"--label-width": labelWidth,
+				"--label-align": labelRight ? "right" : void 0
+			},
+			className: (0, classnames.default)("i-form", className, { "i-form-inline": labelInline }),
+			onKeyDown: handleKeyDown,
+			...restProps,
+			children
+		})
+	});
+};
+Form.useForm = require_useForm.default;
+Form.Field = require_field.default;
+Form.useConfig = require_useConfig.default;
+//#endregion
+exports.default = Form;
+
+//# sourceMappingURL=form.js.map

package/lib/cjs/components/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { CSSProperties, useEffect, useMemo } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useConfig from \"./useConfig\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns,\n\t\titemMaxWidth,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(e, form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns && !itemMaxWidth) return;\n\n\t\tif (itemMaxWidth) {\n\t\t\treturn `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;\n\t\t}\n\n\t\tif (typeof columns === \"number\") {\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\t\t}\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tuseEffect(() => {\n\t\tObject.assign(form, {\n\t\t\tdata: { ...initialValues },\n\t\t\trules,\n\t\t});\n\t}, [form]);\n\n\tuseEffect(() => {\n\t\tPubSub.subscribe(`${form.id}:change`, (evt, v) => {\n\t\t\tonChange?.(v.name, v.value);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${form.id}:change`);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<Context value={form}>\n\t\t\t<form\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t\t\t\"--label-width\": labelWidth,\n\t\t\t\t\t\t\"--label-align\": labelRight ? \"right\" : undefined,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-form\", className, {\n\t\t\t\t\t\"i-form-inline\": labelInline,\n\t\t\t\t})}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</form>\n\t\t</Context>\n\t);\n};\n\nForm.useForm = useForm;\nForm.Field = Field;\nForm.useConfig = useConfig;\n\nexport default Form;\n"],"mappings":""}

package/lib/cjs/components/form/index.js

@@ -0,0 +1,6 @@
+//#region packages/components/form/index.tsx
+var form_default = require("./form.js").default;
+//#endregion
+exports.default = form_default;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/form/index.js.map

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

package/lib/cjs/components/form/useConfig.js

@@ -0,0 +1,45 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_field = require("./field.js");
+const require_useForm = require("./useForm.js");
+const require_form = require("./form.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/form/useConfig.tsx
+function useConfig(configs, formProps) {
+	const form = require_useForm.default();
+	const { onChange } = formProps ?? {};
+	const [values, setValues] = (0, react.useState)({});
+	const handleChange = (name, value) => {
+		setValues(() => ({ ...form.get() }));
+		onChange?.(name, value);
+	};
+	return {
+		form,
+		node: (0, react.useMemo)(() => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form.default, {
+				...formProps,
+				onChange: handleChange,
+				form,
+				children: configs.map((config) => {
+					const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldUpdate, shouldRender } = config;
+					const { className, style } = componentProps;
+					if (shouldRender && !shouldRender(values, form)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, {}, name);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field.default, {
+						name,
+						required,
+						children: render?.(config, values) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
+							label,
+							required,
+							...componentProps,
+							className: `${className ?? ""} ${colspan !== 1 ? `colspan-${colspan}` : ""}`
+						})
+					}, name);
+				})
+			});
+		}, [configs, values])
+	};
+}
+//#endregion
+exports.default = useConfig;
+
+//# sourceMappingURL=useConfig.js.map

package/lib/cjs/components/form/useConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfig.js","names":["useForm","Form","Fragment","Field"],"sources":["../../../../packages/components/form/useConfig.tsx"],"sourcesContent":["import { Fragment, useMemo, useState } from \"react\";\nimport Field from \"./field\";\nimport Form from \"./form\";\nimport { IForm, IFormItem } from \"./type\";\nimport useForm from \"./useForm\";\n\nexport default function useConfig(configs: IFormItem[], formProps?: IForm) {\n\tconst form = useForm();\n\tconst { onChange } = formProps ?? {};\n\tconst [values, setValues] = useState({});\n\n\tconst handleChange = (name, value) => {\n\t\tsetValues(() => ({ ...form.get() }));\n\t\tonChange?.(name, value);\n\t};\n\n\tconst node = useMemo(() => {\n\t\treturn (\n\t\t\t<Form {...formProps} onChange={handleChange} form={form}>\n\t\t\t\t{configs.map((config) => {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tname,\n\t\t\t\t\t\tlabel,\n\t\t\t\t\t\trequired,\n\t\t\t\t\t\tcomponent: El,\n\t\t\t\t\t\tcomponentProps = {},\n\t\t\t\t\t\tcolspan = 1,\n\t\t\t\t\t\trender,\n\t\t\t\t\t\tshouldUpdate,\n\t\t\t\t\t\tshouldRender,\n\t\t\t\t\t} = config;\n\t\t\t\t\tconst { className, style } = componentProps;\n\n\t\t\t\t\tif (shouldRender && !shouldRender(values, form)) {\n\t\t\t\t\t\treturn <Fragment key={name} />;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Field key={name} name={name} required={required}>\n\t\t\t\t\t\t\t{render?.(config, values) ?? (\n\t\t\t\t\t\t\t\t<El\n\t\t\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\t\t\trequired={required}\n\t\t\t\t\t\t\t\t\t{...componentProps}\n\t\t\t\t\t\t\t\t\tclassName={`${className ?? \"\"} ${\n\t\t\t\t\t\t\t\t\t\tcolspan !== 1\n\t\t\t\t\t\t\t\t\t\t\t? `colspan-${colspan}`\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Field>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Form>\n\t\t);\n\t}, [configs, values]);\n\n\treturn {\n\t\tform,\n\t\tnode,\n\t};\n}\n"],"mappings":";;;;;;;AAMA,SAAwB,UAAU,SAAsB,WAAmB;CAC1E,MAAM,OAAOA,gBAAAA,SAAS;CACtB,MAAM,EAAE,aAAa,aAAa,EAAE;CACpC,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,EAAE,CAAC;CAExC,MAAM,gBAAgB,MAAM,UAAU;AACrC,mBAAiB,EAAE,GAAG,KAAK,KAAK,EAAE,EAAE;AACpC,aAAW,MAAM,MAAM;;AA6CxB,QAAO;EACN;EACA,OAAA,GAAA,MAAA,eA5C0B;AAC1B,UACC,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;IAAM,GAAI;IAAW,UAAU;IAAoB;cACjD,QAAQ,KAAK,WAAW;KACxB,MAAM,EACL,MACA,OACA,UACA,WAAW,IACX,iBAAiB,EAAE,EACnB,UAAU,GACV,QACA,cACA,iBACG;KACJ,MAAM,EAAE,WAAW,UAAU;AAE7B,SAAI,gBAAgB,CAAC,aAAa,QAAQ,KAAK,CAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD,EAAuB,EAAR,KAAQ;AAG/B,YACC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;MAAwB;MAAgB;gBACtC,SAAS,QAAQ,OAAO,IACxB,iBAAA,GAAA,kBAAA,KAAC,IAAD;OACQ;OACG;OACV,GAAI;OACJ,WAAW,GAAG,aAAa,GAAG,GAC7B,YAAY,IACT,WAAW,YACX;OAEH,CAAA;MAEI,EAbI,KAaJ;MAER;IACI,CAAA;KAEN,CAAC,SAAS,OAAO,CAAC;EAKpB"}