@ioca/react 1.4.78 → 1.4.80

package/lib/cjs/components/picker/dates/dates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dates.js","names":[],"sources":["../../../../../packages/components/picker/dates/dates.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { ReactNode, useMemo } from \"react\";\nimport { IBaseDates } from \"../type\";\n\nconst Dates = (\n\tprops: IBaseDates & {\n\t\tmonth: any;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tmonth,\n\t\tweeks = [\"一\", \"二\", \"三\", \"四\", \"五\", \"六\", \"日\"],\n\t\trenderDate = (date: Dayjs) => date.date(),\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\tconst today = dayjs();\n\n\tconst dates = useMemo(() => {\n\t\tconst dates: Dayjs[] = [];\n\n\t\tconst lastDateOfLastMonth = month.add(-1, \"month\").endOf(\"month\");\n\t\tlet { $W, $D } = lastDateOfLastMonth;\n\n\t\tif ($W !== 0) {\n\t\t\tconst lastMonthDates = Array.from({ length: $W }).map(\n\t\t\t\t(whatever, i) => lastDateOfLastMonth.add(i + 1 - $W, \"day\")\n\t\t\t);\n\t\t\tdates.push(...lastMonthDates);\n\t\t}\n\n\t\tconst lastDate = month.endOf(\"month\");\n\t\t$D = lastDate.$D;\n\t\t$W = lastDate.$W;\n\t\tdates.push(\n\t\t\t...Array.from({ length: $D }).map((whatever, i) =>\n\t\t\t\tlastDate.add(i + 1 - $D, \"day\")\n\t\t\t)\n\t\t);\n\n\t\tif ($W !== 0) {\n\t\t\tdates.push(\n\t\t\t\t...Array.from({ length: 7 - $W }).map((whatever, i) =>\n\t\t\t\t\tlastDate.add(i + 1, \"day\")\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn dates;\n\t}, [month]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\tif (disabledDate?.(date)) return;\n\n\t\tonDateClick?.(date);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className='i-datepicker-weeks'>\n\t\t\t\t{weeks.map((week: ReactNode, i: number) => (\n\t\t\t\t\t<span key={i} className='i-datepicker-week'>\n\t\t\t\t\t\t{week}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className='i-datepicker-dates'>\n\t\t\t\t{dates.map((date, i: number) => {\n\t\t\t\t\tconst active = date.isSame(value, \"day\");\n\t\t\t\t\tconst isSameMonth = date.isSame(month, \"month\");\n\t\t\t\t\tconst isToday = date.isSame(today, \"day\");\n\t\t\t\t\tconst disabled = disabledDate?.(date);\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-item\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\": active,\n\t\t\t\t\t\t\t\t\"i-datepicker-same-month\": isSameMonth,\n\t\t\t\t\t\t\t\t\"i-datepicker-today\": isToday,\n\t\t\t\t\t\t\t\t\"i-datepicker-disabled\": disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonClick={() => handleDateClick(date)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderDate(date)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default Dates;\n"],"mappings":";;;;;;;;AAKA,MAAM,SACL,UAGI;CACJ,MAAM,EACL,OACA,OACA,QAAQ;EAAC;EAAK;EAAK;EAAK;EAAK;EAAK;EAAK;EAAI,EAC3C,cAAc,SAAgB,KAAK,MAAM,EACzC,cACA,gBACG;CACJ,MAAM,SAAA,GAAA,MAAA,UAAe;CAErB,MAAM,SAAA,GAAA,MAAA,eAAsB;EAC3B,MAAM,QAAiB,EAAE;EAEzB,MAAM,sBAAsB,MAAM,IAAI,IAAI,QAAQ,CAAC,MAAM,QAAQ;EACjE,IAAI,EAAE,IAAI,OAAO;AAEjB,MAAI,OAAO,GAAG;GACb,MAAM,iBAAiB,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAChD,UAAU,MAAM,oBAAoB,IAAI,IAAI,IAAI,IAAI,MAAM,CAC3D;AACD,SAAM,KAAK,GAAG,eAAe;;EAG9B,MAAM,WAAW,MAAM,MAAM,QAAQ;AACrC,OAAK,SAAS;AACd,OAAK,SAAS;AACd,QAAM,KACL,GAAG,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,UAAU,MAC5C,SAAS,IAAI,IAAI,IAAI,IAAI,MAAM,CAC/B,CACD;AAED,MAAI,OAAO,EACV,OAAM,KACL,GAAG,MAAM,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC,KAAK,UAAU,MAChD,SAAS,IAAI,IAAI,GAAG,MAAM,CAC1B,CACD;AAGF,SAAO;IACL,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,SAAgB;AACxC,MAAI,eAAe,KAAK,CAAE;AAE1B,gBAAc,KAAK;;AAGpB,QACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,MAAM,KAAK,MAAiB,MAC5B,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAc,WAAU;aACtB;GACK,EAFI,EAEJ,CACN;EACG,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,MAAM,KAAK,MAAM,MAAc;GAC/B,MAAM,SAAS,KAAK,OAAO,OAAO,MAAM;GACxC,MAAM,cAAc,KAAK,OAAO,OAAO,QAAQ;GAC/C,MAAM,UAAU,KAAK,OAAO,OAAO,MAAM;GACzC,MAAM,WAAW,eAAe,KAAK;AAErC,UACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAEC,YAAA,GAAA,WAAA,SAAsB,qBAAqB;KAC1C,uBAAuB;KACvB,2BAA2B;KAC3B,sBAAsB;KACtB,yBAAyB;KACzB,CAAC;IACF,eAAe,gBAAgB,KAAK;cAEnC,WAAW,KAAK;IACZ,EAVA,EAUA;IAEN;EACG,CAAA,CACJ,EAAA,CAAA"}

