4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1577,import React, { useState } from 'react'; import { addMonths, calendarStyleKeys, getCalendarDayModifiers, getCalendarFirstSelectedDate, getMonthCaption, getMonthGrid, getWeekdayLabels, selectCalendarDay, startOfMonth, } from '../lib/core'; import type { CalendarBaseProps, CalendarDayModifiers, CalendarSelection } from '../lib/core'; import styles from './calendar.module.scss'; export interface CalendarProps extends Omit, 'onSelect'>, CalendarBaseProps {} export interface CalendarDayButtonProps extends React.ButtonHTMLAttributes { /** 日期 */ date: Date; /** 修饰状态 */ modifiers: CalendarDayModifiers; } /** * 单个日期按钮（独立导出，供自定义网格使用） */ const CalendarDayButton = React.forwardRef(({ date, modifiers, className = '', children, ...props }, ref) => { const classes = [styles[calendarStyleKeys.dayButton], className].filter(Boolean).join(' '); return ( ); }); CalendarDayButton.displayName = 'CalendarDayButton'; /** * Calendar 日历组件（单选 / 多选 / 范围选择） */ const Calendar = React.forwardRef( ({ className = '', mode = 'single', selected, defaultSelected, defaultMonth, showOutsideDays = true, disabled, onSelect, ...props }, ref) => { const [internalSelected, setInternalSelected] = useState(defaultSelected); const currentSelected = selected !== undefined ? selected : internalSelected; const [month, setMonth] = useState(() => { if (defaultMonth) { return startOfMonth(defaultMonth); } const firstSelected = getCalendarFirstSelectedDate(defaultSelected); if (firstSelected) { return startOfMonth(firstSelected); } return startOfMonth(new Date()); }); function handleSelect(day: Date) { if (disabled?.(day)) { return; } const next = selectCalendarDay(mode, currentSelected, day); if (selected === undefined) { setInternalSelected(next); } onSelect?.(next); } const grid = getMonthGrid(month, showOutsideDays); const weekdays = getWeekdayLabels(); return (

{getMonthCaption(month)}

{weekdays.map((label) => (

{label}

))}

{grid.map((week, weekIndex) => (

{week.map((day, dayIndex) => { if (!day) { return

; } const modifiers = getCalendarDayModifiers(day, month, currentSelected, showOutsideDays, disabled); return (

handleSelect(day)} />

); })}

))}

); }, ); Calendar.displayName = 'Calendar'; export { Calendar, CalendarDayButton }; export default Calendar; 4f:Tdbd,@use '../../../styles/variables/colors' as *; // 日历根容器 .root { width: fit-content; padding: $spacing-3; background-color: $background; border-radius: $radius-md; border: 1px solid $border; } // 头部（导航 + 月份标题） .header { position: relative; display: flex; align-items: center; } // 上 / 下月导航 .nav { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: $spacing-1; } .navButton { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: $radius; background-color: transparent; color: $foreground; cursor: pointer; outline: none; transition: background-color $transition-fast; &:hover:not(:disabled) { background-color: $accent; color: $accent-foreground; } &:focus-visible { box-shadow: 0 0 0 2px $background, 0 0 0 4px $ring; } &:disabled { opacity: 0.5; pointer-events: none; } .icon { width: 1rem; height: 1rem; pointer-events: none; } } // 月份标题 .monthCaption { position: absolute; inset-inline: 2rem; display: flex; align-items: center; justify-content: center; font-size: $text-sm; font-weight: $font-medium; user-select: none; pointer-events: none; } // 星期表头 .weekdays { display: flex; width: 100%; margin-top: $spacing-2; } .weekday { flex: 1; border-radius: $radius; font-size: 0.8rem; font-weight: $font-normal; color: $muted-foreground; text-align: center; padding-block: $spacing-1; user-select: none; } // 日期网格 .weeks { display: flex; flex-direction: column; gap: $spacing-1; margin-top: $spacing-1; } .week { display: flex; width: 100%; } // 日期单元格 .day { flex: 1; display: flex; align-items: center; justify-content: center; } .dayButton { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-width: 2rem; padding: 0; border: none; border-radius: $radius; background-color: transparent; color: $foreground; font-size: $text-sm; font-weight: $font-normal; line-height: 1; text-align: center; cursor: pointer; outline: none; transition: background-color $transition-fast, color $transition-fast; user-select: none; &:hover:not(:disabled):not([data-selected='true']) { background-color: $accent; color: $accent-foreground; } &:focus-visible { box-shadow: 0 0 0 2px $background, 0 0 0 4px $ring; } // 今天 &[data-today='true'] { background-color: $accent; color: $accent-foreground; &[data-selected='true'] { background-color: $primary; color: $primary-foreground; } } // 相邻月份的天 &[data-outside='true'] { color: $muted-foreground; } // 禁用 &[data-disabled='true'] { color: $muted-foreground; opacity: 0.5; cursor: not-allowed; pointer-events: none; } // 单选选中态 &[data-selected-single='true'] { background-color: $primary; color: $primary-foreground; } // 范围起点 &[data-range-start='true'] { background-color: $primary; color: $primary-foreground; border-radius: $radius; border-end-end-radius: 0; border-start-end-radius: 0; } // 范围终点 &[data-range-end='true'] { background-color: $primary; color: $primary-foreground; border-radius: $radius; border-start-start-radius: 0; border-end-start-radius: 0; } // 范围中间 &[data-range-middle='true'] { background-color: $accent; color: $accent-foreground; border-radius: 0; } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/calendar/calendar.tsx","content":"$4e","type":"registry:ui","target":"components/ui/calendar/calendar.tsx"},{"path":"packages/styles/scss/components/calendar.module.scss","content":"$4f","type":"registry:file","target":"components/ui/calendar/calendar.module.scss"},{"path":"packages/react/src/components/calendar/index.ts","content":"export { Calendar, CalendarDayButton, type CalendarProps, type CalendarDayButtonProps } from './calendar';\n","type":"registry:ui","target":"components/ui/calendar/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]