@atmo-dev/events-ui 0.1.0

package/dist/DatePicker.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { DatePicker } from 'bits-ui';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		minValue = '',
+		locale = 'en',
+		onSelect
+	}: {
+		value: string;
+		required?: boolean;
+		minValue?: string;
+		locale?: string;
+		onSelect?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+
+	const now = new Date();
+	const currentYear = now.getFullYear();
+	const yearRange = Array.from({ length: 7 }, (_, i) => currentYear - 1 + i);
+	const today = new Date();
+	const todayDay = today.getDate();
+	const todayMonth = today.getMonth() + 1;
+	const todayYear = today.getFullYear();
+
+	let internalValue: CalendarDate | undefined = $state(undefined);
+
+	function parseDateStr(str: string): CalendarDate | undefined {
+		if (!str) return undefined;
+		const [yearStr, monthStr, dayStr] = str.split('-');
+		const year = parseInt(yearStr, 10);
+		const month = parseInt(monthStr, 10);
+		const day = parseInt(dayStr, 10);
+		if (isNaN(year) || isNaN(month) || isNaN(day)) return undefined;
+		return new CalendarDate(year, month, day);
+	}
+
+	function formatDateStr(dt: CalendarDate): string {
+		const y = String(dt.year).padStart(4, '0');
+		const m = String(dt.month).padStart(2, '0');
+		const d = String(dt.day).padStart(2, '0');
+		return `${y}-${m}-${d}`;
+	}
+
+	let internalMinValue: CalendarDate | undefined = $derived.by(() => {
+		return parseDateStr(minValue);
+	});
+
+	$effect(() => {
+		const parsed = parseDateStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.year !== internalValue.year ||
+					parsed.month !== internalValue.month ||
+					parsed.day !== internalValue.day
+				) {
+					internalValue = parsed;
+					previousValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	let previousValue: CalendarDate | undefined = $state(undefined);
+
+	function handleValueChange(newVal: DateValue | undefined) {
+		if (newVal && newVal instanceof CalendarDate) {
+			previousValue = newVal;
+			internalValue = newVal;
+			value = formatDateStr(newVal);
+		} else if (!newVal && previousValue) {
+			// Prevent deselection — restore previous value
+			internalValue = previousValue;
+		}
+	}
+
+	function handleOpenChangeComplete(open: boolean) {
+		if (!open && internalValue) {
+			onSelect?.();
+		}
+	}
+
+	let displayText = $derived.by(() => {
+		if (!internalValue) return '';
+		const date = new Date(internalValue.year, internalValue.month - 1, internalValue.day);
+		const opts: Intl.DateTimeFormatOptions = { weekday: 'short', month: 'short', day: 'numeric' };
+		if (internalValue.year !== currentYear) {
+			opts.year = 'numeric';
+		}
+		return date.toLocaleDateString(locale, opts);
+	});
+</script>
+
+<DatePicker.Root
+	bind:value={internalValue}
+	bind:open={isOpen}
+	onValueChange={handleValueChange}
+	onOpenChangeComplete={handleOpenChangeComplete}
+	minValue={internalMinValue}
+	granularity="day"
+	fixedWeeks={true}
+	weekdayFormat="short"
+	{locale}
+	{required}
+>
+	<DatePicker.Trigger
+		class="border-base-300 bg-base-100 text-base-900 focus-within:border-accent-500 dark:border-base-700 dark:bg-base-800 dark:text-base-100 dark:focus-within:border-accent-400 flex w-full min-w-[8.5rem] cursor-pointer items-center rounded-xl border px-2.5 py-1.5 text-sm transition-colors"
+	>
+		<span class="select-none">
+			{#if displayText}
+				{displayText}
+			{:else}
+				<span class="text-base-400 dark:text-base-500">Select date</span>
+			{/if}
+		</span>
+	</DatePicker.Trigger>
+
+	<DatePicker.Content
+		sideOffset={8}
+		class="border-base-200 bg-base-50 dark:border-base-700 dark:bg-base-900 z-50 rounded-2xl border p-4 shadow-lg"
+	>
+		<DatePicker.Calendar>
+			{#snippet children({ months, weekdays })}
+				<DatePicker.Header class="flex items-center justify-between">
+					<DatePicker.PrevButton
+						class="text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700 inline-flex size-8 items-center justify-center rounded-lg"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</DatePicker.PrevButton>
+
+					<div class="flex items-center gap-1.5">
+						<DatePicker.MonthSelect
+							monthFormat="long"
+							class="text-base-900 dark:text-base-100 hover:text-accent-500 dark:hover:text-accent-400 cursor-pointer border-0 bg-transparent text-sm font-medium outline-none focus:ring-0 focus:outline-none"
+						/>
+						<DatePicker.YearSelect
+							years={yearRange}
+							class="text-base-900 dark:text-base-100 hover:text-accent-500 dark:hover:text-accent-400 cursor-pointer border-0 bg-transparent text-sm font-medium outline-none focus:ring-0 focus:outline-none"
+						/>
+					</div>
+
+					<DatePicker.NextButton
+						class="text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700 inline-flex size-8 items-center justify-center rounded-lg"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</DatePicker.NextButton>
+				</DatePicker.Header>
+
+				{#each months as month (month.value.month)}
+					<DatePicker.Grid class="mt-3 w-full">
+						<DatePicker.GridHead>
+							<DatePicker.GridRow class="flex w-full">
+								{#each weekdays as weekday, i (i)}
+									<DatePicker.HeadCell
+										class="text-base-400 dark:text-base-500 flex-1 text-center text-xs font-medium"
+									>
+										{weekday}
+									</DatePicker.HeadCell>
+								{/each}
+							</DatePicker.GridRow>
+						</DatePicker.GridHead>
+
+						<DatePicker.GridBody>
+							{#each month.weeks as week, weekIndex (weekIndex)}
+								<DatePicker.GridRow class="flex w-full">
+									{#each week as day (day.toString())}
+										<DatePicker.Cell date={day} month={month.value} class="flex-1 p-0.5">
+											<DatePicker.Day>
+												{#snippet children({ selected, disabled, day: dayText })}
+													<div
+														class="relative flex size-9 items-center justify-center rounded-lg text-sm
+														{selected
+															? 'bg-accent-500 font-medium text-white'
+															: disabled
+																? 'text-base-300 dark:text-base-600 pointer-events-none'
+																: day.month !== month.value.month
+																	? 'text-base-300 dark:text-base-600'
+																	: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+													>
+														{dayText}
+														{#if day.day === todayDay && day.month === todayMonth && day.year === todayYear}
+															<span
+																class="bg-accent-500 absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full"
+																class:bg-white={selected}
+															></span>
+														{/if}
+													</div>
+												{/snippet}
+											</DatePicker.Day>
+										</DatePicker.Cell>
+									{/each}
+								</DatePicker.GridRow>
+							{/each}
+						</DatePicker.GridBody>
+					</DatePicker.Grid>
+				{/each}
+			{/snippet}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>

package/dist/DatePicker.svelte.d.ts

@@ -0,0 +1,11 @@
+import { DatePicker } from 'bits-ui';
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    minValue?: string;
+    locale?: string;
+    onSelect?: () => void;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/DateTimePicker.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	// @ts-nocheck
+	import DatePickerField from './DatePicker.svelte';
+	import TimePicker from './TimePicker.svelte';
+	import { untrack } from 'svelte';
+	import { BROWSER as browser } from 'esm-env';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		minValue = '',
+		referenceTime = ''
+	}: {
+		value: string;
+		required?: boolean;
+		minValue?: string;
+		referenceTime?: string;
+	} = $props();
+
+	let datePart = $state('');
+	let timePart = $state('00:00');
+	let timeEl: HTMLDivElement | undefined = $state(undefined);
+
+	const locale = browser ? navigator.language || 'en' : 'en';
+	let minDatePart = $derived(minValue ? minValue.split('T')[0] || '' : '');
+	let refTimePart = $derived.by(() => {
+		if (!referenceTime) return '';
+		const [refDate, refTime] = referenceTime.split('T');
+		if (refDate && refDate === datePart && refTime) return refTime;
+		return '';
+	});
+
+	// Default to current date/time rounded up to the next hour when no initial value
+	if (browser && !value) {
+		const now = new Date();
+		const rounded = new Date(now);
+		rounded.setMinutes(0, 0, 0);
+		rounded.setHours(rounded.getHours() + 1);
+
+		const yyyy = rounded.getFullYear();
+		const mm = String(rounded.getMonth() + 1).padStart(2, '0');
+		const dd = String(rounded.getDate()).padStart(2, '0');
+		const hh = String(rounded.getHours()).padStart(2, '0');
+		const min = String(rounded.getMinutes()).padStart(2, '0');
+
+		const defaultDate = `${yyyy}-${mm}-${dd}`;
+		const defaultTime = `${hh}:${min}`;
+		datePart = defaultDate;
+		timePart = defaultTime;
+		value = `${defaultDate}T${defaultTime}`;
+	}
+
+	// Sync external value -> date/time parts
+	$effect(() => {
+		const v = value;
+		untrack(() => {
+			if (v) {
+				const [d, t] = v.split('T');
+				if (d && d !== datePart) datePart = d;
+				if (t && t !== timePart) timePart = t;
+			}
+		});
+	});
+
+	// Sync date/time parts -> external value
+	$effect(() => {
+		const d = datePart;
+		const t = timePart;
+		untrack(() => {
+			if (d) {
+				const newVal = `${d}T${t || '00:00'}`;
+				if (newVal !== value) value = newVal;
+			}
+		});
+	});
+
+	function focusTime() {
+		// Small delay to let the popover finish closing
+		setTimeout(() => {
+			if (timeEl) {
+				const segment = timeEl.querySelector('[data-segment]');
+				if (segment instanceof HTMLElement) {
+					segment.focus();
+				}
+			}
+		}, 50);
+	}
+</script>
+
+<div class="flex items-center gap-1.5">
+	<DatePickerField
+		bind:value={datePart}
+		{required}
+		minValue={minDatePart}
+		{locale}
+		onSelect={focusTime}
+	/>
+	<div bind:this={timeEl}>
+		<TimePicker bind:value={timePart} {locale} referenceTime={refTimePart} />
+	</div>
+</div>

package/dist/DateTimePicker.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    minValue?: string;
+    referenceTime?: string;
+};
+declare const DateTimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/EventAttendees.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import type { AttendeeInfo } from './contrail.js';
+	import { Avatar as FoxAvatar } from '@foxui/core';
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { Modal } from '@foxui/core';
+
+	let {
+		going = [],
+		interested = [],
+		goingCount: initialGoingCount = going.length,
+		interestedCount: initialInterestedCount = interested.length
+	}: {
+		going?: AttendeeInfo[];
+		interested?: AttendeeInfo[];
+		goingCount?: number;
+		interestedCount?: number;
+	} = $props();
+
+	let goingCountOverride: number | null = $state(null);
+	let interestedCountOverride: number | null = $state(null);
+	let goingAttendeesOverride: AttendeeInfo[] | null = $state(null);
+	let interestedAttendeesOverride: AttendeeInfo[] | null = $state(null);
+
+	let modalOpen = $state(false);
+	let modalGroup: 'going' | 'interested' = $state('going');
+
+	const MAX_AVATARS = 18;
+
+	let goingCount = $derived(goingCountOverride ?? initialGoingCount);
+	let interestedCount = $derived(interestedCountOverride ?? initialInterestedCount);
+	let goingAttendees = $derived(goingAttendeesOverride ?? going);
+	let interestedAttendees = $derived(interestedAttendeesOverride ?? interested);
+
+	let totalCount = $derived(goingCount + interestedCount);
+
+	let goingDisplay = $derived(goingAttendees.slice(0, MAX_AVATARS));
+	let goingOverflow = $derived(goingCount - goingDisplay.length);
+
+	let interestedDisplay = $derived(interestedAttendees.slice(0, MAX_AVATARS));
+	let interestedOverflow = $derived(interestedCount - interestedDisplay.length);
+
+	let modalAttendees = $derived(modalGroup === 'going' ? goingAttendees : interestedAttendees);
+	let modalTitle = $derived(modalGroup === 'going' ? 'Going' : 'Interested');
+
+	function openModal(group: 'going' | 'interested') {
+		modalGroup = group;
+		modalOpen = true;
+	}
+
+	export function addAttendee(attendee: AttendeeInfo) {
+		const nextGoing = goingAttendees.filter((a) => a.did !== attendee.did);
+		const nextInterested = interestedAttendees.filter((a) => a.did !== attendee.did);
+
+		// Remove from both lists first (in case of status change)
+		if (attendee.status === 'going') {
+			goingAttendeesOverride = [attendee, ...nextGoing];
+			interestedAttendeesOverride = nextInterested;
+			goingCountOverride = goingAttendeesOverride.length;
+			interestedCountOverride = interestedAttendeesOverride.length;
+		} else if (attendee.status === 'interested') {
+			goingAttendeesOverride = nextGoing;
+			interestedAttendeesOverride = [attendee, ...nextInterested];
+			goingCountOverride = goingAttendeesOverride.length;
+			interestedCountOverride = interestedAttendeesOverride.length;
+		}
+	}
+
+	function thumbnail(url: string | undefined) {
+		return url?.replace('/avatar/', '/avatar_thumbnail/');
+	}
+
+	export function removeAttendee(did: string) {
+		const wasGoing = goingAttendees.some((a) => a.did === did);
+		const wasInterested = interestedAttendees.some((a) => a.did === did);
+		goingAttendeesOverride = goingAttendees.filter((a) => a.did !== did);
+		interestedAttendeesOverride = interestedAttendees.filter((a) => a.did !== did);
+		if (wasGoing) goingCountOverride = goingAttendeesOverride.length;
+		if (wasInterested) interestedCountOverride = interestedAttendeesOverride.length;
+	}
+</script>
+
+{#if totalCount > 0}
+	<div class="mb-2">
+		{#if goingCount > 0}
+			<button
+				type="button"
+				class="hover:bg-base-100 dark:hover:bg-base-800/50 -mx-2 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors"
+				onclick={() => openModal('going')}
+			>
+				<p class="text-base-900 dark:text-base-50 mb-2 text-sm">
+					<span class="font-bold">{goingCount}</span>
+					<span
+						class="text-base-500 dark:text-base-400 text-xs font-semibold tracking-wider uppercase"
+						>Going</span
+					>
+				</p>
+				<div class="flex items-center">
+					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
+						{#each goingDisplay as person (person.did)}
+							<div
+								animate:flip={{ duration: 300 }}
+								in:scale={{ duration: 300, start: 0.5 }}
+								out:scale={{ duration: 200, start: 0.5 }}
+							>
+								<FoxAvatar
+									src={thumbnail(person.avatar)}
+									alt={person.name}
+									class="border-base-100 dark:border-base-900 size-12 border-2"
+								/>
+							</div>
+						{/each}
+						{#if goingOverflow > 0}
+							<span
+								class="bg-base-200 dark:bg-base-800 text-base-950 dark:text-base-100 border-base-100 dark:border-base-900 z-10 inline-flex size-12 items-center justify-center rounded-full border-2 text-sm font-semibold"
+							>
+								+{goingOverflow}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</button>
+		{/if}
+
+		{#if interestedCount > 0}
+			<button
+				type="button"
+				class="hover:bg-base-100 dark:hover:bg-base-800/50 -mx-2 mt-4 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors"
+				onclick={() => openModal('interested')}
+			>
+				<p class="text-base-900 dark:text-base-50 mb-2 text-sm">
+					<span class="font-bold">{interestedCount}</span>
+					<span
+						class="text-base-500 dark:text-base-400 text-xs font-semibold tracking-wider uppercase"
+						>Interested</span
+					>
+				</p>
+				<div class="flex items-center">
+					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
+						{#each interestedDisplay as person (person.did)}
+							<div
+								animate:flip={{ duration: 300 }}
+								in:scale={{ duration: 300, start: 0.5 }}
+								out:scale={{ duration: 200, start: 0.5 }}
+							>
+								<FoxAvatar
+									src={thumbnail(person.avatar)}
+									alt={person.name}
+									class="border-base-100 dark:border-base-900 size-12 border-2"
+								/>
+							</div>
+						{/each}
+						{#if interestedOverflow > 0}
+							<span
+								class="bg-base-200 dark:bg-base-800 text-base-950 dark:text-base-100 border-base-100 dark:border-base-900 z-10 inline-flex size-12 items-center justify-center rounded-full border-2 text-sm font-semibold"
+							>
+								+{interestedOverflow}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<Modal
+	bind:open={modalOpen}
+	closeButton
+	onOpenAutoFocus={(e: Event) => e.preventDefault()}
+	class="p-0"
+>
+	<p class="text-base-900 dark:text-base-50 px-4 pt-4 text-lg font-semibold">
+		{modalTitle}
+		<span class="text-base-500 dark:text-base-400 text-sm font-normal">
+			({modalAttendees.length})
+		</span>
+	</p>
+	<div
+		class="dark:bg-base-900/50 bg-base-200/30 mx-4 mb-4 max-h-80 space-y-1 overflow-y-auto rounded-xl p-2"
+	>
+		{#each modalAttendees as person (person.did)}
+			<a
+				href={person.url}
+				target={person.url?.startsWith('/') ? undefined : '_blank'}
+				rel={person.url?.startsWith('/') ? undefined : 'noopener noreferrer'}
+				class="hover:bg-base-200 dark:hover:bg-base-900 flex items-center gap-3 rounded-xl px-2 py-2 transition-colors"
+			>
+				<FoxAvatar src={thumbnail(person.avatar)} alt={person.name} class="size-10 shrink-0" />
+				<div class="min-w-0">
+					<p class="text-base-900 dark:text-base-50 truncate text-sm font-medium">
+						{person.name}
+					</p>
+					{#if person.handle}
+						<p class="text-base-500 dark:text-base-400 truncate text-xs">
+							@{person.handle}
+						</p>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</div>
+</Modal>

package/dist/EventAttendees.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AttendeeInfo } from './contrail.js';
+type $$ComponentProps = {
+    going?: AttendeeInfo[];
+    interested?: AttendeeInfo[];
+    goingCount?: number;
+    interestedCount?: number;
+};
+declare const EventAttendees: import("svelte").Component<$$ComponentProps, {
+    addAttendee: (attendee: AttendeeInfo) => void;
+    removeAttendee: (did: string) => void;
+}, "">;
+type EventAttendees = ReturnType<typeof EventAttendees>;
+export default EventAttendees;