package/lib/cjs/components/picker/dates/index.js

@@ -0,0 +1,97 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../icon/index.js");
+const require_index$1 = require("../../popup/index.js");
+const require_index$2 = require("../../input/index.js");
+const require_panel = require("./panel.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");
+let dayjs = require("dayjs");
+dayjs = require_runtime.__toESM(dayjs);
+let _Users_iann_codes_ioca_react_node_modules__pnpm_dayjs_1_11_20_node_modules_dayjs_plugin_customParseFormat_js = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/dayjs@1.11.20/node_modules/dayjs/plugin/customParseFormat.js");
+_Users_iann_codes_ioca_react_node_modules__pnpm_dayjs_1_11_20_node_modules_dayjs_plugin_customParseFormat_js = require_runtime.__toESM(_Users_iann_codes_ioca_react_node_modules__pnpm_dayjs_1_11_20_node_modules_dayjs_plugin_customParseFormat_js);
+//#region packages/components/picker/dates/index.tsx
+dayjs.default.extend(_Users_iann_codes_ioca_react_node_modules__pnpm_dayjs_1_11_20_node_modules_dayjs_plugin_customParseFormat_js.default);
+const FORMATTYPES = [
+	"YYYY-MM-DD",
+	"YYYY-M-D",
+	"YYYY/MM/DD",
+	"YYYY/M/D"
+];
+const FORMAT = "YYYY-MM-DD";
+const Datepicker = (props) => {
+	const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
+	const [inputValue, setInputValue] = (0, react.useState)(value);
+	const [active, setActive] = (0, react.useState)(false);
+	const dayJsValue = (0, react.useMemo)(() => {
+		if (!inputValue) return null;
+		const date = (0, dayjs.default)(inputValue, format, true);
+		if (date.isValid()) return date;
+		return null;
+	}, [inputValue, format]);
+	const handleDateClick = (date) => {
+		handleChange(date.format(format));
+	};
+	const handleChange = (v) => {
+		setInputValue(v);
+		onChange?.(v);
+	};
+	const handleSetDate = () => {
+		if (!inputValue) return;
+		const date = (0, dayjs.default)(inputValue, FORMATTYPES, true);
+		if (date.isValid()) {
+			handleChange(date.format(format));
+			return;
+		}
+		handleChange("");
+	};
+	const handleBlur = (e) => {
+		onBlur?.(e);
+		handleSetDate();
+	};
+	const handleVisibleChange = (v) => {
+		popupProps?.onVisibleChange?.(v);
+		setActive(v);
+	};
+	(0, react.useEffect)(() => {
+		setInputValue(value);
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		visible: active,
+		trigger: "click",
+		position: "bottom",
+		arrow: false,
+		align: "start",
+		onVisibleChange: handleVisibleChange,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_panel.default, {
+			value: dayJsValue,
+			weeks,
+			renderDate,
+			renderMonth,
+			renderYear,
+			disabledDate,
+			onDateClick: handleDateClick
+		}),
+		...popupProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+			value: inputValue,
+			append: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.CalendarMonthTwotone, {}),
+				className: "i-datepicker-icon",
+				size: "1em"
+			}),
+			placeholder,
+			onChange: handleChange,
+			onBlur: handleBlur,
+			onEnter: handleSetDate,
+			className: (0, classnames.default)("i-datepicker-label", className),
+			...restProps
+		})
+	});
+};
+//#endregion
+exports.default = Datepicker;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/picker/dates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat.js\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { IDatePicker } from \"../type\";\nimport \"./index.css\";\nimport Panel from \"./panel\";\n\ndayjs.extend(customParseFormat);\n\nconst FORMATTYPES = [\"YYYY-MM-DD\", \"YYYY-M-D\", \"YYYY/MM/DD\", \"YYYY/M/D\"];\nconst FORMAT = \"YYYY-MM-DD\";\n\nconst Datepicker = (props: IDatePicker) => {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tweeks,\n\t\tformat = FORMAT,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\tpopupProps,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t\tonChange,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst dayJsValue = useMemo(() => {\n\t\tif (!inputValue) return null;\n\n\t\tconst date = dayjs(inputValue as string, format, true);\n\n\t\tif (date.isValid()) return date;\n\n\t\treturn null;\n\t}, [inputValue, format]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\thandleChange(date.format(format));\n\t};\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSetDate = () => {\n\t\tif (!inputValue) return;\n\n\t\tconst date = dayjs(inputValue as string, FORMATTYPES, true);\n\n\t\tif (date.isValid()) {\n\t\t\thandleChange(date.format(format));\n\t\t\treturn;\n\t\t}\n\n\t\thandleChange(\"\");\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleSetDate();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={dayJsValue}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...popupProps}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<CalendarMonthTwotone />}\n\t\t\t\t\t\tclassName='i-datepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonEnter={handleSetDate}\n\t\t\t\tclassName={classNames(\"i-datepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default Datepicker;\n"],"mappings":""}

