lumen-plus 0.0.1

package/dist/components/DatePicker/DatePicker.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+    import type { DatePickerType, DatePickerSize } from './types'
+    import { onMount, onDestroy } from 'svelte'
+    import { createCenteredDropdownTransition } from '../../utils'
+    import Icon from '../Icon'
+    import { Calendar, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, X } from 'lucide'
+
+    interface DatePickerProps {
+        modelValue?: Date | string | null
+        type?: DatePickerType
+        placeholder?: string
+        disabled?: boolean
+        clearable?: boolean
+        size?: DatePickerSize
+        format?: string
+        valueFormat?: string
+        disabledDate?: (date: Date) => boolean
+        showMenuArrow?: boolean
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(null),
+        type = 'date',
+        placeholder = '选择日期',
+        disabled = false,
+        clearable = false,
+        size = 'default',
+        format = 'YYYY-MM-DD',
+        valueFormat,
+        disabledDate,
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: DatePickerProps = $props()
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let pickerRef: HTMLDivElement | null = null
+    let currentYear = $state(new Date().getFullYear())
+    let currentMonth = $state(new Date().getMonth())
+
+    const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+    // 优化: 移除冗余的箭头函数包装
+    const selectedDate = $derived(modelValue ? (modelValue instanceof Date ? modelValue : new Date(modelValue)) : null)
+
+    const displayValue = $derived.by(() => {
+        if (!selectedDate) return ''
+        const y = selectedDate.getFullYear()
+        const m = String(selectedDate.getMonth() + 1).padStart(2, '0')
+        const d = String(selectedDate.getDate()).padStart(2, '0')
+        return format.replace('YYYY', String(y)).replace('MM', m).replace('DD', d)
+    })
+
+    const daysInMonth = $derived.by(() => {
+        const firstDay = new Date(currentYear, currentMonth, 1)
+        const lastDay = new Date(currentYear, currentMonth + 1, 0)
+        const days: { date: Date; isCurrentMonth: boolean }[] = []
+        const startDay = firstDay.getDay()
+
+        for (let i = startDay - 1; i >= 0; i--) {
+            days.push({ date: new Date(currentYear, currentMonth, -i), isCurrentMonth: false })
+        }
+        for (let i = 1; i <= lastDay.getDate(); i++) {
+            days.push({ date: new Date(currentYear, currentMonth, i), isCurrentMonth: true })
+        }
+        const remaining = 42 - days.length
+        for (let i = 1; i <= remaining; i++) {
+            days.push({ date: new Date(currentYear, currentMonth + 1, i), isCurrentMonth: false })
+        }
+        return days
+    })
+
+    const classes = $derived(`lm-date-picker lm-date-picker--${size}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (visible && pickerRef && !pickerRef.contains(e.target as Node)) visible = false
+    }
+
+    const toggle = (): void => {
+        if (disabled) return
+        visible = !visible
+        if (visible && selectedDate) {
+            currentYear = selectedDate.getFullYear()
+            currentMonth = selectedDate.getMonth()
+        }
+    }
+
+    const prevMonth = (): void => {
+        if (currentMonth === 0) {
+            currentMonth = 11
+            currentYear--
+        } else {
+            currentMonth--
+        }
+    }
+
+    const prevYear = (): void => {
+        currentYear--
+    }
+
+    const nextMonth = (): void => {
+        if (currentMonth === 11) {
+            currentMonth = 0
+            currentYear++
+        } else {
+            currentMonth++
+        }
+    }
+
+    const nextYear = (): void => {
+        currentYear++
+    }
+
+    const formatDate = (date: Date, fmt: string): string => {
+        const y = date.getFullYear()
+        const m = String(date.getMonth() + 1).padStart(2, '0')
+        const d = String(date.getDate()).padStart(2, '0')
+        return fmt.replace('YYYY', String(y)).replace('MM', m).replace('DD', d)
+    }
+
+    const selectDate = (date: Date): void => {
+        if (disabledDate?.(date)) return
+        modelValue = valueFormat ? formatDate(date, valueFormat) : date
+        visible = false
+    }
+
+    const isSelected = (date: Date): boolean => {
+        if (!selectedDate) return false
+        return date.getFullYear() === selectedDate.getFullYear() && date.getMonth() === selectedDate.getMonth() && date.getDate() === selectedDate.getDate()
+    }
+
+    const isToday = (date: Date): boolean => {
+        const today = new Date()
+        return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = null
+    }
+
+    const dropdownTransition = $derived(createCenteredDropdownTransition(reduceMotion))
+
+    onMount(() => {
+        document.addEventListener('click', handleClickOutside)
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+    onDestroy(() => document.removeEventListener('click', handleClickOutside))
+</script>
+
+<div class={classes} bind:this={pickerRef} {...attrs}>
+    <button type="button" class="lm-date-picker__trigger" class:is-focus={visible} onclick={toggle} {disabled}>
+        <Icon icon={Calendar} size={14} class="lm-date-picker__prefix" />
+        <span class="lm-date-picker__input" class:is-placeholder={!displayValue}>{displayValue || placeholder}</span>
+        {#if clearable && modelValue && !disabled}
+            <span
+                class="lm-date-picker__clear"
+                role="button"
+                tabindex="0"
+                onclick={handleClear}
+                onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && handleClear(e as unknown as MouseEvent)}
+                aria-label="清空"><Icon icon={X} size={14} /></span
+            >
+        {/if}
+    </button>
+
+    {#if visible}
+        <div class="lm-date-picker__dropdown" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-date-picker__menu-arrow" aria-hidden="true"></div>
+            {/if}
+            <div class="lm-date-picker__header">
+                <div class="lm-date-picker__nav-group">
+                    <button type="button" class="lm-date-picker__nav" onclick={prevYear} aria-label="上一年"><Icon icon={ChevronsLeft} size={16} /></button>
+                    <button type="button" class="lm-date-picker__nav" onclick={prevMonth} aria-label="上个月"><Icon icon={ChevronLeft} size={14} /></button>
+                </div>
+                <span class="lm-date-picker__title">{currentYear}年 {currentMonth + 1}月</span>
+                <div class="lm-date-picker__nav-group">
+                    <button type="button" class="lm-date-picker__nav" onclick={nextMonth} aria-label="下个月"><Icon icon={ChevronRight} size={14} /></button>
+                    <button type="button" class="lm-date-picker__nav" onclick={nextYear} aria-label="下一年"><Icon icon={ChevronsRight} size={16} /></button>
+                </div>
+            </div>
+            <div class="lm-date-picker__body">
+                <div class="lm-date-picker__week">
+                    {#each weekDays as day}<span class="lm-date-picker__week-day">{day}</span>{/each}
+                </div>
+                <div class="lm-date-picker__days">
+                    {#each daysInMonth as { date, isCurrentMonth }}
+                        <button
+                            type="button"
+                            class="lm-date-picker__day{!isCurrentMonth ? ' is-other-month' : ''}{isSelected(date) ? ' is-selected' : ''}{isToday(date) ? ' is-today' : ''}{disabledDate?.(date)
+                                ? ' is-disabled'
+                                : ''}"
+                            disabled={disabledDate?.(date)}
+                            onclick={() => selectDate(date)}>{date.getDate()}</button
+                        >
+                    {/each}
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/components/DatePicker/DatePicker.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { DatePickerType, DatePickerSize } from './types';
+interface DatePickerProps {
+    modelValue?: Date | string | null;
+    type?: DatePickerType;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    size?: DatePickerSize;
+    format?: string;
+    valueFormat?: string;
+    disabledDate?: (date: Date) => boolean;
+    showMenuArrow?: boolean;
+    class?: string;
+}
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "modelValue">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from './DatePicker.svelte';
+export { DatePicker };
+export type { DatePickerProps, DatePickerType, DatePickerSize } from './types';
+export default DatePicker;

package/dist/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+import DatePicker from './DatePicker.svelte';
+export { DatePicker };
+export default DatePicker;

package/dist/components/DatePicker/types.d.ts

@@ -0,0 +1,29 @@
+/** DatePicker 类型 */
+export type DatePickerType = 'date' | 'month' | 'year' | 'week';
+/** DatePicker 尺寸 */
+export type DatePickerSize = 'small' | 'default' | 'large';
+/** DatePicker 属性 */
+export interface DatePickerProps {
+    /** 绑定值 */
+    modelValue?: Date | string | null;
+    /** 类型 */
+    type?: DatePickerType;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 尺寸 */
+    size?: DatePickerSize;
+    /** 格式化 */
+    format?: string;
+    /** 值格式化 */
+    valueFormat?: string;
+    /** 禁用日期 */
+    disabledDate?: (date: Date) => boolean;
+    /** 弹层箭头（Popconfirm 风格） */
+    showMenuArrow?: boolean;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/DatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DateTimePicker/DateTimePicker.svelte

@@ -0,0 +1,387 @@
+<script lang="ts">
+    import { createDropdownTransition } from '../../utils'
+    import { onDestroy, onMount } from 'svelte'
+    import Icon from '../Icon'
+    import { Calendar, ChevronLeft, ChevronRight, X, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide'
+
+    import type { DateTimePickerProps } from './types'
+
+    const pad2 = (n: number): string => String(n).padStart(2, '0')
+
+    const parseTimeParts = (val: string): { h: string; m: string; s: string } => {
+        if (!val) return { h: '00', m: '00', s: '00' }
+        const [h = '00', m = '00', s = '00'] = val.split(':')
+        return {
+            h: h.padStart(2, '0').slice(-2),
+            m: m.padStart(2, '0').slice(-2),
+            s: s.padStart(2, '0').slice(-2),
+        }
+    }
+
+    const formatDate = (date: Date, fmt: string): string => {
+        const y = date.getFullYear()
+        const m = pad2(date.getMonth() + 1)
+        const d = pad2(date.getDate())
+        return fmt.replace('YYYY', String(y)).replace('MM', m).replace('DD', d)
+    }
+
+    const formatTime = (date: Date, timeFormat: string): string => {
+        const h = pad2(date.getHours())
+        const m = pad2(date.getMinutes())
+        const s = pad2(date.getSeconds())
+        return timeFormat.includes('ss') ? `${h}:${m}:${s}` : `${h}:${m}`
+    }
+
+    const normalizeTimeInput = (input: string, timeFormat: string): string => {
+        const raw = (input ?? '').trim()
+        if (!raw) return ''
+        const wantSeconds = timeFormat.includes('ss')
+        const parts = raw.split(':')
+        if (parts.length < 2 || parts.length > 3) return ''
+
+        const h = Number.parseInt(parts[0] ?? '0', 10)
+        const m = Number.parseInt(parts[1] ?? '0', 10)
+        const s = Number.parseInt(parts[2] ?? '0', 10)
+        if (!Number.isFinite(h) || !Number.isFinite(m) || (!wantSeconds && parts.length === 3 && !Number.isFinite(s))) return ''
+        if (h < 0 || h > 23 || m < 0 || m > 59) return ''
+        if (wantSeconds && (s < 0 || s > 59)) return ''
+        return wantSeconds ? `${pad2(h)}:${pad2(m)}:${pad2(s)}` : `${pad2(h)}:${pad2(m)}`
+    }
+
+    const toDate = (val: Date | string): Date => (val instanceof Date ? val : new Date(val))
+
+    const parseDateInput = (input: string): Date | null => {
+        const raw = (input ?? '').trim()
+        if (!raw) return null
+        const parts = raw.replace(/\//g, '-').split('-')
+        if (parts.length !== 3) return null
+        const y = Number.parseInt(parts[0] ?? '0', 10)
+        const m = Number.parseInt(parts[1] ?? '0', 10)
+        const d = Number.parseInt(parts[2] ?? '0', 10)
+        if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null
+        if (y < 1000 || m < 1 || m > 12 || d < 1 || d > 31) return null
+        const dt = new Date(y, m - 1, d)
+        // reject overflow dates like 2026-02-31
+        if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== d) return null
+        return dt
+    }
+
+    const combine = (dateOnly: Date, t: { h: string; m: string; s: string }, timeFormat: string): Date => {
+        const next = new Date(dateOnly)
+        const h = Number.parseInt(t.h, 10)
+        const m = Number.parseInt(t.m, 10)
+        const s = Number.parseInt(t.s, 10)
+        next.setHours(Number.isFinite(h) ? h : 0, Number.isFinite(m) ? m : 0, timeFormat.includes('ss') && Number.isFinite(s) ? s : 0, 0)
+        return next
+    }
+
+    let {
+        modelValue = $bindable<Date | string | null>(null),
+        placeholder = '选择日期时间',
+        disabled = false,
+        clearable = false,
+        readonly = false,
+        size = 'default',
+        dateFormat = 'YYYY-MM-DD',
+        datePlaceholder = '选择日期',
+        timeFormat = 'HH:mm:ss',
+        defaultTime = '00:00:00',
+        timePlaceholder = '选择时间',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: DateTimePickerProps = $props()
+
+    const showSeconds = $derived(timeFormat.includes('ss'))
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let rootRef: HTMLDivElement | null = $state(null)
+
+    let currentYear = $state(new Date().getFullYear())
+    let currentMonth = $state(new Date().getMonth())
+
+    let tempDate = $state<Date | null>(null)
+    let tempDateText = $state('')
+    let tempTime = $state('')
+
+    const dropdownId = `lm-date-time-picker-dropdown-${Math.random().toString(36).slice(2)}`
+
+    const selectedCommitted = $derived(modelValue ? toDate(modelValue) : null)
+
+    const displayValue = $derived.by(() => {
+        if (!selectedCommitted) return ''
+        const dateStr = formatDate(selectedCommitted, dateFormat)
+        const timeStr = formatTime(selectedCommitted, timeFormat)
+        return `${dateStr} ${timeStr}`
+    })
+
+    const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+    const daysInMonth = $derived.by(() => {
+        const firstDay = new Date(currentYear, currentMonth, 1)
+        const lastDay = new Date(currentYear, currentMonth + 1, 0)
+        const days: { date: Date; isCurrentMonth: boolean }[] = []
+        const startDay = firstDay.getDay()
+
+        for (let i = startDay - 1; i >= 0; i--) {
+            days.push({ date: new Date(currentYear, currentMonth, -i), isCurrentMonth: false })
+        }
+        for (let i = 1; i <= lastDay.getDate(); i++) {
+            days.push({ date: new Date(currentYear, currentMonth, i), isCurrentMonth: true })
+        }
+        const remaining = 42 - days.length
+        for (let i = 1; i <= remaining; i++) {
+            days.push({ date: new Date(currentYear, currentMonth + 1, i), isCurrentMonth: false })
+        }
+        return days
+    })
+
+    const isSelected = (date: Date): boolean => {
+        if (!tempDate) return false
+        return date.getFullYear() === tempDate.getFullYear() && date.getMonth() === tempDate.getMonth() && date.getDate() === tempDate.getDate()
+    }
+
+    const isToday = (date: Date): boolean => {
+        const today = new Date()
+        return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()
+    }
+
+    const openWithCommittedOrNow = (): void => {
+        const base = selectedCommitted ?? new Date()
+        tempDate = new Date(base.getFullYear(), base.getMonth(), base.getDate())
+        tempDateText = formatDate(tempDate, dateFormat)
+
+        if (selectedCommitted) tempTime = formatTime(selectedCommitted, timeFormat)
+        else tempTime = normalizeTimeInput(defaultTime, timeFormat) || (showSeconds ? '00:00:00' : '00:00')
+
+        currentYear = base.getFullYear()
+        currentMonth = base.getMonth()
+    }
+
+    const toggle = (): void => {
+        if (disabled || readonly) return
+        const next = !visible
+        visible = next
+        if (next) openWithCommittedOrNow()
+    }
+
+    const closeAndRevert = (): void => {
+        visible = false
+        // revert temp state next time open
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') closeAndRevert()
+        else if (e.key === 'Enter' || e.key === ' ') toggle()
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (visible && rootRef && !rootRef.contains(e.target as Node)) closeAndRevert()
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = null
+        closeAndRevert()
+    }
+
+    const prevMonth = (): void => {
+        if (currentMonth === 0) {
+            currentMonth = 11
+            currentYear--
+        } else {
+            currentMonth--
+        }
+    }
+
+    const prevYear = (): void => {
+        currentYear--
+    }
+
+    const nextMonth = (): void => {
+        if (currentMonth === 11) {
+            currentMonth = 0
+            currentYear++
+        } else {
+            currentMonth++
+        }
+    }
+
+    const nextYear = (): void => {
+        currentYear++
+    }
+
+    const handleSelectDate = (date: Date): void => {
+        tempDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+        tempDateText = formatDate(tempDate, dateFormat)
+    }
+
+    const setNow = (): void => {
+        const now = new Date()
+        tempDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        tempDateText = formatDate(tempDate, dateFormat)
+
+        tempTime = formatTime(now, timeFormat)
+
+        currentYear = now.getFullYear()
+        currentMonth = now.getMonth()
+    }
+
+    const normalizedDate = $derived.by(() => parseDateInput(tempDateText) ?? tempDate)
+
+    const isDateValid = $derived.by(() => !!normalizedDate)
+
+    const isTimeValid = $derived.by(() => {
+        const normalized = normalizeTimeInput(tempTime || defaultTime, timeFormat)
+        return !!normalized
+    })
+
+    const handleConfirm = (): void => {
+        const normalized = normalizeTimeInput(tempTime || defaultTime, timeFormat)
+        const dateToUse = normalizedDate
+        if (!dateToUse || !normalized) return
+        modelValue = combine(dateToUse, parseTimeParts(normalized), timeFormat)
+        visible = false
+    }
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('click', handleClickOutside)
+    })
+
+    const classes = $derived(['lm-date-time-picker', `lm-date-time-picker--${size}`, disabled && 'is-disabled', cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={rootRef} class={classes} {...attrs}>
+    <div
+        class="lm-date-time-picker__trigger"
+        class:is-focus={visible}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-controls={dropdownId}
+        aria-expanded={visible}
+        aria-disabled={disabled}
+        onclick={toggle}
+        onkeydown={handleKeydown}
+    >
+        <span class="lm-date-time-picker__prefix">
+            <Icon icon={Calendar} size={14} />
+        </span>
+        <span class="lm-date-time-picker__value" class:is-placeholder={!displayValue}>
+            {displayValue || placeholder}
+        </span>
+
+        {#if clearable && modelValue && !disabled}
+            <button type="button" class="lm-date-time-picker__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-date-time-picker__arrow" class:is-open={visible} aria-hidden="true">
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible}
+        <div id={dropdownId} class="lm-date-time-picker__dropdown" role="dialog" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-date-time-picker__menu-arrow" aria-hidden="true"></div>
+            {/if}
+
+            <div class="lm-date-time-picker__panel">
+                <div class="lm-date-time-picker__date-panel">
+                    <div class="lm-date-time-picker__time-inputs" aria-label="日期时间输入">
+                        <input
+                            class="lm-date-time-picker__date-input"
+                            type="text"
+                            value={tempDateText}
+                            placeholder={datePlaceholder}
+                            oninput={(e: Event) => (tempDateText = (e.currentTarget as HTMLInputElement).value)}
+                            onblur={() => {
+                                const parsed = parseDateInput(tempDateText)
+                                if (parsed) {
+                                    tempDate = parsed
+                                    tempDateText = formatDate(parsed, dateFormat)
+                                    currentYear = parsed.getFullYear()
+                                    currentMonth = parsed.getMonth()
+                                }
+                            }}
+                        />
+                        <input
+                            class="lm-date-time-picker__time-input"
+                            type="text"
+                            value={tempTime}
+                            placeholder={timePlaceholder}
+                            oninput={(e: Event) => (tempTime = (e.currentTarget as HTMLInputElement).value)}
+                            onblur={() => {
+                                const normalized = normalizeTimeInput(tempTime, timeFormat)
+                                if (normalized) tempTime = normalized
+                            }}
+                        />
+                    </div>
+
+                    <div class="lm-date-time-picker__header">
+                        <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+                            <button type="button" class="lm-date-time-picker__nav" onclick={prevYear} aria-label="上一年">
+                                <Icon icon={ChevronsLeft} size={16} />
+                            </button>
+                            <button type="button" class="lm-date-time-picker__nav" onclick={prevMonth} aria-label="上个月">
+                                <Icon icon={ChevronLeft} size={14} />
+                            </button>
+                        </div>
+                        <span class="lm-date-time-picker__title">{currentYear}年 {currentMonth + 1}月</span>
+                        <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+                            <button type="button" class="lm-date-time-picker__nav" onclick={nextMonth} aria-label="下个月">
+                                <Icon icon={ChevronRight} size={14} />
+                            </button>
+                            <button type="button" class="lm-date-time-picker__nav" onclick={nextYear} aria-label="下一年">
+                                <Icon icon={ChevronsRight} size={16} />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="lm-date-time-picker__body">
+                        <div class="lm-date-time-picker__week">
+                            {#each weekDays as day}
+                                <span class="lm-date-time-picker__week-day">{day}</span>
+                            {/each}
+                        </div>
+                        <div class="lm-date-time-picker__days">
+                            {#each daysInMonth as item (item.date.toISOString())}
+                                <button
+                                    type="button"
+                                    class="lm-date-time-picker__day"
+                                    class:is-other={!item.isCurrentMonth}
+                                    class:is-today={isToday(item.date)}
+                                    class:is-selected={isSelected(item.date)}
+                                    onclick={() => handleSelectDate(item.date)}
+                                >
+                                    {item.date.getDate()}
+                                </button>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="lm-date-time-picker__footer">
+                <button type="button" class="lm-date-time-picker__btn lm-date-time-picker__btn--text" onclick={setNow}>此刻</button>
+                <button type="button" class="lm-date-time-picker__btn" onclick={handleConfirm} disabled={!isDateValid || !isTimeValid}>确定</button>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/components/DateTimePicker/DateTimePicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DateTimePickerProps } from './types';
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "modelValue">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/components/DateTimePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DateTimePicker from './DateTimePicker.svelte';
+export default DateTimePicker;
+export { DateTimePicker };
+export type { DateTimePickerProps } from './types';

package/dist/components/DateTimePicker/index.js

@@ -0,0 +1,3 @@
+import DateTimePicker from './DateTimePicker.svelte';
+export default DateTimePicker;
+export { DateTimePicker };