@ioca/react 1.4.78 → 1.4.80

package/lib/cjs/components/collapse/collapse.js

@@ -0,0 +1,84 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../utils/helpericon/index.js");
+const require_item = require("./item.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/collapse/collapse.tsx
+const Collapse = (props) => {
+	const { active, items, multiple, border, headerClickable, className, children, renderToggle = (active) => active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.MinusRound, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.PlusRound, {}), onCollapse, ...restProps } = props;
+	const [activeKey, setActiveKey] = (0, react.useState)(active);
+	const collapses = (0, react.useMemo)(() => {
+		if (!items) {
+			if (!children) return [];
+			return react.Children.map(children, (node, i) => {
+				const { key, props: nodeProps } = node;
+				const { title, children, content, disabled, ...restProps } = nodeProps;
+				return {
+					...restProps,
+					key: key || i,
+					title,
+					content: children || content,
+					disabled
+				};
+			}) || [];
+		}
+		return items;
+	}, [children]);
+	const handleHeaderClick = (item) => {
+		if (!headerClickable) return;
+		handleToggle(item);
+	};
+	const handleToggle = (item, e) => {
+		const { key, disabled } = item;
+		e?.stopPropagation();
+		if (disabled) return;
+		if (!multiple) {
+			const nextActive = activeKey === key ? void 0 : key;
+			setActiveKey(nextActive);
+			onCollapse?.(key, nextActive !== void 0);
+			return;
+		}
+		const group = Array.isArray(activeKey) ? [...activeKey] : [];
+		const i = group.findIndex((k) => k === key);
+		if (i > -1) group.splice(i, 1);
+		else key !== void 0 && group.push(key);
+		setActiveKey(group);
+		onCollapse?.(key, i < 0);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("i-collapse", { "i-collapse-bordered": border }, className),
+		...restProps,
+		children: collapses.map((item) => {
+			const { key, title, content, disabled, className, ...restProps } = item;
+			const isActive = multiple ? (activeKey || []).includes(key) : activeKey === key;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, classnames.default)("i-collapse-item", className, {
+					"i-collapse-active": isActive,
+					"i-collapse-disabled": disabled
+				}),
+				...restProps,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "i-collapse-header",
+					onClick: () => handleHeaderClick(item),
+					children: [title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+						active: true,
+						className: "i-collapse-toggle",
+						icon: renderToggle(isActive),
+						onClick: (e) => handleToggle(item, e)
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "i-collapse-content",
+					children: content
+				})]
+			}, key);
+		})
+	});
+};
+Collapse.Item = require_item.default;
+//#endregion
+exports.default = Collapse;
+
+//# sourceMappingURL=collapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.js","names":[],"sources":["../../../../packages/components/collapse/collapse.tsx"],"sourcesContent":["import { MinusRound, PlusRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { Children, useMemo, useState } from \"react\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport Item from \"./item\";\nimport { ICollapse, ICollapseItem, TKey } from \"./type\";\n\nconst Collapse = (props: ICollapse) => {\n\tconst {\n\t\tactive,\n\t\titems,\n\t\tmultiple,\n\t\tborder,\n\t\theaderClickable,\n\t\tclassName,\n\t\tchildren,\n\t\trenderToggle = (active: boolean) =>\n\t\t\tactive ? <MinusRound /> : <PlusRound />,\n\t\tonCollapse,\n\t\t...restProps\n\t} = props;\n\n\tconst [activeKey, setActiveKey] = useState(active);\n\n\tconst collapses = useMemo(() => {\n\t\tif (!items) {\n\t\t\tif (!children) return [];\n\n\t\t\treturn (\n\t\t\t\tChildren.map(children, (node, i) => {\n\t\t\t\t\tconst { key, props: nodeProps } = node as {\n\t\t\t\t\t\tkey?: TKey;\n\t\t\t\t\t\tprops?: any;\n\t\t\t\t\t};\n\t\t\t\t\tconst { title, children, content, disabled, ...restProps } =\n\t\t\t\t\t\tnodeProps;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...restProps,\n\t\t\t\t\t\tkey: key || i,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tcontent: children || content,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t};\n\t\t\t\t}) || []\n\t\t\t);\n\t\t}\n\n\t\treturn items;\n\t}, [children]);\n\n\tconst handleHeaderClick = (item: ICollapseItem) => {\n\t\tif (!headerClickable) return;\n\n\t\thandleToggle(item);\n\t};\n\n\tconst handleToggle = (item: ICollapseItem, e?) => {\n\t\tconst { key, disabled } = item;\n\t\te?.stopPropagation();\n\t\tif (disabled) return;\n\n\t\tif (!multiple) {\n\t\t\tconst nextActive = activeKey === key ? undefined : key;\n\t\t\tsetActiveKey(nextActive);\n\t\t\tonCollapse?.(key as TKey, nextActive !== undefined);\n\t\t\treturn;\n\t\t}\n\n\t\tconst group = Array.isArray(activeKey) ? [...activeKey] : [];\n\n\t\tconst i = group.findIndex((k) => k === key);\n\n\t\tif (i > -1) {\n\t\t\tgroup.splice(i, 1);\n\t\t} else {\n\t\t\tkey !== undefined && group.push(key);\n\t\t}\n\t\tsetActiveKey(group as any);\n\t\tonCollapse?.(key as TKey, i < 0);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-collapse\",\n\t\t\t\t{\n\t\t\t\t\t\"i-collapse-bordered\": border,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{collapses.map((item) => {\n\t\t\t\tconst {\n\t\t\t\t\tkey,\n\t\t\t\t\ttitle,\n\t\t\t\t\tcontent,\n\t\t\t\t\tdisabled,\n\t\t\t\t\tclassName,\n\t\t\t\t\t...restProps\n\t\t\t\t} = item;\n\t\t\t\tconst isActive = multiple\n\t\t\t\t\t? ((activeKey as TKey[]) || []).includes(key)\n\t\t\t\t\t: activeKey === key;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\tclassName={classNames(\"i-collapse-item\", className, {\n\t\t\t\t\t\t\t\"i-collapse-active\": isActive,\n\t\t\t\t\t\t\t\"i-collapse-disabled\": disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName='i-collapse-header'\n\t\t\t\t\t\t\tonClick={() => handleHeaderClick(item)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\n\t\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\tclassName='i-collapse-toggle'\n\t\t\t\t\t\t\t\ticon={renderToggle(isActive)}\n\t\t\t\t\t\t\t\tonClick={(e) => handleToggle(item, e)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className='i-collapse-content'>{content}</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nCollapse.Item = Item;\n\nexport default Collapse;\n"],"mappings":""}

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

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

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

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

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

