@forgebuild/hotal-ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1 +1,22 @@
-export { default as ReservationBar } from './ReservationBar.svelte';
+export interface ReservationBarElement extends HTMLElement {
+	minGuests?: number;
+	maxGuests?: number;
+	defaultGuests?: number;
+	timeSlots?: string[];
+	defaultTime?: string;
+	showReserveButton?: boolean;
+	reserveHref?: string;
+	syncWithUrl?: boolean;
+	closedWeekdays?: number[];
+	fetchAvailableDates?: (partySize: number) => Promise<string[]>;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'reservation-bar': ReservationBarElement;
+	}
+
+	interface HTMLElementEventMap {
+		reservationchange: CustomEvent<{ date: string; guests: number; time: string }>;
+	}
+}

package/package.json

@@ -1,45 +1,39 @@
 {
   "name": "@forgebuild/hotal-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Reusable Svelte UI components for booking and reservation experiences.",
   "type": "module",
   "license": "MIT",
   "files": [
     "dist"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "svelte": "./dist/index.js",
+  "main": "./dist/hotal-ui.js",
+  "module": "./dist/hotal-ui.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./dist/hotal-ui.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
   "dependencies": {
-    "@floating-ui/dom": "^1.8.0"
+    "@floating-ui/dom": "^1.8.0",
+    "svelte": "^5.56.8"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.13.3",
-    "svelte": "^5.56.8",
     "svelte-check": "^4.7.3",
     "typescript": "~6.0.2",
     "vite": "^8.2.0"
   },
   "scripts": {
     "dev": "vite",
-    "build": "svelte-package -i src -o dist --tsconfig ./tsconfig.app.json",
+    "build": "vite build && node scripts/copy-types.mjs",
     "prepublishOnly": "npm run build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"

package/dist/ReservationBar.svelte

@@ -1,489 +0,0 @@
-<script lang="ts">
-	import { computePosition, autoUpdate, flip, shift, offset } from '@floating-ui/dom';
-	import {
-		buildCalendarGrid,
-		resolveInitialDate,
-		formatDateLabel,
-		toISODate,
-		startOfDay,
-		MONTH_NAMES,
-		WEEKDAY_LABELS,
-		type CalendarCell,
-	} from './lib/calendar';
-
-	interface Props {
-		minGuests?: number;
-		maxGuests?: number;
-		defaultGuests?: number;
-		timeSlots?: string[];
-		defaultTime?: string;
-		showReserveButton?: boolean;
-		reserveHref?: string;
-		syncWithUrl?: boolean;
-		closedWeekdays?: number[];
-		fetchAvailableDates?: (partySize: number) => Promise<string[]>;
-		onchange?: (detail: { date: string; guests: number; time: string }) => void;
-	}
-
-	let {
-		minGuests = 1,
-		maxGuests = 20,
-		defaultGuests = 2,
-		timeSlots = [
-			'7:00 PM', '7:30 PM', '8:00 PM', '8:30 PM', '9:00 PM', '9:30 PM',
-			'10:00 PM', '10:30 PM', '11:00 PM',
-		],
-		defaultTime = '7:00 PM',
-		showReserveButton = true,
-		reserveHref = '/reservations',
-		syncWithUrl = false,
-		closedWeekdays = [],
-		fetchAvailableDates,
-		onchange,
-	}: Props = $props();
-
-	const today = startOfDay(new Date());
-	const urlParams = syncWithUrl && typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
-	const initialDate = resolveInitialDate(today, closedWeekdays, urlParams?.get('date') ?? null);
-
-	let viewYear = $state(initialDate.getFullYear());
-	let viewMonth = $state(initialDate.getMonth());
-	let selectedDate = $state<Date>(initialDate);
-
-	const urlGuests = urlParams ? Number(urlParams.get('guests')) : NaN;
-	let guests = $state(!Number.isNaN(urlGuests) && urlGuests > 0 ? urlGuests : defaultGuests);
-
-	const urlTime = urlParams?.get('time');
-	let time = $state(urlTime || defaultTime);
-
-	let openPanel = $state<'date' | 'guests' | 'time' | null>(null);
-
-	let availableDates = $state<Set<string> | null>(null);
-
-	async function refreshAvailability(partySize: number) {
-		if (!fetchAvailableDates) return;
-		try {
-			const dates = await fetchAvailableDates(partySize);
-			availableDates = new Set(dates);
-		} catch {
-			availableDates = new Set();
-		}
-	}
-
-	$effect(() => {
-		refreshAvailability(guests);
-	});
-
-	let dateTrigger = $state<HTMLButtonElement>();
-	let guestsTrigger = $state<HTMLButtonElement>();
-	let timeTrigger = $state<HTMLButtonElement>();
-	let datePanel = $state<HTMLElement>();
-	let guestsPanel = $state<HTMLElement>();
-	let timePanel = $state<HTMLElement>();
-
-	const dateLabel = $derived(formatDateLabel(selectedDate));
-	const dateIso = $derived(toISODate(selectedDate));
-	const calendarCells = $derived(buildCalendarGrid(viewYear, viewMonth, today, closedWeekdays));
-	const canGoPrevMonth = $derived(!(viewYear === today.getFullYear() && viewMonth === today.getMonth()));
-	const guestOptions = $derived(Array.from({ length: maxGuests - minGuests + 1 }, (_, i) => minGuests + i));
-
-	const reserveUrl = $derived.by(() => {
-		const params = new URLSearchParams();
-		params.set('date', dateIso);
-		params.set('guests', String(guests));
-		params.set('time', time);
-		return `${reserveHref}?${params.toString()}`;
-	});
-
-	$effect(() => {
-		onchange?.({ date: dateIso, guests, time });
-	});
-
-	function isCellDisabled(cell: CalendarCell): boolean {
-		if (!cell.inMonth || cell.isPast || cell.isClosedWeekday) return true;
-		if (fetchAvailableDates && availableDates !== null && !availableDates.has(cell.iso)) return true;
-		return false;
-	}
-
-	function applyIfAuto() {
-		if (!showReserveButton && typeof window !== 'undefined') {
-			window.location.href = reserveUrl;
-		}
-	}
-
-	function selectDate(cell: CalendarCell) {
-		if (isCellDisabled(cell)) return;
-		selectedDate = cell.date;
-		closePanel();
-		applyIfAuto();
-	}
-
-	function prevMonth() {
-		if (!canGoPrevMonth) return;
-		viewMonth -= 1;
-		if (viewMonth < 0) {
-			viewMonth = 11;
-			viewYear -= 1;
-		}
-	}
-
-	function nextMonth() {
-		viewMonth += 1;
-		if (viewMonth > 11) {
-			viewMonth = 0;
-			viewYear += 1;
-		}
-	}
-
-	function selectGuests(value: number) {
-		guests = value;
-		closePanel();
-		applyIfAuto();
-	}
-
-	function selectTime(value: string) {
-		time = value;
-		closePanel();
-		applyIfAuto();
-	}
-
-	function closePanel() {
-		openPanel = null;
-	}
-
-	function togglePanel(panel: 'date' | 'guests' | 'time') {
-		openPanel = openPanel === panel ? null : panel;
-	}
-
-	function triggerFor(panel: 'date' | 'guests' | 'time') {
-		return panel === 'date' ? dateTrigger : panel === 'guests' ? guestsTrigger : timeTrigger;
-	}
-
-	function panelElFor(panel: 'date' | 'guests' | 'time') {
-		return panel === 'date' ? datePanel : panel === 'guests' ? guestsPanel : timePanel;
-	}
-
-	// Panels use the native Popover API (top-layer rendering): they escape
-	// any transformed/overflow-hidden ancestor without being moved in the
-	// DOM, and outside-click / Escape dismissal come from the browser for
-	// free. Floating UI keeps the open panel positioned next to its trigger
-	// through scroll/resize.
-	$effect(() => {
-		const panel = openPanel;
-		if (!panel) return;
-		const triggerEl = triggerFor(panel);
-		const panelEl = panelElFor(panel);
-		if (!triggerEl || !panelEl) return;
-
-		if (panelEl.hasAttribute('data-match-trigger-width')) {
-			panelEl.style.width = `${triggerEl.getBoundingClientRect().width}px`;
-		}
-		panelEl.showPopover();
-
-		const stopAutoUpdate = autoUpdate(triggerEl, panelEl, async () => {
-			const { x, y } = await computePosition(triggerEl, panelEl, {
-				strategy: 'fixed',
-				placement: 'bottom-start',
-				middleware: [offset(8), flip(), shift({ padding: 12 })],
-			});
-			panelEl.style.left = `${x}px`;
-			panelEl.style.top = `${y}px`;
-		});
-
-		function onToggle(e: Event) {
-			if ((e as ToggleEvent).newState === 'closed' && openPanel === panel) {
-				openPanel = null;
-			}
-		}
-		panelEl.addEventListener('toggle', onToggle);
-
-		return () => {
-			stopAutoUpdate();
-			panelEl.removeEventListener('toggle', onToggle);
-			if (panelEl.matches(':popover-open')) panelEl.hidePopover();
-		};
-	});
-</script>
-
-<div class="rb-bar">
-	<button
-		bind:this={dateTrigger}
-		type="button"
-		class="rb-trigger"
-		aria-haspopup="true"
-		aria-expanded={openPanel === 'date'}
-		onclick={() => togglePanel('date')}
-	>
-		<span class="rb-trigger-label">Date</span>
-		<span class="rb-trigger-value">{dateLabel}</span>
-	</button>
-	<button
-		bind:this={guestsTrigger}
-		type="button"
-		class="rb-trigger"
-		aria-haspopup="true"
-		aria-expanded={openPanel === 'guests'}
-		onclick={() => togglePanel('guests')}
-	>
-		<span class="rb-trigger-label">Guests</span>
-		<span class="rb-trigger-value">{guests} Guest{guests === 1 ? '' : 's'}</span>
-	</button>
-	<button
-		bind:this={timeTrigger}
-		type="button"
-		class="rb-trigger"
-		aria-haspopup="true"
-		aria-expanded={openPanel === 'time'}
-		onclick={() => togglePanel('time')}
-	>
-		<span class="rb-trigger-label">Time</span>
-		<span class="rb-trigger-value">{time}</span>
-	</button>
-	{#if showReserveButton}
-		<a class="rb-reserve" href={reserveUrl}>Reserve</a>
-	{/if}
-</div>
-
-<div bind:this={datePanel} popover class="rb-panel rb-panel-date">
-	<div class="rb-cal-header">
-		<p class="rb-cal-month">{MONTH_NAMES[viewMonth]} {viewYear}</p>
-		<div class="rb-cal-nav">
-			<button type="button" onclick={prevMonth} disabled={!canGoPrevMonth} aria-label="Previous month">‹</button>
-			<button type="button" onclick={nextMonth} aria-label="Next month">›</button>
-		</div>
-	</div>
-	<div class="rb-cal-weekdays">
-		{#each WEEKDAY_LABELS as label (label)}
-			<span>{label}</span>
-		{/each}
-	</div>
-	<div class="rb-cal-grid">
-		{#each calendarCells as cell (cell.iso)}
-			<button
-				type="button"
-				class="rb-cal-cell"
-				class:rb-cal-cell-selected={dateIso === cell.iso}
-				disabled={isCellDisabled(cell)}
-				onclick={() => selectDate(cell)}
-			>
-				{cell.dayNumber}
-			</button>
-		{/each}
-	</div>
-</div>
-
-<ul bind:this={guestsPanel} popover data-match-trigger-width role="listbox" aria-label="Select number of guests" class="rb-panel rb-panel-list">
-	{#each guestOptions as n (n)}
-		<li role="presentation">
-			<button type="button" role="option" aria-selected={n === guests} onclick={() => selectGuests(n)}>
-				{n} Guest{n === 1 ? '' : 's'}
-			</button>
-		</li>
-	{/each}
-</ul>
-
-<ul bind:this={timePanel} popover data-match-trigger-width role="listbox" aria-label="Select a time" class="rb-panel rb-panel-list">
-	{#each timeSlots as slot (slot)}
-		<li role="presentation">
-			<button type="button" role="option" aria-selected={slot === time} onclick={() => selectTime(slot)}>
-				{slot}
-			</button>
-		</li>
-	{/each}
-</ul>
-
-<style>
-	.rb-bar {
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-		align-items: stretch;
-		overflow: hidden;
-		border-radius: var(--rb-radius, 2px);
-		border: 1px solid var(--rb-bar-border, rgba(255, 255, 255, 0.25));
-		background: var(--rb-bar-bg, rgba(0, 0, 0, 0.3));
-		backdrop-filter: blur(12px);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-	}
-	@media (min-width: 640px) {
-		.rb-bar {
-			flex-direction: row;
-		}
-	}
-	.rb-trigger {
-		display: flex;
-		flex: 1;
-		cursor: pointer;
-		flex-direction: column;
-		align-items: center;
-		gap: 2px;
-		padding: 0.75rem 1.5rem;
-		text-align: left;
-		background: transparent;
-		border: none;
-		border-top: 1px solid var(--rb-bar-border, rgba(255, 255, 255, 0.2));
-		color: var(--rb-text-color, #fff);
-		transition: background-color 150ms ease;
-	}
-	.rb-trigger:first-child {
-		border-top: none;
-	}
-	@media (min-width: 640px) {
-		.rb-trigger {
-			border-top: none;
-			border-right: 1px solid var(--rb-bar-border, rgba(255, 255, 255, 0.2));
-		}
-	}
-	.rb-trigger:hover {
-		background: var(--rb-trigger-hover-bg, rgba(255, 255, 255, 0.1));
-	}
-	.rb-trigger-label {
-		font-size: 10px;
-		font-weight: 300;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-	}
-	.rb-trigger-value {
-		font-size: 0.875rem;
-		font-weight: 600;
-		white-space: nowrap;
-	}
-	.rb-reserve {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 1rem 2rem;
-		font-size: 1rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		color: #fff;
-		text-decoration: none;
-		background: var(--rb-accent-bg, #1c3f60);
-		transition: background-color 150ms ease;
-	}
-	.rb-reserve:hover {
-		background: var(--rb-accent-hover-bg, #2a557f);
-	}
-	.rb-panel {
-		position: fixed;
-		inset: auto;
-		margin: 0;
-		border-radius: var(--rb-radius, 2px);
-		border: 1px solid var(--rb-bar-border, rgba(255, 255, 255, 0.2));
-		background: var(--rb-panel-bg, rgba(10, 10, 12, 0.92));
-		backdrop-filter: blur(12px);
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-		color: var(--rb-text-color, #fff);
-	}
-	.rb-panel-date {
-		width: 288px;
-		padding: 1rem;
-	}
-	.rb-cal-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-	.rb-cal-month {
-		margin: 0;
-		font-size: 0.875rem;
-		font-weight: 600;
-	}
-	.rb-cal-nav {
-		display: flex;
-		gap: 0.25rem;
-	}
-	.rb-cal-nav button {
-		display: flex;
-		height: 28px;
-		width: 28px;
-		align-items: center;
-		justify-content: center;
-		border-radius: 9999px;
-		border: none;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-	}
-	.rb-cal-nav button:hover:not(:disabled) {
-		background: var(--rb-trigger-hover-bg, rgba(255, 255, 255, 0.1));
-	}
-	.rb-cal-nav button:disabled {
-		cursor: default;
-		opacity: 0.3;
-	}
-	.rb-cal-weekdays {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
-		margin-top: 0.75rem;
-		text-align: center;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		opacity: 0.4;
-	}
-	.rb-cal-grid {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
-		row-gap: 0.25rem;
-		justify-items: center;
-		margin-top: 0.25rem;
-	}
-	.rb-cal-cell {
-		display: flex;
-		height: 32px;
-		width: 32px;
-		align-items: center;
-		justify-content: center;
-		border-radius: 9999px;
-		border: none;
-		background: transparent;
-		color: inherit;
-		font-size: 0.875rem;
-		cursor: pointer;
-	}
-	.rb-cal-cell:hover:not(:disabled) {
-		background: var(--rb-trigger-hover-bg, rgba(255, 255, 255, 0.1));
-	}
-	.rb-cal-cell:disabled {
-		cursor: default;
-		opacity: 0.25;
-	}
-	.rb-cal-cell-selected {
-		background: var(--rb-text-color, #fff);
-		color: var(--rb-bar-bg, #111);
-	}
-	.rb-panel-list {
-		max-height: 16rem;
-		width: 10rem;
-		list-style: none;
-		overflow: auto;
-		padding: 0.25rem 0;
-		scrollbar-width: thin;
-		scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-	}
-	.rb-panel-list li {
-		display: block;
-	}
-	.rb-panel-list button {
-		display: block;
-		width: 100%;
-		cursor: pointer;
-		white-space: nowrap;
-		border: none;
-		background: transparent;
-		color: inherit;
-		padding: 0.5rem 1rem;
-		text-align: left;
-		font-size: 0.875rem;
-	}
-	.rb-panel-list button:hover {
-		background: var(--rb-trigger-hover-bg, rgba(255, 255, 255, 0.1));
-	}
-	.rb-panel-list button[aria-selected='true'] {
-		background: rgba(255, 255, 255, 0.15);
-		font-weight: 600;
-	}
-</style>

package/dist/ReservationBar.svelte.d.ts

@@ -1,20 +0,0 @@
-interface Props {
-    minGuests?: number;
-    maxGuests?: number;
-    defaultGuests?: number;
-    timeSlots?: string[];
-    defaultTime?: string;
-    showReserveButton?: boolean;
-    reserveHref?: string;
-    syncWithUrl?: boolean;
-    closedWeekdays?: number[];
-    fetchAvailableDates?: (partySize: number) => Promise<string[]>;
-    onchange?: (detail: {
-        date: string;
-        guests: number;
-        time: string;
-    }) => void;
-}
-declare const ReservationBar: import("svelte").Component<Props, {}, "">;
-type ReservationBar = ReturnType<typeof ReservationBar>;
-export default ReservationBar;

package/dist/index.js

@@ -1 +0,0 @@
-export { default as ReservationBar } from './ReservationBar.svelte';

package/dist/lib/calendar.d.ts

@@ -1,20 +0,0 @@
-export interface CalendarCell {
-    date: Date;
-    iso: string;
-    dayNumber: number;
-    inMonth: boolean;
-    isPast: boolean;
-    isClosedWeekday: boolean;
-}
-export declare const MONTH_NAMES: string[];
-export declare const WEEKDAY_LABELS: string[];
-export declare function toISODate(date: Date): string;
-export declare function startOfDay(date: Date): Date;
-export declare function formatDateLabel(date: Date): string;
-/**
- * Picks the initial selected date: the URL-provided date if valid and not
- * in the past, otherwise today — walking forward past any closed weekdays
- * so the picker never defaults to a day guaranteed to show as closed.
- */
-export declare function resolveInitialDate(today: Date, closedWeekdays: number[], urlDateIso: string | null): Date;
-export declare function buildCalendarGrid(viewYear: number, viewMonth: number, today: Date, closedWeekdays: number[]): CalendarCell[];

package/dist/lib/calendar.js

@@ -1,72 +0,0 @@
-export const MONTH_NAMES = [
-    'January', 'February', 'March', 'April', 'May', 'June',
-    'July', 'August', 'September', 'October', 'November', 'December',
-];
-export const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-export function toISODate(date) {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-}
-export function startOfDay(date) {
-    const d = new Date(date);
-    d.setHours(0, 0, 0, 0);
-    return d;
-}
-export function formatDateLabel(date) {
-    const weekday = date.toLocaleDateString('en-US', { weekday: 'short' });
-    const month = date.toLocaleDateString('en-US', { month: 'short' });
-    return `${weekday}, ${date.getDate()} ${month}`;
-}
-/**
- * Picks the initial selected date: the URL-provided date if valid and not
- * in the past, otherwise today — walking forward past any closed weekdays
- * so the picker never defaults to a day guaranteed to show as closed.
- */
-export function resolveInitialDate(today, closedWeekdays, urlDateIso) {
-    let initial = startOfDay(today);
-    if (urlDateIso) {
-        const parsed = startOfDay(new Date(`${urlDateIso}T00:00:00`));
-        if (!isNaN(parsed.getTime()) && parsed >= startOfDay(today)) {
-            initial = parsed;
-        }
-    }
-    let guard = 0;
-    while (closedWeekdays.includes(initial.getDay()) && guard < 7) {
-        initial = new Date(initial);
-        initial.setDate(initial.getDate() + 1);
-        guard++;
-    }
-    return initial;
-}
-export function buildCalendarGrid(viewYear, viewMonth, today, closedWeekdays) {
-    const firstOfMonth = new Date(viewYear, viewMonth, 1);
-    const startDay = firstOfMonth.getDay();
-    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
-    const daysInPrevMonth = new Date(viewYear, viewMonth, 0).getDate();
-    const cells = [];
-    for (let i = 0; i < 42; i++) {
-        const dayNum = i - startDay + 1;
-        let cellDate;
-        let inMonth = true;
-        if (dayNum < 1) {
-            cellDate = new Date(viewYear, viewMonth - 1, daysInPrevMonth + dayNum);
-            inMonth = false;
-        }
-        else if (dayNum > daysInMonth) {
-            cellDate = new Date(viewYear, viewMonth + 1, dayNum - daysInMonth);
-            inMonth = false;
-        }
-        else {
-            cellDate = new Date(viewYear, viewMonth, dayNum);
-        }
-        cellDate = startOfDay(cellDate);
-        cells.push({
-            date: cellDate,
-            iso: toISODate(cellDate),
-            dayNumber: cellDate.getDate(),
-            inMonth,
-            isPast: cellDate < today,
-            isClosedWeekday: closedWeekdays.includes(cellDate.getDay()),
-        });
-    }
-    return cells;
-}