@_tc/template-core 0.0.1 → 0.0.2

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

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { format as formatDate, isValid, parse } from "date-fns";
+import { Calendar as CalendarIcon, X } from "lucide-react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Popup } from "../Popup";
+import { useDropdownPositioning } from "../hooks/useDropdownPositioning";
+import { Calendar } from "./Calendar";
+import { ModeType } from "./data";
+import { getDatePickerDropdownPosition } from "./dropdownPositioning";
+import { useDateLocale } from "./LocaleContext";
+const formatValue = (val, format) => {
+    if (!val)
+        return "";
+    if (val instanceof Date)
+        return formatDate(val, format);
+    if ("from" in val) {
+        if (val.from && val.to) {
+            return `${formatDate(val.from, format)} - ${formatDate(val.to, format)}`;
+        }
+        if (val.from) {
+            return formatDate(val.from, format);
+        }
+    }
+    return "";
+};
+const formatDateValue = (val, format) => {
+    if (!val)
+        return "";
+    /**
+     * 将 DateBaseValue  转为  yyyy-MM-dd | [yyyy-MM-dd, yyyy-MM-dd]
+     */
+    if (val instanceof Date)
+        return formatDate(val, format);
+    if ("from" in val) {
+        if (val.from && val.to) {
+            return [formatDate(val.from, format), formatDate(val.to, format)];
+        }
+    }
+    return "";
+};
+const 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 contextLocale = useDateLocale();
+    const locale = { ...contextLocale, ...customLocale };
+    // 如果没有传入 placeholder，根据模式自动选择
+    const finalPlaceholder = placeholder ||
+        (showTime
+            ? mode === ModeType.Range
+                ? locale.placeholderDateTimeRange
+                : locale.placeholderDateTime
+            : mode === ModeType.Range
+                ? locale.placeholderRange
+                : locale.placeholder);
+    // Auto-adjust format based on showTime
+    const format = customFormat || (showTime ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd");
+    const { value, defaultValue } = useMemo(() => {
+        /**
+         * 将 DateChangeStrValue 转为 Dates
+         */
+        const convertValue = (val) => {
+            if (!val)
+                return undefined;
+            // Already a Date object
+            if (val instanceof Date)
+                return val;
+            // Already a DateRange object
+            if (typeof val === "object" && "from" in val)
+                return val;
+            // String value - single date
+            if (typeof val === "string") {
+                try {
+                    const parsed = parse(val, format, new Date());
+                    return isValid(parsed) ? parsed : undefined;
+                }
+                catch {
+                    return undefined;
+                }
+            }
+            // date range
+            if (Array.isArray(val)) {
+                // string
+                if (typeof val[0] === "string" && typeof val[1] === "string") {
+                    try {
+                        const from = parse(val[0], format, new Date());
+                        const to = parse(val[1], format, new Date());
+                        return isValid(from) && isValid(to) ? { from, to } : undefined;
+                    }
+                    catch {
+                        return undefined;
+                    }
+                }
+                else {
+                    return { from: val[0], to: val[1] };
+                }
+            }
+            return undefined;
+        };
+        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,
+    });
+    // 同步外部 value 变化
+    useEffect(() => {
+        if (!isControlled)
+            return;
+        if (mode === ModeType.Range && rangeDraftRef.current && value === undefined) {
+            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) {
+            // 如果是范围选择，只有当 from 和 to 都存在时才关闭
+            if (date && "from" in date && "to" in date && date.from && date.to) {
+                setIsOpen(false);
+            }
+        }
+        else {
+            // Single mode: always close popup when onChange is triggered
+            // (In showTime mode, this only happens when user clicks confirm button)
+            setIsOpen(false);
+        }
+        // range 选择需要保留内部草稿态，避免受控 value 把第一步点击抹掉
+        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(undefined);
+        setInputValue("");
+        onChange?.(undefined, undefined);
+        inputRef.current?.focus();
+    };
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (mode === ModeType.Single) {
+            try {
+                const parsedDate = parse(newValue, format, new Date());
+                if (isValid(parsedDate)) {
+                    if (!isControlled)
+                        setSelectedDate(parsedDate);
+                    onChange?.(formatDateValue(parsedDate, format), parsedDate);
+                }
+            }
+            catch {
+                // ignore invalid date
+            }
+        }
+    };
+    const showClearIcon = allowClear && selectedDate && !disabled && isHover;
+    return (_jsx("div", { ref: ref, className: cn("tc-ui-date-picker relative w-full", mode === ModeType.Range ? "min-w-[255px]" : "", className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn("flex items-center w-full rounded-lg px-4 py-3 text-sm", "border transition-colors duration-200", "bg-background cursor-pointer", disabled &&
+                        "cursor-not-allowed bg-muted border-border text-muted-foreground", !disabled && !selectedDate && !isOpen && "border-border", !disabled && (selectedDate || isOpen) && "border-theme"), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx(Input, { ref: inputRef, type: "text", value: inputValue, onChange: (_, e) => handleInputChange(e), placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: "flex-1", inputClassName: cn("flex-1 rounded-none border-0 bg-transparent px-0 py-0 outline-none", "text-sm text-foreground placeholder:text-muted-foreground", disabled && "cursor-not-allowed", mode === ModeType.Range &&
+                                !disabled &&
+                                "cursor-pointer caret-transparent") }), showClearIcon ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn("ml-2 flex items-center justify-center", "w-5 h-5 rounded-full", "bg-muted hover:bg-muted/80", "text-foreground transition-colors", "cursor-pointer"), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 text-muted-foreground" }))] }), _jsx(Popup, { open: isOpen && !disabled, anchorRef: containerRef, contentRef: dropdownContentRef, positioning: positioning, keepMounted: true, onOpenChange: (nextOpen) => {
+                        setIsOpen(nextOpen);
+                        if (!nextOpen) {
+                            rangeDraftRef.current = false;
+                        }
+                    }, className: cn("overflow-hidden"), container: getPopupContainer?.(), children: _jsx("div", { ref: dropdownContentRef, children: _jsx(Calendar, { mode: mode, value: selectedDate || null, onChange: handleSelect, disabledDate: disabledDate, showTime: showTime, locale: locale, quickRanges: quickRanges }) }) })] }) }));
+});
+DatePicker.displayName = "DatePicker";
+export { DatePicker };

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

