@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.51

package/fe/packages/react/ui/components/Date/Date.js

@@ -0,0 +1,210 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Input } from "../Input/Input.js";
+import "../Input/index.js";
+import { useDropdownPositioning } from "../hooks/useDropdownPositioning.js";
+import { Popup } from "../Popup/Popup.js";
+import "../Popup/index.js";
+import { ModeType } from "./data.js";
+import { useDateLocale } from "./LocaleContext.js";
+import { Calendar as Calendar$1 } from "./Calendar.js";
+import { getDatePickerDropdownPosition } from "./dropdownPositioning.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Calendar, X } from "lucide-react";
+import { format, isValid, parse } from "date-fns";
+//#region packages/react/ui/components/Date/Date.tsx
+var formatValue = (val, format$1) => {
+	if (!val) return "";
+	if (val instanceof Date) return format(val, format$1);
+	if ("from" in val) {
+		if (val.from && val.to) return `${format(val.from, format$1)} - ${format(val.to, format$1)}`;
+		if (val.from) return format(val.from, format$1);
+	}
+	return "";
+};
+var formatDateValue = (val, format$2) => {
+	if (!val) return "";
+	/**
+	* 将 DateBaseValue  转为  yyyy-MM-dd | [yyyy-MM-dd, yyyy-MM-dd]
+	*/
+	if (val instanceof Date) return format(val, format$2);
+	if ("from" in val) {
+		if (val.from && val.to) return [format(val.from, format$2), format(val.to, format$2)];
+	}
+	return "";
+};
+var DatePicker = forwardRef((props, ref) => {
+	const { mode = ModeType.Single, className, format: customFormat, placeholder, allowClear = true, disabled = false, showTime = false, value: pValue, defaultValue: pDefaultValue, onChange, disabledDate, locale: customLocale, quickRanges, getPopupContainer } = props;
+	const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+	const locale = {
+		...useDateLocale(),
+		...customLocale
+	};
+	const finalPlaceholder = placeholder || (showTime ? mode === ModeType.Range ? locale.placeholderDateTimeRange : locale.placeholderDateTime : mode === ModeType.Range ? locale.placeholderRange : locale.placeholder);
+	const format = customFormat || (showTime ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd");
+	const { value, defaultValue } = useMemo(() => {
+		/**
+		* 将 DateChangeStrValue 转为 Dates
+		*/
+		const convertValue = (val) => {
+			if (!val) return void 0;
+			if (val instanceof Date) return val;
+			if (typeof val === "object" && "from" in val) return val;
+			if (typeof val === "string") try {
+				const parsed = parse(val, format, /* @__PURE__ */ new Date());
+				return isValid(parsed) ? parsed : void 0;
+			} catch {
+				return;
+			}
+			if (Array.isArray(val)) if (typeof val[0] === "string" && typeof val[1] === "string") try {
+				const from = parse(val[0], format, /* @__PURE__ */ new Date());
+				const to = parse(val[1], format, /* @__PURE__ */ new Date());
+				return isValid(from) && isValid(to) ? {
+					from,
+					to
+				} : void 0;
+			} catch {
+				return;
+			}
+			else return {
+				from: val[0],
+				to: val[1]
+			};
+		};
+		return {
+			value: convertValue(pValue),
+			defaultValue: convertValue(pDefaultValue)
+		};
+	}, [
+		pDefaultValue,
+		pValue,
+		format
+	]);
+	const initialValue = isControlled ? value : value || defaultValue;
+	const [selectedDate, setSelectedDate] = useState(initialValue);
+	const [isOpen, setIsOpen] = useState(false);
+	const [inputValue, setInputValue] = useState(formatValue(initialValue, format));
+	const [isHover, setIsHover] = useState(false);
+	const containerRef = useRef(null);
+	const dropdownContentRef = useRef(null);
+	const inputRef = useRef(null);
+	const rangeDraftRef = useRef(false);
+	const positioning = useDropdownPositioning({
+		open: isOpen,
+		anchorRef: containerRef,
+		contentRef: dropdownContentRef,
+		placement: "bottom-start",
+		offset: 8,
+		matchAnchorWidth: false,
+		strategy: getDatePickerDropdownPosition
+	});
+	useEffect(() => {
+		if (!isControlled) return;
+		if (mode === ModeType.Range && rangeDraftRef.current && value === void 0) return;
+		setSelectedDate(value);
+		setInputValue(formatValue(value, format));
+		if (mode !== ModeType.Range || !value || !("from" in value) || value.to) rangeDraftRef.current = false;
+	}, [
+		isControlled,
+		mode,
+		value,
+		format
+	]);
+	const handleSelect = (date) => {
+		const newDate = date;
+		if (mode === ModeType.Range) {
+			if (date && "from" in date && "to" in date && date.from && date.to) setIsOpen(false);
+		} else setIsOpen(false);
+		if (mode === ModeType.Range || !isControlled) {
+			setSelectedDate(newDate);
+			setInputValue(formatValue(newDate, format));
+		}
+		rangeDraftRef.current = mode === ModeType.Range && !(newDate && typeof newDate === "object" && "from" in newDate && newDate.from && newDate.to);
+		onChange?.(formatDateValue(newDate, format), newDate);
+	};
+	const handleClear = (e) => {
+		e.stopPropagation();
+		rangeDraftRef.current = false;
+		setSelectedDate(void 0);
+		setInputValue("");
+		onChange?.(void 0, void 0);
+		inputRef.current?.focus();
+	};
+	const handleInputChange = (e) => {
+		const newValue = e.target.value;
+		setInputValue(newValue);
+		if (mode === ModeType.Single) try {
+			const parsedDate = parse(newValue, format, /* @__PURE__ */ new Date());
+			if (isValid(parsedDate)) {
+				if (!isControlled) setSelectedDate(parsedDate);
+				onChange?.(formatDateValue(parsedDate, format), parsedDate);
+			}
+		} catch {}
+	};
+	const showClearIcon = allowClear && selectedDate && !disabled && isHover;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("tc-ui-date-picker relative w-full", mode === ModeType.Range ? "min-w-[255px]" : "", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: "relative",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("flex h-10 items-center w-full rounded-lg px-3 py-0 text-sm", "border transition-colors duration-200", "bg-background cursor-pointer", disabled && "cursor-not-allowed bg-muted border-border text-muted-foreground", !disabled && !isOpen && "border-border", !disabled && isOpen && "border-theme ring-2 ring-theme/25", !disabled && "focus-within:border-theme focus-within:ring-2 focus-within:ring-theme/25"),
+				onClick: () => !disabled && setIsOpen(!isOpen),
+				onMouseEnter: () => setIsHover(true),
+				onMouseLeave: () => setIsHover(false),
+				children: [/* @__PURE__ */ jsx(Input, {
+					ref: inputRef,
+					type: "text",
+					value: inputValue,
+					onChange: (_, e) => handleInputChange(e),
+					placeholder: finalPlaceholder,
+					disabled,
+					readOnly: mode === ModeType.Range,
+					className: "min-w-0 flex-1",
+					inputClassName: cn("h-8 min-w-0 flex-1 rounded-none border-0 bg-transparent px-0 py-0 outline-none", "ring-0 shadow-none focus:ring-0 focus-visible:ring-0", "text-sm text-foreground placeholder:text-muted-foreground", disabled && "cursor-not-allowed", mode === ModeType.Range && !disabled && "cursor-pointer caret-transparent")
+				}), showClearIcon ? /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					type: "button",
+					onClick: handleClear,
+					title: locale.clear,
+					"aria-label": locale.clear,
+					className: cn("ml-2 flex h-7 w-7 items-center justify-center rounded-md", "text-muted-foreground transition-colors hover:bg-foreground/8 hover:text-foreground", "cursor-pointer"),
+					children: /* @__PURE__ */ jsx(X, { size: 12 })
+				}) : /* @__PURE__ */ jsx(Calendar, {
+					size: 16,
+					className: "ml-2 shrink-0 text-muted-foreground"
+				})]
+			}), /* @__PURE__ */ jsx(Popup, {
+				open: isOpen && !disabled,
+				anchorRef: containerRef,
+				contentRef: dropdownContentRef,
+				positioning,
+				keepMounted: true,
+				onOpenChange: (nextOpen) => {
+					setIsOpen(nextOpen);
+					if (!nextOpen) rangeDraftRef.current = false;
+				},
+				className: cn("overflow-hidden"),
+				container: getPopupContainer?.(),
+				children: /* @__PURE__ */ jsx("div", {
+					ref: dropdownContentRef,
+					children: /* @__PURE__ */ jsx(Calendar$1, {
+						mode,
+						value: selectedDate || null,
+						onChange: handleSelect,
+						disabledDate,
+						showTime,
+						locale,
+						quickRanges
+					})
+				})
+			})]
+		})
+	});
+});
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker };

