dystopia-linear-lib 1.0.0

package/dist/components/breadcrumb/BreadcrumbLink.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { BreadcrumbLinkProps } from './BreadcrumbLink.types.js';
+
+	let { class: className, child, children, ...restProps }: BreadcrumbLinkProps = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn(
+			'transition-colors duration-150 hover:text-foreground-soft focus-visible:underline focus-visible:outline-none',
+			className
+		)
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a {...mergedProps}>
+		{@render children()}
+	</a>
+{/if}

package/dist/components/breadcrumb/BreadcrumbLink.svelte.d.ts

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

package/dist/components/breadcrumb/BreadcrumbLink.types.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+export interface BreadcrumbLinkProps extends Omit<HTMLAnchorAttributes, 'children' | 'class'> {
+    class?: string;
+    children: Snippet;
+    /** Renders a consumer-supplied element (e.g. a router `Link`) instead of a plain `<a>`. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}

package/dist/components/breadcrumb/BreadcrumbLink.types.js

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

package/dist/components/breadcrumb/BreadcrumbList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { BreadcrumbListProps } from './BreadcrumbList.types.js';
+
+	let { class: className, children, ...restProps }: BreadcrumbListProps = $props();
+</script>
+
+<ol
+	class={cn('flex flex-wrap items-center gap-tight text-sm text-foreground-subtle', className)}
+	{...restProps}
+>
+	{@render children()}
+</ol>

package/dist/components/breadcrumb/BreadcrumbList.svelte.d.ts

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

package/dist/components/breadcrumb/BreadcrumbList.types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BreadcrumbListProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/breadcrumb/BreadcrumbList.types.js

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

package/dist/components/breadcrumb/BreadcrumbPage.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { BreadcrumbPageProps } from './BreadcrumbPage.types.js';
+
+	let { class: className, children, ...restProps }: BreadcrumbPageProps = $props();
+</script>
+
+<span
+	aria-current="page"
+	aria-disabled="true"
+	class={cn('font-medium text-foreground', className)}
+	{...restProps}
+>
+	{@render children()}
+</span>

package/dist/components/breadcrumb/BreadcrumbPage.svelte.d.ts

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

package/dist/components/breadcrumb/BreadcrumbPage.types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BreadcrumbPageProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/breadcrumb/BreadcrumbPage.types.js

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

package/dist/components/breadcrumb/BreadcrumbSeparator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator.types.js';
+
+	let { class: className, children, ...restProps }: BreadcrumbSeparatorProps = $props();
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn('text-foreground-faint [&_svg]:size-3.5', className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="m9 18 6-6-6-6" />
+		</svg>
+	{/if}
+</li>

package/dist/components/breadcrumb/BreadcrumbSeparator.svelte.d.ts

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

package/dist/components/breadcrumb/BreadcrumbSeparator.types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BreadcrumbSeparatorProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+    class?: string;
+    /** Replaces the default chevron icon. */
+    children?: Snippet;
+}

package/dist/components/breadcrumb/BreadcrumbSeparator.types.js

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

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

@@ -0,0 +1,14 @@
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbProps } from './Breadcrumb.types.js';
+export { default as BreadcrumbList } from './BreadcrumbList.svelte';
+export type { BreadcrumbListProps } from './BreadcrumbList.types.js';
+export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
+export type { BreadcrumbItemProps } from './BreadcrumbItem.types.js';
+export { default as BreadcrumbLink } from './BreadcrumbLink.svelte';
+export type { BreadcrumbLinkProps } from './BreadcrumbLink.types.js';
+export { default as BreadcrumbPage } from './BreadcrumbPage.svelte';
+export type { BreadcrumbPageProps } from './BreadcrumbPage.types.js';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.svelte';
+export type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator.types.js';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.svelte';
+export type { BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.types.js';

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as BreadcrumbList } from './BreadcrumbList.svelte';
+export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
+export { default as BreadcrumbLink } from './BreadcrumbLink.svelte';
+export { default as BreadcrumbPage } from './BreadcrumbPage.svelte';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.svelte';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.svelte';

