@_tc/template-core 0.0.1-bate.6 → 0.0.1-bate.61

package/fe/packages/react/ui/components/DataTable/index.js

@@ -0,0 +1,235 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import "../Checkbox/index.js";
+import no_result_default from "../../assets/table/no-result.js";
+import { Pagination } from "../Pagination/Pagination.js";
+import "../Pagination/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import "../table/index.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import "../Skeleton/index.js";
+import { ActionBtn } from "./ActionBtn.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/DataTable/index.tsx
+var defaultRowKey = "id";
+var rowSelectionColumnWidth = 48;
+var actionColumnWidth = 96;
+var zeroOffset = "0px";
+var getRowKey = (record, index, rowKey = defaultRowKey) => {
+	if (typeof rowKey === "function") return rowKey(record, index);
+	const key = record[rowKey];
+	return typeof key === "string" || typeof key === "number" ? key : index;
+};
+var renderCellContent = (column, value, record, rowIndex, hasAction) => {
+	if (hasAction && column.actions) return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full min-w-0 justify-center",
+		children: /* @__PURE__ */ jsx(ActionBtn, {
+			actions: typeof column.actions === "function" ? column.actions(value, record, rowIndex) : column.actions,
+			overflow: column.actionOverflow ?? "auto"
+		})
+	});
+	return column.render ? column.render(value, record, rowIndex) : value;
+};
+var getColumnWidth = (column, defaultColumnWidth) => {
+	const hasAction = column.isAction ?? column.key === "action";
+	if (column.width) return column.width;
+	return `${hasAction ? actionColumnWidth : defaultColumnWidth}px`;
+};
+var getColumnStyle = (column, defaultColumnWidth) => {
+	const hasAction = column.isAction ?? column.key === "action";
+	if (column.width || hasAction) {
+		const width = getColumnWidth(column, defaultColumnWidth);
+		return {
+			width,
+			minWidth: width
+		};
+	}
+	return { minWidth: defaultColumnWidth };
+};
+var getFixedOffset = (widths) => {
+	if (widths.length === 0) return zeroOffset;
+	if (widths.length === 1) return widths[0];
+	return `calc(${widths.join(" + ")})`;
+};
+function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowSelection, defaultColumnWidth = 100, pagination: pPagination }) {
+	const t = useI18n();
+	const getCellValue = (record, column) => record[column.dataIndex || column.key];
+	const isControlled = rowSelection && Array.isArray(rowSelection.selectedRowKeys);
+	const [innerSelectedRowKeys, setInnerSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? []);
+	const selectedRowKeys = (isControlled ? rowSelection?.selectedRowKeys : innerSelectedRowKeys) ?? [];
+	const selectedKeySet = new Set(selectedRowKeys);
+	const [currentPage, setCurrentPage] = useState(1);
+	const { showPagination, pagination, data, pageStartIndex } = useMemo(() => {
+		let pagination;
+		let data = pData;
+		let showPagination;
+		let pageStartIndex = 0;
+		if (pPagination) {
+			pagination = pPagination;
+			showPagination = pagination.total > 0;
+		} else {
+			pagination = {
+				onChange(v) {
+					setCurrentPage(v);
+				},
+				current: currentPage,
+				pageSize: 10,
+				total: pData.length
+			};
+			showPagination = pData.length > pagination.pageSize;
+			pageStartIndex = (pagination.current - 1) * pagination.pageSize;
+			data = pData.slice(pageStartIndex, pagination.current * pagination.pageSize);
+		}
+		return {
+			showPagination,
+			pagination,
+			data,
+			pageStartIndex
+		};
+	}, [
+		currentPage,
+		pData,
+		pPagination
+	]);
+	const pageRowKeys = data.map((record, index) => getRowKey(record, pageStartIndex + index, rowKey));
+	const handleRowSelectChange = (key) => {
+		if (!rowSelection) return;
+		const nextSelectedKeys = selectedKeySet.has(key) ? selectedRowKeys.filter((k) => k !== key) : [...selectedRowKeys, key];
+		const nextSelectedKeySet = new Set(nextSelectedKeys);
+		const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
+		if (!isControlled) setInnerSelectedRowKeys(nextSelectedKeys);
+		rowSelection.onChange?.(nextSelectedKeys, selectedRows, false);
+	};
+	const handleSelectAllChange = (event) => {
+		if (!rowSelection) return;
+		const checked = event.target.checked;
+		let nextSelectedKeys;
+		if (checked) {
+			const pageKeySet = new Set(pageRowKeys);
+			nextSelectedKeys = Array.from(new Set([...selectedRowKeys, ...pageRowKeys.filter((key) => !selectedKeySet.has(key))])).filter((key) => pageKeySet.has(key) || selectedKeySet.has(key));
+		} else {
+			const pageKeySet = new Set(pageRowKeys);
+			nextSelectedKeys = selectedRowKeys.filter((key) => !pageKeySet.has(key));
+		}
+		const nextSelectedKeySet = new Set(nextSelectedKeys);
+		const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
+		if (!isControlled) setInnerSelectedRowKeys(nextSelectedKeys);
+		rowSelection.onChange?.(nextSelectedKeys, selectedRows, checked);
+	};
+	const allChecked = rowSelection ? rowSelection.isAll ?? (pageRowKeys.length > 0 && pageRowKeys.every((key) => selectedKeySet.has(key))) : false;
+	const partiallyChecked = rowSelection ? pageRowKeys.some((key) => selectedKeySet.has(key)) && !allChecked : false;
+	const fixedColumns = useMemo(() => {
+		const columnsWithFixed = columns.map((column, index) => {
+			const hasAction = column.isAction ?? column.key === "action";
+			return {
+				column,
+				index,
+				fixed: column.fixed ?? (hasAction ? "right" : void 0),
+				width: getColumnWidth(column, defaultColumnWidth)
+			};
+		});
+		const leftOffsetWidths = rowSelection ? [`${rowSelectionColumnWidth}px`] : [];
+		const leftOffsets = /* @__PURE__ */ new Map();
+		for (const item of columnsWithFixed) {
+			if (item.fixed !== "left") continue;
+			leftOffsets.set(item.index, getFixedOffset(leftOffsetWidths));
+			leftOffsetWidths.push(item.width);
+		}
+		const rightOffsetWidths = [];
+		const rightOffsets = /* @__PURE__ */ new Map();
+		for (const item of [...columnsWithFixed].reverse()) {
+			if (item.fixed !== "right") continue;
+			rightOffsets.set(item.index, getFixedOffset(rightOffsetWidths));
+			rightOffsetWidths.push(item.width);
+		}
+		return columnsWithFixed.map((item) => ({
+			...item,
+			fixedOffset: item.fixed === "left" ? leftOffsets.get(item.index) : item.fixed === "right" ? rightOffsets.get(item.index) : void 0
+		}));
+	}, [
+		columns,
+		defaultColumnWidth,
+		rowSelection
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tc-ui-data-table bg-background rounded-[20px] overflow-hidden relative",
+		children: [
+			/* @__PURE__ */ jsxs(Table, {
+				containerClassName: "rounded-b-none overflow-x-auto",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection && /* @__PURE__ */ jsxs(TableHead, {
+					fixed: "left",
+					showSeparator: false,
+					style: {
+						width: "48px",
+						minWidth: "48px"
+					},
+					children: [rowSelection.beforeCheckboxNode, /* @__PURE__ */ jsx(Checkbox, {
+						checked: allChecked,
+						"aria-label": "Select all rows",
+						indeterminate: partiallyChecked,
+						onChange: (_, event) => handleSelectAllChange(event)
+					})]
+				}), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+					return /* @__PURE__ */ jsx(TableHead, {
+						isAction: column.isAction ?? column.key === "action",
+						fixed,
+						fixedOffset,
+						hideSeparatorWhenFixedActive: fixed === "right",
+						style: getColumnStyle(column, defaultColumnWidth),
+						children: column.title
+					}, column.key);
+				})] }) }), /* @__PURE__ */ jsx(TableBody, { children: data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: columns.length + (rowSelection ? 1 : 0),
+					className: "text-muted-foreground",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center w-full gap-2.5",
+						children: [/* @__PURE__ */ jsx("img", {
+							src: no_result_default,
+							alt: t("components.dataTable.noData"),
+							className: " w-24 h-24"
+						}), t("components.dataTable.noData")]
+					})
+				}) }) : data.map((record, rowIndex) => {
+					const recordKey = getRowKey(record, pageStartIndex + rowIndex, rowKey);
+					return /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection && /* @__PURE__ */ jsx(TableCell, {
+						fixed: "left",
+						style: {
+							width: "48px",
+							minWidth: "48px"
+						},
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: selectedKeySet.has(recordKey),
+							"aria-label": "Select row",
+							onChange: () => handleRowSelectChange(recordKey)
+						})
+					}), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+						const value = getCellValue(record, column);
+						const hasAction = column.isAction ?? column.key === "action";
+						return /* @__PURE__ */ jsx(TableCell, {
+							isAction: hasAction,
+							fixed,
+							fixedOffset,
+							style: getColumnStyle(column, defaultColumnWidth),
+							children: renderCellContent(column, value, record, rowIndex, hasAction)
+						}, column.key);
+					})] }, recordKey);
+				}) })]
+			}),
+			loading && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 rounded-[20px] bg-background/70 text-sm text-gray-600 z-[100]",
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					mode: "tableloading",
+					rows: 8
+				})
+			}),
+			showPagination && /* @__PURE__ */ jsx("div", {
+				className: "px-6 pb-6 mt-6",
+				children: /* @__PURE__ */ jsx(Pagination, { ...pagination })
+			})
+		]
+	});
+}
+//#endregion
+export { ActionBtn, DataTable };

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