@@ -0,0 +1,10 @@
+require("../../_virtual/_rolldown/runtime.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/collapse/item.tsx
+function Item(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+}
+//#endregion
+exports.default = Item;
+
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":[],"sources":["../../../../packages/components/collapse/item.tsx"],"sourcesContent":["import { ICollapseItem } from \"./type\";\n\nexport default function Item(props: ICollapseItem) {\n\treturn <></>;\n}\n"],"mappings":";;;AAEA,SAAwB,KAAK,OAAsB;AAClD,QAAO,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAK,CAAA"}

package/lib/cjs/components/datagrid/cell.js

@@ -0,0 +1,39 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/datagrid/cell.tsx
+function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1 }) {
+	return {
+		"--datagrid-justify": justify,
+		gridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${col + 1 + colSpan}`,
+		insetInline: `var(--datagrid-cell-inset-${col})`
+	};
+}
+function Cell(props) {
+	const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick } = props;
+	const { id, fixed, justify, rowSpan, render } = column;
+	const style = getCellStyle({
+		justify,
+		fixed,
+		col,
+		row,
+		rowSpan
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("i-datagrid-cell", { [`i-datagrid-cell-fixed-${fixed}`]: fixed }),
+		"data-col": id,
+		style,
+		onClick: (e) => onCellClick?.(data, column, row, col, e),
+		onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e),
+		children: render?.(data[id], data, row, col) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, classnames.default)("i-datagrid-cell-content", { "i-datagrid-cell-content-ellipsis": cellEllipsis }),
+			children: data[id]
+		})
+	});
+}
+//#endregion
+exports.Cell = Cell;
+exports.getCellStyle = getCellStyle;
+
+//# sourceMappingURL=cell.js.map

package/lib/cjs/components/datagrid/cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","names":[],"sources":["../../../../packages/components/datagrid/cell.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ICell, IColumn } from \"./type\";\n\nexport function getCellStyle({\n\tjustify,\n\tcol,\n\trow,\n\tcolSpan = 1,\n\trowSpan = 1,\n}: Pick<IColumn, \"justify\" | \"fixed\"> & {\n\tcol: number;\n\trow: number;\n\tcolSpan?: number;\n\trowSpan?: number;\n\tisHeader?: boolean;\n}) {\n\tconst style = {\n\t\t\"--datagrid-justify\": justify,\n\t\tgridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${\n\t\t\tcol + 1 + colSpan\n\t\t}`,\n\t\tinsetInline: `var(--datagrid-cell-inset-${col})`,\n\t};\n\n\treturn style;\n}\n\nexport function Cell(props: ICell) {\n\tconst {\n\t\tcolumn,\n\t\trow,\n\t\tcol,\n\t\tdata,\n\t\tcellEllipsis,\n\t\tonCellClick,\n\t\tonCellDoubleClick,\n\t} = props;\n\tconst { id, fixed, justify, rowSpan, render } = column;\n\tconst style = getCellStyle({ justify, fixed, col, row, rowSpan });\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-datagrid-cell\", {\n\t\t\t\t[`i-datagrid-cell-fixed-${fixed}`]: fixed,\n\t\t\t})}\n\t\t\tdata-col={id}\n\t\t\tstyle={style}\n\t\t\tonClick={(e) => onCellClick?.(data, column, row, col, e)}\n\t\t\tonDoubleClick={(e) =>\n\t\t\t\tonCellDoubleClick?.(data, column, row, col, e)\n\t\t\t}\n\t\t>\n\t\t\t{render?.(data[id], data, row, col) ?? (\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-datagrid-cell-content\", {\n\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\": cellEllipsis,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{data[id]}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAGA,SAAgB,aAAa,EAC5B,SACA,KACA,KACA,UAAU,GACV,UAAU,KAOR;AASF,QARc;EACb,sBAAsB;EACtB,UAAU,GAAG,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,IAAI,QAAQ,KACxD,MAAM,IAAI;EAEX,aAAa,6BAA6B,IAAI;EAC9C;;AAKF,SAAgB,KAAK,OAAc;CAClC,MAAM,EACL,QACA,KACA,KACA,MACA,cACA,aACA,sBACG;CACJ,MAAM,EAAE,IAAI,OAAO,SAAS,SAAS,WAAW;CAChD,MAAM,QAAQ,aAAa;EAAE;EAAS;EAAO;EAAK;EAAK;EAAS,CAAC;AAEjE,QACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACC,YAAA,GAAA,WAAA,SAAsB,mBAAmB,GACvC,yBAAyB,UAAU,OACpC,CAAC;EACF,YAAU;EACH;EACP,UAAU,MAAM,cAAc,MAAM,QAAQ,KAAK,KAAK,EAAE;EACxD,gBAAgB,MACf,oBAAoB,MAAM,QAAQ,KAAK,KAAK,EAAE;YAG9C,SAAS,KAAK,KAAK,MAAM,KAAK,IAAI,IAClC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACC,YAAA,GAAA,WAAA,SAAsB,2BAA2B,EAChD,oCAAoC,cACpC,CAAC;aAED,KAAK;GACD,CAAA;EAEF,CAAA"}

