@joewinke/jatui 0.41.1 → 0.43.0

package/dist/components/BookingScheduler.svelte

@@ -0,0 +1,412 @@
+<script lang="ts">
+	/**
+	 * BookingScheduler — the Calendly-shaped booking surface, composed from the
+	 * existing jatui pieces: a details pane, `CalendarPicker` (availability dots,
+	 * booking-window rules) and `TimeSlotPicker` (radiogroup keys, 12/24h, time
+	 * zone), with a time-zone select and a 12h/24h toggle between them.
+	 *
+	 * The host owns the data: `getSlots(date, timeZone)` returns the slots for a
+	 * day (sync or async; stale responses are dropped), `getAvailability` feeds
+	 * the dots. Nothing is booked here — `onConfirm(slot, { timeZone })` hands the
+	 * choice back, and `BookingForm` usually comes next.
+	 *
+	 * Layout follows its own width (container queries): three panes side by side
+	 * when wide, details above calendar + times when medium, one column on a phone.
+	 * Built from BoardUI's public meeting-scheduler behaviour (jatui-lfxyy); no
+	 * BoardUI source is copied and there are no built-in names or mock slots.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { AvailabilityCounts, TimeSlot } from '../types/booking';
+	import CalendarPicker from './CalendarPicker.svelte';
+	import TimeSlotPicker from './TimeSlotPicker.svelte';
+	import {
+		commonTimeZones,
+		formatSlotLabel,
+		localeHourCycle,
+		localTimeZone,
+		timeZoneCity,
+		timeZoneOffsetLabel,
+		type HourCycle
+	} from './calendar/timeSlots';
+	import type { Weekday } from './calendar/calendarGrid';
+
+	let {
+		getSlots,
+		getAvailability,
+		isDateEnabled,
+		maxDaysInAdvance = 90,
+		minNoticeHours = 24,
+		weekdaysOnly = true,
+		selectedDate = $bindable(null),
+		selectedSlot = $bindable(null),
+		timeZone = $bindable(localTimeZone()),
+		hourCycle = $bindable(),
+		timeZones,
+		locale = 'en-US',
+		weekStart = 0,
+		title,
+		durationMinutes,
+		hostName,
+		hostAvatarUrl,
+		description,
+		location,
+		details,
+		showDetails = true,
+		showTimeZone = true,
+		showHourCycleToggle = true,
+		onSelectDate,
+		onSelectSlot,
+		onConfirm,
+		confirmLabel = 'Confirm',
+		confirming = false,
+		accentColor = 'primary',
+		class: className = ''
+	}: {
+		/** Slots for one day, in `timeZone`. Sync or async; a newer request wins. */
+		getSlots: (date: Date, timeZone: string) => TimeSlot[] | Promise<TimeSlot[]>;
+		getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
+		isDateEnabled?: (date: Date) => boolean;
+		maxDaysInAdvance?: number;
+		minNoticeHours?: number;
+		weekdaysOnly?: boolean;
+		selectedDate?: Date | null;
+		selectedSlot?: TimeSlot | null;
+		/** IANA zone the slots are shown in (bindable). Defaults to the viewer's zone. */
+		timeZone?: string;
+		/** 'h12' | 'h23' (bindable). Defaults to the locale's convention. */
+		hourCycle?: HourCycle;
+		/** Zones offered in the picker. Defaults to the viewer's zone + common ones. */
+		timeZones?: string[];
+		locale?: string;
+		weekStart?: Weekday | 'locale';
+		/** Meeting name, e.g. "Intro call". */
+		title?: string;
+		durationMinutes?: number;
+		hostName?: string;
+		hostAvatarUrl?: string;
+		description?: string;
+		/** "Video call", "Phone", an address… */
+		location?: string;
+		/** Replaces the built-in details pane. */
+		details?: Snippet;
+		showDetails?: boolean;
+		showTimeZone?: boolean;
+		showHourCycleToggle?: boolean;
+		onSelectDate?: (date: Date) => void;
+		onSelectSlot?: (slot: TimeSlot) => void;
+		/** Shows a Confirm button once a slot is chosen. */
+		onConfirm?: (slot: TimeSlot, ctx: { timeZone: string }) => void;
+		confirmLabel?: string;
+		/** Busy state for the Confirm button. */
+		confirming?: boolean;
+		accentColor?: string;
+		class?: string;
+	} = $props();
+
+	const cycle = $derived<HourCycle>(hourCycle ?? localeHourCycle(locale));
+	const zones = $derived(timeZones ?? commonTimeZones(timeZone ? [timeZone] : []));
+	const uid = `jbs-${Math.random().toString(36).slice(2, 8)}`;
+
+	let slots = $state<TimeSlot[]>([]);
+	let loading = $state(false);
+	let requestId = 0;
+
+	async function loadSlots(date: Date, zone: string) {
+		const id = ++requestId;
+		loading = true;
+		try {
+			const result = await getSlots(date, zone);
+			if (id !== requestId) return;
+			slots = result;
+			// Drop a selection the new list no longer offers.
+			if (selectedSlot && !result.some((s) => s.available && s.start.getTime() === selectedSlot!.start.getTime())) {
+				selectedSlot = null;
+			}
+		} catch {
+			if (id === requestId) slots = [];
+		} finally {
+			if (id === requestId) loading = false;
+		}
+	}
+
+	$effect(() => {
+		if (selectedDate) void loadSlots(selectedDate, timeZone);
+	});
+
+	function handleDate(date: Date) {
+		selectedDate = date;
+		selectedSlot = null;
+		onSelectDate?.(date);
+	}
+
+	function handleSlot(slot: TimeSlot) {
+		selectedSlot = slot;
+		onSelectSlot?.(slot);
+	}
+
+	const dayHeading = $derived(
+		selectedDate
+			? new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric' }).format(selectedDate)
+			: ''
+	);
+	const durationLabel = $derived.by(() => {
+		if (!durationMinutes) return '';
+		const h = Math.floor(durationMinutes / 60);
+		const m = durationMinutes % 60;
+		return [h ? `${h} hr` : '', m ? `${m} min` : ''].filter(Boolean).join(' ');
+	});
+	const initials = $derived(
+		(hostName ?? '')
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((w) => w[0]?.toUpperCase())
+			.join('')
+	);
+</script>
+
+<div class="jatui-booking {className}" class:has-details={showDetails && (details || title || hostName)}>
+	{#if showDetails && (details || title || hostName || description)}
+		<section class="jatui-booking__details" aria-label="Meeting details">
+			{#if details}
+				{@render details()}
+			{:else}
+				{#if hostName}
+					<div class="jatui-booking__host">
+						{#if hostAvatarUrl}
+							<img src={hostAvatarUrl} alt="" class="jatui-booking__avatar" />
+						{:else}
+							<span class="jatui-booking__avatar jatui-booking__avatar--initials" aria-hidden="true">{initials}</span>
+						{/if}
+						<span class="jatui-booking__host-name">{hostName}</span>
+					</div>
+				{/if}
+				{#if title}<h2 class="jatui-booking__title">{title}</h2>{/if}
+				<ul class="jatui-booking__meta">
+					{#if durationLabel}
+						<li>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path stroke-linecap="round" d="M12 7v5l3 2" /></svg>
+							{durationLabel}
+						</li>
+					{/if}
+					{#if location}
+						<li>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.2-7-11.5A7 7 0 0119 9.5C19 14.8 12 21 12 21z" /><circle cx="12" cy="9.5" r="2.5" /></svg>
+							{location}
+						</li>
+					{/if}
+					{#if showTimeZone}
+						<li>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" /></svg>
+							{timeZoneCity(timeZone)} ({timeZoneOffsetLabel(timeZone)})
+						</li>
+					{/if}
+				</ul>
+				{#if description}<p class="jatui-booking__desc">{description}</p>{/if}
+			{/if}
+		</section>
+	{/if}
+
+	<section class="jatui-booking__calendar" aria-label="Choose a day">
+		<CalendarPicker
+			onSelect={handleDate}
+			bind:selectedDate
+			{getAvailability}
+			{isDateEnabled}
+			{maxDaysInAdvance}
+			{minNoticeHours}
+			{weekdaysOnly}
+			{accentColor}
+			{locale}
+			{weekStart}
+			size="sm"
+		/>
+	</section>
+
+	<section class="jatui-booking__times" aria-labelledby="{uid}-times">
+		<h3 id="{uid}-times" class="jatui-booking__times-heading">
+			{dayHeading || 'Pick a day'}
+		</h3>
+		{#if showTimeZone || showHourCycleToggle}
+			<div class="jatui-booking__tz">
+				{#if showTimeZone}
+					<label class="jatui-booking__tz-label" for="{uid}-tz">Time zone</label>
+					<select id="{uid}-tz" class="select select-sm jatui-booking__tz-select" bind:value={timeZone}>
+						{#each zones as z (z)}
+							<option value={z}>{timeZoneCity(z)} ({timeZoneOffsetLabel(z)})</option>
+						{/each}
+					</select>
+				{/if}
+				{#if showHourCycleToggle}
+					<div class="join" role="group" aria-label="Clock format">
+						<button
+							type="button"
+							class="join-item btn btn-xs {cycle === 'h12' ? 'btn-active' : 'btn-ghost'}"
+							aria-pressed={cycle === 'h12'}
+							onclick={() => (hourCycle = 'h12')}>12h</button
+						>
+						<button
+							type="button"
+							class="join-item btn btn-xs {cycle === 'h23' ? 'btn-active' : 'btn-ghost'}"
+							aria-pressed={cycle === 'h23'}
+							onclick={() => (hourCycle = 'h23')}>24h</button
+						>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if selectedDate}
+			<TimeSlotPicker
+				{slots}
+				{loading}
+				onSelect={handleSlot}
+				{selectedSlot}
+				{accentColor}
+				hourCycle={cycle}
+				{timeZone}
+				{locale}
+			/>
+		{:else}
+			<p class="jatui-booking__hint">Available times appear here once you pick a day.</p>
+		{/if}
+
+		{#if onConfirm && selectedSlot}
+			<div class="jatui-booking__confirm">
+				<p class="jatui-booking__summary" aria-live="polite">
+					{formatSlotLabel(selectedSlot.start, { hourCycle: cycle, timeZone, locale })}
+				</p>
+				<button
+					type="button"
+					class="btn btn-primary btn-sm"
+					disabled={confirming}
+					aria-busy={confirming}
+					onclick={() => selectedSlot && onConfirm?.(selectedSlot, { timeZone })}
+				>
+					{#if confirming}<span class="loading loading-spinner loading-xs" aria-hidden="true"></span>{/if}
+					{confirmLabel}
+				</button>
+			</div>
+		{/if}
+	</section>
+</div>
+
+<style>
+	.jatui-booking {
+		container-type: inline-size;
+		display: grid;
+		gap: 1.5rem;
+		grid-template-columns: minmax(0, 1fr);
+	}
+	@container (min-width: 40rem) {
+		.jatui-booking {
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		}
+		.jatui-booking__details {
+			grid-column: 1 / -1;
+		}
+	}
+	@container (min-width: 60rem) {
+		.jatui-booking.has-details {
+			grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr);
+		}
+		.jatui-booking.has-details .jatui-booking__details {
+			grid-column: auto;
+			padding-inline-end: 1.5rem;
+			border-inline-end: 1px solid var(--jatui-separator, var(--color-base-300));
+		}
+	}
+	.jatui-booking__host {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-block-end: 0.75rem;
+	}
+	.jatui-booking__avatar {
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 9999px;
+		object-fit: cover;
+	}
+	.jatui-booking__avatar--initials {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		background: var(--color-base-200);
+		color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+	}
+	.jatui-booking__host-name {
+		font-size: 0.875rem;
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+	}
+	.jatui-booking__title {
+		margin: 0 0 0.75rem;
+		font-size: 1.25rem;
+		font-weight: 700;
+		line-height: 1.25;
+	}
+	.jatui-booking__meta {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: 0.875rem;
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+	}
+	.jatui-booking__meta li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.jatui-booking__desc {
+		margin: 1rem 0 0;
+		font-size: 0.875rem;
+		line-height: 1.55;
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+	}
+	.jatui-booking__times-heading {
+		margin: 0 0 0.75rem;
+		font-size: 1rem;
+		font-weight: 600;
+	}
+	.jatui-booking__tz {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		margin-block-end: 1rem;
+	}
+	.jatui-booking__tz-label {
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-booking__tz-select {
+		flex: 1;
+		min-width: 10rem;
+	}
+	.jatui-booking__hint {
+		margin: 2rem 0;
+		font-size: 0.875rem;
+		text-align: center;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+	}
+	.jatui-booking__confirm {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-block-start: 1.25rem;
+		padding-block-start: 1rem;
+		border-block-start: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-booking__summary {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,66 @@
+/**
+     * BookingScheduler — the Calendly-shaped booking surface, composed from the
+     * existing jatui pieces: a details pane, `CalendarPicker` (availability dots,
+     * booking-window rules) and `TimeSlotPicker` (radiogroup keys, 12/24h, time
+     * zone), with a time-zone select and a 12h/24h toggle between them.
+     *
+     * The host owns the data: `getSlots(date, timeZone)` returns the slots for a
+     * day (sync or async; stale responses are dropped), `getAvailability` feeds
+     * the dots. Nothing is booked here — `onConfirm(slot, { timeZone })` hands the
+     * choice back, and `BookingForm` usually comes next.
+     *
+     * Layout follows its own width (container queries): three panes side by side
+     * when wide, details above calendar + times when medium, one column on a phone.
+     * Built from BoardUI's public meeting-scheduler behaviour (jatui-lfxyy); no
+     * BoardUI source is copied and there are no built-in names or mock slots.
+     */
+import type { Snippet } from 'svelte';
+import type { AvailabilityCounts, TimeSlot } from '../types/booking';
+import { type HourCycle } from './calendar/timeSlots';
+import type { Weekday } from './calendar/calendarGrid';
+type $$ComponentProps = {
+    /** Slots for one day, in `timeZone`. Sync or async; a newer request wins. */
+    getSlots: (date: Date, timeZone: string) => TimeSlot[] | Promise<TimeSlot[]>;
+    getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
+    isDateEnabled?: (date: Date) => boolean;
+    maxDaysInAdvance?: number;
+    minNoticeHours?: number;
+    weekdaysOnly?: boolean;
+    selectedDate?: Date | null;
+    selectedSlot?: TimeSlot | null;
+    /** IANA zone the slots are shown in (bindable). Defaults to the viewer's zone. */
+    timeZone?: string;
+    /** 'h12' | 'h23' (bindable). Defaults to the locale's convention. */
+    hourCycle?: HourCycle;
+    /** Zones offered in the picker. Defaults to the viewer's zone + common ones. */
+    timeZones?: string[];
+    locale?: string;
+    weekStart?: Weekday | 'locale';
+    /** Meeting name, e.g. "Intro call". */
+    title?: string;
+    durationMinutes?: number;
+    hostName?: string;
+    hostAvatarUrl?: string;
+    description?: string;
+    /** "Video call", "Phone", an address… */
+    location?: string;
+    /** Replaces the built-in details pane. */
+    details?: Snippet;
+    showDetails?: boolean;
+    showTimeZone?: boolean;
+    showHourCycleToggle?: boolean;
+    onSelectDate?: (date: Date) => void;
+    onSelectSlot?: (slot: TimeSlot) => void;
+    /** Shows a Confirm button once a slot is chosen. */
+    onConfirm?: (slot: TimeSlot, ctx: {
+        timeZone: string;
+    }) => void;
+    confirmLabel?: string;
+    /** Busy state for the Confirm button. */
+    confirming?: boolean;
+    accentColor?: string;
+    class?: string;
+};
+declare const BookingScheduler: import("svelte").Component<$$ComponentProps, {}, "hourCycle" | "timeZone" | "selectedSlot" | "selectedDate">;
+type BookingScheduler = ReturnType<typeof BookingScheduler>;
+export default BookingScheduler;