@joewinke/jatui 0.1.0

package/src/lib/components/CalendarPicker.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	/**
+	 * CalendarPicker — Month-view calendar with availability dots, date constraints,
+	 * and navigation. Generic scheduling calendar.
+	 *
+	 * Pass `getAvailability` callback to load availability data for the visible date range.
+	 * Pass `isDateEnabled` to control which dates are selectable.
+	 */
+
+	import type { AvailabilityCounts } from '../types/booking';
+
+	export type { AvailabilityCounts };
+
+	const DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+	let {
+		onSelect,
+		getAvailability,
+		isDateEnabled,
+		maxDaysInAdvance = 90,
+		minNoticeHours = 24,
+		weekdaysOnly = true,
+		accentColor = 'primary',
+	}: {
+		onSelect: (date: Date) => void;
+		getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
+		isDateEnabled?: (date: Date) => boolean;
+		maxDaysInAdvance?: number;
+		minNoticeHours?: number;
+		weekdaysOnly?: boolean;
+		accentColor?: string;
+	} = $props();
+
+	let viewDate = $state(new Date());
+	let availabilityCounts = $state(new Map<string, { available: number; total: number }>());
+	let isLoadingAvailability = $state(false);
+
+	const calendarDays = $derived(() => {
+		const year = viewDate.getFullYear();
+		const month = viewDate.getMonth();
+
+		const firstDay = new Date(year, month, 1);
+		const startDate = new Date(firstDay);
+		startDate.setDate(startDate.getDate() - startDate.getDay());
+
+		const days: Date[] = [];
+		const current = new Date(startDate);
+
+		for (let i = 0; i < 42; i++) {
+			days.push(new Date(current));
+			current.setDate(current.getDate() + 1);
+		}
+
+		return days;
+	});
+
+	function defaultIsDateEnabled(date: Date): boolean {
+		const today = new Date();
+		today.setHours(0, 0, 0, 0);
+
+		if (date < today) return false;
+
+		const maxDate = new Date(today);
+		maxDate.setDate(maxDate.getDate() + maxDaysInAdvance);
+		if (date > maxDate) return false;
+
+		const minNoticeDate = new Date();
+		minNoticeDate.setHours(minNoticeDate.getHours() + minNoticeHours);
+		minNoticeDate.setHours(0, 0, 0, 0);
+		if (date < minNoticeDate) return false;
+
+		if (weekdaysOnly) {
+			const dayOfWeek = date.getDay();
+			if (dayOfWeek === 0 || dayOfWeek === 6) return false;
+		}
+
+		return true;
+	}
+
+	function checkDateEnabled(date: Date): boolean {
+		if (isDateEnabled) return isDateEnabled(date);
+		return defaultIsDateEnabled(date);
+	}
+
+	function isToday(date: Date): boolean {
+		const today = new Date();
+		return (
+			date.getDate() === today.getDate() &&
+			date.getMonth() === today.getMonth() &&
+			date.getFullYear() === today.getFullYear()
+		);
+	}
+
+	function isCurrentMonth(date: Date): boolean {
+		return date.getMonth() === viewDate.getMonth();
+	}
+
+	function prevMonth() {
+		const newDate = new Date(viewDate);
+		newDate.setMonth(newDate.getMonth() - 1);
+		viewDate = newDate;
+	}
+
+	function nextMonth() {
+		const newDate = new Date(viewDate);
+		newDate.setMonth(newDate.getMonth() + 1);
+		viewDate = newDate;
+	}
+
+	function handleDateClick(date: Date) {
+		if (checkDateEnabled(date)) {
+			onSelect(date);
+		}
+	}
+
+	const canGoPrev = $derived(() => {
+		const today = new Date();
+		return (
+			viewDate.getMonth() > today.getMonth() ||
+			viewDate.getFullYear() > today.getFullYear()
+		);
+	});
+
+	const canGoNext = $derived(() => {
+		const today = new Date();
+		const maxDate = new Date(today);
+		maxDate.setDate(maxDate.getDate() + maxDaysInAdvance);
+		return (
+			viewDate.getMonth() < maxDate.getMonth() ||
+			viewDate.getFullYear() < maxDate.getFullYear()
+		);
+	});
+
+	async function loadAvailability() {
+		if (!getAvailability) return;
+
+		isLoadingAvailability = true;
+		try {
+			const days = calendarDays();
+			const startDate = days[0];
+			const endDate = days[days.length - 1];
+
+			const counts = await getAvailability(startDate, endDate);
+			const map = new Map<string, { available: number; total: number }>();
+			for (const [key, value] of Object.entries(counts)) {
+				map.set(key, value);
+			}
+			availabilityCounts = map;
+		} catch {
+			// Silently ignore — dots won't show
+		} finally {
+			isLoadingAvailability = false;
+		}
+	}
+
+	$effect(() => {
+		const _ = viewDate.getMonth();
+		loadAvailability();
+	});
+
+	function getAvailabilityLevel(date: Date): 'none' | 'low' | 'medium' | 'high' | 'full' {
+		const dateStr = date.toISOString().split('T')[0];
+		const counts = availabilityCounts.get(dateStr);
+
+		if (!counts || counts.total === 0) return 'none';
+
+		const ratio = counts.available / counts.total;
+		if (ratio === 0) return 'full';
+		if (ratio <= 0.25) return 'low';
+		if (ratio <= 0.6) return 'medium';
+		return 'high';
+	}
+</script>
+
+<div class="calendar-picker">
+	<!-- Month Navigation -->
+	<div class="flex items-center justify-between mb-6">
+		<button
+			onclick={prevMonth}
+			disabled={!canGoPrev()}
+			class="btn btn-ghost btn-sm btn-circle disabled:opacity-30"
+			aria-label="Previous month"
+		>
+			<!-- ChevronLeft -->
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+
+		<h3 class="text-lg font-semibold">
+			{viewDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+		</h3>
+
+		<button
+			onclick={nextMonth}
+			disabled={!canGoNext()}
+			class="btn btn-ghost btn-sm btn-circle disabled:opacity-30"
+			aria-label="Next month"
+		>
+			<!-- ChevronRight -->
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Day Headers -->
+	<div class="grid grid-cols-7 gap-1 mb-2">
+		{#each DAYS_SHORT as day}
+			<div class="text-center text-sm font-medium text-base-content/50 py-2">
+				{day}
+			</div>
+		{/each}
+	</div>
+
+	<!-- Calendar Grid -->
+	<div class="grid grid-cols-7 gap-1">
+		{#each calendarDays() as date}
+			{@const available = checkDateEnabled(date)}
+			{@const today = isToday(date)}
+			{@const currentMonth = isCurrentMonth(date)}
+			{@const availLevel = getAvailabilityLevel(date)}
+
+			<button
+				onclick={() => handleDateClick(date)}
+				disabled={!available}
+				class="aspect-square flex flex-col items-center justify-center rounded-lg text-sm font-medium
+					transition-all duration-200 relative
+					{currentMonth ? '' : 'opacity-30'}
+					{available
+						? `hover:bg-${accentColor} hover:text-${accentColor}-content cursor-pointer bg-${accentColor}/15 text-${accentColor}`
+						: 'text-base-content/30 cursor-not-allowed'}
+					{today ? `ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100` : ''}"
+			>
+				<span>{date.getDate()}</span>
+				{#if currentMonth && available && !isLoadingAvailability}
+					<div class="flex gap-0.5 mt-0.5">
+						{#if availLevel === 'high'}
+							<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+							<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+							<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+						{:else if availLevel === 'medium'}
+							<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+							<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+						{:else if availLevel === 'low'}
+							<span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
+						{:else if availLevel === 'full'}
+							<span class="w-1.5 h-1.5 rounded-full bg-base-content/20"></span>
+						{/if}
+					</div>
+				{/if}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Legend -->
+	{#if getAvailability}
+		<div class="flex flex-wrap items-center gap-x-5 gap-y-2 mt-6 pt-4 border-t border-base-300 text-sm">
+			<div class="flex items-center gap-2">
+				<div class="flex gap-0.5">
+					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
+				</div>
+				<span class="text-base-content/60">Many slots</span>
+			</div>
+			<div class="flex items-center gap-2">
+				<div class="flex gap-0.5">
+					<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+					<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+				</div>
+				<span class="text-base-content/60">Some slots</span>
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
+				<span class="text-base-content/60">Few slots</span>
+			</div>
+			<div class="flex items-center gap-2">
+				<div class="w-4 h-4 rounded ring-2 ring-{accentColor}"></div>
+				<span class="text-base-content/60">Today</span>
+			</div>
+		</div>
+	{/if}
+</div>

package/src/lib/components/Card.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	/**
+	 * Card Component
+	 *
+	 * DaisyUI card container with optional header, footer, and click handler.
+	 */
+
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+		header?: import('svelte').Snippet;
+		footer?: import('svelte').Snippet;
+		onclick?: (event: MouseEvent) => void;
+		role?: string;
+		tabindex?: number;
+	}
+
+	let { class: className = '', children, header, footer, onclick, role, tabindex }: Props = $props();
+</script>
+
+{#if onclick || role}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		class="card bg-base-100 shadow-xl border border-base-300 {className}"
+		{onclick}
+		role={role || (onclick ? 'button' : undefined)}
+		tabindex={tabindex ?? 0}
+	>
+		{#if header}
+			<div class="card-body pb-4">
+				<div class="flex justify-between items-center">
+					{@render header()}
+				</div>
+			</div>
+		{/if}
+		{#if children}
+			<div class="card-body {header ? 'pt-0' : ''}">
+				{@render children()}
+			</div>
+		{/if}
+		{#if footer}
+			<div class="card-actions justify-end p-6 pt-0">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="card bg-base-100 shadow-xl border border-base-300 {className}">
+		{#if header}
+			<div class="card-body pb-4">
+				<div class="flex justify-between items-center">
+					{@render header()}
+				</div>
+			</div>
+		{/if}
+		{#if children}
+			<div class="card-body {header ? 'pt-0' : ''}">
+				{@render children()}
+			</div>
+		{/if}
+		{#if footer}
+			<div class="card-actions justify-end p-6 pt-0">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/CharacterCounter.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  interface Props {
+    targetCount: number
+    duration?: number
+    prefix?: string
+    suffix?: string
+    class?: string
+  }
+
+  let {
+    targetCount,
+    duration = 2000,
+    prefix = "",
+    suffix = "",
+    class: className = ""
+  }: Props = $props()
+
+  let count = $state(0)
+  let isAnimating = $state(false)
+
+  onMount(() => {
+    const timeout = setTimeout(() => {
+      animateCount()
+    }, 100)
+
+    return () => clearTimeout(timeout)
+  })
+
+  function animateCount() {
+    if (isAnimating) return
+
+    isAnimating = true
+    const startTime = Date.now()
+    const startCount = 0
+    const endCount = targetCount
+
+    function updateCount() {
+      const now = Date.now()
+      const elapsed = now - startTime
+      const progress = Math.min(elapsed / duration, 1)
+
+      // easeOutQuart
+      const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+      const currentCount = Math.floor(startCount + (endCount - startCount) * easeOutQuart)
+
+      count = currentCount
+
+      if (progress < 1) {
+        requestAnimationFrame(updateCount)
+      } else {
+        count = endCount
+        isAnimating = false
+      }
+    }
+
+    requestAnimationFrame(updateCount)
+  }
+
+  $effect(() => {
+    if (targetCount !== count && !isAnimating) {
+      animateCount()
+    }
+  })
+
+  function formatNumber(num: number): string {
+    return num.toLocaleString()
+  }
+</script>
+
+<span class="inline-flex items-center {className}">
+  {#if prefix}
+    <span class="mr-1">{prefix}</span>
+  {/if}
+  <span class="tabular-nums font-semibold">
+    {formatNumber(count)}
+  </span>
+  {#if suffix}
+    <span class="ml-1">{suffix}</span>
+  {/if}
+</span>