package/lib/cjs/components/datagrid/datagrid.js

@@ -0,0 +1,140 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../loading/index.js");
+const require_hooks = require("../../js/hooks.js");
+const require_utils = require("../../js/utils.js");
+const require_index$1 = require("../utils/empty/index.js");
+const require_row = require("./row.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/datagrid/datagrid.tsx
+const Datagrid = (props) => {
+	const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {}), loading, height = "unset", style, className, renderLoading = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		size: "1.5em",
+		className: "color-3",
+		absolute: true
+	}), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize } = props;
+	const container = (0, react.useRef)(null);
+	const state = require_hooks.useReactive({
+		rows: data,
+		widths: columns.map((col) => col.width ?? "min-content"),
+		sortBy: "",
+		sortType: ""
+	});
+	const styles = (0, react.useMemo)(() => {
+		const { widths } = state;
+		const o = {
+			...style,
+			"--grid-template-columns": widths.map((w) => {
+				return typeof w === "number" ? `${w}px` : w;
+			}).join(" ")
+		};
+		if (!resizable) return o;
+		const fws = columns.map((col, i) => {
+			const { fixed } = col;
+			if (!fixed) return 0;
+			return widths[i];
+		});
+		columns.map((col, i) => {
+			const { fixed } = col;
+			if (!fixed) return;
+			if (i === 0) o[`--datagrid-cell-inset-0`] = 0;
+			else if (i === fws.length - 1) o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
+			else {
+				const isLeft = fixed === "left";
+				const sum = (isLeft ? fws.slice(0, i) : fws.slice(i + 1)).reduce((pre, cur) => pre + cur) + "px";
+				const result = isLeft ? `${sum} auto` : `auto ${sum}`;
+				o[`--datagrid-cell-inset-${i}`] = result;
+			}
+		});
+		return o;
+	}, [state.widths, resizable]);
+	const handleWidthChange = (i, w) => {
+		if (!resizable) return;
+		const [ ...ws] = state.widths;
+		ws[i] = w;
+		state.widths = ws;
+		onResize?.(columns[i], w);
+	};
+	const handleHeaderClick = (column, e) => {
+		if (column?.sorter) {
+			const [sortBy, sortType] = require_utils.getNextSorter(state.sortBy, state.sortType, column.id);
+			Object.assign(state, {
+				sortBy,
+				sortType
+			});
+			onSort?.(sortBy, sortType);
+		}
+		onHeaderClick?.(column, e);
+	};
+	const rows = (0, react.useMemo)(() => {
+		const { sortBy, sortType } = state;
+		if (sortBy && !onSort) {
+			const sorter = columns.find((col) => col.id === sortBy)?.sorter;
+			const sortFn = typeof sorter === "function" ? sorter : (a, b) => b[sortBy] - a[sortBy];
+			const sorted = [...data].sort(sortFn);
+			return sortType === "desc" ? sorted : sorted.reverse();
+		}
+		return data;
+	}, [
+		data,
+		columns,
+		state.sortBy,
+		state.sortType
+	]);
+	(0, react.useEffect)(() => {
+		if (!container.current) return;
+		const { current: div } = container;
+		const tds = div.querySelector(".i-datagrid-row")?.children;
+		if (!tds?.length) return;
+		state.widths = Array.from(tds).map((node) => node.offsetWidth);
+	}, [columns, resizable]);
+	(0, react.useEffect)(() => {
+		loading && container.current?.scrollTo({
+			top: 0,
+			left: 0
+		});
+	}, [loading]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			maxHeight: height,
+			"--cell-padding": cellPadding,
+			...styles
+		},
+		className: (0, classnames.default)("i-datagrid-container", className, {
+			"i-datagrid-bordered": border,
+			"i-datagrid-striped": striped
+		}),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: container,
+			className: (0, classnames.default)("i-datagrid", { "i-datagrid-loading": loading }),
+			onWheel: onScroll,
+			children: [
+				header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_row.Header, {
+					columns,
+					resizable,
+					sortType: state.sortType,
+					sortBy: state.sortBy,
+					cellEllipsis,
+					onWidthChange: handleWidthChange,
+					onHeaderClick: handleHeaderClick
+				}),
+				rows.map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_row.default, {
+					row: i + (header ? 1 : 0),
+					data: row,
+					cellEllipsis,
+					columns,
+					onCellClick,
+					onRowClick,
+					onCellDoubleClick
+				}, i)),
+				rows.length < 1 && empty
+			]
+		}), loading && renderLoading()]
+	});
+};
+//#endregion
+exports.default = Datagrid;
+
+//# sourceMappingURL=datagrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid.js","names":[],"sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import { useReactive } from \"../../js/hooks\";\nimport classNames from \"classnames\";\nimport { CSSProperties, MouseEvent, useEffect, useMemo, useRef } from \"react\";\nimport { getNextSorter } from \"../../js/utils\";\nimport Loading from \"../loading\";\nimport Empty from \"../utils/empty\";\nimport \"./index.css\";\nimport Row, { Header } from \"./row\";\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\n\nconst Datagrid = (props: IDatagrid) => {\n\tconst {\n\t\tdata = [],\n\t\tcolumns = [],\n\t\tborder,\n\t\tstriped,\n\t\theader = true,\n\t\tresizable,\n\t\tcellPadding = \".5em\",\n\t\tcellEllipsis,\n\t\tempty = <Empty />,\n\t\tloading,\n\t\theight = \"unset\",\n\t\tstyle,\n\t\tclassName,\n\t\trenderLoading = () => (\n\t\t\t<Loading size='1.5em' className='color-3' absolute />\n\t\t),\n\t\tonCellClick,\n\t\tonRowClick,\n\t\tonCellDoubleClick,\n\t\tonHeaderClick,\n\t\tonSort,\n\t\tonScroll,\n\t\tonResize,\n\t} = props;\n\n\tconst container = useRef<HTMLDivElement>(null);\n\tconst state = useReactive<TDatagridState>({\n\t\trows: data,\n\t\twidths: columns.map((col) => col.width ?? \"min-content\"),\n\t\tsortBy: \"\",\n\t\tsortType: \"\",\n\t});\n\n\tconst styles = useMemo(() => {\n\t\tconst { widths } = state;\n\n\t\tconst o = {\n\t\t\t...style,\n\t\t\t\"--grid-template-columns\": widths\n\t\t\t\t.map((w) => {\n\t\t\t\t\treturn typeof w === \"number\" ? `${w}px` : w;\n\t\t\t\t})\n\t\t\t\t.join(\" \"),\n\t\t};\n\n\t\tif (!resizable) return o;\n\n\t\tconst fws = columns.map((col, i) => {\n\t\t\tconst { fixed } = col;\n\t\t\tif (!fixed) return 0;\n\t\t\treturn widths[i] as number;\n\t\t});\n\n\t\tcolumns.map((col, i) => {\n\t\t\tconst { fixed } = col;\n\t\t\tif (!fixed) return;\n\t\t\tif (i === 0) {\n\t\t\t\to[`--datagrid-cell-inset-0`] = 0;\n\t\t\t} else if (i === fws.length - 1) {\n\t\t\t\to[`--datagrid-cell-inset-${fws.length - 1}`] = \"auto 0\";\n\t\t\t} else {\n\t\t\t\tconst isLeft = fixed === \"left\";\n\t\t\t\tconst before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);\n\t\t\t\tconst sum = before.reduce((pre, cur) => pre + cur) + \"px\";\n\t\t\t\tconst result = isLeft ? `${sum} auto` : `auto ${sum}`;\n\t\t\t\to[`--datagrid-cell-inset-${i}`] = result;\n\t\t\t}\n\t\t});\n\n\t\treturn o;\n\t}, [state.widths, resizable]);\n\n\tconst handleWidthChange = (i: number, w: number) => {\n\t\tif (!resizable) return;\n\n\t\tconst [...ws] = state.widths;\n\t\tws[i] = w;\n\t\tstate.widths = ws;\n\t\tonResize?.(columns[i], w);\n\t};\n\n\tconst handleHeaderClick = (column?: IColumn, e?: MouseEvent) => {\n\t\tif (column?.sorter) {\n\t\t\tconst [sortBy, sortType] = getNextSorter(\n\t\t\t\tstate.sortBy,\n\t\t\t\tstate.sortType,\n\t\t\t\tcolumn.id\n\t\t\t);\n\n\t\t\tObject.assign(state, {\n\t\t\t\tsortBy,\n\t\t\t\tsortType,\n\t\t\t});\n\n\t\t\tonSort?.(sortBy, sortType);\n\t\t}\n\n\t\tonHeaderClick?.(column, e);\n\t};\n\n\tconst rows = useMemo(() => {\n\t\tconst { sortBy, sortType } = state;\n\n\t\tif (sortBy && !onSort) {\n\t\t\tconst sorter = columns.find((col) => col.id === sortBy)?.sorter;\n\t\t\tconst sortFn =\n\t\t\t\ttypeof sorter === \"function\"\n\t\t\t\t\t? sorter\n\t\t\t\t\t: (a: IData, b: IData) => b[sortBy] - a[sortBy];\n\t\t\tconst sorted = [...data].sort(sortFn);\n\n\t\t\treturn sortType === \"desc\" ? sorted : sorted.reverse();\n\t\t}\n\n\t\treturn data;\n\t}, [data, columns, state.sortBy, state.sortType]);\n\n\tuseEffect(() => {\n\t\tif (!container.current) return;\n\t\tconst { current: div } = container;\n\t\tconst tds = div.querySelector(\".i-datagrid-row\")?.children;\n\t\tif (!tds?.length) return;\n\t\tstate.widths = Array.from(tds).map((node: any) => node.offsetWidth);\n\t}, [columns, resizable]);\n\n\tuseEffect(() => {\n\t\tloading && container.current?.scrollTo({ top: 0, left: 0 });\n\t}, [loading]);\n\n\tconst mergedStyle = {\n\t\t\"--cell-padding\": cellPadding,\n\t\t...styles,\n\t} as CSSProperties;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ maxHeight: height, ...mergedStyle }}\n\t\t\tclassName={classNames(\"i-datagrid-container\", className, {\n\t\t\t\t\"i-datagrid-bordered\": border,\n\t\t\t\t\"i-datagrid-striped\": striped,\n\t\t\t})}\n\t\t>\n\t\t\t<div\n\t\t\t\tref={container}\n\t\t\t\tclassName={classNames(\"i-datagrid\", {\n\t\t\t\t\t\"i-datagrid-loading\": loading,\n\t\t\t\t})}\n\t\t\t\tonWheel={onScroll}\n\t\t\t>\n\t\t\t\t{header && (\n\t\t\t\t\t<Header\n\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\tresizable={resizable}\n\t\t\t\t\t\tsortType={state.sortType}\n\t\t\t\t\t\tsortBy={state.sortBy}\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\tonWidthChange={handleWidthChange}\n\t\t\t\t\t\tonHeaderClick={handleHeaderClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{rows.map((row, i) => (\n\t\t\t\t\t<Row\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\trow={i + (header ? 1 : 0)}\n\t\t\t\t\t\tdata={row}\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t\t{rows.length < 1 && empty}\n\t\t\t</div>\n\n\t\t\t{loading && renderLoading()}\n\t\t</div>\n\t);\n};\n\nexport default Datagrid;\n"],"mappings":""}

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

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

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

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

