@joewinke/jatui 0.1.0

package/src/lib/components/ThemeSelector.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	/**
+	 * ThemeSelector — DaisyUI theme switcher with visual preview dots, localStorage persistence,
+	 * and animated transitions on theme change.
+	 *
+	 * By default includes all 33 standard DaisyUI themes. Pass custom `themes` prop to override.
+	 */
+	import { onMount } from 'svelte';
+
+	interface ThemeOption {
+		name: string;
+		label: string;
+	}
+
+	const DEFAULT_THEMES: ThemeOption[] = [
+		{ name: 'light', label: 'Light' },
+		{ name: 'dark', label: 'Dark' },
+		{ name: 'cupcake', label: 'Cupcake' },
+		{ name: 'bumblebee', label: 'Bumblebee' },
+		{ name: 'emerald', label: 'Emerald' },
+		{ name: 'corporate', label: 'Corporate' },
+		{ name: 'synthwave', label: 'Synthwave' },
+		{ name: 'retro', label: 'Retro' },
+		{ name: 'cyberpunk', label: 'Cyberpunk' },
+		{ name: 'valentine', label: 'Valentine' },
+		{ name: 'halloween', label: 'Halloween' },
+		{ name: 'garden', label: 'Garden' },
+		{ name: 'forest', label: 'Forest' },
+		{ name: 'aqua', label: 'Aqua' },
+		{ name: 'lofi', label: 'Lofi' },
+		{ name: 'pastel', label: 'Pastel' },
+		{ name: 'fantasy', label: 'Fantasy' },
+		{ name: 'wireframe', label: 'Wireframe' },
+		{ name: 'black', label: 'Black' },
+		{ name: 'luxury', label: 'Luxury' },
+		{ name: 'dracula', label: 'Dracula' },
+		{ name: 'cmyk', label: 'CMYK' },
+		{ name: 'autumn', label: 'Autumn' },
+		{ name: 'business', label: 'Business' },
+		{ name: 'acid', label: 'Acid' },
+		{ name: 'lemonade', label: 'Lemonade' },
+		{ name: 'night', label: 'Night' },
+		{ name: 'coffee', label: 'Coffee' },
+		{ name: 'winter', label: 'Winter' },
+		{ name: 'dim', label: 'Dim' },
+		{ name: 'nord', label: 'Nord' },
+		{ name: 'sunset', label: 'Sunset' }
+	];
+
+	let {
+		dropUp = false,
+		themes = DEFAULT_THEMES,
+		defaultTheme = 'light',
+		storageKey = 'theme',
+		onThemeChange,
+	}: {
+		dropUp?: boolean;
+		themes?: ThemeOption[];
+		defaultTheme?: string;
+		storageKey?: string;
+		onThemeChange?: (theme: string) => void;
+	} = $props();
+
+	let currentTheme = $state(defaultTheme);
+	let isAnimating = $state(false);
+
+	const currentThemeLabel = $derived(
+		themes.find((t) => t.name === currentTheme)?.label || currentTheme
+	);
+
+	onMount(() => {
+		const savedTheme = localStorage.getItem(storageKey);
+		if (savedTheme && themes.some((t) => t.name === savedTheme)) {
+			currentTheme = savedTheme;
+			document.documentElement.setAttribute('data-theme', savedTheme);
+		} else {
+			currentTheme = defaultTheme;
+			document.documentElement.setAttribute('data-theme', defaultTheme);
+			localStorage.setItem(storageKey, defaultTheme);
+		}
+	});
+
+	function handleThemeChange(themeName: string) {
+		if (themeName === currentTheme) return;
+
+		// Close dropdown first so the trigger is visible during animation
+		if (document.activeElement instanceof HTMLElement) {
+			document.activeElement.blur();
+		}
+
+		isAnimating = true;
+
+		setTimeout(() => {
+			currentTheme = themeName;
+			document.documentElement.setAttribute('data-theme', themeName);
+			localStorage.setItem(storageKey, themeName);
+			onThemeChange?.(themeName);
+		}, 150);
+
+		setTimeout(() => {
+			isAnimating = false;
+		}, 500);
+	}
+</script>
+
+<div class="dropdown dropdown-end" class:dropdown-top={dropUp}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		tabindex="0"
+		role="button"
+		class="flex items-center gap-2 cursor-pointer hover:bg-base-300 transition-colors px-2 py-1 rounded"
+		aria-label="Change Theme"
+		title="Change Theme"
+	>
+		<div
+			data-theme={currentTheme}
+			class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm transition-transform duration-300 ease-out"
+			class:theme-spin={isAnimating}
+		>
+			<div class="bg-base-content size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 0ms"></div>
+			<div class="bg-primary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 50ms"></div>
+			<div class="bg-secondary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 100ms"></div>
+			<div class="bg-accent size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 150ms"></div>
+		</div>
+		<span class="text-sm font-medium transition-opacity duration-200" class:opacity-50={isAnimating}>{currentThemeLabel}</span>
+	</div>
+
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		tabindex="0"
+		class="dropdown-content bg-base-200 text-base-content rounded-box
+		top-px max-h-[calc(50vh-6.5rem)] overflow-y-auto border border-white/5
+		shadow-2xl outline-1 outline-black/5 mb-2 z-50"
+	>
+		<ul class="menu w-56">
+			<li class="menu-title text-xs">Theme</li>
+
+			{#each themes as theme}
+				<li>
+					<button
+						class="gap-3 px-2"
+						onclick={() => handleThemeChange(theme.name)}
+						class:active={currentTheme === theme.name}
+					>
+						<div
+							data-theme={theme.name}
+							class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5
+							rounded-md p-1 shadow-sm"
+						>
+							<div class="bg-base-content size-1 rounded-full"></div>
+							<div class="bg-primary size-1 rounded-full"></div>
+							<div class="bg-secondary size-1 rounded-full"></div>
+							<div class="bg-accent size-1 rounded-full"></div>
+						</div>
+
+						<div class="w-32 truncate">{theme.label}</div>
+
+						{#if currentTheme === theme.name}
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="h-3 w-3 shrink-0">
+								<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
+							</svg>
+						{:else}
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="invisible h-3 w-3 shrink-0">
+								<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
+							</svg>
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
+<style>
+	.theme-spin {
+		animation: theme-spin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	@keyframes theme-spin {
+		0% { transform: rotate(0deg) scale(1); }
+		50% { transform: rotate(180deg) scale(1.2); }
+		100% { transform: rotate(360deg) scale(1); }
+	}
+
+	.theme-dot-animate {
+		animation: dot-pulse 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+		animation-delay: var(--dot-delay);
+	}
+
+	@keyframes dot-pulse {
+		0% { transform: scale(1); opacity: 1; }
+		50% { transform: scale(0.5); opacity: 0.5; }
+		100% { transform: scale(1); opacity: 1; }
+	}
+</style>

package/src/lib/components/TimeSlotPicker.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	/**
+	 * TimeSlotPicker — Display available time slots grouped by morning/afternoon/evening.
+	 *
+	 * Accepts an array of TimeSlot objects with `start` (Date), `end` (Date), and `available` (boolean).
+	 * Grouped automatically by hour: morning (<12), afternoon (<17), evening (17+).
+	 */
+
+	import type { TimeSlot } from '../types/booking';
+
+	export type { TimeSlot };
+
+	let {
+		slots,
+		loading = false,
+		onSelect,
+		accentColor = 'primary',
+	}: {
+		slots: TimeSlot[];
+		loading?: boolean;
+		onSelect: (slot: TimeSlot) => void;
+		accentColor?: string;
+	} = $props();
+
+	const groupedSlots = $derived(() => {
+		const morning: TimeSlot[] = [];
+		const afternoon: TimeSlot[] = [];
+		const evening: TimeSlot[] = [];
+
+		for (const slot of slots) {
+			const hour = slot.start.getHours();
+			if (hour < 12) {
+				morning.push(slot);
+			} else if (hour < 17) {
+				afternoon.push(slot);
+			} else {
+				evening.push(slot);
+			}
+		}
+
+		return { morning, afternoon, evening };
+	});
+
+	function formatTime(date: Date): string {
+		return date.toLocaleTimeString('en-US', {
+			hour: 'numeric',
+			minute: '2-digit',
+			hour12: true
+		});
+	}
+
+	function handleSlotClick(slot: TimeSlot) {
+		if (slot.available) {
+			onSelect(slot);
+		}
+	}
+</script>
+
+<div class="time-slot-picker">
+	{#if loading}
+		<div class="flex justify-center py-12">
+			<span class="loading loading-spinner loading-lg text-{accentColor}"></span>
+		</div>
+	{:else if slots.length === 0}
+		<div class="text-center py-12">
+			<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-base-200 flex items-center justify-center">
+				<!-- Clock icon -->
+				<svg class="w-8 h-8 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+				</svg>
+			</div>
+			<h3 class="text-lg font-semibold mb-2">No Available Times</h3>
+			<p class="text-base-content/60">Please select a different date.</p>
+		</div>
+	{:else}
+		{@const { morning, afternoon, evening } = groupedSlots()}
+		{@const availableCount = slots.filter(s => s.available).length}
+
+		<p class="text-sm text-base-content/60 mb-4">
+			{availableCount} time{availableCount !== 1 ? 's' : ''} available
+		</p>
+
+		<div class="space-y-6">
+			{#if morning.length > 0}
+				<div>
+					<h4 class="text-sm font-medium text-base-content/70 mb-3 flex items-center gap-2">
+						<!-- Sun icon -->
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+						</svg>
+						Morning
+					</h4>
+					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+						{#each morning as slot}
+							<button
+								onclick={() => handleSlotClick(slot)}
+								disabled={!slot.available}
+								class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200
+									{slot.available
+										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
+										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
+							>
+								{formatTime(slot.start)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if afternoon.length > 0}
+				<div>
+					<h4 class="text-sm font-medium text-base-content/70 mb-3 flex items-center gap-2">
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+						</svg>
+						Afternoon
+					</h4>
+					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+						{#each afternoon as slot}
+							<button
+								onclick={() => handleSlotClick(slot)}
+								disabled={!slot.available}
+								class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200
+									{slot.available
+										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
+										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
+							>
+								{formatTime(slot.start)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if evening.length > 0}
+				<div>
+					<h4 class="text-sm font-medium text-base-content/70 mb-3 flex items-center gap-2">
+						<!-- Moon icon -->
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+						</svg>
+						Evening
+					</h4>
+					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+						{#each evening as slot}
+							<button
+								onclick={() => handleSlotClick(slot)}
+								disabled={!slot.available}
+								class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200
+									{slot.available
+										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
+										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
+							>
+								{formatTime(slot.start)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>