@joewinke/jatui 0.1.23 → 0.1.24

package/src/lib/components/Button.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-	/**
-	 * Button Component
-	 *
-	 * Generic DaisyUI button with variant, size, loading state, and optional href.
-	 */
-
-	interface Props {
-		variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'error' | 'warning' | 'success' | 'info';
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		href?: string;
-		type?: 'button' | 'submit' | 'reset';
-		disabled?: boolean;
-		loading?: boolean;
-		/** When true, show an animated success check before the label (transitions.dev "Success check"). */
-		success?: boolean;
-		class?: string;
-		onclick?: (e: MouseEvent) => void;
-		children?: import('svelte').Snippet;
-	}
-
-	let {
-		variant = 'primary',
-		size = 'md',
-		href,
-		type = 'button',
-		disabled = false,
-		loading = false,
-		success = false,
-		class: className = '',
-		onclick,
-		children
-	}: Props = $props();
-
-	const variantClass = $derived(
-		{
-			primary: 'btn-primary',
-			secondary: 'btn-secondary',
-			outline: 'btn-outline',
-			ghost: 'btn-ghost',
-			error: 'btn-error',
-			warning: 'btn-warning',
-			success: 'btn-success',
-			info: 'btn-info'
-		}[variant] || 'btn-primary'
-	);
-
-	const sizeClass = $derived(
-		{
-			xs: 'btn-xs',
-			sm: 'btn-sm',
-			md: '',
-			lg: 'btn-lg'
-		}[size]
-	);
-
-	const buttonClass = $derived(`btn ${variantClass} ${sizeClass} ${className}`.trim());
-</script>
-
-{#if href}
-	<a {href} class={buttonClass} role="button" tabindex="0">
-		{#if children}
-			{@render children()}
-		{/if}
-	</a>
-{:else}
-	<button {type} disabled={disabled || loading} aria-busy={loading || undefined} class={buttonClass} {onclick}>
-		{#if loading}
-			<span class="loading loading-spinner loading-xs"></span>
-		{:else if success}
-			<span class="t-success-check" data-state="in" aria-hidden="true">
-				<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-					<path pathLength="1" d="M5 13l4 4L19 7" />
-				</svg>
-			</span>
-		{/if}
-		{#if children}
-			{@render children()}
-		{/if}
-	</button>
-{/if}

package/src/lib/components/CalendarPicker.svelte

@@ -1,284 +0,0 @@
-<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-[0.8125rem] text-base-content/45 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-[0.9375rem] 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-[0.75rem]">
-			<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

@@ -1,67 +0,0 @@
-<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-200 border border-base-300 transition-[transform,border-color] duration-150 hover:-translate-y-[1px] hover:border-base-content/20 cursor-pointer {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-200 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

@@ -1,82 +0,0 @@
-<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>