@_tc/template-core 0.0.1 → 0.0.2

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import noResult from '@tc/ui-react/assets/table/no-result.svg';
+import { useI18n } from '../../i18n';
+import { useMemo, useState } from 'react';
+import { Checkbox } from '../Checkbox';
+import { Pagination } from '../Pagination';
+import { Skeleton } from '../Skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+import { ActionBtn } from './ActionBtn';
+const defaultRowKey = 'id';
+const rowSelectionColumnWidth = 48;
+const actionColumnWidth = 96;
+const zeroOffset = '0px';
+const 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;
+};
+const renderCellContent = (column, value, record, rowIndex, hasAction) => {
+    if (hasAction && column.actions) {
+        const actions = typeof column.actions === 'function' ? column.actions(value, record, rowIndex) : column.actions;
+        return (_jsx("div", { className: "flex w-full min-w-0 justify-center", children: _jsx(ActionBtn, { actions: actions, overflow: column.actionOverflow ?? 'auto' }) }));
+    }
+    return column.render ? column.render(value, record, rowIndex) : value;
+};
+const getColumnWidth = (column, defaultColumnWidth) => {
+    const hasAction = column.isAction ?? column.key === 'action';
+    if (column.width) {
+        return column.width;
+    }
+    return `${hasAction ? actionColumnWidth : defaultColumnWidth}px`;
+};
+const 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 };
+};
+const getFixedOffset = (widths) => {
+    if (widths.length === 0)
+        return zeroOffset;
+    if (widths.length === 1)
+        return widths[0];
+    return `calc(${widths.join(' + ')})`;
+};
+export 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' : undefined),
+                width: getColumnWidth(column, defaultColumnWidth),
+            };
+        });
+        const leftOffsetWidths = rowSelection ? [`${rowSelectionColumnWidth}px`] : [];
+        const leftOffsets = 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 = 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)
+                    : undefined,
+        }));
+    }, [columns, defaultColumnWidth, rowSelection]);
+    return (_jsxs("div", { className: "tc-ui-data-table bg-background rounded-[20px] overflow-hidden relative", children: [_jsxs(Table, { containerClassName: "rounded-b-none overflow-x-auto", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [rowSelection && (_jsxs(TableHead, { fixed: "left", style: {
+                                        width: '48px',
+                                        minWidth: '48px',
+                                    }, children: [rowSelection.beforeCheckboxNode, _jsx(Checkbox, { checked: allChecked, "aria-label": "Select all rows", indeterminate: partiallyChecked, onChange: (_, event) => handleSelectAllChange(event) })] })), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+                                    const hasAction = column.isAction ?? column.key === 'action';
+                                    return (_jsx(TableHead, { isAction: hasAction, fixed: fixed, fixedOffset: fixedOffset, style: getColumnStyle(column, defaultColumnWidth), children: column.title }, column.key));
+                                })] }) }), _jsx(TableBody, { children: data.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (rowSelection ? 1 : 0), className: "text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center w-full gap-2.5", children: [_jsx("img", { src: noResult, alt: t('components.dataTable.noData'), className: " w-24 h-24" }), t('components.dataTable.noData')] }) }) })) : (data.map((record, rowIndex) => {
+                            const absoluteRowIndex = pageStartIndex + rowIndex;
+                            const recordKey = getRowKey(record, absoluteRowIndex, rowKey);
+                            return (_jsxs(TableRow, { children: [rowSelection && (_jsx(TableCell, { fixed: "left", style: {
+                                            width: '48px',
+                                            minWidth: '48px',
+                                        }, children: _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 (_jsx(TableCell, { isAction: hasAction, fixed: fixed, fixedOffset: fixedOffset, style: getColumnStyle(column, defaultColumnWidth), children: renderCellContent(column, value, record, rowIndex, hasAction) }, column.key));
+                                    })] }, recordKey));
+                        })) })] }), loading && (_jsx("div", { className: "absolute inset-0 rounded-[20px] bg-background/70 text-sm text-gray-600 z-[100]", children: _jsx(Skeleton, { mode: "tableloading", rows: 8 }) })), showPagination && (_jsx("div", { className: "px-6 pb-6 mt-6", children: _jsx(Pagination, { ...pagination }) }))] }));
+}
+export { ActionBtn } from './ActionBtn';

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

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

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

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+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';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Button } from '../Button';
+import { ModeType } from './data';
+import { useDateLocale } from './LocaleContext';
+import { TimePicker } from './TimePicker';
+export function Calendar({ mode = ModeType.Single, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges, }) {
+    const contextLocale = useDateLocale();
+    const locale = useMemo(() => ({ ...contextLocale, ...customLocale }), [contextLocale, customLocale]);
+    // Pending value for showTime mode (confirmed on button click)
+    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 new Date();
+    });
+    // 悬停日期（用于范围选择预览）
+    const [hoverDate, setHoverDate] = useState(null);
+    // 生成日历网格数据
+    const days = useMemo(() => {
+        const monthStart = startOfMonth(currentMonth);
+        const monthEnd = endOfMonth(monthStart);
+        const startDate = startOfWeek(monthStart, { locale: zhCN, weekStartsOn: 0 });
+        const endDate = endOfWeek(monthEnd, { locale: zhCN, weekStartsOn: 0 });
+        const daysInGrid = eachDayOfInterval({
+            start: startDate,
+            end: endDate,
+        });
+        if (daysInGrid.length < 42) {
+            const remaining = 42 - daysInGrid.length;
+            const lastDay = daysInGrid[daysInGrid.length - 1];
+            const extraDays = eachDayOfInterval({
+                start: new Date(lastDay.getTime() + 86400000),
+                end: new Date(lastDay.getTime() + remaining * 86400000),
+            });
+            daysInGrid.push(...extraDays);
+        }
+        return daysInGrid;
+    }, [currentMonth]);
+    const weekDays = locale.weekDays;
+    const isRangeMode = mode === ModeType.Range;
+    const builtInQuickRanges = useMemo(() => [
+        {
+            label: locale.quickRangeToday,
+            getRange: () => {
+                const today = new Date();
+                return { from: startOfDay(today), to: endOfDay(today) };
+            },
+        },
+        {
+            label: locale.quickRangeYesterday,
+            getRange: () => {
+                const yesterday = subDays(new Date(), 1);
+                return { from: startOfDay(yesterday), to: endOfDay(yesterday) };
+            },
+        },
+        {
+            label: locale.quickRangeLast7Days,
+            getRange: () => {
+                const end = new Date();
+                const start = subDays(end, 6);
+                return { from: startOfDay(start), to: endOfDay(end) };
+            },
+        },
+        {
+            label: locale.quickRangeLast30Days,
+            getRange: () => {
+                const end = new Date();
+                const start = subDays(end, 29);
+                return { from: startOfDay(start), to: endOfDay(end) };
+            },
+        },
+        {
+            label: locale.quickRangeThisMonth,
+            getRange: () => {
+                const today = new Date();
+                return { from: startOfMonth(today), to: endOfMonth(today) };
+            },
+        },
+        {
+            label: locale.quickRangeLastYear,
+            getRange: () => {
+                const end = new Date();
+                const start = subYears(end, 1);
+                return { from: startOfDay(start), to: endOfDay(end) };
+            },
+        },
+    ], [locale]);
+    const quickRangePresets = quickRanges && quickRanges.length > 0 ? quickRanges : builtInQuickRanges;
+    const handleQuickRangeClick = (getRange) => {
+        const range = getRange();
+        setCurrentMonth(range.from ?? 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;
+        // Preserve time when showTime is enabled
+        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) {
+            // In showTime mode, store in pending value
+            if (mode === ModeType.Single) {
+                setPendingValue(dateWithTime);
+            }
+            else {
+                const range = pendingValue || { from: undefined, to: undefined };
+                if (!range.from || (range.from && range.to)) {
+                    setPendingValue({ from: dateWithTime, to: undefined });
+                }
+                else {
+                    if (isBefore(dateWithTime, range.from)) {
+                        setPendingValue({ from: dateWithTime, to: range.from });
+                    }
+                    else {
+                        setPendingValue({ from: range.from, to: dateWithTime });
+                    }
+                }
+            }
+        }
+        else {
+            // Without showTime, directly call onChange
+            if (mode === ModeType.Single) {
+                onChange?.(dateWithTime);
+            }
+            else {
+                const range = value || { from: undefined, to: undefined };
+                if (!range.from || (range.from && range.to)) {
+                    onChange?.({ from: dateWithTime, to: undefined });
+                }
+                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 compareValue = showTime ? pendingValue : value;
+        const range = compareValue;
+        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 (_jsxs("div", { className: cn('tc-ui-calendar p-3', showTime || isRangeMode ? 'flex flex-col' : 'w-[280px]', className), children: [_jsxs("div", { className: cn('flex', (showTime || isRangeMode) && 'gap-4'), children: [isRangeMode && (_jsxs("div", { className: "w-[140px] pr-3 border-r border-border", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: locale.quickRanges }), _jsx("div", { className: "space-y-1", children: quickRangePresets.map((preset) => (_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))) })] })), _jsxs("div", { className: "w-[280px]", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "text", onClick: prevYear, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronsLeft, { size: 16 }) }), _jsx(Button, { variant: "text", onClick: prevMonth, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: "font-medium text-sm", children: format(currentMonth, locale.monthFormat, { locale: zhCN }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "text", onClick: nextMonth, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronRight, { size: 16 }) }), _jsx(Button, { variant: "text", onClick: nextYear, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronsRight, { size: 16 }) })] })] }), _jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day) => (_jsx("div", { className: "text-center text-xs text-muted-foreground font-medium py-1", children: day }, day))) }), _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, new Date());
+                                    const isCurrentMonth = isSameMonth(date, currentMonth);
+                                    const isDisabled = disabledDate?.(date);
+                                    return (_jsx("div", { className: "flex justify-center p-0", children: _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 && (_jsx("div", { className: "flex flex-col border-l border-border pl-4", children: mode === ModeType.Single ? (_jsxs("div", { className: "flex flex-col justify-center h-full", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-3 text-center", children: locale.selectTime }), _jsx(TimePicker, { value: pendingValue instanceof Date ? pendingValue : undefined, onChange: handleTimeChangeInternal, className: "border-0" })] })) : (
+                        // Range mode: show two time pickers
+                        _jsxs("div", { className: "space-y-4 flex flex-col justify-center h-full", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center", children: locale.startTime }), _jsx(TimePicker, { value: pendingValue && 'from' in pendingValue && pendingValue.from ? pendingValue.from : undefined, onChange: (newDate) => {
+                                                const range = pendingValue;
+                                                setPendingValue({
+                                                    from: newDate,
+                                                    to: range?.to,
+                                                });
+                                            }, className: "border-0" })] }), pendingValue && 'from' in pendingValue && pendingValue.to && (_jsxs("div", { className: "pt-4 border-t border-border", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center", children: locale.endTime }), _jsx(TimePicker, { value: pendingValue.to, onChange: (newDate) => {
+                                                const range = pendingValue;
+                                                setPendingValue({
+                                                    from: range?.from,
+                                                    to: newDate,
+                                                });
+                                            }, className: "border-0" })] }))] })) }))] }), showTime && (_jsx("div", { className: "pt-3 mt-3 border-t border-border", children: _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 }) }))] }));
+}

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

@@ -0,0 +1,38 @@
+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;
+    /**
+     * @default 'yyyy-MM-dd'
+     */
+    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[];
+    /** 自定义弹出容器，不传则默认挂载到 document.body */
+    getPopupContainer?: () => HTMLElement;
+};
+declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { DatePicker };
+export type { DateRange };
+//# sourceMappingURL=Date.d.ts.map