@@ -0,0 +1,21 @@
+import { ModeType } from "./data";
+import { type DateLocaleConfig } from "./locales";
+export type DateRange = {
+    from: Date | undefined;
+    to?: Date | undefined;
+};
+export type QuickRangePreset = {
+    label: string;
+    getRange: () => DateRange;
+};
+export interface CalendarProps {
+    mode?: ModeType;
+    value?: Date | DateRange | null;
+    onChange?: (date: Date | DateRange) => void;
+    disabledDate?: (date: Date) => boolean;
+    showTime?: boolean;
+    className?: string;
+    locale?: Partial<DateLocaleConfig>;
+    quickRanges?: QuickRangePreset[];
+}
+export declare function Calendar({ mode, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges, }: CalendarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,351 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { ModeType } from "./data.js";
+import { useDateLocale } from "./LocaleContext.js";
+import { TimePicker } from "./TimePicker.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { addMonths, addYears, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, subYears } from "date-fns";
+import { zhCN } from "date-fns/locale";
+//#region packages/react/ui/components/Date/Calendar.tsx
+function Calendar({ mode = ModeType.Single, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges }) {
+	const contextLocale = useDateLocale();
+	const locale = useMemo(() => ({
+		...contextLocale,
+		...customLocale
+	}), [contextLocale, customLocale]);
+	const [pendingValue, setPendingValue] = useState(value ?? null);
+	const [currentMonth, setCurrentMonth] = useState(() => {
+		if (value instanceof Date) return value;
+		if (value && "from" in value && value.from) return value.from;
+		return /* @__PURE__ */ new Date();
+	});
+	const [hoverDate, setHoverDate] = useState(null);
+	const days = useMemo(() => {
+		const monthStart = startOfMonth(currentMonth);
+		const monthEnd = endOfMonth(monthStart);
+		const daysInGrid = eachDayOfInterval({
+			start: startOfWeek(monthStart, {
+				locale: zhCN,
+				weekStartsOn: 0
+			}),
+			end: endOfWeek(monthEnd, {
+				locale: zhCN,
+				weekStartsOn: 0
+			})
+		});
+		if (daysInGrid.length < 42) {
+			const remaining = 42 - daysInGrid.length;
+			const lastDay = daysInGrid[daysInGrid.length - 1];
+			const extraDays = eachDayOfInterval({
+				start: new Date(lastDay.getTime() + 864e5),
+				end: new Date(lastDay.getTime() + remaining * 864e5)
+			});
+			daysInGrid.push(...extraDays);
+		}
+		return daysInGrid;
+	}, [currentMonth]);
+	const weekDays = locale.weekDays;
+	const isRangeMode = mode === ModeType.Range;
+	const builtInQuickRanges = useMemo(() => [
+		{
+			label: locale.quickRangeToday,
+			getRange: () => {
+				const today = /* @__PURE__ */ new Date();
+				return {
+					from: startOfDay(today),
+					to: endOfDay(today)
+				};
+			}
+		},
+		{
+			label: locale.quickRangeYesterday,
+			getRange: () => {
+				const yesterday = subDays(/* @__PURE__ */ new Date(), 1);
+				return {
+					from: startOfDay(yesterday),
+					to: endOfDay(yesterday)
+				};
+			}
+		},
+		{
+			label: locale.quickRangeLast7Days,
+			getRange: () => {
+				const end = /* @__PURE__ */ new Date();
+				return {
+					from: startOfDay(subDays(end, 6)),
+					to: endOfDay(end)
+				};
+			}
+		},
+		{
+			label: locale.quickRangeLast30Days,
+			getRange: () => {
+				const end = /* @__PURE__ */ new Date();
+				return {
+					from: startOfDay(subDays(end, 29)),
+					to: endOfDay(end)
+				};
+			}
+		},
+		{
+			label: locale.quickRangeThisMonth,
+			getRange: () => {
+				const today = /* @__PURE__ */ new Date();
+				return {
+					from: startOfMonth(today),
+					to: endOfMonth(today)
+				};
+			}
+		},
+		{
+			label: locale.quickRangeLastYear,
+			getRange: () => {
+				const end = /* @__PURE__ */ new Date();
+				return {
+					from: startOfDay(subYears(end, 1)),
+					to: endOfDay(end)
+				};
+			}
+		}
+	], [locale]);
+	const quickRangePresets = quickRanges && quickRanges.length > 0 ? quickRanges : builtInQuickRanges;
+	const handleQuickRangeClick = (getRange) => {
+		const range = getRange();
+		setCurrentMonth(range.from ?? /* @__PURE__ */ new Date());
+		if (showTime) setPendingValue(range);
+		else onChange?.(range);
+	};
+	const prevMonth = () => setCurrentMonth(subMonths(currentMonth, 1));
+	const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1));
+	const prevYear = () => setCurrentMonth(subYears(currentMonth, 1));
+	const nextYear = () => setCurrentMonth(addYears(currentMonth, 1));
+	const handleDateClick = (date) => {
+		if (disabledDate?.(date)) return;
+		let dateWithTime = date;
+		if (showTime && pendingValue instanceof Date) {
+			dateWithTime = new Date(date);
+			dateWithTime.setHours(pendingValue.getHours());
+			dateWithTime.setMinutes(pendingValue.getMinutes());
+			dateWithTime.setSeconds(0);
+			dateWithTime.setMilliseconds(0);
+		}
+		if (showTime) if (mode === ModeType.Single) setPendingValue(dateWithTime);
+		else {
+			const range = pendingValue || {
+				from: void 0,
+				to: void 0
+			};
+			if (!range.from || range.from && range.to) setPendingValue({
+				from: dateWithTime,
+				to: void 0
+			});
+			else if (isBefore(dateWithTime, range.from)) setPendingValue({
+				from: dateWithTime,
+				to: range.from
+			});
+			else setPendingValue({
+				from: range.from,
+				to: dateWithTime
+			});
+		}
+		else if (mode === ModeType.Single) onChange?.(dateWithTime);
+		else {
+			const range = value || {
+				from: void 0,
+				to: void 0
+			};
+			if (!range.from || range.from && range.to) onChange?.({
+				from: dateWithTime,
+				to: void 0
+			});
+			else if (isBefore(dateWithTime, range.from)) onChange?.({
+				from: dateWithTime,
+				to: range.from
+			});
+			else onChange?.({
+				from: range.from,
+				to: dateWithTime
+			});
+		}
+	};
+	const isSelected = (date) => {
+		const compareValue = showTime ? pendingValue : value;
+		if (mode === ModeType.Single) return compareValue instanceof Date && isSameDay(date, compareValue);
+		else {
+			const range = compareValue;
+			return range?.from && isSameDay(date, range.from) || range?.to && isSameDay(date, range.to);
+		}
+	};
+	const isInRange = (date) => {
+		if (mode !== ModeType.Range) return false;
+		const range = showTime ? pendingValue : value;
+		if (!range?.from) return false;
+		const end = range.to || hoverDate;
+		if (!end) return false;
+		return isAfter(date, range.from) && isBefore(date, end) || isAfter(date, end) && isBefore(date, range.from);
+	};
+	const handleConfirm = () => {
+		if (pendingValue) onChange?.(pendingValue);
+	};
+	const handleTimeChangeInternal = (date) => {
+		setPendingValue(date);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tc-ui-calendar p-3", showTime || isRangeMode ? "flex flex-col" : "w-[280px]", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex", (showTime || isRangeMode) && "gap-4"),
+			children: [
+				isRangeMode && /* @__PURE__ */ jsxs("div", {
+					className: "w-[140px] pr-3 border-r border-border",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs font-medium text-muted-foreground mb-2",
+						children: locale.quickRanges
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-1",
+						children: quickRangePresets.map((preset) => /* @__PURE__ */ jsx(Button, {
+							variant: "text",
+							type: "button",
+							onClick: () => handleQuickRangeClick(preset.getRange),
+							className: cn("w-full justify-start text-left text-xs px-2 py-1 rounded", "text-foreground hover:bg-muted transition-colors"),
+							children: preset.label
+						}, preset.label))
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "w-[280px]",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between mb-4",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: "text",
+										onClick: prevYear,
+										className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors",
+										type: "button",
+										children: /* @__PURE__ */ jsx(ChevronsLeft, { size: 16 })
+									}), /* @__PURE__ */ jsx(Button, {
+										variant: "text",
+										onClick: prevMonth,
+										className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors",
+										type: "button",
+										children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+									})]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "font-medium text-sm",
+									children: format(currentMonth, locale.monthFormat, { locale: zhCN })
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: "text",
+										onClick: nextMonth,
+										className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors",
+										type: "button",
+										children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+									}), /* @__PURE__ */ jsx(Button, {
+										variant: "text",
+										onClick: nextYear,
+										className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors",
+										type: "button",
+										children: /* @__PURE__ */ jsx(ChevronsRight, { size: 16 })
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-7 mb-2",
+							children: weekDays.map((day) => /* @__PURE__ */ jsx("div", {
+								className: "text-center text-xs text-muted-foreground font-medium py-1",
+								children: day
+							}, day))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-7 gap-y-1",
+							onMouseLeave: () => setHoverDate(null),
+							children: days.map((date, i) => {
+								const selected = isSelected(date);
+								const inRange = isInRange(date);
+								const isToday = isSameDay(date, /* @__PURE__ */ new Date());
+								const isCurrentMonth = isSameMonth(date, currentMonth);
+								const isDisabled = disabledDate?.(date);
+								return /* @__PURE__ */ jsx("div", {
+									className: "flex justify-center p-0",
+									children: /* @__PURE__ */ jsx(Button, {
+										variant: "text",
+										type: "button",
+										onClick: () => handleDateClick(date),
+										onMouseEnter: () => setHoverDate(date),
+										disabled: isDisabled,
+										className: cn("w-8 h-8 flex items-center justify-center rounded text-sm transition-colors relative z-10", !isCurrentMonth && "text-muted-foreground/40", isCurrentMonth && !selected && !inRange && !isDisabled && "text-foreground hover:bg-muted", selected && "bg-theme text-theme-foreground hover:bg-theme/90", inRange && !selected && "bg-theme/10 text-theme", !selected && !inRange && isToday && "border border-theme text-theme", isDisabled && "text-muted-foreground cursor-not-allowed hover:bg-transparent opacity-50"),
+										children: format(date, "d")
+									})
+								}, i);
+							})
+						})
+					]
+				}),
+				showTime && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col border-l border-border pl-4",
+					children: mode === ModeType.Single ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col justify-center h-full",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs font-medium text-muted-foreground mb-3 text-center",
+							children: locale.selectTime
+						}), /* @__PURE__ */ jsx(TimePicker, {
+							value: pendingValue instanceof Date ? pendingValue : void 0,
+							onChange: handleTimeChangeInternal,
+							className: "border-0"
+						})]
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "space-y-4 flex flex-col justify-center h-full",
+						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs font-medium text-muted-foreground mb-2 text-center",
+							children: locale.startTime
+						}), /* @__PURE__ */ jsx(TimePicker, {
+							value: pendingValue && "from" in pendingValue && pendingValue.from ? pendingValue.from : void 0,
+							onChange: (newDate) => {
+								setPendingValue({
+									from: newDate,
+									to: pendingValue?.to
+								});
+							},
+							className: "border-0"
+						})] }), pendingValue && "from" in pendingValue && pendingValue.to && /* @__PURE__ */ jsxs("div", {
+							className: "pt-4 border-t border-border",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-xs font-medium text-muted-foreground mb-2 text-center",
+								children: locale.endTime
+							}), /* @__PURE__ */ jsx(TimePicker, {
+								value: pendingValue.to,
+								onChange: (newDate) => {
+									setPendingValue({
+										from: pendingValue?.from,
+										to: newDate
+									});
+								},
+								className: "border-0"
+							})]
+						})]
+					})
+				})
+			]
+		}), showTime && /* @__PURE__ */ jsx("div", {
+			className: "pt-3 mt-3 border-t border-border",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "button",
+				onClick: handleConfirm,
+				className: cn("w-full py-2 px-4 rounded", "bg-theme text-theme-foreground", "hover:bg-theme/90 transition-colors", "text-sm font-medium"),
+				children: locale.confirm
+			})
+		})]
+	});
+}
+//#endregion
+export { Calendar };

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

@@ -0,0 +1,26 @@
+import { type DateRange, type QuickRangePreset } from "./Calendar";
+import { ModeType } from "./data";
+import { type DateLocaleConfig } from "./locales";
+export type DateChangeStrValue = [string, string] | string;
+type DateBaseValue = Date | DateRange;
+type Dates = DateBaseValue | [Date, Date];
+export type DateValue = Dates | DateChangeStrValue;
+export type DatePickerProps = {
+    mode?: ModeType;
+    value?: DateValue;
+    defaultValue?: DateValue;
+    format?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    showTime?: boolean;
+    onChange?: (value?: DateChangeStrValue, date?: Dates) => void;
+    disabledDate?: (current: Date) => boolean;
+    className?: string;
+    locale?: Partial<DateLocaleConfig>;
+    quickRanges?: QuickRangePreset[];
+    getPopupContainer?: () => HTMLElement;
+};
+declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { DatePicker };
+export type { DateRange };