fluentui-svelte 0.1.0

package/dist/components/calendar-date-picker/types.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ComputePositionConfig } from '@floating-ui/dom';
+import type { CalendarViewProps } from '../calendar-view/types.js';
+/** @propsmith CalendarDatePickerProps */
+export type CalendarDatePickerProps = {
+    /** The DOM reference of the picker element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The selected date.
+     * @default null
+     * @bindable
+     */
+    value?: Date | null;
+    /** The options used to format the date rendered on the trigger.
+     * @default { year: 'numeric', month: 'numeric', day: 'numeric' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** The floating UI configuration object of the calendar popup. Keys left out keep their default.
+     */
+    calendarPosition?: Partial<ComputePositionConfig>;
+    /** Called whenever the selected date changes. */
+    onChange?: (event: Event, value: Date | null) => void;
+    /** The accessible name of the calendar popup, which is announced as a dialog.
+     * @default 'Choose a date'
+     */
+    popupLabel?: string;
+    /** The DOM reference of the trigger button.
+     * @bindable
+     */
+    triggerRef?: HTMLButtonElement;
+    /** The DOM reference of the calendar popup.
+     * @bindable
+     */
+    popupRef?: HTMLDivElement;
+} & Pick<CalendarViewProps, 'locale' | 'blackoutDates' | 'headers' | 'minDate' | 'maxDate' | 'weekStart'> & HTMLAttributes<HTMLDivElement>;

package/dist/components/calendar-date-picker/types.js

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

