@joewinke/jatui 0.1.25 → 0.1.27

package/dist/components/BurndownChart.svelte.d.ts

@@ -0,0 +1,17 @@
+interface OtherMilestone {
+    ordinal: string;
+    name: string;
+    acceptedAt: string;
+}
+type $$ComponentProps = {
+    tasks: any[];
+    milestoneFilter?: string;
+    currentMilestoneId?: string | null;
+    milestones?: any[];
+    otherMilestones?: OtherMilestone[];
+    showHealth?: boolean;
+    paymentDate?: string | null;
+};
+declare const BurndownChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type BurndownChart = ReturnType<typeof BurndownChart>;
+export default BurndownChart;

package/dist/components/Button.svelte

@@ -0,0 +1,81 @@
+<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/dist/components/Button.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/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-[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/dist/components/CalendarPicker.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+     * 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';
+type $$ComponentProps = {
+    onSelect: (date: Date) => void;
+    getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
+    isDateEnabled?: (date: Date) => boolean;
+    maxDaysInAdvance?: number;
+    minNoticeHours?: number;
+    weekdaysOnly?: boolean;
+    accentColor?: string;
+};
+declare const CalendarPicker: import("svelte").Component<$$ComponentProps, {
+    AvailabilityCounts: typeof AvailabilityCounts;
+}, "">;
+type CalendarPicker = ReturnType<typeof CalendarPicker>;
+export default CalendarPicker;

package/dist/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-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/dist/components/Card.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/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>

package/dist/components/CharacterCounter.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    targetCount: number;
+    duration?: number;
+    prefix?: string;
+    suffix?: string;
+    class?: string;
+}
+declare const CharacterCounter: import("svelte").Component<Props, {}, "">;
+type CharacterCounter = ReturnType<typeof CharacterCounter>;
+export default CharacterCounter;