package/lib/cjs/components/picker/dates/panel.js

@@ -0,0 +1,151 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../icon/index.js");
+const require_index$1 = require("../../utils/helpericon/index.js");
+const require_dates = require("./dates.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs");
+let react = require("react");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+let dayjs = require("dayjs");
+dayjs = require_runtime.__toESM(dayjs);
+//#region packages/components/picker/dates/panel.tsx
+const MONTHS = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	11,
+	12
+];
+const YearMonth = (props) => {
+	const { value, unitMonth = "月", unitYear = "年", renderYear, renderMonth, onClick } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		className: "i-datepicker-action",
+		"data-ripple": true,
+		onClick,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: renderYear?.(value.year()) }),
+			unitYear,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: renderMonth?.(value.month() + 1) }),
+			unitMonth
+		]
+	});
+};
+const Panel = (props) => {
+	const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick } = props;
+	const [today, setToday] = (0, react.useState)(value);
+	const [month, setMonth] = (0, react.useState)(value || (0, dayjs.default)());
+	const [selectedYear, setSelectedYear] = (0, react.useState)((0, dayjs.default)());
+	const [years, setYears] = (0, react.useState)([]);
+	const [selectable, setSelectable] = (0, react.useState)(false);
+	const $years = (0, react.useRef)(null);
+	const handleOperateMonth = (next) => {
+		setMonth((m) => m[next ? "add" : "subtract"](1, "month"));
+	};
+	const handleChangeDate = (date) => {
+		if (date.isSame(today, "day")) return;
+		if (!date.isSame(month, "month")) setMonth(date);
+		setToday(date);
+		onDateClick?.(date);
+	};
+	const handleChangeMonth = (month) => {
+		setMonth((m) => m.year(selectedYear.year()).month(month - 1));
+		setSelectable(false);
+	};
+	const getMoreYears = (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.throttle)({ interval: 100 }, (e) => {
+		const isUp = e.deltaY < 0;
+		setYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));
+	});
+	(0, react.useEffect)(() => {
+		if (!selectable) return;
+		setSelectedYear(month);
+		const y = month.year();
+		setYears([...Array.from({ length: 7 }).map((_, i) => y - 3 + i)]);
+	}, [selectable, month]);
+	(0, react.useEffect)(() => {
+		setToday(value);
+		setMonth(value || (0, dayjs.default)());
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "i-datepicker",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "i-datepicker-units",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearMonth, {
+						value: month,
+						unitYear,
+						unitMonth,
+						renderMonth,
+						renderYear,
+						onClick: () => setSelectable(true)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "ml-auto i-datepicker-action",
+						"data-ripple": true,
+						onClick: () => handleOperateMonth(false),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowLeftRound, {}) })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "i-datepicker-action",
+						"data-ripple": true,
+						onClick: () => handleOperateMonth(true),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowRightRound, {}) })
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, classnames.default)("i-datepicker-ym", { "i-datepicker-active": selectable }),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+						active: true,
+						className: "i-datepicker-close",
+						onClick: (e) => {
+							e.stopPropagation();
+							setSelectable(false);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: $years,
+						className: "i-datepicker-years",
+						onWheel: getMoreYears,
+						children: years.map((y) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: (0, classnames.default)("i-datepicker-year", { "i-datepicker-active": y === selectedYear.year() }),
+							onClick: () => setSelectedYear((sy) => sy.year(y)),
+							children: renderYear(y)
+						}, y))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "i-datepicker-months",
+						children: MONTHS.map((m) => {
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+								className: (0, classnames.default)("i-datepicker-month", { "i-datepicker-active": m === month.month() + 1 }),
+								onClick: () => handleChangeMonth(m),
+								children: renderMonth(m)
+							}, m);
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dates.default, {
+				value: today,
+				month,
+				disabledDate,
+				onDateClick: handleChangeDate,
+				renderDate
+			})
+		]
+	});
+};
+//#endregion
+exports.default = Panel;
+
+//# sourceMappingURL=panel.js.map