package/lib/cjs/components/datagrid/resize.js

@@ -0,0 +1,42 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_hooks = require("../../js/hooks.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/datagrid/resize.tsx
+function Resize(props) {
+	const { index, onWidthChange } = props;
+	const state = require_hooks.useReactive({
+		resizing: false,
+		x: 0,
+		width: 0
+	});
+	const handleMouseDown = (e) => {
+		const width = e.target.offsetParent.offsetWidth;
+		Object.assign(state, {
+			x: e.pageX,
+			resizing: true,
+			width
+		});
+	};
+	const handleMouseMove = (e) => {
+		if (!state.resizing) return;
+		e.preventDefault();
+		const after = state.width + e.pageX - state.x;
+		if (after <= 24) return;
+		onWidthChange(index, after);
+	};
+	const handleMouseUp = () => {
+		if (!state.resizing) return;
+		state.resizing = false;
+	};
+	require_hooks.useMouseMove(handleMouseMove);
+	require_hooks.useMouseUp(handleMouseUp);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+		className: "i-datagrid-resizor",
+		onMouseDown: handleMouseDown,
+		onClick: (e) => e.stopPropagation()
+	});
+}
+//#endregion
+exports.default = Resize;
+
+//# sourceMappingURL=resize.js.map

package/lib/cjs/components/datagrid/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","names":["useReactive"],"sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\n\nexport default function Resize(props) {\n\tconst { index, onWidthChange } = props;\n\tconst state = useReactive({\n\t\tresizing: false,\n\t\tx: 0,\n\t\twidth: 0,\n\t});\n\n\tconst handleMouseDown = (e) => {\n\t\tconst tar = e.target as HTMLElement;\n\t\tconst width = (tar.offsetParent as HTMLElement).offsetWidth;\n\n\t\tObject.assign(state, {\n\t\t\tx: e.pageX,\n\t\t\tresizing: true,\n\t\t\twidth,\n\t\t});\n\t};\n\n\tconst handleMouseMove = (e) => {\n\t\tif (!state.resizing) return;\n\n\t\te.preventDefault();\n\n\t\tconst after = state.width + e.pageX - state.x;\n\t\tif (after <= 24) return;\n\n\t\tonWidthChange(index, after);\n\t};\n\n\tconst handleMouseUp = () => {\n\t\tif (!state.resizing) return;\n\n\t\tstate.resizing = false;\n\t};\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\treturn (\n\t\t<i\n\t\t\tclassName='i-datagrid-resizor'\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAEA,SAAwB,OAAO,OAAO;CACrC,MAAM,EAAE,OAAO,kBAAkB;CACjC,MAAM,QAAQA,cAAAA,YAAY;EACzB,UAAU;EACV,GAAG;EACH,OAAO;EACP,CAAC;CAEF,MAAM,mBAAmB,MAAM;EAE9B,MAAM,QADM,EAAE,OACK,aAA6B;AAEhD,SAAO,OAAO,OAAO;GACpB,GAAG,EAAE;GACL,UAAU;GACV;GACA,CAAC;;CAGH,MAAM,mBAAmB,MAAM;AAC9B,MAAI,CAAC,MAAM,SAAU;AAErB,IAAE,gBAAgB;EAElB,MAAM,QAAQ,MAAM,QAAQ,EAAE,QAAQ,MAAM;AAC5C,MAAI,SAAS,GAAI;AAEjB,gBAAc,OAAO,MAAM;;CAG5B,MAAM,sBAAsB;AAC3B,MAAI,CAAC,MAAM,SAAU;AAErB,QAAM,WAAW;;AAGlB,eAAA,aAAa,gBAAgB;AAC7B,eAAA,WAAW,cAAc;AAEzB,QACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACC,WAAU;EACV,aAAa;EACb,UAAU,MAAM,EAAE,iBAAiB;EAClC,CAAA"}

package/lib/cjs/components/datagrid/row.js

@@ -0,0 +1,68 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_cell = require("./cell.js");
+const require_resize = require("./resize.js");
+const require_sorter = require("./sorter.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/datagrid/row.tsx
+function Row(props) {
+	const { row, data, columns, cellEllipsis, onRowClick, onCellClick, onCellDoubleClick } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "i-datagrid-row",
+		onClick: () => onRowClick?.(data, row),
+		children: columns.map((col, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cell.Cell, {
+			column: col,
+			col: i,
+			row,
+			data,
+			cellEllipsis,
+			onCellClick,
+			onCellDoubleClick
+		}, i))
+	});
+}
+function Header(props) {
+	const { columns, resizable, cellEllipsis, sortBy, sortType, onWidthChange, onHeaderClick } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "i-datagrid-header i-datagrid-row",
+		children: columns.map((column, col) => {
+			const { id, title, fixed, colSpan, sorter, justify, renderHeader } = column;
+			const style = require_cell.getCellStyle({
+				justify,
+				row: 0,
+				col,
+				colSpan
+			});
+			const order = sortBy === id ? sortType : "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-col": id,
+				className: (0, classnames.default)("i-datagrid-cell", {
+					"i-datagrid-has-sorter": sorter,
+					"i-datagrid-cell-fixed": fixed
+				}),
+				style: {
+					...style,
+					insetBlockStart: 0
+				},
+				onClick: (e) => onHeaderClick?.(column, e),
+				children: [
+					renderHeader?.(column, col) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, classnames.default)("i-datagrid-cell-content", { "i-datagrid-cell-content-ellipsis": cellEllipsis }),
+						children: title || id
+					}),
+					sorter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_sorter.default, { type: order }),
+					resizable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_resize.default, {
+						index: col,
+						onWidthChange
+					})
+				]
+			}, col);
+		})
+	});
+}
+//#endregion
+exports.Header = Header;
+exports.default = Row;
+
+//# sourceMappingURL=row.js.map