package/dist/components/button/Button.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { buttonVariants } from './Button.variants.js';
+	import type { ButtonProps } from './Button.types.js';
+
+	let {
+		variant,
+		size,
+		class: className,
+		ref = $bindable(null),
+		children,
+		child,
+		isLoading = false,
+		loading,
+		disabled = false,
+		...restProps
+	}: ButtonProps = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn(buttonVariants({ variant, size }), className),
+		disabled: disabled || isLoading,
+		'aria-busy': isLoading || undefined
+	});
+</script>
+
+{#snippet defaultLoading()}
+	<svg viewBox="0 0 24 24" fill="none" class="size-4 animate-spin" aria-hidden="true">
+		<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-opacity="0.25" />
+		<path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+	</svg>
+{/snippet}
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{#if isLoading}
+			{#if loading}
+				{@render loading()}
+			{:else}
+				{@render defaultLoading()}
+			{/if}
+		{/if}
+		{@render children()}
+	</button>
+{/if}

package/dist/components/button/Button.svelte.d.ts

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

package/dist/components/button/Button.types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonVariantProps } from './Button.variants.js';
+export interface ButtonProps extends HTMLButtonAttributes, ButtonVariantProps {
+    class?: string;
+    ref?: HTMLButtonElement | null;
+    children: Snippet;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    isLoading?: boolean;
+    /** Replaces the built-in spinner shown while `isLoading` is true. */
+    loading?: Snippet;
+}

package/dist/components/button/Button.types.js

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

package/dist/components/button/Button.variants.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

package/dist/components/button/Button.variants.js

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+export const buttonVariants = cva('inline-flex items-center justify-center gap-tight appearance-none cursor-pointer rounded-md font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+            outline: 'border border-border bg-transparent hover:bg-surface-subtle',
+            ghost: 'bg-transparent hover:bg-surface-subtle'
+        },
+        size: {
+            sm: 'h-8 px-3 text-sm',
+            md: 'h-10 px-control-x text-sm',
+            lg: 'h-12 px-6 text-base'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.svelte';
+export type { ButtonProps } from './Button.types.js';
+export { buttonVariants, type ButtonVariantProps } from './Button.variants.js';

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.svelte';
+export { buttonVariants } from './Button.variants.js';

package/dist/components/button-group/ButtonGroup.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { buttonGroupVariants } from './ButtonGroup.variants.js';
+	import type { ButtonGroupProps } from './ButtonGroup.types.js';
+
+	let { orientation, class: className, children, ...restProps }: ButtonGroupProps = $props();
+</script>
+
+<div role="group" class={cn(buttonGroupVariants({ orientation }), className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/button-group/ButtonGroup.svelte.d.ts

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

package/dist/components/button-group/ButtonGroup.types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonGroupVariantProps } from './ButtonGroup.variants.js';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, ButtonGroupVariantProps {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/button-group/ButtonGroup.types.js

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

package/dist/components/button-group/ButtonGroup.variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;

package/dist/components/button-group/ButtonGroup.variants.js

@@ -0,0 +1,12 @@
+import { cva } from 'class-variance-authority';
+export const buttonGroupVariants = cva('inline-flex', {
+    variants: {
+        orientation: {
+            horizontal: 'flex-row [&>*]:relative [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-r-none [&>*:last-child:not(:first-child)]:rounded-l-none [&>*:hover]:z-10 [&>*:focus-visible]:z-10',
+            vertical: 'flex-col [&>*]:relative [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-b-none [&>*:last-child:not(:first-child)]:rounded-t-none [&>*:hover]:z-10 [&>*:focus-visible]:z-10'
+        }
+    },
+    defaultVariants: {
+        orientation: 'horizontal'
+    }
+});

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export type { ButtonGroupProps } from './ButtonGroup.types.js';
+export { buttonGroupVariants, type ButtonGroupVariantProps } from './ButtonGroup.variants.js';

package/dist/components/button-group/index.js

@@ -0,0 +1,2 @@
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { buttonGroupVariants } from './ButtonGroup.variants.js';

package/dist/components/calendar/Calendar.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import {
+		type CalendarDate,
+		isSameDay,
+		isToday,
+		today,
+		getLocalTimeZone,
+		startOfWeek,
+		endOfWeek,
+		DateFormatter
+	} from '@internationalized/date';
+	import { cn } from '../../utils/cn.js';
+	import { createIds } from '../../utils/id.js';
+	import { getCalendarGrid } from '../../utils/calendar-grid.js';
+	import CalendarDay from './CalendarDay.svelte';
+	import type { CalendarProps, CalendarRangeValue } from './Calendar.types.js';
+
+	let {
+		type = 'single',
+		value = $bindable(),
+		class: className,
+		classes,
+		locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+		defaultMonth,
+		minValue,
+		maxValue,
+		isDateDisabled,
+		labels,
+		day,
+		onValueChange,
+		...restProps
+	}: CalendarProps = $props();
+
+	const baseId = $props.id();
+	const ids = createIds(baseId, 'heading');
+
+	function initialFocusDate(): CalendarDate {
+		if (type === 'range') {
+			return (
+				(value as CalendarRangeValue | undefined)?.start ??
+				defaultMonth ??
+				today(getLocalTimeZone())
+			);
+		}
+		return (value as CalendarDate | undefined) ?? defaultMonth ?? today(getLocalTimeZone());
+	}
+
+	let focusedDate = $state<CalendarDate>(initialFocusDate());
+	let gridEl = $state<HTMLDivElement | null>(null);
+
+	const weeks = $derived(getCalendarGrid({ date: focusedDate, locale }));
+	const weekdayFormatter = $derived(new DateFormatter(locale, { weekday: 'short' }));
+	const weekdayLongFormatter = $derived(new DateFormatter(locale, { weekday: 'long' }));
+	const headingFormatter = $derived(new DateFormatter(locale, { month: 'long', year: 'numeric' }));
+	const heading = $derived(headingFormatter.format(focusedDate.toDate(getLocalTimeZone())));
+	// A bare day-of-month ("15") is an ambiguous accessible name — the grid
+	// always has a couple of adjacent-month cells sharing the same number
+	// (e.g. Feb 29 and Mar 29 in the same row). Full-date `aria-label`
+	// disambiguates for AT users and, as a side effect, for the day-cell
+	// selector too.
+	const fullDateFormatter = $derived(new DateFormatter(locale, { dateStyle: 'full' }));
+
+	function isDisabled(date: CalendarDate): boolean {
+		if (minValue && date.compare(minValue) < 0) return true;
+		if (maxValue && date.compare(maxValue) > 0) return true;
+		return isDateDisabled?.(date) ?? false;
+	}
+
+	function isSelected(date: CalendarDate): boolean {
+		if (type === 'range') {
+			const current = value as CalendarRangeValue | undefined;
+			return (
+				(!!current?.start && isSameDay(date, current.start)) ||
+				(!!current?.end && isSameDay(date, current.end))
+			);
+		}
+		return !!value && isSameDay(date, value as CalendarDate);
+	}
+
+	function isInRange(date: CalendarDate): boolean {
+		if (type !== 'range') return false;
+		const current = value as CalendarRangeValue | undefined;
+		if (!current?.start || !current?.end) return false;
+		return date.compare(current.start) > 0 && date.compare(current.end) < 0;
+	}
+
+	/**
+	 * Range picking is a two-click state machine: the first click after a
+	 * complete (or empty) range starts a new one, the second click completes
+	 * it — swapping start/end if the second date lands before the first so
+	 * `start` is always the earlier date regardless of click order.
+	 */
+	function selectDate(date: CalendarDate): void {
+		if (isDisabled(date)) return;
+		focusedDate = date;
+
+		if (type === 'range') {
+			const current = value as CalendarRangeValue | undefined;
+			const next: CalendarRangeValue =
+				!current?.start || (current.start && current.end)
+					? { start: date, end: undefined }
+					: date.compare(current.start) < 0
+						? { start: date, end: current.start }
+						: { start: current.start, end: date };
+			value = next;
+			(onValueChange as ((value: CalendarRangeValue) => void) | undefined)?.(next);
+		} else {
+			value = date;
+			(onValueChange as ((value: CalendarDate | undefined) => void) | undefined)?.(date);
+		}
+	}
+
+	function changeMonth(delta: number): void {
+		focusedDate = focusedDate.add({ months: delta });
+	}
+
+	async function focusCell(date: CalendarDate): Promise<void> {
+		await tick();
+		gridEl?.querySelector<HTMLElement>(`[data-date="${date.toString()}"]`)?.focus();
+	}
+
+	async function handleGridKeydown(event: KeyboardEvent): Promise<void> {
+		let next: CalendarDate | undefined;
+		switch (event.key) {
+			case 'ArrowLeft':
+				next = focusedDate.subtract({ days: 1 });
+				break;
+			case 'ArrowRight':
+				next = focusedDate.add({ days: 1 });
+				break;
+			case 'ArrowUp':
+				next = focusedDate.subtract({ days: 7 });
+				break;
+			case 'ArrowDown':
+				next = focusedDate.add({ days: 7 });
+				break;
+			case 'Home':
+				next = startOfWeek(focusedDate, locale);
+				break;
+			case 'End':
+				next = endOfWeek(focusedDate, locale);
+				break;
+			case 'PageUp':
+				next = focusedDate.subtract({ months: 1 });
+				break;
+			case 'PageDown':
+				next = focusedDate.add({ months: 1 });
+				break;
+			case 'Enter':
+			case ' ':
+				event.preventDefault();
+				selectDate(focusedDate);
+				return;
+			default:
+				return;
+		}
+		event.preventDefault();
+		focusedDate = next;
+		await focusCell(next);
+	}
+</script>
+
+<div class={cn('w-fit', className)} {...restProps}>
+	<div class={cn('flex items-center justify-between gap-cozy pb-compact', classes?.header)}>
+		<button
+			type="button"
+			aria-label={labels?.previousMonth ?? 'Previous month'}
+			onclick={() => changeMonth(-1)}
+			class={cn(
+				'inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+				classes?.previousButton
+			)}
+		>
+			<svg
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+				class="size-4"
+			>
+				<path d="m15 18-6-6 6-6" />
+			</svg>
+		</button>
+		<span
+			id={ids.heading}
+			aria-live="polite"
+			class={cn('text-sm leading-snug font-medium text-foreground', classes?.heading)}
+		>
+			{heading}
+		</span>
+		<button
+			type="button"
+			aria-label={labels?.nextMonth ?? 'Next month'}
+			onclick={() => changeMonth(1)}
+			class={cn(
+				'inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+				classes?.nextButton
+			)}
+		>
+			<svg
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+				class="size-4"
+			>
+				<path d="m9 18 6-6-6-6" />
+			</svg>
+		</button>
+	</div>
+
+	<div
+		bind:this={gridEl}
+		role="grid"
+		tabindex="-1"
+		aria-labelledby={ids.heading}
+		onkeydown={handleGridKeydown}
+		class="flex flex-col gap-1 outline-none"
+	>
+		<div role="row" class={cn('grid grid-cols-7 justify-items-center', classes?.weekdays)}>
+			{#each weeks[0] as cell (cell.date.toString())}
+				<span
+					role="columnheader"
+					aria-label={weekdayLongFormatter.format(cell.date.toDate(getLocalTimeZone()))}
+					class="flex size-8 items-center justify-center text-xs font-medium text-foreground-subtle"
+				>
+					{weekdayFormatter.format(cell.date.toDate(getLocalTimeZone()))}
+				</span>
+			{/each}
+		</div>
+
+		{#each weeks as week (week[0].date.toString())}
+			<div role="row" class="grid grid-cols-7 justify-items-center">
+				{#each week as cell (cell.date.toString())}
+					{@const selected = isSelected(cell.date)}
+					{@const isCellToday = isToday(cell.date, getLocalTimeZone())}
+					{@const disabled = isDisabled(cell.date)}
+					{@const inRange = isInRange(cell.date)}
+					{#if day}
+						<!-- Fully custom cell — consumer owns click wiring, same escape-hatch shape as `Pagination`'s `item` snippet. -->
+						{@render day({
+							date: cell.date,
+							selected,
+							today: isCellToday,
+							outsideMonth: cell.outsideMonth,
+							disabled,
+							inRange
+						})}
+					{:else}
+						<CalendarDay
+							data-date={cell.date.toString()}
+							aria-label={fullDateFormatter.format(cell.date.toDate(getLocalTimeZone()))}
+							{selected}
+							today={isCellToday}
+							outsideMonth={cell.outsideMonth}
+							{disabled}
+							{inRange}
+							tabIndex={isSameDay(cell.date, focusedDate) ? 0 : -1}
+							class={classes?.day}
+							onclick={() => selectDate(cell.date)}
+						>
+							{cell.date.day}
+						</CalendarDay>
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>

package/dist/components/calendar/Calendar.svelte.d.ts

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