package/lib/cjs/components/picker/dates/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":["Icon","KeyboardArrowLeftRound","KeyboardArrowRightRound","Helpericon","Dates"],"sources":["../../../../../packages/components/picker/dates/panel.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { throttle } from \"radash\";\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Helpericon from \"../../utils/helpericon\";\nimport { IBaseDates } from \"../type\";\nimport Dates from \"./dates\";\n\nconst MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nconst YearMonth = (\n\tprops: IBaseDates & {\n\t\tonClick?: () => void;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tunitMonth = \"月\",\n\t\tunitYear = \"年\",\n\t\trenderYear,\n\t\trenderMonth,\n\t\tonClick,\n\t} = props;\n\n\treturn (\n\t\t<a className='i-datepicker-action' data-ripple onClick={onClick}>\n\t\t\t<span>{renderYear?.(value.year())}</span>\n\t\t\t{unitYear}\n\t\t\t<span>{renderMonth?.(value.month() + 1)}</span>\n\t\t\t{unitMonth}\n\t\t</a>\n\t);\n};\n\nconst Panel = (props: IBaseDates) => {\n\tconst {\n\t\tvalue,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth = (m: ReactNode) => m,\n\t\trenderYear = (y: ReactNode) => y,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\n\tconst [today, setToday] = useState(value);\n\tconst [month, setMonth] = useState(value || dayjs());\n\tconst [selectedYear, setSelectedYear] = useState(dayjs());\n\tconst [years, setYears] = useState<number[]>([]);\n\tconst [selectable, setSelectable] = useState(false);\n\n\tconst $years = useRef<HTMLDivElement>(null);\n\n\tconst handleOperateMonth = (next: boolean) => {\n\t\tsetMonth((m) => m[next ? \"add\" : \"subtract\"](1, \"month\"));\n\t};\n\n\tconst handleChangeDate = (date: Dayjs) => {\n\t\tif (date.isSame(today, \"day\")) return;\n\n\t\tif (!date.isSame(month, \"month\")) {\n\t\t\tsetMonth(date);\n\t\t}\n\n\t\tsetToday(date);\n\t\tonDateClick?.(date);\n\t};\n\n\tconst handleChangeMonth = (month: number) => {\n\t\tsetMonth((m) => m.year(selectedYear.year()).month(month - 1));\n\t\tsetSelectable(false);\n\t};\n\n\tconst getMoreYears = throttle({ interval: 100 }, (e) => {\n\t\tconst isUp = e.deltaY < 0;\n\n\t\tsetYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));\n\t});\n\n\tuseEffect(() => {\n\t\tif (!selectable) return;\n\n\t\tsetSelectedYear(month);\n\t\tconst y = month.year();\n\t\tconst nextYears = Array.from({ length: 7 }).map((_, i) => y - 3 + i);\n\n\t\tsetYears([...nextYears]);\n\t}, [selectable, month]);\n\n\tuseEffect(() => {\n\t\tsetToday(value);\n\t\tsetMonth(value || dayjs());\n\t}, [value]);\n\n\treturn (\n\t\t<div className='i-datepicker'>\n\t\t\t<div className='i-datepicker-units'>\n\t\t\t\t<YearMonth\n\t\t\t\t\tvalue={month}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tonClick={() => setSelectable(true)}\n\t\t\t\t/>\n\t\t\t\t<a\n\t\t\t\t\tclassName='ml-auto i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(false)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowLeftRound />} />\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\tclassName='i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(true)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowRightRound />} />\n\t\t\t\t</a>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-datepicker-ym\", {\n\t\t\t\t\t\"i-datepicker-active\": selectable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive\n\t\t\t\t\tclassName='i-datepicker-close'\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetSelectable(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={$years}\n\t\t\t\t\tclassName='i-datepicker-years'\n\t\t\t\t\tonWheel={getMoreYears}\n\t\t\t\t>\n\t\t\t\t\t{years.map((y) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tkey={y}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-year\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\ty === selectedYear.year(),\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonClick={() => setSelectedYear((sy) => sy.year(y))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderYear(y)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t<div className='i-datepicker-months'>\n\t\t\t\t\t{MONTHS.map((m) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-month\", {\n\t\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\t\tm === month.month() + 1,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeMonth(m)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderMonth(m)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Dates\n\t\t\t\tvalue={today}\n\t\t\t\tmonth={month}\n\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\tonDateClick={handleChangeDate}\n\t\t\t\trenderDate={renderDate}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Panel;\n"],"mappings":"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"}

package/lib/cjs/components/picker/time/index.js

