yaxa-svelte 1.3.0 → 1.4.0

package/README.md

@@ -68,7 +68,7 @@ export default defineConfig({
 
 ### 3. Define Your Site Configuration
 
-Create `src/site.config.ts` — your single source of truth for branding, metadata, and SEO:
+Create `src/site.config.ts` — your single source of truth for branding, metadata, licensing, and SEO:
 
 ```ts
 // src/site.config.ts
@@ -79,14 +79,20 @@ export const siteConfig = defineSiteConfig({
 	title: 'My Indie SaaS — Build Fast with SvelteKit',
 	description: 'Fast, beautiful, accessible web applications.',
 	url: 'https://my-app.com',
+	// Single-email mode: Solo devs can set one email for contact, support & DPO
+	email: 'hello@my-app.com',
+	project: {
+		license: 'MIT',
+		type: 'open-source',
+		repositoryUrl: 'https://github.com/my-org/my-app'
+	},
 	theme: {
 		accent: 'svelte', // 'svelte' | 'emerald' | 'amber' | 'sky' | 'violet' | 'rose' | 'indigo'
 		neutral: 'zinc', // 'zinc' | 'slate' | 'stone' | 'neutral'
 		defaultMode: 'dark'
 	},
 	socials: {
-		github: 'https://github.com/my-org/my-app',
-		twitter: '@my_app'
+		github: 'https://github.com/my-org/my-app'
 	}
 });
 ```
@@ -219,15 +225,15 @@ export const POST = createPolarWebhookHandler();
 
 ## 🧩 Component Library
 
-| Category           | Components                                                                                                                                                   |
-| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **SaaS Suite**     | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                             |
-| **Admin Suite**    | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                   |
-| **Elements**       | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable`, `Chip`, `Meter`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`    |
-| **Forms**          | `Form`, `FormField`, `Input`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Slider`, `ColorPicker`                                              |
-| **Layout**         | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`                                                                                     |
-| **Overlays & Nav** | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Slideover`, `Popover`, `Tooltip`, `Alert`, `Accordion` |
-| **Composables**    | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`                                |
+| Category            | Components                                                                                                                                                                  |
+| :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **SaaS Suite**      | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                            |
+| **Admin Suite**     | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                  |
+| **Elements**        | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable`, `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`     |
+| **Forms**           | `Form`, `FormField`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker` |
+| **Layout & Blocks** | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`, Page Blocks (Hero, SaaS Metrics, 2FA Security)                                                    |
+| **Overlays & Nav**  | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Slideover`, `Popover`, `Tooltip`, `Alert`, `Accordion`                |
+| **Composables**     | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`                                               |
 
 ---
 

package/dist/components/elements/MetricCard.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon, { type IconSource } from './Icon.svelte';
+	import Badge from './Badge.svelte';
+	import Skeleton from './Skeleton.svelte';
+	import { cn } from '../../utils/cn';
+
+	interface Props {
+		title: string;
+		value: string | number;
+		change?: number;
+		changeType?: 'percent' | 'absolute';
+		changePeriod?: string;
+		icon?: IconSource;
+		sparkline?: number[];
+		sparklineColor?: 'primary' | 'success' | 'warning' | 'error' | 'neutral' | 'auto';
+		variant?: 'outline' | 'flat' | 'elevated';
+		loading?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		value,
+		change,
+		changeType = 'percent',
+		changePeriod = 'vs last period',
+		icon,
+		sparkline,
+		sparklineColor = 'auto',
+		variant = 'outline',
+		loading = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let isPositive = $derived(change !== undefined && change >= 0);
+	let changeFormatted = $derived.by(() => {
+		if (change === undefined) return '';
+		const prefix = change >= 0 ? '+' : '';
+		return `${prefix}${change}${changeType === 'percent' ? '%' : ''}`;
+	});
+
+	let resolvedColor = $derived.by(() => {
+		if (sparklineColor !== 'auto') return sparklineColor;
+		if (change !== undefined) {
+			return change >= 0 ? 'success' : 'error';
+		}
+		return 'primary';
+	});
+
+	// SVG Sparkline geometry calculation (viewBox: 0 0 120 36)
+	let sparklineData = $derived.by(() => {
+		if (!sparkline || sparkline.length < 2) return null;
+		const width = 120;
+		const height = 36;
+		const padding = 3;
+
+		const min = Math.min(...sparkline);
+		const max = Math.max(...sparkline);
+		const range = max === min ? 1 : max - min;
+
+		const points = sparkline.map((val, idx) => {
+			const x = (idx / (sparkline.length - 1)) * width;
+			const y = height - padding - ((val - min) / range) * (height - padding * 2);
+			return { x, y };
+		});
+
+		const linePath = points.reduce(
+			(acc, pt, i) =>
+				i === 0
+					? `M ${pt.x.toFixed(1)} ${pt.y.toFixed(1)}`
+					: `${acc} L ${pt.x.toFixed(1)} ${pt.y.toFixed(1)}`,
+			''
+		);
+
+		const firstX = points[0].x.toFixed(1);
+		const lastX = points[points.length - 1].x.toFixed(1);
+		const areaPath = `${linePath} L ${lastX} ${height} L ${firstX} ${height} Z`;
+
+		const lastPoint = points[points.length - 1];
+
+		return { linePath, areaPath, lastPoint };
+	});
+
+	let colorHex = $derived.by(() => {
+		switch (resolvedColor) {
+			case 'success':
+				return { stroke: '#10b981', fill: '#10b981' };
+			case 'error':
+				return { stroke: '#f43f5e', fill: '#f43f5e' };
+			case 'warning':
+				return { stroke: '#f59e0b', fill: '#f59e0b' };
+			case 'neutral':
+				return { stroke: '#71717a', fill: '#71717a' };
+			case 'primary':
+			default:
+				return { stroke: '#ff3e00', fill: '#ff3e00' };
+		}
+	});
+
+	let containerClasses = $derived.by(() => {
+		const base =
+			'relative overflow-hidden rounded-xl p-5 transition-all duration-200 bg-white dark:bg-neutral-900';
+		switch (variant) {
+			case 'flat':
+				return cn(base, 'bg-neutral-50/80 dark:bg-neutral-900/60 border-0', className);
+			case 'elevated':
+				return cn(
+					base,
+					'shadow-md hover:shadow-lg border border-neutral-200/80 dark:border-neutral-800',
+					className
+				);
+			case 'outline':
+			default:
+				return cn(
+					base,
+					'border border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700',
+					className
+				);
+		}
+	});
+
+	let uniqueId = $derived(`sparkline-${Math.random().toString(36).slice(2, 8)}`);
+</script>
+
+<div class={containerClasses}>
+	{#if loading}
+		<div class="space-y-3">
+			<div class="flex items-center justify-between">
+				<Skeleton class="h-4 w-28" />
+				<Skeleton class="h-8 w-8 rounded-lg" />
+			</div>
+			<Skeleton class="h-8 w-36" />
+			<div class="flex items-center gap-2 pt-1">
+				<Skeleton class="h-4 w-16" />
+				<Skeleton class="h-4 w-24" />
+			</div>
+		</div>
+	{:else}
+		<div class="flex items-start justify-between gap-2">
+			<span class="truncate text-sm font-medium text-neutral-500 dark:text-neutral-400">
+				{title}
+			</span>
+			{#if icon}
+				<div
+					class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"
+				>
+					<Icon name={icon} size="sm" />
+				</div>
+			{/if}
+		</div>
+
+		<div class="mt-2 flex items-baseline justify-between gap-4">
+			<div>
+				<div class="text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+					{value}
+				</div>
+
+				{#if change !== undefined || changePeriod}
+					<div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-xs">
+						{#if change !== undefined}
+							<Badge
+								color={isPositive ? 'success' : 'error'}
+								variant="soft"
+								size="sm"
+								class="gap-0.5 font-semibold"
+							>
+								<Icon
+									name={isPositive ? 'arrow-up-right' : 'arrow-down-right'}
+									size="xs"
+									class="inline-block"
+								/>
+								{changeFormatted}
+							</Badge>
+						{/if}
+						{#if changePeriod}
+							<span class="text-neutral-500 dark:text-neutral-400">
+								{changePeriod}
+							</span>
+						{/if}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Sparkline Chart -->
+			{#if sparklineData}
+				<div class="flex h-10 w-24 shrink-0 items-center">
+					<svg
+						viewBox="0 0 120 36"
+						class="h-full w-full overflow-visible"
+						preserveAspectRatio="none"
+					>
+						<defs>
+							<linearGradient id={uniqueId} x1="0" y1="0" x2="0" y2="1">
+								<stop offset="0%" stop-color={colorHex.fill} stop-opacity="0.35" />
+								<stop offset="100%" stop-color={colorHex.fill} stop-opacity="0" />
+							</linearGradient>
+						</defs>
+						<path d={sparklineData.areaPath} fill="url(#{uniqueId})" />
+						<path
+							d={sparklineData.linePath}
+							fill="none"
+							stroke={colorHex.stroke}
+							stroke-width="2.2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<circle
+							cx={sparklineData.lastPoint.x}
+							cy={sparklineData.lastPoint.y}
+							r="3"
+							fill={colorHex.stroke}
+							class="animate-pulse"
+						/>
+					</svg>
+				</div>
+			{/if}
+		</div>
+
+		{#if children}
+			<div class="mt-4 border-t border-neutral-100 pt-3 dark:border-neutral-800">
+				{@render children()}
+			</div>
+		{/if}
+	{/if}
+</div>

package/dist/components/elements/MetricCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type IconSource } from './Icon.svelte';
+interface Props {
+    title: string;
+    value: string | number;
+    change?: number;
+    changeType?: 'percent' | 'absolute';
+    changePeriod?: string;
+    icon?: IconSource;
+    sparkline?: number[];
+    sparklineColor?: 'primary' | 'success' | 'warning' | 'error' | 'neutral' | 'auto';
+    variant?: 'outline' | 'flat' | 'elevated';
+    loading?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const MetricCard: import("svelte").Component<Props, {}, "">;
+type MetricCard = ReturnType<typeof MetricCard>;
+export default MetricCard;

package/dist/components/forms/DatePicker.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+	import { Popover } from 'bits-ui';
+	import Icon from '../elements/Icon.svelte';
+	import { cn } from '../../utils/cn';
+
+	export interface DatePreset {
+		label: string;
+		getValue: () => Date;
+	}
+
+	interface Props {
+		value?: string | Date;
+		placeholder?: string;
+		min?: string | Date;
+		max?: string | Date;
+		disabled?: boolean;
+		presets?: DatePreset[];
+		class?: string;
+		onchange?: (date: Date | null, dateString: string) => void;
+	}
+
+	let {
+		value = $bindable(),
+		placeholder = 'Select date',
+		min,
+		max,
+		disabled = false,
+		presets,
+		class: className = '',
+		onchange
+	}: Props = $props();
+
+	let open = $state(false);
+
+	// Parse input date
+	function toDate(d: string | Date | undefined): Date | null {
+		if (!d) return null;
+		if (d instanceof Date) return isNaN(d.getTime()) ? null : d;
+		const parsed = new Date(d);
+		return isNaN(parsed.getTime()) ? null : parsed;
+	}
+
+	function formatDateIso(d: Date): string {
+		const year = d.getFullYear();
+		const month = String(d.getMonth() + 1).padStart(2, '0');
+		const day = String(d.getDate()).padStart(2, '0');
+		return `${year}-${month}-${day}`;
+	}
+
+	function formatDisplay(d: Date | null): string {
+		if (!d) return '';
+		return d.toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	let selectedDate = $derived(toDate(value));
+	let viewDate = $state(new Date());
+
+	$effect(() => {
+		if (selectedDate) {
+			viewDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
+		}
+	});
+
+	let viewYear = $derived(viewDate.getFullYear());
+	let viewMonth = $derived(viewDate.getMonth());
+
+	const MONTH_NAMES = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	];
+
+	const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+	const defaultPresets: DatePreset[] = [
+		{ label: 'Today', getValue: () => new Date() },
+		{
+			label: 'Tomorrow',
+			getValue: () => new Date(Date.now() + 24 * 60 * 60 * 1000)
+		},
+		{
+			label: '+7 Days',
+			getValue: () => new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+		}
+	];
+
+	let activePresets = $derived(presets || defaultPresets);
+
+	let calendarDays = $derived.by(() => {
+		const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+		const firstDayIndex = new Date(viewYear, viewMonth, 1).getDay();
+		const prevMonthDays = new Date(viewYear, viewMonth, 0).getDate();
+
+		const cells: Array<{
+			day: number;
+			monthOffset: number; // -1: prev, 0: current, 1: next
+			date: Date;
+			isSelected: boolean;
+			isToday: boolean;
+			isDisabled: boolean;
+		}> = [];
+
+		const minDate = toDate(min);
+		const maxDate = toDate(max);
+		const today = new Date();
+
+		// Prev month padding
+		for (let i = firstDayIndex - 1; i >= 0; i--) {
+			const day = prevMonthDays - i;
+			const d = new Date(viewYear, viewMonth - 1, day);
+			cells.push({
+				day,
+				monthOffset: -1,
+				date: d,
+				isSelected: Boolean(selectedDate && formatDateIso(d) === formatDateIso(selectedDate)),
+				isToday: formatDateIso(d) === formatDateIso(today),
+				isDisabled: Boolean((minDate && d < minDate) || (maxDate && d > maxDate))
+			});
+		}
+
+		// Current month
+		for (let day = 1; day <= daysInMonth; day++) {
+			const d = new Date(viewYear, viewMonth, day);
+			cells.push({
+				day,
+				monthOffset: 0,
+				date: d,
+				isSelected: Boolean(selectedDate && formatDateIso(d) === formatDateIso(selectedDate)),
+				isToday: formatDateIso(d) === formatDateIso(today),
+				isDisabled: Boolean((minDate && d < minDate) || (maxDate && d > maxDate))
+			});
+		}
+
+		// Next month padding to fill complete weeks
+		const remaining = (7 - (cells.length % 7)) % 7;
+		for (let day = 1; day <= remaining; day++) {
+			const d = new Date(viewYear, viewMonth + 1, day);
+			cells.push({
+				day,
+				monthOffset: 1,
+				date: d,
+				isSelected: Boolean(selectedDate && formatDateIso(d) === formatDateIso(selectedDate)),
+				isToday: formatDateIso(d) === formatDateIso(today),
+				isDisabled: Boolean((minDate && d < minDate) || (maxDate && d > maxDate))
+			});
+		}
+
+		return cells;
+	});
+
+	function prevMonth() {
+		viewDate = new Date(viewYear, viewMonth - 1, 1);
+	}
+
+	function nextMonth() {
+		viewDate = new Date(viewYear, viewMonth + 1, 1);
+	}
+
+	function selectDay(date: Date) {
+		const iso = formatDateIso(date);
+		if (value instanceof Date) {
+			value = date;
+		} else {
+			value = iso;
+		}
+		onchange?.(date, iso);
+		open = false;
+	}
+
+	function applyPreset(preset: DatePreset) {
+		const date = preset.getValue();
+		viewDate = new Date(date.getFullYear(), date.getMonth(), 1);
+		selectDay(date);
+	}
+
+	function clearDate() {
+		value = undefined;
+		onchange?.(null, '');
+		open = false;
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger
+		{disabled}
+		class={cn(
+			'inline-flex items-center justify-between gap-2.5 rounded-lg border px-3.5 py-2 text-sm font-medium transition-all duration-150 outline-none',
+			'border-neutral-300 bg-white text-neutral-900 hover:border-neutral-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20',
+			'dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:border-neutral-600 dark:focus:border-primary-400 dark:focus:ring-primary-400/20',
+			disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+			className
+		)}
+	>
+		<div class="inline-flex items-center gap-2 truncate">
+			<Icon name="calendar" size="sm" class="shrink-0 text-neutral-500 dark:text-neutral-400" />
+			<span
+				class={selectedDate
+					? 'font-semibold text-neutral-900 dark:text-neutral-100'
+					: 'text-neutral-500 dark:text-neutral-400'}
+			>
+				{selectedDate ? formatDisplay(selectedDate) : placeholder}
+			</span>
+		</div>
+		<Icon name="chevron-down" size="xs" class="shrink-0 text-neutral-400 dark:text-neutral-500" />
+	</Popover.Trigger>
+
+	<Popover.Portal>
+		<Popover.Content
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-72 rounded-xl border border-neutral-200 bg-white p-3 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900"
+			sideOffset={6}
+		>
+			<!-- Presets Bar -->
+			{#if activePresets.length > 0}
+				<div
+					class="mb-3 flex flex-wrap gap-1 border-b border-neutral-100 pb-2.5 dark:border-neutral-800"
+				>
+					{#each activePresets as preset}
+						<button
+							type="button"
+							onclick={() => applyPreset(preset)}
+							class="rounded-md bg-neutral-100 px-2 py-1 text-xs font-medium text-neutral-700 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+						>
+							{preset.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<!-- Month / Year Navigation -->
+			<div class="flex items-center justify-between px-1 py-1">
+				<button
+					type="button"
+					onclick={prevMonth}
+					class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100"
+					aria-label="Previous month"
+				>
+					<Icon name="chevron-left" size="sm" />
+				</button>
+				<span class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+					{MONTH_NAMES[viewMonth]}
+					{viewYear}
+				</span>
+				<button
+					type="button"
+					onclick={nextMonth}
+					class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100"
+					aria-label="Next month"
+				>
+					<Icon name="chevron-right" size="sm" />
+				</button>
+			</div>
+
+			<!-- Weekday Headers -->
+			<div class="mt-2 grid grid-cols-7 gap-1 text-center">
+				{#each WEEKDAYS as day}
+					<span class="py-0.5 text-xs font-medium text-neutral-400 dark:text-neutral-500">
+						{day}
+					</span>
+				{/each}
+			</div>
+
+			<!-- Calendar Matrix -->
+			<div class="mt-1 grid grid-cols-7 gap-1">
+				{#each calendarDays as cell}
+					<button
+						type="button"
+						disabled={cell.isDisabled}
+						onclick={() => selectDay(cell.date)}
+						class={cn(
+							'inline-flex h-8 w-8 items-center justify-center rounded-lg text-xs font-medium transition-all duration-100',
+							cell.monthOffset !== 0
+								? 'text-neutral-400 dark:text-neutral-600'
+								: 'text-neutral-900 dark:text-neutral-100',
+							cell.isToday && !cell.isSelected
+								? 'border border-primary-500 font-bold text-primary-600 dark:text-primary-400'
+								: '',
+							cell.isSelected
+								? 'bg-primary-600 font-bold text-white shadow-xs hover:bg-primary-500 dark:bg-primary-500 dark:hover:bg-primary-400'
+								: 'hover:bg-neutral-100 dark:hover:bg-neutral-800',
+							cell.isDisabled
+								? 'cursor-not-allowed opacity-30 hover:bg-transparent'
+								: 'cursor-pointer'
+						)}
+					>
+						{cell.day}
+					</button>
+				{/each}
+			</div>
+
+			<!-- Footer -->
+			{#if selectedDate}
+				<div
+					class="mt-3 flex items-center justify-between border-t border-neutral-100 pt-2 dark:border-neutral-800"
+				>
+					<button
+						type="button"
+						onclick={clearDate}
+						class="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
+					>
+						Clear
+					</button>
+					<span class="text-xs text-neutral-500 dark:text-neutral-400">
+						{formatDisplay(selectedDate)}
+					</span>
+				</div>
+			{/if}
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>

package/dist/components/forms/DatePicker.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface DatePreset {
+    label: string;
+    getValue: () => Date;
+}
+interface Props {
+    value?: string | Date;
+    placeholder?: string;
+    min?: string | Date;
+    max?: string | Date;
+    disabled?: boolean;
+    presets?: DatePreset[];
+    class?: string;
+    onchange?: (date: Date | null, dateString: string) => void;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;