package/lib/cjs/components/datagrid/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","names":["Cell","getCellStyle","Sorter","Resize"],"sources":["../../../../packages/components/datagrid/row.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { Cell, getCellStyle } from \"./cell\";\nimport Resize from \"./resize\";\nimport Sorter from \"./sorter\";\nimport { IHeader, IRow } from \"./type\";\n\nexport default function Row(props: IRow) {\n\tconst {\n\t\trow,\n\t\tdata,\n\t\tcolumns,\n\t\tcellEllipsis,\n\t\tonRowClick,\n\t\tonCellClick,\n\t\tonCellDoubleClick,\n\t} = props;\n\n\treturn (\n\t\t<div className='i-datagrid-row' onClick={() => onRowClick?.(data, row)}>\n\t\t\t{columns.map((col, i) => (\n\t\t\t\t<Cell\n\t\t\t\t\tkey={i}\n\t\t\t\t\tcolumn={col}\n\t\t\t\t\tcol={i}\n\t\t\t\t\trow={row}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function Header(props: IHeader) {\n\tconst {\n\t\tcolumns,\n\t\tresizable,\n\t\tcellEllipsis,\n\t\tsortBy,\n\t\tsortType,\n\t\tonWidthChange,\n\t\tonHeaderClick,\n\t} = props;\n\n\treturn (\n\t\t<div className='i-datagrid-header i-datagrid-row'>\n\t\t\t{columns.map((column, col) => {\n\t\t\t\tconst {\n\t\t\t\t\tid,\n\t\t\t\t\ttitle,\n\t\t\t\t\tfixed,\n\t\t\t\t\tcolSpan,\n\t\t\t\t\tsorter,\n\t\t\t\t\tjustify,\n\t\t\t\t\trenderHeader,\n\t\t\t\t} = column;\n\t\t\t\tconst style = getCellStyle({\n\t\t\t\t\tjustify,\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol,\n\t\t\t\t\tcolSpan,\n\t\t\t\t});\n\n\t\t\t\tconst order = sortBy === id ? sortType : \"\";\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={col}\n\t\t\t\t\t\tdata-col={id}\n\t\t\t\t\t\tclassName={classNames(\"i-datagrid-cell\", {\n\t\t\t\t\t\t\t\"i-datagrid-has-sorter\": sorter,\n\t\t\t\t\t\t\t\"i-datagrid-cell-fixed\": fixed,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{ ...style, insetBlockStart: 0 }}\n\t\t\t\t\t\tonClick={(e) => onHeaderClick?.(column, e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderHeader?.(column, col) ?? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\":\n\t\t\t\t\t\t\t\t\t\t\tcellEllipsis,\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\t\t{title || id}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{sorter && <Sorter type={order} />}\n\n\t\t\t\t\t\t{resizable && (\n\t\t\t\t\t\t\t<Resize index={col} onWidthChange={onWidthChange} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAwB,IAAI,OAAa;CACxC,MAAM,EACL,KACA,MACA,SACA,cACA,YACA,aACA,sBACG;AAEJ,QACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAiB,eAAe,aAAa,MAAM,IAAI;YACpE,QAAQ,KAAK,KAAK,MAClB,iBAAA,GAAA,kBAAA,KAACA,aAAAA,MAAD;GAEC,QAAQ;GACR,KAAK;GACA;GACC;GACQ;GACD;GACM;GAClB,EARI,EAQJ,CACD;EACG,CAAA;;AAIR,SAAgB,OAAO,OAAgB;CACtC,MAAM,EACL,SACA,WACA,cACA,QACA,UACA,eACA,kBACG;AAEJ,QACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,QAAQ,KAAK,QAAQ,QAAQ;GAC7B,MAAM,EACL,IACA,OACA,OACA,SACA,QACA,SACA,iBACG;GACJ,MAAM,QAAQC,aAAAA,aAAa;IAC1B;IACA,KAAK;IACL;IACA;IACA,CAAC;GAEF,MAAM,QAAQ,WAAW,KAAK,WAAW;AAEzC,UACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAEC,YAAU;IACV,YAAA,GAAA,WAAA,SAAsB,mBAAmB;KACxC,yBAAyB;KACzB,yBAAyB;KACzB,CAAC;IACF,OAAO;KAAE,GAAG;KAAO,iBAAiB;KAAG;IACvC,UAAU,MAAM,gBAAgB,QAAQ,EAAE;cAR3C;KAUE,eAAe,QAAQ,IAAI,IAC3B,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACC,YAAA,GAAA,WAAA,SACC,2BACA,EACC,oCACC,cACD,CACD;gBAEA,SAAS;MACL,CAAA;KAGN,UAAU,iBAAA,GAAA,kBAAA,KAACC,eAAAA,SAAD,EAAQ,MAAM,OAAS,CAAA;KAEjC,aACA,iBAAA,GAAA,kBAAA,KAACC,eAAAA,SAAD;MAAQ,OAAO;MAAoB;MAAiB,CAAA;KAEhD;MA5BA,IA4BA;IAEN;EACG,CAAA"}