@@ -0,0 +1,73 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../icon/index.js");
+const require_index$1 = require("../../popup/index.js");
+const require_index$2 = require("../../input/index.js");
+const require_panel = require("./panel.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/picker/time/index.tsx
+const FORMAT = "hh:mm:ss";
+function TimePicker(props) {
+	const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
+	const [timeValue, setTimeValue] = (0, react.useState)(value);
+	const [safeValue, setSafeValue] = (0, react.useState)(void 0);
+	const [active, setActive] = (0, react.useState)(false);
+	const handleChange = (v) => {
+		setTimeValue(v);
+	};
+	const handleFallback = (v) => {
+		setSafeValue(v);
+	};
+	const handleValidTime = () => {
+		if (!timeValue) return;
+		setTimeValue(safeValue);
+	};
+	const handleBlur = (e) => {
+		onBlur?.(e);
+		handleValidTime();
+	};
+	const handleVisibleChange = (v) => {
+		popupProps?.onVisibleChange?.(v);
+		setActive(v);
+	};
+	(0, react.useEffect)(() => {
+		setTimeValue(value);
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		visible: active,
+		trigger: "click",
+		position: "bottom",
+		arrow: false,
+		align: "start",
+		...popupProps,
+		onVisibleChange: handleVisibleChange,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_panel.default, {
+			value: timeValue,
+			format,
+			periods,
+			renderItem,
+			onChange: handleChange,
+			onFallback: handleFallback
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+			value: timeValue,
+			placeholder,
+			append: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.AccessTimeRound, {}),
+				className: "i-timepicker-icon",
+				size: "1em"
+			}),
+			onChange: handleChange,
+			onBlur: handleBlur,
+			className: (0, classnames.default)("i-timepicker-label", className),
+			...restProps
+		})
+	});
+}
+//#endregion
+exports.default = TimePicker;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/picker/time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Popup","Panel","Input","Icon","AccessTimeRound"],"sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { ITimePicker } from \"../type\";\nimport Panel from \"./panel\";\n\nconst FORMAT = \"hh:mm:ss\";\n\nexport default function TimePicker(props: ITimePicker) {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tformat = FORMAT,\n\t\tperiods,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderItem,\n\t\tonChange,\n\t\tonBlur,\n\t\tpopupProps,\n\t\t...restProps\n\t} = props;\n\tconst [timeValue, setTimeValue] = useState(value);\n\tconst [safeValue, setSafeValue] = useState(undefined);\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst handleChange = (v) => {\n\t\tsetTimeValue(v);\n\t};\n\n\tconst handleFallback = (v) => {\n\t\tsetSafeValue(v);\n\t};\n\n\tconst handleValidTime = () => {\n\t\tif (!timeValue) return;\n\n\t\tsetTimeValue(safeValue);\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleValidTime();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tsetTimeValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\t{...popupProps}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={timeValue}\n\t\t\t\t\tformat={format}\n\t\t\t\t\tperiods={periods}\n\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFallback={handleFallback}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={timeValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<AccessTimeRound />}\n\t\t\t\t\t\tclassName='i-timepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tclassName={classNames(\"i-timepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AASA,MAAM,SAAS;AAEf,SAAwB,WAAW,OAAoB;CACtD,MAAM,EACL,MACA,OACA,SAAS,QACT,SACA,cAAc,MAAM,UAAU,QAC9B,WACA,YACA,UACA,QACA,YACA,GAAG,cACA;CACJ,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CACjD,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,KAAA,EAAU;CACrD,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAA+B,MAAM;CAEpD,MAAM,gBAAgB,MAAM;AAC3B,eAAa,EAAE;;CAGhB,MAAM,kBAAkB,MAAM;AAC7B,eAAa,EAAE;;CAGhB,MAAM,wBAAwB;AAC7B,MAAI,CAAC,UAAW;AAEhB,eAAa,UAAU;;CAGxB,MAAM,cAAc,MAAM;AACzB,WAAS,EAAE;AACX,mBAAiB;;CAGlB,MAAM,uBAAuB,MAAM;AAClC,cAAY,kBAAkB,EAAE;AAChC,YAAU,EAAE;;AAGb,EAAA,GAAA,MAAA,iBAAgB;AACf,eAAa,MAAM;IACjB,CAAC,MAAM,CAAC;AAEX,QACC,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EACC,SAAS;EACT,SAAQ;EACR,UAAS;EACT,OAAO;EACP,OAAM;EACN,GAAI;EACJ,iBAAiB;EACjB,SACC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;GACC,OAAO;GACC;GACC;GACG;GACZ,UAAU;GACV,YAAY;GACX,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;GACC,OAAO;GACM;GACb,QACC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;IACC,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,iBAAD,EAAmB,CAAA;IACzB,WAAU;IACV,MAAK;IACJ,CAAA;GAEH,UAAU;GACV,QAAQ;GACR,YAAA,GAAA,WAAA,SAAsB,sBAAsB,UAAU;GACtD,GAAI;GACH,CAAA;EACK,CAAA"}

package/lib/cjs/components/picker/time/item.js

@@ -0,0 +1,20 @@
+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/picker/time/item.tsx
+function Items(props) {
+	const { items = [], active, renderItem, unit, onClick } = props;
+	return items.map((n) => {
+		const isActive = n === active;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			className: (0, classnames.default)("i-timepicker-item", { "i-timepicker-item-active": isActive }),
+			onClick: () => onClick(n),
+			children: renderItem?.(n, isActive, unit) ?? (n < 10 ? `0${n}` : n)
+		}, n);
+	});
+}
+//#endregion
+exports.default = Items;
+
+//# sourceMappingURL=item.js.map