package/dist/components/calendar-view/calendar-view-controls.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Button } from '../../index.js';
+	import { CaretDownFilled, CaretUpFilled, DismissRegular } from 'fluentui-icons-svelte';
+	import { getCalendarViewContext } from './calendar-view.svelte.js';
+
+	const CalendarContext = getCalendarViewContext();
+
+	if (!CalendarContext) {
+		throw new Error('CalendarViewControls must be used within a CalendarView');
+	}
+
+	let locale = $derived(CalendarContext.config.locale);
+
+	let selectionMode = $derived(CalendarContext.config.selectionMode);
+
+	let view = $derived(CalendarContext.state.view);
+
+	let page = $derived(CalendarContext.state.page);
+
+	let range = $derived(CalendarContext.state.range);
+
+	let viewLabel = $derived.by(() => {
+		let label = '';
+		if (view === 'days') {
+			label = new Intl.DateTimeFormat(locale, {
+				year: 'numeric',
+				month: 'long'
+			}).format(page);
+		} else if (view === 'months') {
+			label = new Intl.DateTimeFormat(locale, {
+				year: 'numeric'
+			}).format(page);
+		} else if (view === 'years') {
+			const decadeStart = Math.floor(page.getFullYear() / 10) * 10;
+			const decadeEnd = decadeStart + 9;
+
+			label = new Intl.DateTimeFormat(locale, {
+				year: 'numeric'
+			}).formatRange(new Date(decadeStart, 0, 1), new Date(decadeEnd, 0, 1));
+		}
+
+		// In some locales, the first letter may not be capitalized
+		return label.charAt(0).toUpperCase() + label.slice(1);
+	});
+</script>
+
+<div class="fs-calendar-controls">
+	<Button
+		class="period-selector"
+		disabled={view === 'years'}
+		appearance="subtle"
+		aria-label="Select month"
+		aria-live="polite"
+		onclick={(e) => CalendarContext.methods.updateView?.(e, view === 'days' ? 'months' : 'years')}
+	>
+		{viewLabel}
+	</Button>
+	<div class="navigation">
+		<Button appearance="subtle" aria-label="Previous month" onclick={() => CalendarContext.methods.updatePage(-1)}>
+			<CaretUpFilled width="16" />
+		</Button>
+		<Button appearance="subtle" aria-label="Next month" onclick={() => CalendarContext.methods.updatePage(1)}>
+			<CaretDownFilled width="16" />
+		</Button>
+		<!--
+			Only a range needs this. Clicking a selected day already takes it back in the
+			other two modes, but a range has no such click: every click builds it further
+			or starts it over.
+		-->
+		{#if selectionMode === 'range'}
+			<Button
+				appearance="subtle"
+				aria-label="Clear the selected dates"
+				disabled={!range.start && !range.end}
+				onclick={(e) => CalendarContext.methods.clearSelection(e)}
+			>
+				<DismissRegular width="16" />
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.fs-calendar-controls {
+		display: flex;
+		justify-content: space-between;
+		padding: 0.5rem;
+		border-bottom: 1px solid var(--fs-control-surface-stroke);
+		width: 100%;
+		gap: 0.5rem;
+		border-bottom: 1px solid var(--fs-control-stroke-default);
+		& > :global(.period-selector) {
+			flex-grow: 1;
+			justify-content: flex-start;
+			font-weight: 500;
+			font-size: var(--fs-body2-font-size);
+			/* A third button on the right needs room, and this is where it comes from. */
+			min-width: 0;
+		}
+		& .navigation {
+			display: flex;
+			gap: 0.5rem;
+			position: relative;
+			& > :global(.fs-button) {
+				min-width: max-content;
+				padding-inline: 0.5rem;
+				& > :global(svg) {
+					width: 16px;
+					height: 16px;
+					fill: var(--fs-control-strong-default);
+				}
+			}
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view-controls.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CalendarViewControls: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarViewControls = ReturnType<typeof CalendarViewControls>;
+export default CalendarViewControls;

package/dist/components/calendar-view/calendar-view-days.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { circOut } from 'svelte/easing';
+	import {
+		compareDates,
+		getCalendarDays,
+		getCalendarViewContext,
+		getMonthLocale,
+		hasBlackoutBetween,
+		indexOfDate,
+		rangePositionOf,
+		startOfDay
+	} from './calendar-view.svelte.js';
+	import CalendarViewItem from './calendar-view-item.svelte';
+	import { getGlobalFSContext, getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+
+	import { cellDate, createCalendarNavigation, DAY_GRID } from './calendar-view-grid.js';
+	import { getCSSDuration } from '../../internal/index.js';
+	import { on } from 'svelte/events';
+	import type { CalendarDateRange } from './types.js';
+
+	const CalendarContext = getCalendarViewContext();
+
+	if (!CalendarContext) {
+		throw new Error('CalendarViewDays must be used within a CalendarView');
+	}
+
+	const { selectDay, updatePage } = CalendarContext.methods;
+
+	let reducedMotion = getReducedMotion();
+
+	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
+
+	let { locale, minDate, weekStart, blackoutDates, headers, maxDate, selectionMode, blackoutBreaksRange } = $derived(
+		CalendarContext.config
+	);
+
+	let calendarDays = $derived(getCalendarDays(page, weekStart));
+
+	let bodyElement: HTMLElement | null = $state(null);
+
+	let pageAnimationDuration: number = $derived(reducedMotion() ? 0 : getCSSDuration('--fs-normal-duration') || 333);
+
+	// The day the pointer or the keyboard is offering as the end of a half-built range.
+	// Two signals rather than one: leaving with the pointer must not wipe out the
+	// preview a focused cell is still holding.
+	let hoveredDay: Date | null = $state(null);
+
+	let focusedDay: Date | null = $state(null);
+
+	/**
+	 * The range to paint: the one that is committed, or the one the user is pointing at.
+	 *
+	 * Nothing is painted for a backwards preview or for a span this configuration will
+	 * not accept — the absence of a band is how the grid says "that click will start over".
+	 */
+	let bandRange = $derived.by<CalendarDateRange | null>(() => {
+		if (selectionMode !== 'range' || !range.start) return null;
+
+		const end = range.end ?? hoveredDay ?? focusedDay;
+
+		if (!end || startOfDay(end) < startOfDay(range.start)) return null;
+		if (blackoutBreaksRange && hasBlackoutBetween(range.start, end, blackoutDates)) return null;
+
+		return { start: range.start, end };
+	});
+
+	const isSelected = (day: Date) => {
+		if (selectionMode === 'range') {
+			return (
+				(!!range.start && compareDates(range.start, day, 'day')) || (!!range.end && compareDates(range.end, day, 'day'))
+			);
+		}
+
+		return !!value && (Array.isArray(value) ? indexOfDate(value, day, 'day') > -1 : compareDates(value, day, 'day'));
+	};
+
+	const isDisabled = (day: Date) => (minDate && minDate > day) || (maxDate && maxDate < day);
+
+	const isBlackout = (day: Date) => !!blackoutDates && indexOfDate(blackoutDates, day, 'day') > -1;
+
+	/** What the grid as a whole is showing. */
+	let pageLabel = $derived(new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }).format(page));
+
+	/** "Thursday, 15 January 2026" — the weekday is why the header row can stay decorative. */
+	const dayLabel = (day: Date) => new Intl.DateTimeFormat(locale, { dateStyle: 'full' }).format(day);
+
+	/**
+	 * Follows the day the user is offering as the end of the range.
+	 *
+	 * Delegated on the grid rather than bound per cell: `pointerover` and `focusin`
+	 * both bubble, so six weeks of days cost four listeners instead of a hundred and
+	 * sixty-eight. The day is resolved from the whole cell rather than from the button,
+	 * because the button is a circle and the corners of its cell are not inside it —
+	 * reading only the button would blink the band off as the pointer crossed them.
+	 */
+	function rangePreview(node: HTMLElement) {
+		if (selectionMode !== 'range') return;
+
+		const dayUnder = (target: EventTarget | null) => {
+			const button = (target as Element)?.closest?.('[role="gridcell"]')?.querySelector('button');
+
+			return button && !button.disabled ? cellDate(button) : null;
+		};
+
+		const off = [
+			on(node, 'pointerover', (event) => (hoveredDay = dayUnder(event.target))),
+			on(node, 'pointerleave', () => (hoveredDay = null)),
+			on(node, 'focusin', (event) => (focusedDay = dayUnder(event.target))),
+			on(node, 'focusout', (event) => {
+				if (!node.contains(event.relatedTarget as Node)) focusedDay = null;
+			})
+		];
+
+		return () => off.forEach((unsubscribe) => unsubscribe());
+	}
+
+	const globalContext = getGlobalFSContext();
+
+	const navigate = createCalendarNavigation({
+		grid: DAY_GRID,
+		body: () => bodyElement,
+		page: () => page,
+		disabled: (day) => !!isDisabled(day),
+		blackout: isBlackout,
+		updatePage
+	});
+
+	// Tabspot reports what it cannot decide — running out of cells, or landing on a
+	// date this page does not own — and the calendar answers by turning the page.
+	$effect(() => {
+		const root = bodyElement?.closest<HTMLElement>('[data-calendar-grid]');
+		const instance = globalContext?.state.tabspotInstance;
+
+		if (!root || !instance) return;
+
+		return instance.subscribe(root, navigate);
+	});
+</script>
+
+{#key page}
+	<div
+		bind:this={bodyElement}
+		class="fs-calendar-view-days"
+		data-calendar-page
+		role="grid"
+		aria-label={pageLabel}
+		aria-multiselectable={selectionMode !== 'single' || undefined}
+		{@attach rangePreview}
+		in:fly={{
+			opacity: 1,
+			duration: pageAnimationDirection !== 'neutral' ? pageAnimationDuration : pageAnimationDuration,
+			easing: circOut,
+			y: pageAnimationDirection === 'neutral' ? 0 : pageAnimationDirection === 'up' ? -215 : 215
+		}}
+		out:fly={{
+			opacity: 0,
+			duration: pageAnimationDirection !== 'neutral' ? pageAnimationDuration : pageAnimationDuration,
+			easing: circOut,
+			y: pageAnimationDirection === 'neutral' ? 0 : pageAnimationDirection === 'up' ? 215 : -215
+		}}
+	>
+		{#each Array(6) as _, week (week)}
+			<div class="fs-calendar-view-week" role="row">
+				{#each calendarDays.slice(week * 7, week * 7 + 7) as day, i (week * 7 + i)}
+					{@const selected = isSelected(day)}
+					{@const inMonth = compareDates(day, page, 'month')}
+					{@const header =
+						(headers && day.getDate() === 1 && getMonthLocale(day.getMonth(), { locale, format: 'short' })) || ''}
+					<CalendarViewItem
+						{header}
+						{selected}
+						rangePosition={bandRange ? rangePositionOf(day, bandRange) : undefined}
+						outOfRange={!inMonth}
+						current={compareDates(day, new Date(), 'day')}
+						disabled={isDisabled(day)}
+						blackout={isBlackout(day)}
+						buttonAttributes={{
+							tabindex: inMonth ? 0 : -1,
+							'aria-label': dayLabel(day),
+							'data-date': day.getTime(),
+							onclick: (e: MouseEvent) => {
+								selectDay(e, day);
+							}
+						}}
+					>
+						{day.getDate()}
+					</CalendarViewItem>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/key}
+
+<style>
+	.fs-calendar-view-days {
+		display: flex;
+		flex-direction: column;
+		inline-size: 100%;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		padding-bottom: 0.5rem;
+		& .fs-calendar-view-week {
+			display: grid;
+			grid-template-columns: repeat(7, 1fr);
+			grid-auto-rows: 1fr;
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view-days.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CalendarViewDays: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarViewDays = ReturnType<typeof CalendarViewDays>;
+export default CalendarViewDays;

package/dist/components/calendar-view/calendar-view-grid.d.ts

@@ -0,0 +1,38 @@
+import type { TabspotEventListener, TabspotNodeOptions } from 'tabspot';
+import type { CalendarGrid, CalendarNavigationOptions, DateComparisonPrecision, View } from './types.js';
+export declare const CALENDAR_GRID_CONFIG: TabspotNodeOptions;
+/** Six weeks of seven days; a day belongs to the page when it shares its month. */
+export declare const DAY_GRID: CalendarGrid;
+/** The twelve months of the page year plus the first four of the next one. */
+export declare const MONTH_GRID: CalendarGrid;
+/** The page decade padded with its neighbours. */
+export declare const YEAR_GRID: CalendarGrid;
+/** The date a rendered cell stands for. */
+export declare function cellDate(element: Element | null): Date | null;
+/** Precision at which a date names exactly one cell of a view. */
+export declare const VIEW_PRECISION: Record<View, DateComparisonPrecision>;
+/**
+ * Hands focus to the view rendered inside `root`.
+ *
+ * `date` — the cell that had focus before a view change — wins when the new view
+ * renders it. Otherwise focus falls back to the selection, then to today, then to
+ * the first date of the page: the order WAI-ARIA prescribes for a date grid.
+ */
+export declare function focusCalendarView(root: HTMLElement, date: Date | null, precision: DateComparisonPrecision): void;
+/**
+ * Turns the page when navigation runs off the rendered grid.
+ *
+ * Tabspot owns everything that happens *inside* the six-by-seven (or four-by-four)
+ * matrix: which cell an arrow resolves to, wrapping from one row into the next,
+ * `Home`/`End`, and the fact that a disabled cell cannot take focus. It reports
+ * the two things it cannot decide on its own, and this listener answers them:
+ *
+ * - `atEdge` — the move ran out of cells. Only the calendar knows there is a date
+ *   beyond that edge, so it turns the page and lands on it.
+ * - the move resolved to a cell that does not belong to the page (an adjacent
+ *   month, year or decade) or to a blacked-out date — page to it, or step past it.
+ *
+ * Both cases claim the key: the grid ran out of cells but the calendar did not,
+ * so the browser must not scroll the page underneath it.
+ */
+export declare function createCalendarNavigation({ grid, body, page, disabled, blackout, updatePage }: CalendarNavigationOptions): TabspotEventListener;

package/dist/components/calendar-view/calendar-view-grid.js

@@ -0,0 +1,140 @@
+import { tick } from 'svelte';
+import { SvelteDate } from 'svelte/reactivity';
+import { compareDates } from './calendar-view.svelte.js';
+export const CALENDAR_GRID_CONFIG = {
+    root: { manageSpecialKeys: { Home: true, End: true } },
+    mover: {
+        layout: 'grid',
+        flow: 'linear',
+        rows: { by: 'selector', row: '[role="row"]' },
+        items: '[data-calendar-page]:not([inert]) button',
+        skip: '.blackout',
+        activation: { mode: 'focus', roving: false }
+    }
+};
+/** Six weeks of seven days; a day belongs to the page when it shares its month. */
+export const DAY_GRID = {
+    columns: 7,
+    size: 42,
+    precision: 'month',
+    shift: (date, amount) => new SvelteDate(new SvelteDate(date).setDate(date.getDate() + amount))
+};
+/** The twelve months of the page year plus the first four of the next one. */
+export const MONTH_GRID = {
+    columns: 4,
+    size: 16,
+    precision: 'year',
+    shift: (date, amount) => new SvelteDate(new SvelteDate(date).setMonth(date.getMonth() + amount, 1))
+};
+/** The page decade padded with its neighbours. */
+export const YEAR_GRID = {
+    columns: 4,
+    size: 16,
+    precision: 'decade',
+    shift: (date, amount) => new SvelteDate(new SvelteDate(date).setFullYear(date.getFullYear() + amount))
+};
+/** How far one move travels, in cells. `undefined` for directions the calendar ignores. */
+function amountFor(direction, columns) {
+    switch (direction) {
+        case 'left':
+        case 'home':
+            return -1;
+        case 'right':
+        case 'end':
+            return 1;
+        case 'up':
+            return -columns;
+        case 'down':
+            return columns;
+        default:
+            return undefined;
+    }
+}
+/** The date a rendered cell stands for. */
+export function cellDate(element) {
+    const value = element?.getAttribute?.('data-date');
+    return value ? new SvelteDate(Number(value)) : null;
+}
+/** Precision at which a date names exactly one cell of a view. */
+export const VIEW_PRECISION = {
+    days: 'day',
+    months: 'month',
+    years: 'year'
+};
+/** Cells of the live page that can take focus. */
+const FOCUSABLE_CELL = '[data-calendar-page]:not([inert]) button:not([disabled])';
+function cellFor(root, date, precision) {
+    for (const cell of root.querySelectorAll(FOCUSABLE_CELL)) {
+        const value = cellDate(cell);
+        if (value && compareDates(value, date, precision))
+            return cell;
+    }
+    return null;
+}
+/**
+ * Hands focus to the view rendered inside `root`.
+ *
+ * `date` — the cell that had focus before a view change — wins when the new view
+ * renders it. Otherwise focus falls back to the selection, then to today, then to
+ * the first date of the page: the order WAI-ARIA prescribes for a date grid.
+ */
+export function focusCalendarView(root, date, precision) {
+    const target = (date && cellFor(root, date, precision)) ??
+        root.querySelector(`${FOCUSABLE_CELL}.selected:not(.out-of-range)`) ??
+        root.querySelector(`${FOCUSABLE_CELL}.current:not(.out-of-range)`) ??
+        root.querySelector(`${FOCUSABLE_CELL}:not(.out-of-range)`);
+    target?.focus({ preventScroll: true });
+}
+/**
+ * Turns the page when navigation runs off the rendered grid.
+ *
+ * Tabspot owns everything that happens *inside* the six-by-seven (or four-by-four)
+ * matrix: which cell an arrow resolves to, wrapping from one row into the next,
+ * `Home`/`End`, and the fact that a disabled cell cannot take focus. It reports
+ * the two things it cannot decide on its own, and this listener answers them:
+ *
+ * - `atEdge` — the move ran out of cells. Only the calendar knows there is a date
+ *   beyond that edge, so it turns the page and lands on it.
+ * - the move resolved to a cell that does not belong to the page (an adjacent
+ *   month, year or decade) or to a blacked-out date — page to it, or step past it.
+ *
+ * Both cases claim the key: the grid ran out of cells but the calendar did not,
+ * so the browser must not scroll the page underneath it.
+ */
+export function createCalendarNavigation({ grid, body, page, disabled, blackout, updatePage }) {
+    const onPage = (date) => compareDates(date, page(), grid.precision);
+    /** Resolve `target` to a focusable cell, turning the page when it lies outside it. */
+    async function focusDate(target, amount) {
+        // Blacked-out dates are rendered but cannot be selected: keep going.
+        for (let step = 0; step < grid.size && blackout(target); step++) {
+            target = grid.shift(target, amount);
+        }
+        if (blackout(target) || disabled(target))
+            return;
+        if (!onPage(target)) {
+            updatePage(Math.sign(amount), 'neutral');
+            await tick();
+        }
+        body()?.querySelector(`button[data-date="${target.getTime()}"]`)?.focus();
+    }
+    return (event) => {
+        const amount = amountFor(event.direction, grid.columns);
+        if (amount === undefined)
+            return;
+        if (event.atEdge) {
+            const origin = cellDate(event.from);
+            if (!origin)
+                return;
+            event.preventDefault();
+            focusDate(grid.shift(origin, amount), amount);
+            return;
+        }
+        // Tabspot steps over blacked-out cells itself, so the only landing left to
+        // answer for is one on a date this page does not own.
+        const landed = cellDate(event.to);
+        if (!landed || onPage(landed))
+            return;
+        event.preventDefault();
+        focusDate(landed, amount);
+    };
+}

package/dist/components/calendar-view/calendar-view-header.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { getCalendarViewContext, getWeekdayLocale } from './calendar-view.svelte.js';
+
+	const context = getCalendarViewContext();
+
+	if (!context) {
+		throw new Error('CalendarViewHeader must be used within a CalendarView');
+	}
+
+	let locale = context.config.locale;
+
+	let weekStart = context.config.weekStart;
+</script>
+
+<!--
+	Decorative: every cell announces its own full date — "Thursday, 15 January 2026" —
+	so repeating the weekday here would only add noise. Marking it as a row of
+	`columnheader`s would also drag the grid structure into the clipped viewport.
+-->
+<div class="fs-calendar-view-header" aria-hidden="true">
+	<div class="calendar-header-row">
+		{#each Array(7) as _, i (i)}
+			<div class="calendar-header-item">
+				{getWeekdayLocale(i, { format: 'short', locale, offset: weekStart })}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.fs-calendar-view-header {
+		display: flex;
+		flex-direction: column;
+		padding-top: 0.4rem;
+		width: 100%;
+		position: relative;
+		z-index: 1;
+		&::before {
+			content: '';
+			border-radius: calc(var(--fs-control-overlay-border-radius) - 0.063rem);
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			inset: 0;
+			background-size: 2.5rem;
+			opacity: 0.065;
+			filter: grayscale(1);
+			z-index: 0;
+			pointer-events: none;
+		}
+		& .calendar-header-row {
+			display: grid;
+			height: 40px;
+			grid-template-columns: repeat(7, 1fr);
+			& .calendar-header-item {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				font-weight: 600;
+				font-size: var(--fs-body2-font-size);
+				color: var(--fs-text-color-secondary);
+			}
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view-header.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CalendarViewHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarViewHeader = InstanceType<typeof CalendarViewHeader>;
+export default CalendarViewHeader;