@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/buttons/ButtonStepper.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		onchange?: (value: number) => void;
+	}
+
+	const { class: className = '', value = 22, min = 0, max, step = 1, onchange } = $props();
+
+	let count = $state(value);
+
+	const handleMinus = () => {
+		const newValue = Math.max(min, count - step);
+		count = newValue;
+		onchange?.(newValue);
+	};
+
+	const handlePlus = () => {
+		const newValue = max !== undefined ? Math.min(max, count + step) : count + step;
+		count = newValue;
+		onchange?.(newValue);
+	};
+</script>
+
+<div class={cn('inline-flex items-center rounded-md border bg-background', className)}>
+	<button
+		type="button"
+		onclick={handleMinus}
+		disabled={count <= min}
+		class="h-8 w-8 flex items-center justify-center text-muted-foreground hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+	>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<line x1="5" y1="12" x2="19" y2="12" />
+		</svg>
+	</button>
+
+	<span class="px-3 text-sm font-medium min-w-[2rem] text-center">{count}</span>
+
+	<button
+		type="button"
+		onclick={handlePlus}
+		disabled={max !== undefined && count >= max}
+		class="h-8 w-8 flex items-center justify-center text-muted-foreground hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+	>
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<line x1="12" y1="5" x2="12" y2="19" />
+			<line x1="5" y1="12" x2="19" y2="12" />
+		</svg>
+	</button>
+</div>

