@r2digisolutions/components 0.1.1

package/dist/components/molecules/Calendar/Calendar.svelte

@@ -0,0 +1,457 @@
+<script lang="ts">
+	export type CalendarMode = 'single' | 'multiple' | 'range';
+
+	export type CalendarDot = string | { date: string; color?: string };
+
+	type Panel = 'days' | 'months' | 'years';
+
+	interface CalendarProps {
+		mode?: CalendarMode;
+		/** Number of month grids (1 or 2). Dual is typical for booking ranges. */
+		months?: 1 | 2;
+		/** Selected day (YYYY-MM-DD) when mode is `single`. */
+		value?: string;
+		/** Selected days when mode is `multiple`. */
+		values?: string[];
+		/** Range start (YYYY-MM-DD) when mode is `range`. */
+		start?: string;
+		/** Range end (YYYY-MM-DD) when mode is `range`. */
+		end?: string;
+		/** Inclusive lower bound. */
+		min?: string;
+		/** Inclusive upper bound. */
+		max?: string;
+		/** Explicitly disabled dates (YYYY-MM-DD). */
+		disabledDates?: string[];
+		/** If set, only these dates are selectable (whitelist). */
+		enabledDates?: string[];
+		/** Marker dots under days. */
+		dots?: CalendarDot[];
+		/** Show border/shadow chrome. */
+		framed?: boolean;
+		class?: string;
+		onchange?: (detail: {
+			mode: CalendarMode;
+			value: string;
+			values: string[];
+			start: string;
+			end: string;
+		}) => void;
+	}
+
+	let {
+		mode = 'single',
+		months = 1,
+		value = $bindable(''),
+		values = $bindable<string[]>([]),
+		start = $bindable(''),
+		end = $bindable(''),
+		min,
+		max,
+		disabledDates = [],
+		enabledDates,
+		dots = [],
+		framed = true,
+		class: className = '',
+		onchange
+	}: CalendarProps = $props();
+
+	const today = new Date();
+	const todayIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+	let view = $state(new Date(today.getFullYear(), today.getMonth(), 1));
+	let panel = $state<Panel>('days');
+	/** Which month column owns the month/year picker when months=2. */
+	let pickerOffset = $state(0);
+
+	const weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+	const monthNames = Array.from({ length: 12 }, (_, i) =>
+		new Date(2000, i, 1).toLocaleString('en', { month: 'short' })
+	);
+
+	const viewYear = $derived(view.getFullYear());
+	const viewMonth = $derived(view.getMonth());
+	const dual = $derived(months === 2);
+
+	const pickerBase = $derived(new Date(viewYear, viewMonth + pickerOffset, 1));
+	const pickerYear = $derived(pickerBase.getFullYear());
+	const pickerMonth = $derived(pickerBase.getMonth());
+
+	const decadeStart = $derived(Math.floor((panel === 'days' ? viewYear : pickerYear) / 12) * 12);
+	const minYear = $derived(min ? Number(min.slice(0, 4)) : today.getFullYear() - 80);
+	const maxYear = $derived(max ? Number(max.slice(0, 4)) : today.getFullYear() + 20);
+
+	const disabledSet = $derived(new Set(disabledDates));
+	const enabledSet = $derived(enabledDates ? new Set(enabledDates) : null);
+
+	const dotMap = $derived.by(() => {
+		const map = new Map<string, string>();
+		for (const item of dots) {
+			if (typeof item === 'string') {
+				map.set(item, 'var(--color-brand-500, #6366f1)');
+			} else {
+				map.set(item.date, item.color ?? 'var(--color-brand-500, #6366f1)');
+			}
+		}
+		return map;
+	});
+
+	function monthDate(offset: number) {
+		return new Date(viewYear, viewMonth + offset, 1);
+	}
+
+	function buildCells(year: number, month: number) {
+		const first = new Date(year, month, 1);
+		const startPad = (first.getDay() + 6) % 7;
+		const daysInMonth = new Date(year, month + 1, 0).getDate();
+		const list: { date: string; day: number; inMonth: boolean }[] = [];
+
+		for (let i = 0; i < startPad; i++) {
+			list.push({ date: '', day: 0, inMonth: false });
+		}
+		for (let d = 1; d <= daysInMonth; d++) {
+			const iso = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+			list.push({ date: iso, day: d, inMonth: true });
+		}
+		return list;
+	}
+
+	const monthGrids = $derived(
+		Array.from({ length: months }, (_, offset) => {
+			const d = monthDate(offset);
+			return {
+				offset,
+				year: d.getFullYear(),
+				month: d.getMonth(),
+				cells: buildCells(d.getFullYear(), d.getMonth())
+			};
+		})
+	);
+
+	const yearCells = $derived(Array.from({ length: 12 }, (_, i) => decadeStart + i));
+
+	function headerYearsLabel() {
+		return `${decadeStart} – ${decadeStart + 11}`;
+	}
+
+	function shift(delta: number) {
+		if (panel === 'days') {
+			view = new Date(viewYear, viewMonth + delta, 1);
+			return;
+		}
+		if (panel === 'months') {
+			view = new Date(viewYear + delta, viewMonth, 1);
+			return;
+		}
+		view = new Date(viewYear + delta * 12, viewMonth, 1);
+	}
+
+	function openMonths(offset = 0) {
+		pickerOffset = offset;
+		panel = 'months';
+	}
+
+	function openYears(offset = 0) {
+		pickerOffset = offset;
+		panel = 'years';
+	}
+
+	function selectMonth(month: number) {
+		view = new Date(pickerYear, month - pickerOffset, 1);
+		panel = 'days';
+	}
+
+	function selectYear(year: number) {
+		const target = new Date(year, pickerMonth, 1);
+		view = new Date(target.getFullYear(), target.getMonth() - pickerOffset, 1);
+		panel = 'months';
+	}
+
+	function isMonthDisabled(month: number) {
+		const y = pickerYear;
+		const monthStart = `${y}-${String(month + 1).padStart(2, '0')}-01`;
+		const lastDay = new Date(y, month + 1, 0).getDate();
+		const monthEnd = `${y}-${String(month + 1).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+		if (min && monthEnd < min) return true;
+		if (max && monthStart > max) return true;
+		return false;
+	}
+
+	function isYearDisabled(year: number) {
+		return year < minYear || year > maxYear;
+	}
+
+	function isDisabled(iso: string) {
+		if (!iso) return true;
+		if (min && iso < min) return true;
+		if (max && iso > max) return true;
+		if (disabledSet.has(iso)) return true;
+		if (enabledSet && !enabledSet.has(iso)) return true;
+		return false;
+	}
+
+	function isSelected(iso: string) {
+		if (mode === 'single') return value === iso;
+		if (mode === 'multiple') return values.includes(iso);
+		if (!start) return false;
+		if (!end) return start === iso;
+		return iso >= start && iso <= end;
+	}
+
+	function isRangeEdge(iso: string) {
+		return mode === 'range' && (iso === start || iso === end);
+	}
+
+	function isInRange(iso: string) {
+		return mode === 'range' && !!start && !!end && iso > start && iso < end;
+	}
+
+	function emit() {
+		onchange?.({ mode, value, values, start, end });
+	}
+
+	function pick(iso: string) {
+		if (!iso || isDisabled(iso)) return;
+
+		if (mode === 'single') {
+			value = iso;
+			emit();
+			return;
+		}
+
+		if (mode === 'multiple') {
+			values = values.includes(iso)
+				? values.filter((d) => d !== iso)
+				: [...values, iso].sort();
+			emit();
+			return;
+		}
+
+		if (!start || (start && end)) {
+			start = iso;
+			end = '';
+			emit();
+			return;
+		}
+
+		if (iso < start) {
+			end = start;
+			start = iso;
+		} else if (iso === start) {
+			end = iso;
+		} else {
+			end = iso;
+		}
+		emit();
+	}
+
+	function dayClass(iso: string) {
+		const selected = isSelected(iso);
+		const edge = isRangeEdge(iso);
+		const mid = isInRange(iso);
+		const disabled = isDisabled(iso);
+		const isToday = iso === todayIso;
+
+		return [
+			'relative flex aspect-square min-h-9 items-center justify-center rounded-lg text-sm transition-colors',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+			disabled && 'cursor-not-allowed opacity-30',
+			!disabled && !selected && !mid && 'text-primary hover:bg-surface-overlay',
+			mid && 'rounded-none bg-brand-500/15 text-primary',
+			selected && mode !== 'range' && 'bg-brand-500 font-semibold text-white',
+			edge && 'bg-brand-500 font-semibold text-white',
+			selected &&
+				mode === 'range' &&
+				start &&
+				end &&
+				iso === start &&
+				end !== start &&
+				'rounded-r-none',
+			selected &&
+				mode === 'range' &&
+				start &&
+				end &&
+				iso === end &&
+				end !== start &&
+				'rounded-l-none',
+			isToday && !selected && !mid && 'ring-1 ring-brand-500/40'
+		];
+	}
+
+	function gridButtonClass(active: boolean, disabled: boolean) {
+		return [
+			'rounded-lg py-2.5 text-sm transition-colors',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+			disabled && 'cursor-not-allowed opacity-30',
+			!disabled && !active && 'text-primary hover:bg-surface-overlay',
+			active && 'bg-brand-500 font-semibold text-white'
+		];
+	}
+</script>
+
+<div
+	class={[
+		'max-w-full bg-surface-elevated',
+		framed && 'rounded-2xl border border-border p-3 shadow-sm',
+		!framed && 'p-0.5',
+		dual && panel === 'days' ? 'w-fit' : framed ? 'w-80' : 'w-full',
+		className
+	]}
+>
+	{#if panel === 'days'}
+		<div class={['flex', dual ? 'flex-col gap-4 sm:flex-row sm:gap-2' : 'flex-col']}>
+			{#each monthGrids as grid (grid.offset)}
+				<div class={['max-w-full shrink-0 px-0.5', dual ? 'w-72' : 'w-full']}>
+					<div class="mb-3 flex items-center justify-between gap-1">
+						{#if grid.offset === 0}
+							<button
+								type="button"
+								onclick={() => shift(-1)}
+								class="rounded-lg p-1.5 text-secondary hover:bg-surface-overlay hover:text-primary"
+								aria-label="Previous month"
+							>
+								<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+								</svg>
+							</button>
+						{:else}
+							<span class="w-8"></span>
+						{/if}
+
+						<div class="flex min-w-0 flex-1 items-center justify-center gap-0.5">
+							<button
+								type="button"
+								onclick={() => openMonths(grid.offset)}
+								class="rounded-md px-1.5 py-0.5 text-sm font-semibold text-primary hover:bg-surface-overlay"
+							>
+								{monthNames[grid.month]}
+							</button>
+							<button
+								type="button"
+								onclick={() => openYears(grid.offset)}
+								class="rounded-md px-1.5 py-0.5 text-sm font-semibold text-primary hover:bg-surface-overlay"
+							>
+								{grid.year}
+							</button>
+						</div>
+
+						{#if grid.offset === months - 1}
+							<button
+								type="button"
+								onclick={() => shift(1)}
+								class="rounded-lg p-1.5 text-secondary hover:bg-surface-overlay hover:text-primary"
+								aria-label="Next month"
+							>
+								<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+								</svg>
+							</button>
+						{:else}
+							<span class="w-8"></span>
+						{/if}
+					</div>
+
+					<div class="mb-1 grid grid-cols-7 gap-1.5">
+						{#each weekDays as d (d)}
+							<span class="py-1 text-center text-[11px] font-medium text-muted">{d}</span>
+						{/each}
+					</div>
+
+					<div class="grid grid-cols-7 gap-1.5">
+						{#each grid.cells as cell, i (cell.date || `e-${grid.offset}-${i}`)}
+							{#if !cell.inMonth}
+								<span class="aspect-square min-h-9"></span>
+							{:else}
+								{@const color = dotMap.get(cell.date)}
+								<button
+									type="button"
+									disabled={isDisabled(cell.date)}
+									aria-pressed={isSelected(cell.date)}
+									onclick={() => pick(cell.date)}
+									class={dayClass(cell.date)}
+								>
+									<span class="relative z-10">{cell.day}</span>
+									{#if color}
+										<span
+											class="absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full"
+											style:background-color={color}
+											aria-hidden="true"
+										></span>
+									{/if}
+								</button>
+							{/if}
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="w-full max-w-full px-0.5">
+			<div class="mb-3 flex items-center justify-between gap-1">
+				<button
+					type="button"
+					onclick={() => shift(-1)}
+					class="rounded-lg p-1.5 text-secondary hover:bg-surface-overlay hover:text-primary"
+					aria-label={panel === 'years' ? 'Previous years' : 'Previous year'}
+				>
+					<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+					</svg>
+				</button>
+
+				<div class="flex min-w-0 flex-1 items-center justify-center gap-0.5">
+					{#if panel === 'months'}
+						<button
+							type="button"
+							onclick={() => openYears(pickerOffset)}
+							class="rounded-md px-1.5 py-0.5 text-sm font-semibold text-primary hover:bg-surface-overlay"
+						>
+							{pickerYear}
+						</button>
+					{:else}
+						<span class="text-sm font-semibold text-primary">{headerYearsLabel()}</span>
+					{/if}
+				</div>
+
+				<button
+					type="button"
+					onclick={() => shift(1)}
+					class="rounded-lg p-1.5 text-secondary hover:bg-surface-overlay hover:text-primary"
+					aria-label={panel === 'years' ? 'Next years' : 'Next year'}
+				>
+					<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+					</svg>
+				</button>
+			</div>
+
+			{#if panel === 'months'}
+				<div class="grid grid-cols-3 gap-1 py-1">
+					{#each monthNames as name, month (name)}
+						<button
+							type="button"
+							disabled={isMonthDisabled(month)}
+							onclick={() => selectMonth(month)}
+							class={gridButtonClass(month === pickerMonth, isMonthDisabled(month))}
+						>
+							{name}
+						</button>
+					{/each}
+				</div>
+			{:else}
+				<div class="grid grid-cols-3 gap-1 py-1">
+					{#each yearCells as year (year)}
+						<button
+							type="button"
+							disabled={isYearDisabled(year)}
+							onclick={() => selectYear(year)}
+							class={gridButtonClass(year === pickerYear, isYearDisabled(year))}
+						>
+							{year}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/molecules/Calendar/Calendar.svelte.d.ts

@@ -0,0 +1,41 @@
+export type CalendarMode = 'single' | 'multiple' | 'range';
+export type CalendarDot = string | {
+    date: string;
+    color?: string;
+};
+interface CalendarProps {
+    mode?: CalendarMode;
+    /** Number of month grids (1 or 2). Dual is typical for booking ranges. */
+    months?: 1 | 2;
+    /** Selected day (YYYY-MM-DD) when mode is `single`. */
+    value?: string;
+    /** Selected days when mode is `multiple`. */
+    values?: string[];
+    /** Range start (YYYY-MM-DD) when mode is `range`. */
+    start?: string;
+    /** Range end (YYYY-MM-DD) when mode is `range`. */
+    end?: string;
+    /** Inclusive lower bound. */
+    min?: string;
+    /** Inclusive upper bound. */
+    max?: string;
+    /** Explicitly disabled dates (YYYY-MM-DD). */
+    disabledDates?: string[];
+    /** If set, only these dates are selectable (whitelist). */
+    enabledDates?: string[];
+    /** Marker dots under days. */
+    dots?: CalendarDot[];
+    /** Show border/shadow chrome. */
+    framed?: boolean;
+    class?: string;
+    onchange?: (detail: {
+        mode: CalendarMode;
+        value: string;
+        values: string[];
+        start: string;
+        end: string;
+    }) => void;
+}
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "value" | "values" | "start" | "end">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/molecules/Calendar/CalendarStory.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import Calendar, { type CalendarMode } from './Calendar.svelte';
+
+	let {
+		mode = 'single',
+		months = 1,
+		showMinMax = false,
+		showDisabledDates = false,
+		showEnabledOnly = false,
+		showDots = false
+	}: {
+		mode?: CalendarMode;
+		months?: 1 | 2;
+		showMinMax?: boolean;
+		showDisabledDates?: boolean;
+		showEnabledOnly?: boolean;
+		showDots?: boolean;
+	} = $props();
+
+	const today = new Date();
+	const y = today.getFullYear();
+	const m = String(today.getMonth() + 1).padStart(2, '0');
+	const d = String(today.getDate()).padStart(2, '0');
+	const todayIso = `${y}-${m}-${d}`;
+
+	function iso(day: number, monthOffset = 0) {
+		const date = new Date(y, today.getMonth() + monthOffset, day);
+		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+	}
+
+	let value = $state(todayIso);
+	let values = $state([iso(3), iso(8), iso(15)]);
+	let start = $state(iso(5));
+	let end = $state(iso(12));
+
+	const min = $derived(showMinMax ? iso(1) : undefined);
+	const max = $derived(showMinMax ? iso(20) : undefined);
+
+	const disabledDates = $derived(
+		showDisabledDates ? [iso(4), iso(5), iso(6), iso(18)] : []
+	);
+
+	const enabledDates = $derived(
+		showEnabledOnly
+			? [iso(2), iso(4), iso(7), iso(11), iso(14), iso(21), iso(25)]
+			: undefined
+	);
+
+	const dots = $derived(
+		showDots
+			? [
+					{ date: iso(3), color: '#22c55e' },
+					{ date: iso(9), color: '#f59e0b' },
+					{ date: iso(16), color: '#ef4444' },
+					{ date: todayIso, color: '#6366f1' }
+				]
+			: []
+	);
+
+	const summary = $derived.by(() => {
+		if (mode === 'single') return value || '—';
+		if (mode === 'multiple') return values.length ? values.join(', ') : '—';
+		if (!start) return '—';
+		if (!end) return `${start} → …`;
+		return `${start} → ${end}`;
+	});
+</script>
+
+<div class="space-y-3">
+	{#if mode === 'single'}
+		<Calendar
+			mode="single"
+			{months}
+			bind:value
+			{min}
+			{max}
+			{disabledDates}
+			{enabledDates}
+			{dots}
+		/>
+	{:else if mode === 'multiple'}
+		<Calendar
+			mode="multiple"
+			{months}
+			bind:values
+			{min}
+			{max}
+			{disabledDates}
+			{enabledDates}
+			{dots}
+		/>
+	{:else}
+		<Calendar
+			mode="range"
+			{months}
+			bind:start
+			bind:end
+			{min}
+			{max}
+			{disabledDates}
+			{enabledDates}
+			{dots}
+		/>
+	{/if}
+
+	<p class="max-w-80 text-xs text-muted">
+		{#if mode === 'single'}
+			Selected: <span class="font-medium text-primary">{summary}</span>
+		{:else if mode === 'multiple'}
+			Selected ({values.length}): <span class="font-medium text-primary">{summary}</span>
+		{:else}
+			Range: <span class="font-medium text-primary">{summary}</span>
+		{/if}
+	</p>
+</div>

package/dist/components/molecules/Calendar/CalendarStory.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type CalendarMode } from './Calendar.svelte';
+type $$ComponentProps = {
+    mode?: CalendarMode;
+    months?: 1 | 2;
+    showMinMax?: boolean;
+    showDisabledDates?: boolean;
+    showEnabledOnly?: boolean;
+    showDots?: boolean;
+};
+declare const CalendarStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarStory = ReturnType<typeof CalendarStory>;
+export default CalendarStory;

package/dist/components/molecules/Callout/Callout.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        tone?: "info" | "success" | "warning" | "error" | "neutral";
+        title?: string;
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        tone: {
+            control: "select";
+            options: string[];
+        };
+        title: {
+            control: "text";
+        };
+    };
+    args: {
+        tone: "info";
+        title: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Error: Story;

package/dist/components/molecules/Callout/Callout.stories.js

@@ -0,0 +1,14 @@
+import CalloutStory from './CalloutStory.svelte';
+const meta = {
+    title: 'Molecules/Callout',
+    component: CalloutStory,
+    tags: ['autodocs'],
+    argTypes: {
+        tone: { control: 'select', options: ['info', 'success', 'warning', 'error', 'neutral'] },
+        title: { control: 'text' }
+    },
+    args: { tone: 'info', title: 'Heads up' }
+};
+export default meta;
+export const Default = {};
+export const Error = { args: { tone: 'error', title: 'Action required' } };