package/fe/packages/react/ui/components/Date/DateTestPage.d.ts

@@ -0,0 +1 @@
+export default function DateTestPage(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/Date/DateTestPage.js

@@ -0,0 +1,340 @@
+import { DatePicker } from "./Date.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { startOfDay } from "date-fns";
+//#region packages/react/ui/components/Date/DateTestPage.tsx
+function DateTestPage() {
+	const [date1, setDate1] = useState();
+	const [dateTime1, setDateTime1] = useState();
+	const [range, setRange] = useState();
+	const [rangeWithTime, setRangeWithTime] = useState();
+	const [emptyRange, setEmptyRange] = useState();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-8 max-w-6xl mx-auto space-y-8",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-3xl font-bold mb-2",
+				children: "Date 组件使用示例"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "展示 DatePicker 组件的各种使用场景"
+			})] }),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "1. 基本用法"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "单日期选择"
+					}), /* @__PURE__ */ jsx(DatePicker, { placeholder: "请选择日期" })] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "禁用清除按钮"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						placeholder: "请选择日期",
+						allowClear: false
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-xl font-semibold",
+						children: "2. 日期时间选择器 (showTime)"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "时间选择器显示在日历右侧，提供更好的用户体验"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-8",
+						children: [/* @__PURE__ */ jsxs("div", { children: [
+							/* @__PURE__ */ jsx("h3", {
+								className: "text-sm font-medium mb-2",
+								children: "基本用法 - 单日期时间"
+							}),
+							/* @__PURE__ */ jsx(DatePicker, {
+								showTime: true,
+								placeholder: "请选择日期时间"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground mt-2",
+								children: "点击输入框打开选择器，时间选择器在右侧显示"
+							})
+						] }), /* @__PURE__ */ jsxs("div", { children: [
+							/* @__PURE__ */ jsx("h3", {
+								className: "text-sm font-medium mb-2",
+								children: "受控模式"
+							}),
+							/* @__PURE__ */ jsx(DatePicker, {
+								showTime: true,
+								value: dateTime1,
+								onChange: (val, date) => {
+									setDateTime1(val);
+									console.log("选中日期时间:", val);
+									console.log("Date 对象:", date);
+								},
+								placeholder: "受控日期时间选择器"
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "text-sm text-muted-foreground mt-2",
+								children: ["选中的值: ", /* @__PURE__ */ jsx("code", {
+									className: "text-xs bg-muted px-1 py-0.5 rounded",
+									children: String(dateTime1 || "未选择")
+								})]
+							})
+						] })]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "3. 范围选择 (Range Picker)"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-8",
+					children: [/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-medium mb-2",
+							children: "基本范围选择"
+						}),
+						/* @__PURE__ */ jsx(DatePicker, {
+							mode: "range",
+							value: emptyRange,
+							onChange: (val) => {
+								setEmptyRange(val);
+								console.log("范围选择:", val);
+							},
+							placeholder: "选择日期范围"
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: ["值: ", /* @__PURE__ */ jsx("code", {
+								className: "text-xs bg-muted px-1 py-0.5 rounded",
+								children: JSON.stringify(emptyRange || "未选择")
+							})]
+						})
+					] }), /* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-medium mb-2",
+							children: "范围选择 + 时间选择"
+						}),
+						/* @__PURE__ */ jsx(DatePicker, {
+							mode: "range",
+							value: rangeWithTime,
+							showTime: true,
+							onChange: (val) => {
+								setRangeWithTime(val);
+								console.log("范围时间选择:", val);
+							},
+							placeholder: "选择日期时间范围"
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: [
+								"值:",
+								" ",
+								/* @__PURE__ */ jsx("code", {
+									className: "text-xs bg-muted px-1 py-0.5 rounded",
+									children: JSON.stringify(rangeWithTime || "未选择")
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-1",
+							children: "选择开始日期后，右侧会显示开始时间选择器；选择结束日期后，会显示结束时间选择器"
+						})
+					] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "4. 受控模式"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground mb-2",
+							children: "单日期受控"
+						}),
+						/* @__PURE__ */ jsx(DatePicker, {
+							value: date1,
+							onChange: (date, dateString) => {
+								setDate1(date);
+								console.log("选中日期:", date);
+								console.log("日期字符串:", dateString);
+							},
+							placeholder: "受控日期选择器"
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: ["选中的日期: ", /* @__PURE__ */ jsx("code", {
+								className: "text-xs bg-muted px-1 py-0.5 rounded",
+								children: String(date1 || "未选择")
+							})]
+						})
+					] }), /* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground mb-2",
+							children: "范围受控"
+						}),
+						/* @__PURE__ */ jsx(DatePicker, {
+							mode: "range",
+							value: range,
+							onChange: (val) => {
+								setRange(val);
+								console.log("范围变化:", val);
+							},
+							placeholder: "受控范围选择器"
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: ["值: ", /* @__PURE__ */ jsx("code", {
+								className: "text-xs bg-muted px-1 py-0.5 rounded",
+								children: JSON.stringify(range || "未选择")
+							})]
+						})
+					] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "5. 禁用日期"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "只能选择今天及以后"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						disabledDate: (current) => current < startOfDay(/* @__PURE__ */ new Date()),
+						placeholder: "选择未来日期"
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "范围选择（禁用过去）"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						mode: "range",
+						disabledDate: (current) => current < startOfDay(/* @__PURE__ */ new Date()),
+						placeholder: "选择未来范围"
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "6. 禁用状态"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "禁用状态"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						disabled: true,
+						placeholder: "禁用状态"
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "禁用状态 + 有值"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						disabled: true,
+						value: "2024-01-15",
+						placeholder: "禁用状态"
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "7. 自定义格式"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "自定义日期格式"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						format: "yyyy/MM/dd",
+						placeholder: "选择日期 (yyyy/MM/dd)"
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-2",
+						children: "自定义日期时间格式"
+					}), /* @__PURE__ */ jsx(DatePicker, {
+						showTime: true,
+						format: "yyyy-MM-dd HH:mm:ss",
+						placeholder: "选择日期时间 (yyyy-MM-dd HH:mm:ss)"
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "space-y-4 border-t pt-6",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "API 说明"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted/50 p-4 rounded-lg space-y-2 text-sm",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
+							className: "font-semibold",
+							children: "showTime"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground ml-2",
+							children: ": boolean - 是否显示时间选择器，时间选择器会显示在日历右侧"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
+							className: "font-semibold",
+							children: "mode"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground ml-2",
+							children: ": 'single' | 'range' - 选择模式，single 为单日期，range 为日期范围"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
+							className: "font-semibold",
+							children: "value"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground ml-2",
+							children: ": string | [string, string] - 受控模式的值"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
+							className: "font-semibold",
+							children: "onChange"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground ml-2",
+							children: [
+								": (value?: DateChangeStrValue, date?: Date | DateRange) =",
+								">",
+								" void - 值变化回调"
+							]
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
+							className: "font-semibold",
+							children: "format"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground ml-2",
+							children: ": string - 日期格式，默认 'yyyy-MM-dd'，showTime 时为 'yyyy-MM-dd HH:mm'"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("code", {
+							className: "font-semibold",
+							children: "disabledDate"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground ml-2",
+							children: [
+								": (current: Date) =",
+								">",
+								" boolean - 禁用日期的判断函数"
+							]
+						})] })
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { DateTestPage as default };