package/lib/cjs/components/datagrid/sorter.js

@@ -0,0 +1,28 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/datagrid/sorter.tsx
+const Arrow = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+		fill: "none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z",
+			fill: "currentColor"
+		})
+	})
+});
+function Sorter(props) {
+	const { type } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		className: (0, classnames.default)("i-datagrid-sorter", { [`i-datagrid-sorter-${type}`]: type }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, { className: "i-datagrid-sorter-caret" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, { className: "i-datagrid-sorter-caret" })]
+	});
+}
+//#endregion
+exports.default = Sorter;
+
+//# sourceMappingURL=sorter.js.map

package/lib/cjs/components/datagrid/sorter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sorter.js","names":[],"sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Arrow = (props) => (\n\t<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>\n\t\t<g fill='none'>\n\t\t\t<path\n\t\t\t\td='M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z'\n\t\t\t\tfill='currentColor'\n\t\t\t></path>\n\t\t</g>\n\t</svg>\n);\n\nexport default function Sorter(props) {\n\tconst { type } = props;\n\n\treturn (\n\t\t<a\n\t\t\tclassName={classNames(\"i-datagrid-sorter\", {\n\t\t\t\t[`i-datagrid-sorter-${type}`]: type,\n\t\t\t})}\n\t\t>\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t</a>\n\t);\n}\n"],"mappings":";;;;;AAEA,MAAM,SAAS,UACd,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAK,OAAM;CAA6B,SAAQ;CAAY,GAAI;WAC/D,iBAAA,GAAA,kBAAA,KAAC,KAAD;EAAG,MAAK;YACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACC,GAAE;GACF,MAAK;GACE,CAAA;EACL,CAAA;CACC,CAAA;AAGP,SAAwB,OAAO,OAAO;CACrC,MAAM,EAAE,SAAS;AAEjB,QACC,iBAAA,GAAA,kBAAA,MAAC,KAAD;EACC,YAAA,GAAA,WAAA,SAAsB,qBAAqB,GACzC,qBAAqB,SAAS,MAC/B,CAAC;YAHH,CAKC,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA,EAC7C,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA,CAC1C"}

package/lib/cjs/components/description/description.js

@@ -0,0 +1,43 @@
+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/description/description.tsx
+const Description = (props) => {
+	const { data, colon, columns = 1, gap = ".5em", align, labelWidth, labelAlign, vertical, equally, style, className } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("i-description", className),
+		style: {
+			["--description-label-width"]: labelWidth,
+			gridTemplateColumns: `repeat(${columns}, ${equally ? "1fr" : "auto"})`,
+			gap,
+			textAlign: align,
+			...style
+		},
+		children: data.map((item, i) => {
+			const { label, value, style, hidden, rowSpan = 1, colSpan = 1 } = item;
+			if (hidden) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, {}, i);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, classnames.default)("i-description-item", { "i-description-item-vertical": vertical }),
+				style: {
+					gridColumn: `span ${colSpan}`,
+					gridRow: `span ${rowSpan}`,
+					...style
+				},
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "i-description-label",
+					style: { textAlign: labelAlign },
+					children: [label, colon]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "i-description-value",
+					children: value
+				})]
+			}, i);
+		})
+	});
+};
+//#endregion
+exports.default = Description;
+
+//# sourceMappingURL=description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","names":[],"sources":["../../../../packages/components/description/description.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CSSProperties, Fragment } from \"react\";\nimport \"./index.css\";\nimport { IDescription } from \"./type\";\n\nconst Description = (props: IDescription) => {\n\tconst {\n\t\tdata,\n\t\tcolon,\n\t\tcolumns = 1,\n\t\tgap = \".5em\",\n\t\talign,\n\t\tlabelWidth,\n\t\tlabelAlign,\n\t\tvertical,\n\t\tequally,\n\t\tstyle,\n\t\tclassName,\n\t} = props;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-description\", className)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t[\"--description-label-width\"]: labelWidth,\n\t\t\t\t\tgridTemplateColumns: `repeat(${columns}, ${\n\t\t\t\t\t\tequally ? \"1fr\" : \"auto\"\n\t\t\t\t\t})`,\n\t\t\t\t\tgap,\n\t\t\t\t\ttextAlign: align,\n\t\t\t\t\t...style,\n\t\t\t\t} as CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t{data.map((item, i) => {\n\t\t\t\tconst {\n\t\t\t\t\tlabel,\n\t\t\t\t\tvalue,\n\t\t\t\t\tstyle,\n\t\t\t\t\thidden,\n\t\t\t\t\trowSpan = 1,\n\t\t\t\t\tcolSpan = 1,\n\t\t\t\t} = item;\n\n\t\t\t\tif (hidden) return <Fragment key={i} />;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tclassName={classNames(\"i-description-item\", {\n\t\t\t\t\t\t\t\"i-description-item-vertical\": vertical,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tgridColumn: `span ${colSpan}`,\n\t\t\t\t\t\t\tgridRow: `span ${rowSpan}`,\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName='i-description-label'\n\t\t\t\t\t\t\t\tstyle={{ textAlign: labelAlign }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{colon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className='i-description-value'>{value}</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport default Description;\n"],"mappings":""}

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

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

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

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

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