@@ -0,0 +1,2 @@
+export default function DateTestPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateTestPage.d.ts.map

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { DatePicker } from './Date';
+export default function DateTestPage() {
+    const [date1, setDate1] = useState();
+    const [dateTime1, setDateTime1] = useState();
+    const [range, setRange] = useState();
+    const [rangeWithTime, setRangeWithTime] = useState();
+    const [emptyRange, setEmptyRange] = useState();
+    return (_jsxs("div", { className: "p-8 max-w-6xl mx-auto space-y-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Date \u7EC4\u4EF6\u4F7F\u7528\u793A\u4F8B" }), _jsx("p", { className: "text-muted-foreground", children: "\u5C55\u793A DatePicker \u7EC4\u4EF6\u7684\u5404\u79CD\u4F7F\u7528\u573A\u666F" })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "1. \u57FA\u672C\u7528\u6CD5" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u5355\u65E5\u671F\u9009\u62E9" }), _jsx(DatePicker, { placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u7981\u7528\u6E05\u9664\u6309\u94AE" }), _jsx(DatePicker, { placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F", allowClear: false })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "2. \u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668 (showTime)" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "\u65F6\u95F4\u9009\u62E9\u5668\u663E\u793A\u5728\u65E5\u5386\u53F3\u4FA7\uFF0C\u63D0\u4F9B\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C" }), _jsxs("div", { className: "grid grid-cols-2 gap-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u57FA\u672C\u7528\u6CD5 - \u5355\u65E5\u671F\u65F6\u95F4" }), _jsx(DatePicker, { showTime: true, placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4" }), _jsx("p", { className: "text-xs text-muted-foreground mt-2", children: "\u70B9\u51FB\u8F93\u5165\u6846\u6253\u5F00\u9009\u62E9\u5668\uFF0C\u65F6\u95F4\u9009\u62E9\u5668\u5728\u53F3\u4FA7\u663E\u793A" })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u53D7\u63A7\u6A21\u5F0F" }), _jsx(DatePicker, { showTime: true, value: dateTime1, onChange: (val, date) => {
+                                            setDateTime1(val);
+                                            console.log('选中日期时间:', val);
+                                            console.log('Date 对象:', date);
+                                        }, placeholder: "\u53D7\u63A7\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u9009\u4E2D\u7684\u503C: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: String(dateTime1 || '未选择') })] })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "3. \u8303\u56F4\u9009\u62E9 (Range Picker)" }), _jsxs("div", { className: "grid grid-cols-2 gap-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u57FA\u672C\u8303\u56F4\u9009\u62E9" }), _jsx(DatePicker, { mode: "range", value: emptyRange, onChange: (val) => {
+                                            setEmptyRange(val);
+                                            console.log('范围选择:', val);
+                                        }, placeholder: "\u9009\u62E9\u65E5\u671F\u8303\u56F4" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u503C: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: JSON.stringify(emptyRange || '未选择') })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u8303\u56F4\u9009\u62E9 + \u65F6\u95F4\u9009\u62E9" }), _jsx(DatePicker, { mode: "range", value: rangeWithTime, showTime: true, onChange: (val) => {
+                                            setRangeWithTime(val);
+                                            console.log('范围时间选择:', val);
+                                        }, placeholder: "\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u503C:", ' ', _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: JSON.stringify(rangeWithTime || '未选择') })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "\u9009\u62E9\u5F00\u59CB\u65E5\u671F\u540E\uFF0C\u53F3\u4FA7\u4F1A\u663E\u793A\u5F00\u59CB\u65F6\u95F4\u9009\u62E9\u5668\uFF1B\u9009\u62E9\u7ED3\u675F\u65E5\u671F\u540E\uFF0C\u4F1A\u663E\u793A\u7ED3\u675F\u65F6\u95F4\u9009\u62E9\u5668" })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "4. \u53D7\u63A7\u6A21\u5F0F" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u5355\u65E5\u671F\u53D7\u63A7" }), _jsx(DatePicker, { value: date1, onChange: (date, dateString) => {
+                                            setDate1(date);
+                                            console.log('选中日期:', date);
+                                            console.log('日期字符串:', dateString);
+                                        }, placeholder: "\u53D7\u63A7\u65E5\u671F\u9009\u62E9\u5668" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u9009\u4E2D\u7684\u65E5\u671F: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: String(date1 || '未选择') })] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u8303\u56F4\u53D7\u63A7" }), _jsx(DatePicker, { mode: "range", value: range, onChange: (val) => {
+                                            setRange(val);
+                                            console.log('范围变化:', val);
+                                        }, placeholder: "\u53D7\u63A7\u8303\u56F4\u9009\u62E9\u5668" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u503C: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: JSON.stringify(range || '未选择') })] })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "5. \u7981\u7528\u65E5\u671F" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u53EA\u80FD\u9009\u62E9\u4ECA\u5929\u53CA\u4EE5\u540E" }), _jsx(DatePicker, { disabledDate: (current) => current < startOfDay(new Date()), placeholder: "\u9009\u62E9\u672A\u6765\u65E5\u671F" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u8303\u56F4\u9009\u62E9\uFF08\u7981\u7528\u8FC7\u53BB\uFF09" }), _jsx(DatePicker, { mode: "range", disabledDate: (current) => current < startOfDay(new Date()), placeholder: "\u9009\u62E9\u672A\u6765\u8303\u56F4" })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "6. \u7981\u7528\u72B6\u6001" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u7981\u7528\u72B6\u6001" }), _jsx(DatePicker, { disabled: true, placeholder: "\u7981\u7528\u72B6\u6001" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u7981\u7528\u72B6\u6001 + \u6709\u503C" }), _jsx(DatePicker, { disabled: true, value: "2024-01-15", placeholder: "\u7981\u7528\u72B6\u6001" })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "7. \u81EA\u5B9A\u4E49\u683C\u5F0F" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u81EA\u5B9A\u4E49\u65E5\u671F\u683C\u5F0F" }), _jsx(DatePicker, { format: "yyyy/MM/dd", placeholder: "\u9009\u62E9\u65E5\u671F (yyyy/MM/dd)" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u81EA\u5B9A\u4E49\u65E5\u671F\u65F6\u95F4\u683C\u5F0F" }), _jsx(DatePicker, { showTime: true, format: "yyyy-MM-dd HH:mm:ss", placeholder: "\u9009\u62E9\u65E5\u671F\u65F6\u95F4 (yyyy-MM-dd HH:mm:ss)" })] })] })] }), _jsxs("section", { className: "space-y-4 border-t pt-6", children: [_jsx("h2", { className: "text-xl font-semibold", children: "API \u8BF4\u660E" }), _jsxs("div", { className: "bg-muted/50 p-4 rounded-lg space-y-2 text-sm", children: [_jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "showTime" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": boolean - \u662F\u5426\u663E\u793A\u65F6\u95F4\u9009\u62E9\u5668\uFF0C\u65F6\u95F4\u9009\u62E9\u5668\u4F1A\u663E\u793A\u5728\u65E5\u5386\u53F3\u4FA7" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "mode" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": 'single' | 'range' - \u9009\u62E9\u6A21\u5F0F\uFF0Csingle \u4E3A\u5355\u65E5\u671F\uFF0Crange \u4E3A\u65E5\u671F\u8303\u56F4" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "value" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": string | [string, string] - \u53D7\u63A7\u6A21\u5F0F\u7684\u503C" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "onChange" }), _jsxs("span", { className: "text-muted-foreground ml-2", children: [": (value?: DateChangeStrValue, date?: Date | DateRange) =", '>', " void - \u503C\u53D8\u5316\u56DE\u8C03"] })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "format" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": string - \u65E5\u671F\u683C\u5F0F\uFF0C\u9ED8\u8BA4 'yyyy-MM-dd'\uFF0CshowTime \u65F6\u4E3A 'yyyy-MM-dd HH:mm'" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "disabledDate" }), _jsxs("span", { className: "text-muted-foreground ml-2", children: [": (current: Date) =", '>', " boolean - \u7981\u7528\u65E5\u671F\u7684\u5224\u65AD\u51FD\u6570"] })] })] })] })] }));
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Hook for accessing the current Date component locale.
+ * Backed by Zustand, so no React Context is required.
+ */
+export declare const useDateLocale: () => import("./locales").DateLocaleConfig;
+//# sourceMappingURL=LocaleContext.d.ts.map

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