package/src/registry/blocks/buttons/ButtonSteps.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	type IconType = 'check' | 'box' | 'list' | 'default';
+
+	interface Step {
+		label: string;
+		icon?: IconType;
+	}
+
+	interface Props {
+		class?: string;
+		steps?: Step[];
+		currentStep?: number;
+	}
+
+	const defaultSteps: Step[] = [
+		{ label: '1', icon: 'check' },
+		{ label: '2. Delivery', icon: 'default' },
+		{ label: '3', icon: 'box' },
+		{ label: '4', icon: 'list' }
+	];
+
+	const { class: className = '', steps = defaultSteps, currentStep = 1 } = $props();
+
+	const getIcon = (iconType: IconType | undefined, isCompleted: boolean) => {
+		if (isCompleted && iconType !== 'default') {
+			return '<polyline points="20 6 9 17 4 12"/>';
+		}
+
+		switch (iconType) {
+			case 'box':
+				return '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>';
+			case 'list':
+				return '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>';
+			case 'check':
+				return '<polyline points="20 6 9 17 4 12"/>';
+			default:
+				return '';
+		}
+	};
+</script>
+
+<div class={cn('inline-flex items-center gap-1', className)}>
+	{#each steps as step, index (index)}
+		<div class="flex items-center gap-1">
+			{#if index > 0}
+				<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground mx-0.5">
+					<polyline points="9 18 15 12 9 6" />
+				</svg>
+			{/if}
+
+			<div
+				class={cn(
+					'flex items-center gap-1.5 rounded-md border bg-background px-2.5 py-1 text-sm',
+					index === currentStep ? 'border-foreground font-medium' : '',
+					index < currentStep ? 'border-green-500' : ''
+				)}
+			>
+				{#if index < currentStep || (step.icon === 'check' && index < currentStep)}
+					<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-green-600">
+						{@html getIcon('check', true)}
+					</svg>
+				{:else if getIcon(step.icon, false)}
+					<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						{@html getIcon(step.icon, false)}
+					</svg>
+				{/if}
+				<span>{step.label}</span>
+			</div>
+		</div>
+	{/each}
+</div>

package/src/registry/blocks/buttons/ButtonToggleGroup.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		options?: string[];
+		value?: string;
+		onchange?: (value: string) => void;
+	}
+
+	const defaultOptions = ['Today', 'This week', 'This month', 'This year'];
+	const { class: className = '', options = defaultOptions, value, onchange } = $props();
+
+	let selected = $state(value || options[0]);
+
+	const handleSelect = (option: string) => {
+		selected = option;
+		onchange?.(option);
+	};
+</script>
+
+<div class={cn('inline-flex rounded-md border overflow-hidden divide-x', className)}>
+	{#each options as option (option)}
+		<button
+			type="button"
+			onclick={() => handleSelect(option)}
+			class={cn(
+				'px-4 py-1.5 text-sm bg-background hover:bg-muted/50 transition-colors',
+				selected === option && 'bg-muted font-medium'
+			)}
+		>
+			{option}
+		</button>
+	{/each}
+</div>

package/src/registry/blocks/buttons/ButtonsGroup.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		onNew?: () => void;
+		onEdit?: () => void;
+		onSend?: () => void;
+		onMore?: () => void;
+	}
+
+	const { class: className = '', onNew, onEdit, onSend, onMore } = $props();
+</script>
+
+<div class={cn('inline-flex rounded-md border overflow-hidden divide-x', className)}>
+	<button
+		type="button"
+		onclick={onNew}
+		class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-background hover:bg-muted transition-colors"
+	>
+		<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<line x1="12" y1="5" x2="12" y2="19" />
+			<line x1="5" y1="12" x2="19" y2="12" />
+		</svg>
+		<span>New</span>
+	</button>
+
+	<button
+		type="button"
+		onclick={onEdit}
+		class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-background hover:bg-muted transition-colors"
+	>
+		<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+			<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+		</svg>
+		<span>Edit</span>
+	</button>
+
+	<button
+		type="button"
+		onclick={onSend}
+		class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-background hover:bg-muted transition-colors"
+	>
+		<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<line x1="22" y1="2" x2="11" y2="13" />
+			<polygon points="22 2 15 22 11 13 2 9 22 2" />
+		</svg>
+		<span>Send</span>
+	</button>
+
+	<button
+		type="button"
+		onclick={onMore}
+		class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-background hover:bg-muted transition-colors"
+	>
+		<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<circle cx="12" cy="12" r="1" />
+			<circle cx="19" cy="12" r="1" />
+			<circle cx="5" cy="12" r="1" />
+		</svg>
+	</button>
+</div>

package/src/registry/blocks/buttons/SocialButtonsHorizontal.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		providers?: string[];
+		onSignIn?: (provider: string) => void;
+	}
+
+	const { class: className = '', providers = ['google', 'x', 'facebook', 'github'], onSignIn } = $props();
+
+	const getIcon = (providerId: string) => {
+		switch (providerId) {
+			case 'google':
+				return '<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="currentColor"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="currentColor"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="currentColor"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="currentColor"/>';
+			case 'x':
+				return '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="currentColor"/>';
+			case 'facebook':
+				return '<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="currentColor"/>';
+			case 'github':
+				return '<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" fill="currentColor"/>';
+			default:
+				return '';
+		}
+	};
+</script>
+
+<div class={cn('inline-flex gap-2', className)}>
+	{#each providers as provider (provider)}
+		<button
+			type="button"
+			onclick={() => onSignIn?.(provider)}
+			class="flex h-9 w-9 items-center justify-center rounded-md border bg-background hover:bg-muted transition-colors"
+			title={provider}
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+				{@html getIcon(provider)}
+			</svg>
+		</button>
+	{/each}
+</div>

package/src/registry/blocks/buttons/SocialButtonsVertical.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Provider {
+		id: string;
+		label: string;
+	}
+
+	interface Props {
+		class?: string;
+		providers?: Provider[];
+		onSignIn?: (provider: string) => void;
+	}
+
+	const defaultProviders: Provider[] = [
+		{ id: 'google', label: 'Sign in with Google' },
+		{ id: 'x', label: 'Sign in with X' },
+		{ id: 'facebook', label: 'Sign in with Facebook' },
+		{ id: 'github', label: 'Sign in with GitHub' }
+	];
+
+	const { class: className = '', providers = defaultProviders, onSignIn } = $props();
+
+	const getIcon = (providerId: string) => {
+		switch (providerId) {
+			case 'google':
+				return '<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="currentColor"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="currentColor"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="currentColor"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="currentColor"/>';
+			case 'x':
+				return '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="currentColor"/>';
+			case 'facebook':
+				return '<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="currentColor"/>';
+			case 'github':
+				return '<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" fill="currentColor"/>';
+			default:
+				return '';
+		}
+	};
+</script>
+
+<div class={cn('flex flex-col gap-2', className)}>
+	{#each providers as provider (provider.id)}
+		<button
+			type="button"
+			onclick={() => onSignIn?.(provider.id)}
+			class="flex w-full items-center justify-center gap-3 rounded-md border bg-background px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+				{@html getIcon(provider.id)}
+			</svg>
+			<span>{provider.label}</span>
+		</button>
+	{/each}
+</div>

package/src/registry/blocks/buttons/index.ts

@@ -0,0 +1,10 @@
+export { default as ButtonStepper } from './ButtonStepper.svelte';
+export { default as ButtonLike } from './ButtonLike.svelte';
+export { default as ButtonSplitDropdown } from './ButtonSplitDropdown.svelte';
+export { default as ButtonsGroup } from './ButtonsGroup.svelte';
+export { default as SocialButtonsVertical } from './SocialButtonsVertical.svelte';
+export { default as SocialButtonsHorizontal } from './SocialButtonsHorizontal.svelte';
+export { default as ButtonToggleGroup } from './ButtonToggleGroup.svelte';
+export { default as ButtonBookmark } from './ButtonBookmark.svelte';
+export { default as ButtonSteps } from './ButtonSteps.svelte';
+export { default as ButtonMenu } from './ButtonMenu.svelte';

package/src/registry/blocks/calendar/CalendarBlock01.svelte

@@ -0,0 +1,169 @@
+<!--
+  CalendarBlock01.svelte
+  Dual month calendar view with navigation and date selection.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    selectedDate = null
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+  } = $props();
+
+  // Internal state: first month displayed
+  let viewYear = $state(selectedDate ? selectedDate.getFullYear() : new Date().getFullYear());
+  let viewMonth = $state(selectedDate ? selectedDate.getMonth() : new Date().getMonth());
+
+  const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  function getDaysInMonth(year: number, month: number): number {
+    return new Date(year, month + 1, 0).getDate();
+  }
+
+  function getFirstDayOfMonth(year: number, month: number): number {
+    return new Date(year, month, 1).getDay();
+  }
+
+  function getCalendarDays(year: number, month: number): Array<{ day: number; current: boolean }> {
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = getFirstDayOfMonth(year, month);
+    const daysInPrevMonth = getDaysInMonth(year, month - 1);
+
+    const days: Array<{ day: number; current: boolean }> = [];
+
+    // Previous month's trailing days
+    for (let i = firstDay - 1; i >= 0; i--) {
+      days.push({ day: daysInPrevMonth - i, current: false });
+    }
+
+    // Current month days
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({ day: i, current: true });
+    }
+
+    // Next month's leading days to fill grid
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      days.push({ day: i, current: false });
+    }
+
+    return days;
+  }
+
+  function isSelected(year: number, month: number, day: number): boolean {
+    if (!selectedDate) return false;
+    return selectedDate.getFullYear() === year &&
+           selectedDate.getMonth() === month &&
+           selectedDate.getDate() === day;
+  }
+
+  function selectDay(year: number, month: number, day: number) {
+    selectedDate = new Date(year, month, day);
+  }
+
+  function prevMonth() {
+    if (viewMonth === 0) {
+      viewMonth = 11;
+      viewYear--;
+    } else {
+      viewMonth--;
+    }
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) {
+      viewMonth = 0;
+      viewYear++;
+    } else {
+      viewMonth++;
+    }
+  }
+
+  // Second month
+  let secondMonth = $derived(viewMonth === 11 ? 0 : viewMonth + 1);
+  let secondYear = $derived(viewMonth === 11 ? viewYear + 1 : viewYear);
+
+  let leftDays = $derived(getCalendarDays(viewYear, viewMonth));
+  let rightDays = $derived(getCalendarDays(secondYear, secondMonth));
+</script>
+
+<div class={cn('inline-flex flex-col', className)}>
+  <!-- Navigation -->
+  <div class="mb-4 flex items-center justify-between">
+    <Button variant="outline" size="sm" onclick={prevMonth}>
+      <!-- Lucide: ChevronLeft -->
+      &lt;
+    </Button>
+    <span class="text-sm font-medium">
+      {MONTHS[viewMonth]} {viewYear} - {MONTHS[secondMonth]} {secondYear}
+    </span>
+    <Button variant="outline" size="sm" onclick={nextMonth}>
+      <!-- Lucide: ChevronRight -->
+      &gt;
+    </Button>
+  </div>
+
+  <div class="flex gap-8">
+    <!-- Left Month -->
+    <div>
+      <h3 class="mb-2 text-center text-sm font-medium">{MONTHS[viewMonth]} {viewYear}</h3>
+      <div class="grid grid-cols-7 gap-0">
+        {#each DAYS as day}
+          <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground">
+            {day}
+          </div>
+        {/each}
+        {#each leftDays as { day, current }}
+          <button
+            type="button"
+            class={cn(
+              'flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+              !current && 'text-muted-foreground/40',
+              current && 'hover:bg-muted',
+              current && isSelected(viewYear, viewMonth, day) && 'bg-primary text-primary-foreground hover:bg-primary'
+            )}
+            onclick={() => current && selectDay(viewYear, viewMonth, day)}
+            disabled={!current}
+          >
+            {day}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Right Month -->
+    <div>
+      <h3 class="mb-2 text-center text-sm font-medium">{MONTHS[secondMonth]} {secondYear}</h3>
+      <div class="grid grid-cols-7 gap-0">
+        {#each DAYS as day}
+          <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground">
+            {day}
+          </div>
+        {/each}
+        {#each rightDays as { day, current }}
+          <button
+            type="button"
+            class={cn(
+              'flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+              !current && 'text-muted-foreground/40',
+              current && 'hover:bg-muted',
+              current && isSelected(secondYear, secondMonth, day) && 'bg-primary text-primary-foreground hover:bg-primary'
+            )}
+            onclick={() => current && selectDay(secondYear, secondMonth, day)}
+            disabled={!current}
+          >
+            {day}
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/calendar/CalendarBlock02.svelte

@@ -0,0 +1,133 @@
+<!--
+  CalendarBlock02.svelte
+  Single month calendar view with navigation and date selection.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    selectedDate = null,
+    month = selectedDate ? selectedDate.getMonth() : new Date().getMonth(),
+    year = selectedDate ? selectedDate.getFullYear() : new Date().getFullYear()
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+    month?: number;
+    year?: number;
+  } = $props();
+
+  const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  function getDaysInMonth(y: number, m: number): number {
+    return new Date(y, m + 1, 0).getDate();
+  }
+
+  function getFirstDayOfMonth(y: number, m: number): number {
+    return new Date(y, m, 1).getDay();
+  }
+
+  function getCalendarDays(y: number, m: number): Array<{ day: number; current: boolean }> {
+    const daysInMonth = getDaysInMonth(y, m);
+    const firstDay = getFirstDayOfMonth(y, m);
+    const daysInPrevMonth = getDaysInMonth(y, m - 1);
+    const days: Array<{ day: number; current: boolean }> = [];
+
+    for (let i = firstDay - 1; i >= 0; i--) {
+      days.push({ day: daysInPrevMonth - i, current: false });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({ day: i, current: true });
+    }
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      days.push({ day: i, current: false });
+    }
+    return days;
+  }
+
+  function isSelected(d: number): boolean {
+    if (!selectedDate) return false;
+    return selectedDate.getFullYear() === year &&
+           selectedDate.getMonth() === month &&
+           selectedDate.getDate() === d;
+  }
+
+  function isToday(d: number): boolean {
+    const today = new Date();
+    return today.getFullYear() === year &&
+           today.getMonth() === month &&
+           today.getDate() === d;
+  }
+
+  function selectDay(d: number) {
+    selectedDate = new Date(year, month, d);
+  }
+
+  function prevMonth() {
+    if (month === 0) {
+      month = 11;
+      year--;
+    } else {
+      month--;
+    }
+  }
+
+  function nextMonth() {
+    if (month === 11) {
+      month = 0;
+      year++;
+    } else {
+      month++;
+    }
+  }
+
+  let calendarDays = $derived(getCalendarDays(year, month));
+</script>
+
+<div class={cn('inline-flex flex-col rounded-md border p-4', className)}>
+  <!-- Header -->
+  <div class="mb-4 flex items-center justify-between">
+    <Button variant="ghost" size="sm" onclick={prevMonth}>
+      <!-- Lucide: ChevronLeft -->
+      &lt;
+    </Button>
+    <h3 class="text-sm font-medium">{MONTHS[month]} {year}</h3>
+    <Button variant="ghost" size="sm" onclick={nextMonth}>
+      <!-- Lucide: ChevronRight -->
+      &gt;
+    </Button>
+  </div>
+
+  <!-- Day headers -->
+  <div class="grid grid-cols-7 gap-0">
+    {#each DAYS as day}
+      <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground">
+        {day}
+      </div>
+    {/each}
+
+    <!-- Calendar days -->
+    {#each calendarDays as { day, current }}
+      <button
+        type="button"
+        class={cn(
+          'flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+          !current && 'text-muted-foreground/40',
+          current && 'hover:bg-muted',
+          current && isToday(day) && !isSelected(day) && 'border border-primary text-primary',
+          current && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+        )}
+        onclick={() => current && selectDay(day)}
+        disabled={!current}
+      >
+        {day}
+      </button>
+    {/each}
+  </div>
+</div>