package/fe/packages/react/ui/components/Date/LocaleContext.d.ts

@@ -0,0 +1 @@
+export declare const useDateLocale: () => import("./locales").DateLocaleConfig;

package/fe/packages/react/ui/components/Date/LocaleContext.js

@@ -0,0 +1,11 @@
+import { useDateLocaleStore } from "./dateLocaleStore.js";
+//#region packages/react/ui/components/Date/LocaleContext.tsx
+/**
+* Hook for accessing the current Date component locale.
+* Backed by Zustand, so no React Context is required.
+*/
+var useDateLocale = () => {
+	return useDateLocaleStore((state) => state.locale);
+};
+//#endregion
+export { useDateLocale };

package/fe/packages/react/ui/components/Date/LocaleProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import { type DateLocaleConfig } from "./locales";
+export interface DateLocaleProviderProps {
+    locale?: DateLocaleConfig;
+    children: ReactNode;
+}
+export declare function DateLocaleProvider({ locale, children }: DateLocaleProviderProps): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/Date/LocaleProvider.js

@@ -0,0 +1,31 @@
+import { defaultLocale } from "./locales.js";
+import { useDateLocaleStore } from "./dateLocaleStore.js";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region packages/react/ui/components/Date/LocaleProvider.tsx
+/**
+* Date 组件文案配置 Provider
+* 用于全局设置 Date 组件的文案
+*
+* @example
+* ```tsx
+* <DateLocaleProvider locale={customLocale}>
+*   <App />
+* </DateLocaleProvider>
+* ```
+*/
+function DateLocaleProvider({ locale = defaultLocale, children }) {
+	const replaceLocale = useDateLocaleStore((state) => state.replaceLocale);
+	const resetLocale = useDateLocaleStore((state) => state.resetLocale);
+	useEffect(() => {
+		replaceLocale(locale);
+		return () => resetLocale();
+	}, [
+		locale,
+		replaceLocale,
+		resetLocale
+	]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+//#endregion
+export { DateLocaleProvider };

package/fe/packages/react/ui/components/Date/TimePicker.d.ts

@@ -0,0 +1,6 @@
+export interface TimePickerProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    className?: string;
+}
+export declare function TimePicker({ value, onChange, className }: TimePickerProps): import("react/jsx-runtime").JSX.Element;