export type { CalendarValue, CalendarPreset, CalendarAnimation, DisplayMode } from './createCalendar.svelte'; /** * SvCalendar - a themeable, accessible month/year/decade calendar. It is a thin * styled renderer over the headless `createCalendar` core (the same split as * `createSvGrid` / ): the core owns the reactive state + interaction + * ARIA (built on the framework-free ./datetime engine), while this component * keeps the render-only concerns - the WAAPI view-change animation, mouse-wheel * navigation, and DOM refs. All visuals come from the grid's `--sg-*` tokens. * * Parity target: Smart `smart-calendar` (selectionModes, min/max, restricted / * important dates, week numbers, firstDayOfWeek, drill navigation, keyboard). */ import { type Snippet } from 'svelte'; import { type EditorDir, type EditorSize } from './editor-contract'; import { type CalendarValue, type CalendarPreset, type CalendarAnimation, type CalendarDayState, type DisplayMode } from './createCalendar.svelte'; import type { SelectionMode } from './datetime/date-selection'; import type { RestrictOptions } from './datetime/date-restrict'; import type { DateLike } from './datetime/date-core'; import type { RecurrenceRule } from './recurrence'; type NameFormat = 'narrow' | 'short' | 'long'; /** User-facing strings (localizable via `messages`). */ type CalendarMessages = { label: string; shortcuts: string; today: string; clear: string; prev: string; next: string; }; type Props = { /** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */ value?: CalendarValue; /** Fires with the full selected-day list on every change. */ onChange?: (dates: Date[]) => void; /** Fires when the visible month/year/decade page changes. */ onNavigate?: (viewDate: Date, displayMode: DisplayMode) => void; selectionMode?: SelectionMode; min?: DateLike | null; max?: DateLike | null; /** Non-selectable dates (list or predicate). */ restrictedDates?: RestrictOptions['restrictedDates']; /** Highlighted (but still selectable) dates. */ importantDates?: ReadonlyArray | ((d: Date) => boolean) | null; /** 0 = Sunday .. 6 = Saturday. */ firstDayOfWeek?: number; weeks?: number; weekNumbers?: boolean; /** Number of month panels side by side. */ months?: number; hideDayNames?: boolean; hideOtherMonthDays?: boolean; dayNameFormat?: NameFormat; monthNameFormat?: NameFormat; /** Show the Today / Clear footer. */ footer?: boolean; disabled?: boolean; readonly?: boolean; locale?: string; name?: string; /** Which drill level to open on. */ displayMode?: DisplayMode; /** Animate month/year navigation + drill (opt-in). `true` = 'slide'. This is * an explicit opt-in, so it plays regardless of the OS "reduce motion" * setting - pass 'none' (or gate it yourself) to suppress it. */ animate?: boolean | CalendarAnimation; /** Change the visible month/year/decade with the mouse wheel over the grid. */ wheelNavigation?: boolean; /** Per-day tooltip text (shown as the native title on the day button). */ dateTooltip?: (date: Date) => string | null | undefined; /** One-click shortcuts (e.g. Today, Last 7 days) shown in a side rail. */ presets?: ReadonlyArray; /** Text direction (rtl mirrors layout + flips the nav arrows; auto inherits). */ dir?: EditorDir; /** Override the built-in strings (group/shortcut labels, footer buttons). */ messages?: Partial; /** Repeat pattern(s): matching days get an indicator + `recurring` day-state. */ recurrence?: RecurrenceRule | ReadonlyArray | null; /** Render rich content inside each day cell (events, dots, badges). Receives * the date + its day-state. Switches the month grid to a taller, * top-aligned layout so there's room for the content. */ day?: Snippet<[Date, CalendarDayState]>; label?: string; hint?: string; error?: string; required?: boolean; invalid?: boolean; size?: EditorSize; id?: string; }; declare const SvCalendar: import("svelte").Component; type SvCalendar = ReturnType; export default SvCalendar;