@@ -0,0 +1,84 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_hooks = require("../../js/hooks.js");
+const require_index = require("../utils/helpericon/index.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region packages/components/drawer/drawer.tsx
+function Drawer(props) {
+	const { visible, position = "left", header, footer, backdropClosable = true, hideCloseButton, keepDOM, className, disabledEsc, children, onVisibleChange, onClose, ...restProps } = props;
+	const toggable = (0, react.useRef)(true);
+	const state = require_hooks.useReactive({
+		show: visible,
+		active: visible
+	});
+	const [isPending, startTransition] = (0, react.useTransition)();
+	const handleHide = () => {
+		if (!toggable.current || isPending) return;
+		toggable.current = false;
+		startTransition(() => {
+			state.active = false;
+			setTimeout(() => {
+				if (!keepDOM) state.show = false;
+				onVisibleChange?.(false);
+				toggable.current = true;
+				onClose?.();
+			}, 240);
+		});
+	};
+	const handleShow = () => {
+		if (!toggable.current || isPending) return;
+		state.show = true;
+		onVisibleChange?.(true);
+		toggable.current = false;
+		startTransition(() => {
+			requestAnimationFrame(() => {
+				state.active = true;
+				toggable.current = true;
+			});
+		});
+	};
+	(0, react.useEffect)(() => {
+		visible ? handleShow() : handleHide();
+	}, [visible]);
+	const handleBackdropClick = () => {
+		backdropClosable && handleHide();
+	};
+	require_hooks.useKeydown((e) => {
+		if (e.code !== "Escape" || !visible) return;
+		handleHide();
+	}, { disabled: disabledEsc });
+	if (!state.show) return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("i-backdrop-drawer", className, { "i-active": state.active }),
+		onClick: handleBackdropClick,
+		...restProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)("i-drawer", `i-drawer-${position}`),
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				header && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+					className: "i-drawer-header",
+					children: [header, !hideCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+						className: "i-drawer-close",
+						onClick: handleHide
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "i-drawer-content",
+					children
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "i-drawer-footer",
+					children: footer
+				})
+			]
+		})
+	}), document.body);
+}
+//#endregion
+exports.default = Drawer;
+
+//# sourceMappingURL=drawer.js.map