@@ -0,0 +1,8 @@
+import { useDateLocaleStore } from './dateLocaleStore';
+/**
+ * Hook for accessing the current Date component locale.
+ * Backed by Zustand, so no React Context is required.
+ */
+export const useDateLocale = () => {
+    return useDateLocaleStore((state) => state.locale);
+};

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { type DateLocaleConfig } from './locales';
+export interface DateLocaleProviderProps {
+    locale?: DateLocaleConfig;
+    children: ReactNode;
+}
+/**
+ * Date 组件文案配置 Provider
+ * 用于全局设置 Date 组件的文案
+ *
+ * @example
+ * ```tsx
+ * <DateLocaleProvider locale={customLocale}>
+ *   <App />
+ * </DateLocaleProvider>
+ * ```
+ */
+export declare function DateLocaleProvider({ locale, children }: DateLocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LocaleProvider.d.ts.map

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

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useDateLocaleStore } from './dateLocaleStore';
+import { defaultLocale } from './locales';
+/**
+ * Date 组件文案配置 Provider
+ * 用于全局设置 Date 组件的文案
+ *
+ * @example
+ * ```tsx
+ * <DateLocaleProvider locale={customLocale}>
+ *   <App />
+ * </DateLocaleProvider>
+ * ```
+ */
+export 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 _jsx(_Fragment, { children: children });
+}

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

