@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/TextArea.svelte

@@ -1,162 +0,0 @@
-<script lang="ts">
-	/**
-	 * TextArea Component
-	 *
-	 * Multi-line text input with validation, auto-resize, and character count.
-	 * Converted from Svelte 4 to Svelte 5 runes.
-	 */
-
-	interface Props {
-		label?: string;
-		value?: string;
-		placeholder?: string;
-		rows?: number;
-		maxlength?: number;
-		minlength?: number;
-		required?: boolean;
-		disabled?: boolean;
-		readonly?: boolean;
-		autoResize?: boolean;
-		error?: string;
-		helpText?: string;
-		showCount?: boolean;
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-		id?: string;
-		name?: string;
-		resize?: 'none' | 'vertical' | 'horizontal' | 'both';
-		oninput?: (value: string) => void;
-	}
-
-	let {
-		label = '',
-		value = $bindable(''),
-		placeholder = '',
-		rows = 3,
-		maxlength,
-		minlength,
-		required = false,
-		disabled = false,
-		readonly = false,
-		autoResize = false,
-		error = '',
-		helpText = '',
-		showCount = false,
-		size = 'md',
-		class: className = '',
-		id = `textarea-${Math.random().toString(36).substr(2, 9)}`,
-		name = '',
-		resize = 'vertical',
-		oninput
-	}: Props = $props();
-
-	let textareaElement: HTMLTextAreaElement | undefined = $state();
-
-	const sizeClass = $derived({ sm: 'textarea-sm', md: '', lg: 'textarea-lg' }[size]);
-	const resizeClass = $derived(
-		{ none: 'resize-none', vertical: 'resize-y', horizontal: 'resize-x', both: 'resize' }[resize]
-	);
-
-	const textareaClass = $derived(
-		[
-			'textarea textarea-bordered w-full transition-shadow duration-200',
-			sizeClass,
-			resizeClass,
-			error ? 'textarea-error' : '',
-			disabled ? 'textarea-disabled' : '',
-			className
-		]
-			.filter(Boolean)
-			.join(' ')
-	);
-
-	const characterCount = $derived(value?.length || 0);
-	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
-
-	function handleInput(event: Event) {
-		const target = event.target as HTMLTextAreaElement;
-		value = target.value;
-		if (autoResize) autoResizeTextarea(target);
-		oninput?.(value);
-	}
-
-	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
-		textarea.style.height = 'auto';
-		textarea.style.height = textarea.scrollHeight + 'px';
-	}
-
-	$effect(() => {
-		if (autoResize && textareaElement && value !== undefined) {
-			autoResizeTextarea(textareaElement);
-		}
-	});
-
-	// Error-state shake (transitions.dev). Replays `t-input-shake` when `error`
-	// becomes set. See TextInput for the full rationale.
-	let hadError = false;
-	$effect(() => {
-		const hasError = !!error;
-		if (hasError && !hadError && textareaElement) {
-			const reduce =
-				typeof window !== 'undefined' &&
-				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-			if (!reduce) {
-				textareaElement.classList.remove('t-input-shake');
-				void textareaElement.offsetWidth;
-				textareaElement.classList.add('t-input-shake');
-			}
-		}
-		hadError = hasError;
-	});
-</script>
-
-<div class="form-control w-full">
-	{#if label}
-		<label for={id} class="label">
-			<span class="text-[0.8125rem] font-medium text-base-content/85">
-				{label}
-				{#if required}
-					<span class="text-error ml-1">*</span>
-				{/if}
-			</span>
-		</label>
-	{/if}
-
-	<textarea
-		bind:this={textareaElement}
-		{id}
-		{name}
-		{placeholder}
-		{rows}
-		{maxlength}
-		{minlength}
-		{required}
-		{disabled}
-		{readonly}
-		bind:value
-		oninput={handleInput}
-		class={textareaClass}
-		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
-		aria-invalid={error ? 'true' : 'false'}
-		style={autoResize ? `min-height: calc(1.5em * ${rows} + 1rem);` : ''}
-		onanimationend={() => textareaElement?.classList.remove('t-input-shake')}
-	></textarea>
-
-	{#if showCount && maxlength}
-		<div class="label">
-			<span class="text-[0.8125rem] {isOverLimit ? 'text-error' : 'text-base-content/45'}">
-				{characterCount}/{maxlength}
-			</span>
-		</div>
-	{/if}
-
-	{#if error}
-		<div class="label">
-			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
-		</div>
-	{:else if helpText}
-		<div class="label">
-			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
-		</div>
-	{/if}
-</div>

package/src/lib/components/TextInput.svelte

@@ -1,131 +0,0 @@
-<script lang="ts">
-	/**
-	 * TextInput Component
-	 *
-	 * Labeled text input with validation, error state, help text, and character count.
-	 * Converted from Svelte 4 to Svelte 5 runes.
-	 */
-
-	interface Props {
-		label: string;
-		value?: string;
-		placeholder?: string;
-		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-		required?: boolean;
-		disabled?: boolean;
-		readonly?: boolean;
-		error?: string;
-		helpText?: string;
-		size?: 'sm' | 'md' | 'lg';
-		maxlength?: number;
-		minlength?: number;
-		pattern?: string;
-		showCount?: boolean;
-		class?: string;
-		id?: string;
-		name?: string;
-		autocomplete?: string;
-	}
-
-	let {
-		label,
-		value = $bindable(''),
-		placeholder = '',
-		type = 'text',
-		required = false,
-		disabled = false,
-		readonly = false,
-		error = '',
-		helpText = '',
-		size = 'md',
-		maxlength,
-		minlength,
-		pattern,
-		showCount = false,
-		class: className = '',
-		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
-		name = '',
-		autocomplete = ''
-	}: Props = $props();
-
-	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
-
-	const inputClass = $derived(
-		['input input-bordered w-full transition-shadow duration-200', sizeClass, error ? 'input-error' : '', disabled ? 'input-disabled' : '', className]
-			.filter(Boolean)
-			.join(' ')
-	);
-
-	const characterCount = $derived(value?.length || 0);
-	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
-
-	// Error-state shake (transitions.dev "Error state shake"). When `error`
-	// transitions from empty to set, replay the `t-input-shake` keyframe from the
-	// host app's transitions.css. Self-contained reflow-restart so a repeat error
-	// re-shakes. Colour stays on the `input-error` class; this owns only motion.
-	let inputEl: HTMLInputElement | undefined = $state();
-	let hadError = false;
-	$effect(() => {
-		const hasError = !!error;
-		if (hasError && !hadError && inputEl) {
-			const reduce =
-				typeof window !== 'undefined' &&
-				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-			if (!reduce) {
-				inputEl.classList.remove('t-input-shake');
-				void inputEl.offsetWidth; // force reflow to restart the animation
-				inputEl.classList.add('t-input-shake');
-			}
-		}
-		hadError = hasError;
-	});
-</script>
-
-<div class="form-control w-full">
-	<label for={id} class="label">
-		<span class="text-[0.8125rem] font-medium text-base-content/85">
-			{label}
-			{#if required}
-				<span class="text-error ml-1">*</span>
-			{/if}
-		</span>
-	</label>
-
-	<input
-		bind:this={inputEl}
-		{id}
-		{name}
-		{type}
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-		{maxlength}
-		{minlength}
-		{pattern}
-		autocomplete={autocomplete as AutoFill}
-		bind:value
-		class={inputClass}
-		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
-		aria-invalid={error ? 'true' : 'false'}
-		onanimationend={() => inputEl?.classList.remove('t-input-shake')}
-	/>
-
-	{#if showCount && maxlength}
-		<div class="label">
-			<span class="text-[0.8125rem] {isOverLimit ? 'text-error' : 'text-base-content/45'}">
-				{characterCount}/{maxlength}
-			</span>
-		</div>
-	{/if}
-
-	{#if error}
-		<div class="label">
-			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
-		</div>
-	{:else if helpText}
-		<div class="label">
-			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
-		</div>
-	{/if}
-</div>

package/src/lib/components/ThemeSelector.svelte

@@ -1,206 +0,0 @@
-<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();
-
-	// svelte-ignore state_referenced_locally
-	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 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-base-300
-		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"
-						>
-							<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>
-	/* NOTE: DaisyUI v5.0.0 has a stuck-animation bug on `.dropdown-content`
-	   (`@keyframes dropdown { 0% { opacity: 0 } }` pins opacity to 0). If the
-	   theme dropdown opens but stays invisible, the consuming project needs
-	   the global fix in its `app.css`:
-
-	     .dropdown-content { animation: none !important; }
-
-	   Upstream daisyui >= 5.5.x patches this; once you upgrade you can drop
-	   the override. */
-
-	.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

@@ -1,162 +0,0 @@
-<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-[0.8125rem] text-base-content/45 mb-4">
-			{availableCount} time{availableCount !== 1 ? 's' : ''} available
-		</p>
-
-		<div class="space-y-6">
-			{#if morning.length > 0}
-				<div>
-					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
-						<!-- 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-[0.9375rem] 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-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
-						<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-[0.9375rem] 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-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
-						<!-- 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-[0.9375rem] 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>