package/lib/cjs/components/picker/time/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":[],"sources":["../../../../../packages/components/picker/time/item.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nexport default function Items(props) {\n\tconst { items = [], active, renderItem, unit, onClick } = props;\n\n\treturn items.map((n) => {\n\t\tconst isActive = n === active;\n\n\t\treturn (\n\t\t\t<a\n\t\t\t\tkey={n}\n\t\t\t\tclassName={classNames(\"i-timepicker-item\", {\n\t\t\t\t\t\"i-timepicker-item-active\": isActive,\n\t\t\t\t})}\n\t\t\t\tonClick={() => onClick(n)}\n\t\t\t>\n\t\t\t\t{renderItem?.(n, isActive, unit) ?? (n < 10 ? `0${n}` : n)}\n\t\t\t</a>\n\t\t);\n\t});\n}\n"],"mappings":";;;;;AAEA,SAAwB,MAAM,OAAO;CACpC,MAAM,EAAE,QAAQ,EAAE,EAAE,QAAQ,YAAY,MAAM,YAAY;AAE1D,QAAO,MAAM,KAAK,MAAM;EACvB,MAAM,WAAW,MAAM;AAEvB,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAEC,YAAA,GAAA,WAAA,SAAsB,qBAAqB,EAC1C,4BAA4B,UAC5B,CAAC;GACF,eAAe,QAAQ,EAAE;aAExB,aAAa,GAAG,UAAU,KAAK,KAAK,IAAI,KAAK,IAAI,MAAM;GACrD,EAPE,EAOF;GAEJ"}

package/lib/cjs/components/picker/time/panel.js

@@ -0,0 +1,144 @@
+require("../../../_virtual/_rolldown/runtime.js");
+const require_item = require("./item.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/picker/time/panel.tsx
+const UnitMaps = {
+	h: "hour",
+	hh: "hour",
+	m: "minute",
+	mm: "minute",
+	s: "second",
+	ss: "second"
+};
+function Panel(props) {
+	const { value, stepH = 1, stepM = 1, stepS = 1, format, periods, renderItem, onChange, onFallback } = props;
+	const [period, setPeriod] = (0, react.useState)(void 0);
+	const [hour, setHour] = (0, react.useState)(void 0);
+	const [minute, setMinute] = (0, react.useState)(void 0);
+	const [second, setSecond] = (0, react.useState)(void 0);
+	const [hours, minutes, seconds] = (0, react.useMemo)(() => {
+		const hasH = format.includes("h");
+		const hasM = format.includes("m");
+		const hasS = format.includes("s");
+		return [
+			hasH ? Array.from({ length: (periods ? 12 : 24) / stepH }, (_, i) => i * stepH) : [],
+			hasM ? Array.from({ length: 60 / stepM }, (_, i) => i * stepM) : [],
+			hasS ? Array.from({ length: 60 / stepS }, (_, i) => i * stepS) : []
+		];
+	}, [
+		stepH,
+		stepM,
+		stepS,
+		format,
+		periods
+	]);
+	const updateValue = (next) => {
+		const nextPeriod = next?.period ?? period;
+		const nextHour = next?.hour ?? hour;
+		const nextMinute = next?.minute ?? minute;
+		const nextSecond = next?.second ?? second;
+		let result = format.replace(/(hh|h){1}|(mm|m){1}|(ss|s){1}/gi, (pattern) => {
+			const p = pattern.toLowerCase();
+			const u = UnitMaps[p];
+			const n = u === "hour" ? nextHour ?? 0 : u === "minute" ? nextMinute ?? 0 : nextSecond ?? 0;
+			return p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;
+		});
+		if (periods && hours.length > 0) result = `${nextPeriod ?? periods[0]} ${result}`;
+		onChange(result);
+	};
+	const handleSetTime = (v, unit) => {
+		const next = {
+			period,
+			hour,
+			minute,
+			second,
+			[unit]: v
+		};
+		if (unit === "period") setPeriod(v);
+		if (unit === "hour") setHour(v);
+		if (unit === "minute") setMinute(v);
+		if (unit === "second") setSecond(v);
+		updateValue(next);
+	};
+	(0, react.useEffect)(() => {
+		let time = value ?? "";
+		if (periods && hours.length > 0 && value) {
+			const [p, t] = value.split(" ");
+			time = t ?? "";
+			setPeriod(periods.includes(p) ? p : void 0);
+		}
+		const nums = time.match(/\d+/g) ?? [];
+		if (!nums.length) {
+			onFallback("");
+			return;
+		}
+		let i = 0;
+		const parsed = {
+			hour: void 0,
+			minute: void 0,
+			second: void 0
+		};
+		const r = format.replace(/(hh|h)+|(mm|m)+|(ss|s)+/gi, (p) => {
+			const n = nums[i++] ?? 0;
+			const o = Math.min(59, n);
+			parsed[UnitMaps[p]] = o;
+			return p.length > 1 && o < 10 ? `0${o}` : o;
+		});
+		setHour(parsed.hour);
+		setMinute(parsed.minute);
+		setSecond(parsed.second);
+		onFallback(r);
+	}, [
+		value,
+		format,
+		hours.length,
+		periods
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "i-timepicker",
+		children: [
+			hours.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [periods && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "i-timepicker-list",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_item.default, {
+					items: periods,
+					active: period,
+					onClick: (p) => handleSetTime(p, "period")
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "i-timepicker-list",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_item.default, {
+					items: hours,
+					active: hour,
+					unit: "hour",
+					renderItem,
+					onClick: (h) => handleSetTime(h, "hour")
+				})
+			})] }),
+			minutes.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "i-timepicker-list",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_item.default, {
+					items: minutes,
+					active: minute,
+					unit: "minute",
+					renderItem,
+					onClick: (m) => handleSetTime(m, "minute")
+				})
+			}),
+			seconds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "i-timepicker-list",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_item.default, {
+					items: seconds,
+					active: second,
+					unit: "second",
+					renderItem,
+					onClick: (s) => handleSetTime(s, "second")
+				})
+			})
+		]
+	});
+}
+//#endregion
+exports.default = Panel;
+
+//# sourceMappingURL=panel.js.map

