@joewinke/jatui 0.1.0

package/src/lib/components/AvailabilityModal.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	/**
+	 * AvailabilityModal — Modal for setting date overrides: mark a day as unavailable
+	 * or set custom hours. Used in scheduling/booking interfaces.
+	 */
+	import { slide } from 'svelte/transition';
+	import type { DateOverride, OverrideType } from '../types/booking';
+
+	export type { DateOverride, OverrideType };
+
+	let {
+		date,
+		existingOverride = null,
+		hostId = '',
+		onSave,
+		onClose,
+	}: {
+		date: Date;
+		existingOverride?: DateOverride | null;
+		hostId?: string;
+		onSave: (override: DateOverride) => void;
+		onClose: () => void;
+	} = $props();
+
+	const initialType = existingOverride?.override_type || 'unavailable';
+	const initialStart = existingOverride?.start_time?.slice(0, 5) || '09:00';
+	const initialEnd = existingOverride?.end_time?.slice(0, 5) || '17:00';
+	const initialReason = existingOverride?.reason || '';
+
+	let overrideType = $state<OverrideType>(initialType);
+	let startTime = $state(initialStart);
+	let endTime = $state(initialEnd);
+	let reason = $state(initialReason);
+
+	const formattedDate = $derived(
+		date.toLocaleDateString('en-US', {
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		})
+	);
+
+	function handleSave() {
+		const override: DateOverride = {
+			id: existingOverride?.id || `override-${Date.now()}`,
+			host_id: hostId,
+			override_date: date.toISOString().split('T')[0],
+			override_type: overrideType,
+			start_time: overrideType === 'custom_hours' ? startTime + ':00' : undefined,
+			end_time: overrideType === 'custom_hours' ? endTime + ':00' : undefined,
+			reason: reason.trim() || undefined,
+			created_at: existingOverride?.created_at || new Date().toISOString()
+		};
+
+		onSave(override);
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+	onclick={handleBackdropClick}
+	transition:slide={{ duration: 200 }}
+>
+	<div class="bg-base-100 rounded-2xl border border-base-300 shadow-2xl w-full max-w-md" transition:slide={{ duration: 300 }}>
+		<!-- Header -->
+		<div class="p-6 border-b border-base-300">
+			<div class="flex items-center justify-between">
+				<h2 class="text-xl font-bold">Set Date Override</h2>
+				<button onclick={onClose} class="btn btn-ghost btn-sm btn-circle" aria-label="Close">
+					<!-- X icon -->
+					<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="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+			<p class="text-sm text-base-content/60 mt-1">{formattedDate}</p>
+		</div>
+
+		<!-- Body -->
+		<div class="p-6 space-y-6">
+			<fieldset>
+				<legend class="text-sm font-medium text-base-content/70 mb-3 block">What would you like to do?</legend>
+				<div class="space-y-2">
+					<label class="flex items-start gap-3 p-3 rounded-lg bg-base-200/50 cursor-pointer hover:bg-base-200 transition-colors {overrideType === 'unavailable' ? 'ring-2 ring-primary' : ''}">
+						<input
+							type="radio"
+							name="override_type"
+							value="unavailable"
+							bind:group={overrideType}
+							class="radio radio-primary mt-0.5"
+						/>
+						<div>
+							<p class="font-medium">Mark as Unavailable</p>
+							<p class="text-sm text-base-content/60">No bookings will be allowed on this day</p>
+						</div>
+					</label>
+
+					<label class="flex items-start gap-3 p-3 rounded-lg bg-base-200/50 cursor-pointer hover:bg-base-200 transition-colors {overrideType === 'custom_hours' ? 'ring-2 ring-primary' : ''}">
+						<input
+							type="radio"
+							name="override_type"
+							value="custom_hours"
+							bind:group={overrideType}
+							class="radio radio-primary mt-0.5"
+						/>
+						<div>
+							<p class="font-medium">Set Custom Hours</p>
+							<p class="text-sm text-base-content/60">Override your regular hours for this day</p>
+						</div>
+					</label>
+				</div>
+			</fieldset>
+
+			{#if overrideType === 'custom_hours'}
+				<div transition:slide={{ duration: 200 }}>
+					<p class="text-sm font-medium text-base-content/70 mb-2">Available Hours</p>
+					<div class="flex items-center gap-3">
+						<label class="sr-only" for="avail-start-time">Start time</label>
+						<input
+							id="avail-start-time"
+							type="time"
+							bind:value={startTime}
+							class="input input-bordered bg-base-200/50 flex-1"
+						/>
+						<span class="text-base-content/50">to</span>
+						<label class="sr-only" for="avail-end-time">End time</label>
+						<input
+							id="avail-end-time"
+							type="time"
+							bind:value={endTime}
+							class="input input-bordered bg-base-200/50 flex-1"
+						/>
+					</div>
+				</div>
+			{/if}
+
+			<div>
+				<label for="avail-reason" class="text-sm font-medium text-base-content/70 mb-2 block">
+					Reason <span class="text-base-content/50">(optional)</span>
+				</label>
+				<input
+					id="avail-reason"
+					type="text"
+					bind:value={reason}
+					placeholder="e.g., Vacation, Conference, Doctor's appointment"
+					class="input input-bordered w-full bg-base-200/50"
+				/>
+			</div>
+		</div>
+
+		<!-- Footer -->
+		<div class="p-6 border-t border-base-300 flex gap-3">
+			<button onclick={onClose} class="btn btn-ghost flex-1">
+				Cancel
+			</button>
+			<button
+				onclick={handleSave}
+				class="btn btn-primary flex-1"
+			>
+				Save Override
+			</button>
+		</div>
+	</div>
+</div>

package/src/lib/components/Badge.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	/**
+	 * Badge Component
+	 *
+	 * Simple DaisyUI badge with variant and size options.
+	 */
+
+	interface Props {
+		variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
+
+	const variantClass = $derived(
+		{
+			default: 'badge-neutral',
+			primary: 'badge-primary',
+			secondary: 'badge-secondary',
+			success: 'badge-success',
+			warning: 'badge-warning',
+			error: 'badge-error',
+			info: 'badge-info',
+			neutral: 'badge-neutral'
+		}[variant] || 'badge-neutral'
+	);
+
+	const sizeClass = $derived({ sm: 'badge-sm', md: '', lg: 'badge-lg' }[size]);
+	const badgeClass = $derived(`badge ${variantClass} ${sizeClass} ${className}`.trim());
+</script>
+
+<span class={badgeClass}>
+	{#if children}
+		{@render children()}
+	{/if}
+</span>

package/src/lib/components/BookingForm.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+	/**
+	 * BookingForm — Guest information form for booking a meeting.
+	 *
+	 * Collects name, email, optional phone, optional notes, and optional attendees.
+	 * Configurable via props: required fields, accent color, terms URL, submit label.
+	 */
+
+	export interface BookingFormData {
+		guest_name: string;
+		guest_email: string;
+		guest_phone?: string;
+		guest_notes?: string;
+		timezone: string;
+		start_time: string;
+		attendees?: { name: string; email: string }[];
+	}
+
+	let {
+		onSubmit,
+		submitting = false,
+		initialName = '',
+		initialEmail = '',
+		requirePhone = false,
+		showAttendeeOption = true,
+		showNotes = true,
+		showTerms = true,
+		termsUrl = '/terms',
+		privacyUrl = '/privacy',
+		submitLabel = 'Confirm and Schedule',
+		submittingLabel = 'Scheduling...',
+		locationHint = '',
+		accentColor = 'primary',
+	}: {
+		onSubmit: (data: BookingFormData) => void;
+		submitting?: boolean;
+		initialName?: string;
+		initialEmail?: string;
+		requirePhone?: boolean;
+		showAttendeeOption?: boolean;
+		showNotes?: boolean;
+		showTerms?: boolean;
+		termsUrl?: string;
+		privacyUrl?: string;
+		submitLabel?: string;
+		submittingLabel?: string;
+		locationHint?: string;
+		accentColor?: string;
+	} = $props();
+
+	let guestName = $state(initialName);
+	let guestEmail = $state(initialEmail);
+	let guestPhone = $state('');
+	let guestNotes = $state('');
+
+	let attendees = $state<{ name: string; email: string }[]>([]);
+	let showAttendees = $state(false);
+
+	const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+	const isValid = $derived(
+		guestName.trim().length >= 2 &&
+		isValidEmail(guestEmail) &&
+		(!requirePhone || guestPhone.trim().length >= 7) &&
+		attendees.every((a) => a.name.trim().length >= 2 && isValidEmail(a.email))
+	);
+
+	function addAttendee() {
+		attendees = [...attendees, { name: '', email: '' }];
+	}
+
+	function removeAttendee(index: number) {
+		attendees = attendees.filter((_, i) => i !== index);
+	}
+
+	function updateAttendee(index: number, field: 'name' | 'email', value: string) {
+		attendees = attendees.map((a, i) => (i === index ? { ...a, [field]: value } : a));
+	}
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (!isValid || submitting) return;
+
+		const data: BookingFormData = {
+			guest_name: guestName.trim(),
+			guest_email: guestEmail.trim().toLowerCase(),
+			guest_phone: guestPhone.trim() || undefined,
+			guest_notes: guestNotes.trim() || undefined,
+			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			start_time: '', // Set by parent
+			attendees: attendees.length > 0 ? attendees.map((a) => ({
+				name: a.name.trim(),
+				email: a.email.trim().toLowerCase()
+			})) : undefined
+		};
+
+		onSubmit(data);
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="space-y-6">
+	<!-- Name -->
+	<div>
+		<label for="booking-name" class="block text-sm font-medium text-base-content/70 mb-2">
+			Your Name <span class="text-error">*</span>
+		</label>
+		<input
+			id="booking-name"
+			type="text"
+			bind:value={guestName}
+			placeholder="John Smith"
+			required
+			disabled={submitting}
+			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+		/>
+	</div>
+
+	<!-- Email -->
+	<div>
+		<label for="booking-email" class="block text-sm font-medium text-base-content/70 mb-2">
+			Email Address <span class="text-error">*</span>
+		</label>
+		<input
+			id="booking-email"
+			type="email"
+			bind:value={guestEmail}
+			placeholder="john@example.com"
+			required
+			disabled={submitting}
+			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+		/>
+		<p class="text-xs text-base-content/50 mt-1">
+			Confirmation and meeting details will be sent here
+		</p>
+	</div>
+
+	<!-- Phone -->
+	<div>
+		<label for="booking-phone" class="block text-sm font-medium text-base-content/70 mb-2">
+			Phone Number {#if requirePhone}<span class="text-error">*</span>{:else}<span class="text-base-content/50">(optional)</span>{/if}
+		</label>
+		<input
+			id="booking-phone"
+			type="tel"
+			bind:value={guestPhone}
+			placeholder="+1 (555) 123-4567"
+			required={requirePhone}
+			disabled={submitting}
+			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+		/>
+		{#if locationHint}
+			<p class="text-xs text-base-content/50 mt-1">{locationHint}</p>
+		{/if}
+	</div>
+
+	<!-- Additional Attendees -->
+	{#if showAttendeeOption}
+		<div class="border-t border-base-300 pt-6">
+			<div class="flex items-center justify-between mb-4">
+				<div>
+					<h3 class="text-sm font-medium">Additional Attendees</h3>
+					<p class="text-xs text-base-content/50">Invite team members to join the meeting</p>
+				</div>
+				{#if !showAttendees}
+					<button
+						type="button"
+						onclick={() => { showAttendees = true; addAttendee(); }}
+						disabled={submitting}
+						class="btn btn-sm btn-ghost text-{accentColor}"
+					>
+						<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+						</svg>
+						Add Attendee
+					</button>
+				{/if}
+			</div>
+
+			{#if showAttendees && attendees.length > 0}
+				<div class="space-y-4">
+					{#each attendees as attendee, index}
+						<div class="flex gap-3 items-start">
+							<div class="flex-1 grid sm:grid-cols-2 gap-3">
+								<input
+									type="text"
+									value={attendee.name}
+									oninput={(e) => updateAttendee(index, 'name', (e.target as HTMLInputElement).value)}
+									placeholder="Name"
+									disabled={submitting}
+									class="input input-bordered input-sm bg-base-200/50 focus:border-{accentColor}"
+								/>
+								<input
+									type="email"
+									value={attendee.email}
+									oninput={(e) => updateAttendee(index, 'email', (e.target as HTMLInputElement).value)}
+									placeholder="Email"
+									disabled={submitting}
+									class="input input-bordered input-sm bg-base-200/50 focus:border-{accentColor}"
+								/>
+							</div>
+							<button
+								type="button"
+								onclick={() => removeAttendee(index)}
+								disabled={submitting}
+								class="btn btn-sm btn-ghost btn-circle text-error"
+								aria-label="Remove attendee"
+							>
+								<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="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</button>
+						</div>
+					{/each}
+
+					<button
+						type="button"
+						onclick={addAttendee}
+						disabled={submitting}
+						class="btn btn-sm btn-ghost text-{accentColor}"
+					>
+						<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+						</svg>
+						Add Another
+					</button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Notes -->
+	{#if showNotes}
+		<div>
+			<label for="booking-notes" class="block text-sm font-medium text-base-content/70 mb-2">
+				Additional Notes <span class="text-base-content/50">(optional)</span>
+			</label>
+			<textarea
+				id="booking-notes"
+				bind:value={guestNotes}
+				placeholder="Anything you'd like us to know before the meeting..."
+				rows={3}
+				disabled={submitting}
+				class="textarea textarea-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+			></textarea>
+		</div>
+	{/if}
+
+	<!-- Terms Notice -->
+	{#if showTerms}
+		<div class="bg-base-200/30 rounded-lg p-4 text-sm text-base-content/60">
+			<p>
+				By scheduling this meeting, you agree to our
+				<a href={termsUrl} class="text-{accentColor} hover:underline">Terms of Service</a>
+				and
+				<a href={privacyUrl} class="text-{accentColor} hover:underline">Privacy Policy</a>.
+			</p>
+		</div>
+	{/if}
+
+	<!-- Submit Button -->
+	<button
+		type="submit"
+		disabled={!isValid || submitting}
+		class="btn btn-{accentColor} btn-lg w-full disabled:opacity-50 disabled:cursor-not-allowed"
+	>
+		{#if submitting}
+			<span class="loading loading-spinner loading-sm"></span>
+			{submittingLabel}
+		{:else}
+			{submitLabel}
+			<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+			</svg>
+		{/if}
+	</button>
+</form>

package/src/lib/components/Button.svelte

@@ -0,0 +1,72 @@
+<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;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		href,
+		type = 'button',
+		disabled = false,
+		loading = 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} class={buttonClass} {onclick}>
+		{#if loading}
+			<span class="loading loading-spinner loading-xs"></span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</button>
+{/if}