@@ -0,0 +1,7 @@
+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;
+//# sourceMappingURL=TimePicker.d.ts.map

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '../Button';
+import { Input } from '../Input';
+export function TimePicker({ value, onChange, className }) {
+    // Derive time from value prop directly
+    const hours = value?.getHours() ?? 0;
+    const minutes = value?.getMinutes() ?? 0;
+    const handleTimeChange = (newHours, newMinutes) => {
+        const newDate = value ? new Date(value) : new Date();
+        newDate.setHours(newHours);
+        newDate.setMinutes(newMinutes);
+        newDate.setSeconds(0);
+        newDate.setMilliseconds(0);
+        onChange?.(newDate);
+    };
+    const incrementHours = () => {
+        const newHours = (hours + 1) % 24;
+        handleTimeChange(newHours, minutes);
+    };
+    const decrementHours = () => {
+        const newHours = (hours - 1 + 24) % 24;
+        handleTimeChange(newHours, minutes);
+    };
+    const incrementMinutes = () => {
+        const newMinutes = (minutes + 1) % 60;
+        handleTimeChange(hours, newMinutes);
+    };
+    const decrementMinutes = () => {
+        const newMinutes = (minutes - 1 + 60) % 60;
+        handleTimeChange(hours, newMinutes);
+    };
+    const handleHoursInput = (e) => {
+        const val = e.target.value.replace(/\D/g, '');
+        if (val === '') {
+            handleTimeChange(0, minutes);
+            return;
+        }
+        const num = parseInt(val, 10);
+        if (num >= 0 && num <= 23) {
+            handleTimeChange(num, minutes);
+        }
+    };
+    const handleMinutesInput = (e) => {
+        const val = e.target.value.replace(/\D/g, '');
+        if (val === '') {
+            handleTimeChange(hours, 0);
+            return;
+        }
+        const num = parseInt(val, 10);
+        if (num >= 0 && num <= 59) {
+            handleTimeChange(hours, num);
+        }
+    };
+    const handleHoursKeyDown = (e) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            incrementHours();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            decrementHours();
+        }
+    };
+    const handleMinutesKeyDown = (e) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            incrementMinutes();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            decrementMinutes();
+        }
+    };
+    const formatNumber = (num) => String(num).padStart(2, '0');
+    return (_jsxs("div", { className: cn('tc-ui-time-picker flex items-center justify-center gap-3 py-3', className), children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Button, { variant: "text", type: "button", onClick: incrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx(Input, { type: "text", value: formatNumber(hours), onChange: (_, e) => handleHoursInput(e), onKeyDown: handleHoursKeyDown, className: "w-12", inputClassName: cn('w-12 h-9 px-0 py-0 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx(Button, { variant: "text", type: "button", onClick: decrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx("div", { className: "text-lg font-medium text-foreground mb-1", children: ":" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Button, { variant: "text", type: "button", onClick: incrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx(Input, { type: "text", value: formatNumber(minutes), onChange: (_, e) => handleMinutesInput(e), onKeyDown: handleMinutesKeyDown, className: "w-12", inputClassName: cn('w-12 h-9 px-0 py-0 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx(Button, { variant: "text", type: "button", onClick: decrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] })] }));
+}

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

@@ -0,0 +1,6 @@
+export declare const ModeType: {
+    readonly Single: "single";
+    readonly Range: "range";
+};
+export type ModeType = (typeof ModeType)[keyof typeof ModeType];
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1,4 @@
+export const ModeType = {
+    Single: 'single',
+    Range: 'range',
+};

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

@@ -0,0 +1,16 @@
+import { type DateLocaleConfig } from './locales';
+type DateLocaleState = {
+    locale: DateLocaleConfig;
+    /**
+     * Merge partial updates into the current locale.
+     */
+    setLocale: (patch: Partial<DateLocaleConfig>) => void;
+    /**
+     * Replace the locale entirely.
+     */
+    replaceLocale: (nextLocale: DateLocaleConfig) => void;
+    resetLocale: () => void;
+};
+export declare const useDateLocaleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DateLocaleState>>;
+export {};
+//# sourceMappingURL=dateLocaleStore.d.ts.map

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

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+import { defaultLocale } from './locales';
+export const useDateLocaleStore = create((set) => ({
+    locale: defaultLocale,
+    setLocale: (patch) => set((state) => ({
+        locale: { ...state.locale, ...patch },
+    })),
+    replaceLocale: (nextLocale) => set(() => ({
+        locale: nextLocale,
+    })),
+    resetLocale: () => set(() => ({
+        locale: defaultLocale,
+    })),
+}));

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

@@ -0,0 +1,3 @@
+import type { DropdownPositioningStrategy } from '../hooks/useDropdownPositioning';
+export declare const getDatePickerDropdownPosition: DropdownPositioningStrategy;
+//# sourceMappingURL=dropdownPositioning.d.ts.map

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

@@ -0,0 +1,12 @@
+export const getDatePickerDropdownPosition = ({ anchorRect, contentRect, viewportHeight, offset, }) => {
+    const contentHeight = contentRect?.height ?? 360;
+    const spaceBelow = viewportHeight - anchorRect.bottom;
+    const spaceAbove = anchorRect.top;
+    const shouldFlipUp = spaceBelow < contentHeight && spaceAbove > spaceBelow;
+    return {
+        top: shouldFlipUp
+            ? anchorRect.top - contentHeight - offset
+            : anchorRect.bottom + offset,
+        left: anchorRect.left,
+    };
+};

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

@@ -0,0 +1,6 @@
+export * from './Date';
+export * from './dateLocaleStore';
+export { useDateLocale } from './LocaleContext';
+export * from './LocaleProvider';
+export * from './locales';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,5 @@
+export * from './Date';
+export * from './dateLocaleStore';
+export { useDateLocale } from './LocaleContext';
+export * from './LocaleProvider';
+export * from './locales';

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

@@ -0,0 +1,43 @@
+/**
+ * Date 组件文案配置
+ * 支持外部修改文案内容
+ */
+export interface DateLocaleConfig {
+    placeholder: string;
+    placeholderDateTime: string;
+    placeholderRange: string;
+    placeholderDateTimeRange: string;
+    weekDays: string[];
+    selectTime: string;
+    startTime: string;
+    endTime: string;
+    confirm: string;
+    monthFormat: string;
+    /**
+     * 范围模式 - 快捷选择面板标题
+     */
+    quickRanges: string;
+    /**
+     * 范围模式 - 各快捷范围文案
+     */
+    quickRangeToday: string;
+    quickRangeYesterday: string;
+    quickRangeLast7Days: string;
+    quickRangeLast30Days: string;
+    quickRangeThisMonth: string;
+    quickRangeLastYear: string;
+    clear: string;
+}
+/**
+ * 默认中文文案
+ */
+export declare const zhCNLocale: DateLocaleConfig;
+/**
+ * 默认英文文案
+ */
+export declare const enUSLocale: DateLocaleConfig;
+/**
+ * 默认使用中文文案
+ */
+export declare const defaultLocale: DateLocaleConfig;
+//# sourceMappingURL=locales.d.ts.map

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

@@ -0,0 +1,21 @@
+import { defaultEnglishResources, defaultLanguageResources } from '../../../../common/i18n';
+const dateDefaultLocale = defaultLanguageResources.components.date;
+const dateDefaultEnglishLocale = defaultEnglishResources.components.date;
+/**
+ * 默认中文文案
+ */
+export const zhCNLocale = {
+    ...dateDefaultLocale,
+    weekDays: [...dateDefaultLocale.weekDays],
+};
+/**
+ * 默认英文文案
+ */
+export const enUSLocale = {
+    ...dateDefaultEnglishLocale,
+    weekDays: [...dateDefaultEnglishLocale.weekDays],
+};
+/**
+ * 默认使用中文文案
+ */
+export const defaultLocale = zhCNLocale;

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type DrawerProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    lockScroll?: boolean;
+    closable?: boolean;
+    placement?: DrawerPlacement;
+    width?: number | string;
+    height?: number | string;
+    zIndex?: number;
+    /**
+     * @default document.body
+     */
+    renderNode?: HTMLElement | (() => HTMLElement);
+    /**
+     * 是否支持键盘关闭 默认开启
+     */
+    keyboard?: boolean;
+};
+export declare function Drawer({ open, onClose, title, children, footer, className, contentClassName, mask, maskClosable, lockScroll, closable, placement, width, height, renderNode, keyboard, zIndex, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Drawer.d.ts.map