package/lib/cjs/components/picker/time/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":[],"sources":["../../../../../packages/components/picker/time/panel.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport \"./index.css\";\nimport Items from \"./item\";\n\nconst UnitMaps = {\n\th: \"hour\",\n\thh: \"hour\",\n\tm: \"minute\",\n\tmm: \"minute\",\n\ts: \"second\",\n\tss: \"second\",\n};\n\nexport default function Panel(props) {\n\tconst {\n\t\tvalue,\n\t\tstepH = 1,\n\t\tstepM = 1,\n\t\tstepS = 1,\n\t\tformat,\n\t\tperiods,\n\t\trenderItem,\n\t\tonChange,\n\t\tonFallback,\n\t} = props;\n\tconst [period, setPeriod] = useState<any>(undefined);\n\tconst [hour, setHour] = useState<any>(undefined);\n\tconst [minute, setMinute] = useState<any>(undefined);\n\tconst [second, setSecond] = useState<any>(undefined);\n\n\tconst [hours, minutes, seconds] = useMemo(() => {\n\t\tconst hasH = format.includes(\"h\");\n\t\tconst hasM = format.includes(\"m\");\n\t\tconst hasS = format.includes(\"s\");\n\t\tconst hours = hasH\n\t\t\t? Array.from(\n\t\t\t\t\t{ length: (periods ? 12 : 24) / stepH },\n\t\t\t\t\t(_, i) => i * stepH\n\t\t\t  )\n\t\t\t: [];\n\t\tconst minutes = hasM\n\t\t\t? Array.from({ length: 60 / stepM }, (_, i) => i * stepM)\n\t\t\t: [];\n\t\tconst seconds = hasS\n\t\t\t? Array.from({ length: 60 / stepS }, (_, i) => i * stepS)\n\t\t\t: [];\n\n\t\treturn [hours, minutes, seconds];\n\t}, [stepH, stepM, stepS, format, periods]);\n\n\tconst updateValue = (next?: {\n\t\tperiod?: any;\n\t\thour?: any;\n\t\tminute?: any;\n\t\tsecond?: any;\n\t}) => {\n\t\tconst nextPeriod = next?.period ?? period;\n\t\tconst nextHour = next?.hour ?? hour;\n\t\tconst nextMinute = next?.minute ?? minute;\n\t\tconst nextSecond = next?.second ?? second;\n\n\t\tconst reg = /(hh|h){1}|(mm|m){1}|(ss|s){1}/gi;\n\t\tlet result = format.replace(reg, (pattern) => {\n\t\t\tconst p = pattern.toLowerCase();\n\t\t\tconst u = UnitMaps[p];\n\t\t\tconst n =\n\t\t\t\tu === \"hour\"\n\t\t\t\t\t? (nextHour ?? 0)\n\t\t\t\t\t: u === \"minute\"\n\t\t\t\t\t\t? (nextMinute ?? 0)\n\t\t\t\t\t\t: (nextSecond ?? 0);\n\n\t\t\treturn p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;\n\t\t});\n\n\t\tif (periods && hours.length > 0) {\n\t\t\tresult = `${nextPeriod ?? periods[0]} ${result}`;\n\t\t}\n\n\t\tonChange(result);\n\t};\n\n\tconst handleSetTime = (v, unit) => {\n\t\tconst next = { period, hour, minute, second, [unit]: v };\n\n\t\tif (unit === \"period\") setPeriod(v);\n\t\tif (unit === \"hour\") setHour(v);\n\t\tif (unit === \"minute\") setMinute(v);\n\t\tif (unit === \"second\") setSecond(v);\n\n\t\tupdateValue(next);\n\t};\n\n\tuseEffect(() => {\n\t\tlet time = value ?? \"\";\n\n\t\tif (periods && hours.length > 0 && value) {\n\t\t\tconst [p, t] = value.split(\" \");\n\t\t\ttime = t ?? \"\";\n\t\t\tsetPeriod(periods.includes(p) ? p : undefined);\n\t\t}\n\n\t\tconst nums = time.match(/\\d+/g) ?? [];\n\n\t\tif (!nums.length) {\n\t\t\tonFallback(\"\");\n\t\t\treturn;\n\t\t}\n\n\t\tlet i = 0;\n\t\tconst parsed = {\n\t\t\thour: undefined,\n\t\t\tminute: undefined,\n\t\t\tsecond: undefined,\n\t\t};\n\t\tconst r = format.replace(/(hh|h)+|(mm|m)+|(ss|s)+/gi, (p) => {\n\t\t\tconst n = nums[i++] ?? 0;\n\t\t\tconst o = Math.min(59, n);\n\t\t\tparsed[UnitMaps[p]] = o;\n\t\t\treturn p.length > 1 && o < 10 ? `0${o}` : o;\n\t\t});\n\n\t\tsetHour(parsed.hour);\n\t\tsetMinute(parsed.minute);\n\t\tsetSecond(parsed.second);\n\t\tonFallback(r);\n\t}, [value, format, hours.length, periods]);\n\n\treturn (\n\t\t<div className='i-timepicker'>\n\t\t\t{hours.length > 0 && (\n\t\t\t\t<>\n\t\t\t\t\t{periods && (\n\t\t\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t\t\t<Items\n\t\t\t\t\t\t\t\titems={periods}\n\t\t\t\t\t\t\t\tactive={period}\n\t\t\t\t\t\t\t\tonClick={(p) => handleSetTime(p, \"period\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t\t<Items\n\t\t\t\t\t\t\titems={hours}\n\t\t\t\t\t\t\tactive={hour}\n\t\t\t\t\t\t\tunit='hour'\n\t\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\t\tonClick={(h) => handleSetTime(h, \"hour\")}\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\t{minutes.length > 0 && (\n\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={minutes}\n\t\t\t\t\t\tactive={minute}\n\t\t\t\t\t\tunit='minute'\n\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\tonClick={(m) => handleSetTime(m, \"minute\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{seconds.length > 0 && (\n\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={seconds}\n\t\t\t\t\t\tactive={second}\n\t\t\t\t\t\tunit='second'\n\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\tonClick={(s) => handleSetTime(s, \"second\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":""}

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

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

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

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

