sheer-ui 0.0.0

package/src/lib/blocks/Section.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Badge } from "../components/badge";
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		children,
+		badge,
+		title: titleText,
+		subtitle,
+		class: cls = '',
+		center = false,
+		...rest
+	}: HTMLAttributes<HTMLElement> & {
+		children?: Snippet;
+		badge?: string;
+		title?: string;
+		subtitle?: string;
+		center?: boolean;
+	} = $props();
+</script>
+
+<section class="px-4 py-24 sm:px-6 sm:py-32 {cls}" {...rest}>
+	<div class="mx-auto w-full max-w-4xl {center ? 'text-center' : ''}">
+		{#if badge || titleText || subtitle}
+			<div class={center ? 'mb-0' : 'mb-12'}>
+				{#if badge}<Badge variant="secondary" class="mb-4">{badge}</Badge>{/if}
+				{#if titleText}<h2 class="mb-4 text-2xl font-bold text-foreground sm:text-3xl md:text-4xl">{@html titleText}</h2>{/if}
+				{#if subtitle}<p class="mx-auto max-w-2xl text-muted-foreground">{subtitle}</p>{/if}
+			</div>
+		{/if}
+		{@render children?.()}
+	</div>
+</section>

package/src/lib/blocks/alert-modal/AlertModal.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	// Composes the real Dialog (native <dialog> surface). The alertModal store stays the machine;
+	// an own-or-delegate cell derives from it and reports self-closes (Esc / backdrop) straight
+	// back, so the store and the dialog can never disagree. Same store contract as before.
+	import * as Dialog from '../../components/dialog/index.js';
+	// Library-internal import: the cell class is deliberately NOT in the public exports —
+	// app consumers drive overlays via the `open` source prop, never a constructed cell.
+	import { OpenCell } from '../../internal/open-cell.svelte.js';
+	import { Button } from '../../components/button/index.js';
+	import * as Field from '../../components/field';
+	import { Root as Input } from '../../components/input';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import { beforeNavigate } from '$app/navigation';
+	import { alertModal, VARIANT_DEFAULTS } from './alert-modal.svelte';
+
+	const variantClasses: Record<string, string> = {
+		destructive: 'bg-destructive! text-destructive-foreground! hover:bg-destructive/90!',
+		warning: 'bg-warning! text-warning-foreground! hover:bg-warning/90!',
+	};
+
+	const titleClasses: Record<string, string> = {
+		destructive: 'text-destructive',
+	};
+
+	// This block is mounted once in the app layout, so a navigation while the modal is open (e.g. a
+	// programmatic redirect) would otherwise leave it open and scroll-locked on the next page. Close it on navigate
+	beforeNavigate(() => {
+		if (alertModal.open) alertModal.close();
+	});
+
+	// alertModal.close() nulls `options` synchronously, which would unmount the content mid-close and
+	// collapse the dialog's height as it fades out. Latch the last-shown options so the content stays
+	// mounted through the close animation; it refreshes on the next open. (Can't be $derived — the
+	// whole point is to RETAIN the value after `options` goes null.)
+	let shownOptions = $state(alertModal.options);
+	$effect(() => {
+		if (alertModal.options) shownOptions = alertModal.options;
+	});
+
+	const cell = new OpenCell(
+		() => alertModal.open,
+		(open) => {
+			if (!open) alertModal.close();
+		},
+	);
+</script>
+
+<Dialog.Root state={cell}>
+	<Dialog.Content>
+		{#if shownOptions}
+			<div class="flex flex-col gap-2 text-center sm:text-start">
+				<Dialog.Title class="text-lg font-semibold {titleClasses[shownOptions.variant ?? ''] ?? ''}">
+					{shownOptions.title}
+				</Dialog.Title>
+				<Dialog.Description class="text-muted-foreground text-sm">{shownOptions.description}</Dialog.Description>
+			</div>
+
+			{#if shownOptions.confirmText}
+				<Field.Field>
+					<Field.Label>Type "{shownOptions.confirmText}" to confirm</Field.Label>
+					<Input bind:value={alertModal.confirmInput} placeholder={shownOptions.confirmText} />
+				</Field.Field>
+			{/if}
+
+			{#if shownOptions.content}
+				{@render shownOptions.content()}
+			{/if}
+
+			<div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+				<Button variant="outline" disabled={alertModal.loading} onclick={() => alertModal.close()}>
+					{shownOptions.cancelLabel ?? 'Cancel'}
+				</Button>
+				<Button
+					class={variantClasses[shownOptions.variant ?? ''] ?? ''}
+					disabled={!alertModal.canConfirm}
+					onclick={() => alertModal.handleConfirm()}>
+					{#if alertModal.loading}<Loader2Icon class="size-4 animate-spin" />{/if}
+					{shownOptions.actionLabel ?? VARIANT_DEFAULTS[shownOptions.variant ?? 'default']}
+				</Button>
+			</div>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>

package/src/lib/blocks/alert-modal/alert-modal.svelte.ts

@@ -0,0 +1,81 @@
+import type { Snippet } from 'svelte';
+
+export type AlertModalVariant = 'destructive' | 'warning' | 'default';
+
+export interface AlertModalOptions {
+	title: string;
+	description: string;
+	actionLabel?: string;
+	cancelLabel?: string;
+	variant?: AlertModalVariant;
+	/** If set, user must type this text to enable the action button */
+	confirmText?: string;
+	/** Action handler. Omit for a plain acknowledgement dialog — confirming just closes it. */
+	onConfirm?: () => Promise<void> | void;
+	/** Optional snippet for custom body content between description and footer */
+	content?: Snippet;
+}
+
+export const VARIANT_DEFAULTS: Record<AlertModalVariant, string> = {
+	destructive: 'Remove',
+	warning: 'Continue',
+	default: 'OK',
+};
+
+export class AlertModalState {
+	open = $state(false);
+	loading = $state(false);
+	// raw: replaced wholesale by show()/close(), never mutated, and it carries a Snippet,
+	// which has no business inside a deep proxy
+	options = $state.raw<AlertModalOptions | null>(null);
+	confirmInput = $state('');
+
+	get canConfirm(): boolean {
+		if (!this.options) return false;
+		if (this.options.confirmText && this.confirmInput !== this.options.confirmText) return false;
+		return !this.loading;
+	}
+
+	get actionLabel(): string {
+		return this.options?.actionLabel ?? VARIANT_DEFAULTS[this.options?.variant ?? 'default'];
+	}
+
+	show(options: AlertModalOptions) {
+		this.options = options;
+		this.confirmInput = '';
+		this.loading = false;
+		this.open = true;
+	}
+
+	destructive(options: Omit<AlertModalOptions, 'variant'>) {
+		this.show({ ...options, variant: 'destructive' });
+	}
+
+	warning(options: Omit<AlertModalOptions, 'variant'>) {
+		this.show({ ...options, variant: 'warning' });
+	}
+
+	async handleConfirm() {
+		if (!this.options || !this.canConfirm) return;
+		this.loading = true;
+		try {
+			await this.options.onConfirm?.();
+			this.close();
+		} catch {
+			this.loading = false;
+		}
+	}
+
+	close() {
+		this.open = false;
+		this.loading = false;
+		this.options = null;
+		this.confirmInput = '';
+	}
+}
+
+export const alertModal = new AlertModalState();
+
+// Session-expiry recovery used to live here (isSessionExpired / recoverSession / watchSessionRejections). It's gone:
+// the server gate (@polumeyv/kit idpSessionGate) now redirects dead-session requests — navigations and remote
+// calls alike — straight to the IdP, so a logged-out user never surfaces a session error inside the app.

package/src/lib/blocks/alert-modal/index.ts

@@ -0,0 +1,2 @@
+export { default as AlertModal } from './AlertModal.svelte';
+export * from './alert-modal.svelte';

package/src/lib/blocks/calendar.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { Calendar } from '../components/calendar';
+	import { fade } from 'svelte/transition';
+	import type { CalendarRootProps, CalendarMonthSelectProps, CalendarYearSelectProps } from '../components/calendar/types.js';
+	import type { WithoutChildrenOrChild } from '../internal/utils.js';
+	import type { ButtonVariant } from '../components/button';
+	import type { DateValue } from '@internationalized/date';
+	import type { Snippet } from 'svelte';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	// Pull the `type: 'single'` member out of bits-ui's discriminated-union RootProps before Omit — Omit over
+	// the whole union expands into a type too complex for consumers' typechecks to represent.
+	type SingleRootProps = Extract<CalendarRootProps, { type: 'single' }>;
+
+	let {
+		ref = $bindable(null),
+		type,
+		value = $bindable(),
+		placeholder = $bindable(),
+		minValue,
+		maxValue,
+		isDateDisabled,
+		isDateUnavailable,
+		class: className,
+		weekdayFormat = 'short',
+		buttonVariant = 'ghost',
+		locale = 'en-US',
+		months: monthsProp,
+		years,
+		captionLayout = 'label',
+		monthFormat: monthFormatProp,
+		yearFormat = 'numeric',
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: Omit<WithoutChildrenOrChild<SingleRootProps>, 'type' | 'onValueChange' | 'onPlaceholderChange'> & {
+		type: 'single';
+		buttonVariant?: ButtonVariant;
+		captionLayout?: 'dropdown' | 'label';
+		months?: CalendarMonthSelectProps['months'];
+		years?: CalendarYearSelectProps['years'];
+		monthFormat?: CalendarMonthSelectProps['monthFormat'];
+		yearFormat?: CalendarYearSelectProps['yearFormat'];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		return captionLayout === 'dropdown' ? 'short' : 'long';
+	});
+
+	const selectShell =
+		'relative flex rounded border border-border hover:bg-muted has-focus-visible:border-ring has-focus-visible:ring-ring/50 has-focus-visible:ring-3';
+	const selectLabel = 'flex select-none items-center gap-1 py-1.5 pe-1.5 ps-2 text-sm font-medium';
+</script>
+
+<Calendar.Root
+	{type}
+	bind:value
+	bind:ref
+	bind:placeholder
+	{minValue}
+	{maxValue}
+	{isDateDisabled}
+	{isDateUnavailable}
+	{weekdayFormat}
+	{disableDaysOutsideMonth}
+	class="rounded border p-6"
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header class="flex items-center justify-between">
+			<Calendar.PrevButton class="rounded bg-background-alt p-2 hover:bg-muted inline-grid place-items-center">
+				<ChevronLeftIcon class="size-5" />
+			</Calendar.PrevButton>
+			{#if captionLayout === 'dropdown'}
+				<div class="flex items-center gap-1.5">
+					<Calendar.MonthSelect months={monthsProp} {monthFormat}>
+						{#snippet child({ props, monthItems, selectedMonthItem })}
+							<span class={selectShell}>
+								<select {...props} class="absolute inset-0 opacity-0">
+									{#each monthItems as month (month.value)}
+										<option value={month.value}>{month.label}</option>
+									{/each}
+								</select>
+								<span class={selectLabel} aria-hidden="true">
+									{selectedMonthItem.label}
+									<ChevronDownIcon class="size-3.5 text-muted-foreground" />
+								</span>
+							</span>
+						{/snippet}
+					</Calendar.MonthSelect>
+					<Calendar.YearSelect {years} {yearFormat}>
+						{#snippet child({ props, yearItems, selectedYearItem })}
+							<span class={selectShell}>
+								<select {...props} class="absolute inset-0 opacity-0">
+									{#each yearItems as year (year.value)}
+										<option value={year.value}>{year.label}</option>
+									{/each}
+								</select>
+								<span class={selectLabel} aria-hidden="true">
+									{selectedYearItem.label}
+									<ChevronDownIcon class="size-3.5 text-muted-foreground" />
+								</span>
+							</span>
+						{/snippet}
+					</Calendar.YearSelect>
+				</div>
+			{:else}
+				<Calendar.Heading class="text-md font-medium" />
+			{/if}
+			<Calendar.NextButton class="rounded bg-background-alt p-2 hover:bg-muted inline-grid place-items-center">
+				<ChevronRightIcon class="size-5" />
+			</Calendar.NextButton>
+		</Calendar.Header>
+		{#key months[0]!.value.toString()}
+			<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0" in:fade={{ duration: 180 }}>
+				{#each months as month, i (i)}
+					<Calendar.Grid class="w-full border-collapse select-none space-y-1">
+						<Calendar.GridHead>
+							<Calendar.GridRow class="mb-3 flex w-full justify-between">
+								{#each weekdays as day, i (i)}
+									<Calendar.HeadCell class="text-muted-foreground font-normal! w-10 rounded-md text-xs">
+										<div>{day.slice(0, 2)}</div>
+									</Calendar.HeadCell>
+								{/each}
+							</Calendar.GridRow>
+						</Calendar.GridHead>
+						<Calendar.GridBody class="flex flex-col min-h-60">
+							{#each month.weeks as weekDates, i (i)}
+								<Calendar.GridRow class="flex w-full flex-1 justify-between">
+									{#each weekDates as date, i (i)}
+										<Calendar.Cell {date} month={month.value} class="p-0! relative size-10 text-center text-sm">
+											<Calendar.Day
+												class="group relative inline-grid size-10 place-items-center whitespace-nowrap rounded p-0 text-sm font-normal text-foreground not-data-selected:hover:bg-muted data-unavailable:text-muted-foreground data-unavailable:line-through data-unavailable:pointer-events-none data-disabled:text-muted-foreground/50 data-disabled:pointer-events-none data-outside-month:text-muted-foreground/50 data-outside-month:pointer-events-none data-selected:bg-foreground data-selected:text-background data-selected:font-medium">
+												<div
+													class="bg-foreground group-data-selected:bg-background group-data-today:block absolute top-1.25 hidden size-1 rounded-full">
+												</div>
+												{date.day}
+											</Calendar.Day>
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				{/each}
+			</div>
+		{/key}
+	{/snippet}
+</Calendar.Root>

package/src/lib/blocks/copy-button/copy-button.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Button } from '../../components/button';
+	import * as Tooltip from '../../components/tooltip';
+	import { UseClipboard } from './copy.svelte';
+	import Clipboard from '@lucide/svelte/icons/clipboard';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		text,
+		variant = 'ghost',
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		text: string;
+	} = $props();
+
+	const clipboard = new UseClipboard();
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const rp = $derived(restProps as any);
+</script>
+
+<Tooltip.Root disableCloseOnTriggerClick>
+	<Tooltip.Trigger
+		{...rp}
+		class={join('bg-code absolute inset-e-2 top-3 z-10 size-7! hover:opacity-100 focus-visible:opacity-100', className)}
+		onclick={() => clipboard.copy(text)}>
+		{#snippet child({ props })}
+			<Button {...props} data-slot="copy-button" size="icon" {variant}>
+				<span class="sr-only" data-llm-ignore>Copy</span>
+				{#if clipboard.copied}
+					<CheckIcon />
+				{:else}
+					<Clipboard />
+				{/if}
+			</Button>
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content>
+		{clipboard.copied ? 'Copied' : 'Copy to Clipboard'}
+	</Tooltip.Content>
+</Tooltip.Root>

package/src/lib/blocks/copy-button/copy.svelte.ts

@@ -0,0 +1,52 @@
+/** Copy text to the clipboard with a temporary copied/failed feedback window. */
+export class UseClipboard {
+	#status = $state<'idle' | 'copied' | 'failed'>('idle');
+	#lastCopied = $state<string>();
+	#timeout: ReturnType<typeof setTimeout> | undefined;
+	/** Each copy takes a ticket; a late resolution or stale reset timer checks it before touching state. */
+	#ticket = 0;
+
+	/** Time in ms the copied/failed status holds before returning to idle. */
+	delay: number;
+
+	constructor(delay = 2000) {
+		this.delay = delay;
+	}
+
+	/** `'idle'` until a copy settles, then `'copied'` or `'failed'` for {@link delay} ms. */
+	get status() {
+		return this.#status;
+	}
+
+	/** Whether the copied feedback window is active. */
+	get copied() {
+		return this.#status === 'copied';
+	}
+
+	/** The last successfully copied text. */
+	get lastCopied() {
+		return this.#lastCopied;
+	}
+
+	/** Copies the given text to the user's clipboard. Resolves `true` on success. */
+	async copy(text: string | number): Promise<boolean> {
+		const ticket = ++this.#ticket;
+		clearTimeout(this.#timeout);
+		this.#status = 'idle';
+
+		let ok = true;
+		try {
+			await navigator.clipboard.writeText(text.toString());
+		} catch {
+			ok = false;
+		}
+
+		// A newer copy started while this one was in flight — it owns the feedback window.
+		if (ticket !== this.#ticket) return ok;
+
+		if (ok) this.#lastCopied = text.toString();
+		this.#status = ok ? 'copied' : 'failed';
+		this.#timeout = setTimeout(() => ticket === this.#ticket && (this.#status = 'idle'), this.delay);
+		return ok;
+	}
+}

package/src/lib/blocks/copy-button/index.ts

@@ -0,0 +1,2 @@
+export { default as CopyButton } from './copy-button.svelte';
+export { UseClipboard } from './copy.svelte';

package/src/lib/blocks/date-picker/date-picker-with-presets.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+	import { today, getLocalTimeZone, type DateValue } from '@internationalized/date';
+	import * as Select from '../../components/select';
+	import DatePicker from './date-picker.svelte';
+
+	type PresetItem = {
+		value: number;
+		label: string;
+	};
+
+	interface Props {
+		/** Selected date as an `@internationalized/date` `DateValue` — every date prop and callback speaks the same type. */
+		value?: DateValue;
+		placeholder?: string;
+		dateFormat?: Intl.DateTimeFormatOptions['dateStyle'];
+		locale?: string;
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: ClassValue;
+		contentClass?: ClassValue;
+		align?: 'start' | 'center' | 'end';
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		presets?: PresetItem[];
+		presetsPlaceholder?: string;
+		// Calendar props
+		captionLayout?: 'dropdown' | 'label';
+		minValue?: DateValue;
+		maxValue?: DateValue;
+		weekdayFormat?: 'short' | 'long' | 'narrow';
+		calendarLabel?: string;
+		fixedWeeks?: boolean;
+		isDateDisabled?: (date: DateValue) => boolean;
+		isDateUnavailable?: (date: DateValue) => boolean;
+	}
+
+	const defaultPresets: PresetItem[] = [
+		{ value: 0, label: 'Today' },
+		{ value: 1, label: 'Tomorrow' },
+		{ value: 3, label: 'In 3 days' },
+		{ value: 7, label: 'In a week' },
+	];
+
+	let {
+		value = $bindable(),
+		placeholder = 'Pick a date',
+		dateFormat = 'long',
+		locale = 'en-US',
+		disabled = false,
+		class: className,
+		triggerClass,
+		contentClass,
+		align = 'start',
+		side = 'bottom',
+		presets = defaultPresets,
+		presetsPlaceholder = 'Select preset',
+		captionLayout,
+		minValue,
+		maxValue,
+		weekdayFormat,
+		calendarLabel,
+		fixedWeeks,
+		isDateDisabled,
+		isDateUnavailable,
+	}: Props = $props();
+
+	// The preset dropdown is a write-only action menu: each pick maps a relative-day offset to a date, then resets
+	// so the placeholder shows again (and the same preset can be re-picked). The chosen date is surfaced on the
+	// outer popover trigger.
+	let presetSelection = $state('');
+</script>
+
+{#snippet presetMenu()}
+	<Select.Root
+		class="w-full"
+		placeholder={presetsPlaceholder}
+		bind:value={presetSelection}
+		onchange={(e) => {
+			const v = e.currentTarget.value;
+			presetSelection = '';
+			if (!v) return;
+			value = today(getLocalTimeZone()).add({ days: Number.parseInt(v) });
+		}}>
+		{#each presets as preset (preset.value)}
+			<Select.Option value={`${preset.value}`}>{preset.label}</Select.Option>
+		{/each}
+	</Select.Root>
+{/snippet}
+
+<DatePicker
+	bind:value
+	{placeholder}
+	{dateFormat}
+	{locale}
+	{disabled}
+	class={className}
+	{triggerClass}
+	{contentClass}
+	{align}
+	{side}
+	{captionLayout}
+	{minValue}
+	{maxValue}
+	{weekdayFormat}
+	{calendarLabel}
+	{fixedWeeks}
+	{isDateDisabled}
+	{isDateUnavailable}
+	contentHeader={presetMenu} />

package/src/lib/blocks/date-picker/date-picker.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import CalendarIcon from '@lucide/svelte/icons/calendar';
+	import { DateFormatter, type DateValue } from '@internationalized/date';
+	import { toDate } from '../../internal/date-time/utils.js';
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { buttonVariants } from '../../components/button';
+	import Calendar from '../calendar.svelte';
+	import { Popover } from '../../components/popover';
+
+	interface Props {
+		/** Selected date as an `@internationalized/date` `DateValue` — every date prop and callback speaks the same type. */
+		value?: DateValue;
+		placeholder?: string;
+		dateFormat?: Intl.DateTimeFormatOptions['dateStyle'];
+		locale?: string;
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: ClassValue;
+		contentClass?: ClassValue;
+		align?: 'start' | 'center' | 'end';
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		// Calendar props
+		captionLayout?: 'dropdown' | 'label';
+		minValue?: DateValue;
+		maxValue?: DateValue;
+		weekdayFormat?: 'short' | 'long' | 'narrow';
+		calendarLabel?: string;
+		fixedWeeks?: boolean;
+		isDateDisabled?: (date: DateValue) => boolean;
+		isDateUnavailable?: (date: DateValue) => boolean;
+		/** Internal composition seam used by the presets adapter. */
+		contentHeader?: Snippet;
+	}
+
+	let {
+		value = $bindable(),
+		placeholder = 'Pick a date',
+		dateFormat = 'long',
+		locale = 'en-US',
+		disabled = false,
+		class: className,
+		triggerClass,
+		contentClass,
+		align = 'start',
+		side = 'bottom',
+		captionLayout = 'label',
+		minValue,
+		maxValue,
+		weekdayFormat,
+		calendarLabel,
+		fixedWeeks,
+		isDateDisabled,
+		isDateUnavailable,
+		contentHeader,
+	}: Props = $props();
+
+	const displayValue = $derived(value ? new DateFormatter(locale, { dateStyle: dateFormat }).format(toDate(value)) : placeholder);
+</script>
+
+<div class={join('grid gap-2', className)}>
+	<Popover.Root>
+		<Popover.Trigger
+			{disabled}
+			class={buttonVariants({
+				variant: 'outline',
+				class: ['w-70 justify-start! text-start font-normal!', !value && 'text-muted-foreground', triggerClass],
+			})}>
+			<CalendarIcon class={contentHeader ? 'me-2 size-4' : 'size-4'} />
+			{displayValue}
+		</Popover.Trigger>
+		<Popover.Content
+			class={join(contentHeader ? 'flex w-auto! flex-col space-y-2 p-2!' : 'w-auto! p-0!', contentClass)}
+			{align}
+			{side}>
+			{@render contentHeader?.()}
+			<Calendar
+				type="single"
+				bind:value
+				{captionLayout}
+				{minValue}
+				{maxValue}
+				{weekdayFormat}
+				{calendarLabel}
+				{fixedWeeks}
+				{isDateDisabled}
+				{isDateUnavailable} />
+		</Popover.Content>
+	</Popover.Root>
+</div>

package/src/lib/blocks/date-picker/index.ts

@@ -0,0 +1,13 @@
+import DatePicker from './date-picker.svelte';
+import DatePickerWithPresets from './date-picker-with-presets.svelte';
+import RangeDatePicker from './range-date-picker.svelte';
+export {
+	DatePicker,
+	DatePickerWithPresets,
+	RangeDatePicker,
+	//
+	DatePicker as Root,
+	DatePickerWithPresets as WithPresets,
+	RangeDatePicker as Range,
+};
+export type { DateRange } from '../../internal/index.js';