package/lib/cjs/components/popconfirm/popconfirm.js

@@ -0,0 +1,86 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_hooks = require("../../js/hooks.js");
+const require_index = require("../button/index.js");
+const require_index$1 = require("../icon/index.js");
+const require_index$2 = require("../popup/index.js");
+const require_index$3 = require("../flex/index.js");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/popconfirm/popconfirm.tsx
+const defaultOk = { children: "确定" };
+const defaultCancel = {
+	children: "取消",
+	secondary: true
+};
+const Popconfirm = (props) => {
+	const { trigger = "click", visible, icon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.InfoOutlined, {}),
+		className: "error",
+		size: "1.2em"
+	}), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+	const state = require_hooks.useReactive({
+		loading: false,
+		visible
+	});
+	const ok = okButtonProps ? Object.assign({}, defaultOk, okButtonProps) : defaultOk;
+	const cancel = cancelButtonProps ? Object.assign({}, defaultCancel, cancelButtonProps) : defaultCancel;
+	const handleVisibleChange = (v) => {
+		state.visible = v;
+		restProps.onVisibleChange?.(v);
+	};
+	const handleOk = async (e) => {
+		state.loading = true;
+		ok.onClick?.(e);
+		try {
+			await onOk?.();
+			state.visible = false;
+		} finally {
+			state.loading = false;
+		}
+	};
+	const handleCancel = async (e) => {
+		cancel.onClick?.(e);
+		await onClose?.();
+		state.visible = false;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "i-popconfirm",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$3.default, {
+				gap: ".5em",
+				children: [icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "i-popconfirm-content",
+					children: content
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$3.default, {
+				gap: 12,
+				justify: "flex-end",
+				className: "i-popconfirm-footer",
+				children: [
+					cancelButtonProps !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+						...cancel,
+						onClick: handleCancel
+					}),
+					extra,
+					okButtonProps !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+						loading: state.loading,
+						...ok,
+						onClick: handleOk
+					})
+				]
+			})]
+		}),
+		...restProps,
+		trigger,
+		visible: state.visible,
+		align,
+		offset,
+		position,
+		onVisibleChange: handleVisibleChange,
+		children
+	});
+};
+//#endregion
+exports.default = Popconfirm;
+
+//# sourceMappingURL=popconfirm.js.map