@dryui/ui 0.0.1

package/dist/calendar/calendar-grid.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCalendarCtx } from './context.svelte.js';
+	import {
+		getCalendarDays,
+		isSameDay,
+		isToday,
+		isDateInRange,
+		formatDate
+	} from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+
+	const ctx = getCalendarCtx();
+
+	let containerEl = $state<HTMLDivElement>();
+
+	const weekdayLabels = $derived(generateWeekdayLabels(ctx.locale, ctx.weekStartDay));
+
+	const calendarDays = $derived(getCalendarDays(ctx.viewYear, ctx.viewMonth, ctx.weekStartDay));
+
+	const monthYearLabel = $derived(
+		formatDate(new Date(ctx.viewYear, ctx.viewMonth, 1), ctx.locale, {
+			month: 'long',
+			year: 'numeric'
+		})
+	);
+
+	const weeks = $derived(splitIntoWeeks(calendarDays));
+
+	function generateWeekdayLabels(locale: string, weekStartDay: number): string[] {
+		const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+		const labels: string[] = [];
+		for (let i = 0; i < 7; i++) {
+			const d = new Date(2024, 0, 7 + ((i + weekStartDay) % 7));
+			labels.push(formatter.format(d));
+		}
+		return labels;
+	}
+
+	function splitIntoWeeks(days: Date[]): Date[][] {
+		const weeks: Date[][] = [];
+		for (let i = 0; i < days.length; i += 7) {
+			weeks.push(days.slice(i, i + 7));
+		}
+		return weeks;
+	}
+
+	function getDayISOString(day: Date): string {
+		return `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`;
+	}
+
+	function handleDayClick(day: Date) {
+		if (ctx.disabled) return;
+		if (!isDateInRange(day, ctx.min, ctx.max)) return;
+		ctx.select(day);
+	}
+
+	function handleDayKeydown(e: KeyboardEvent, day: Date) {
+		if (ctx.disabled) return;
+		const { key } = e;
+		let newDate: Date | null = null;
+
+		if (key === 'ArrowLeft') {
+			e.preventDefault();
+			newDate = new Date(day);
+			newDate.setDate(newDate.getDate() - 1);
+		} else if (key === 'ArrowRight') {
+			e.preventDefault();
+			newDate = new Date(day);
+			newDate.setDate(newDate.getDate() + 1);
+		} else if (key === 'ArrowUp') {
+			e.preventDefault();
+			newDate = new Date(day);
+			newDate.setDate(newDate.getDate() - 7);
+		} else if (key === 'ArrowDown') {
+			e.preventDefault();
+			newDate = new Date(day);
+			newDate.setDate(newDate.getDate() + 7);
+		} else if (key === 'Enter' || key === ' ') {
+			e.preventDefault();
+			if (isDateInRange(day, ctx.min, ctx.max)) ctx.select(day);
+			return;
+		} else return;
+
+		if (newDate && isDateInRange(newDate, ctx.min, ctx.max)) {
+			ctx.setFocusedDate(newDate);
+			requestAnimationFrame(() => {
+				const isoStr = getDayISOString(newDate!);
+				const btn = containerEl?.querySelector(
+					`[data-calendar-day="${isoStr}"]`
+				) as HTMLButtonElement;
+				btn?.focus();
+			});
+		}
+	}
+
+	function isDayDisabled(day: Date): boolean {
+		return !isDateInRange(day, ctx.min, ctx.max);
+	}
+</script>
+
+<div bind:this={containerEl} data-calendar-grid class={className} {...rest}>
+	<div role="grid" aria-label={monthYearLabel}>
+		<div data-calendar-row role="row">
+			{#each weekdayLabels as label}
+				<div data-calendar-columnheader role="columnheader" aria-label={label}>
+					<span aria-hidden="true">{label}</span>
+				</div>
+			{/each}
+		</div>
+
+		{#each weeks as week}
+			<div data-calendar-row role="row">
+				{#each week as day}
+					{@const isCurrent = day.getMonth() === ctx.viewMonth}
+					{@const selected = ctx.value ? isSameDay(day, ctx.value) : false}
+					{@const today = isToday(day)}
+					{@const disabled = isDayDisabled(day)}
+					{@const focused = isSameDay(day, ctx.focusedDate)}
+					{@const isoStr = getDayISOString(day)}
+					<div data-calendar-cell>
+						<button
+							role="gridcell"
+							type="button"
+							data-calendar-day-button
+							tabindex={focused ? 0 : -1}
+							aria-label={formatDate(day, ctx.locale, {
+								year: 'numeric',
+								month: 'long',
+								day: 'numeric'
+							})}
+							aria-selected={selected}
+							aria-disabled={disabled}
+							data-calendar-day={isoStr}
+							data-today={today ? '' : undefined}
+							data-selected={selected ? '' : undefined}
+							data-outside-month={!isCurrent ? '' : undefined}
+							data-disabled={disabled ? '' : undefined}
+							onclick={() => handleDayClick(day)}
+							onkeydown={(e) => handleDayKeydown(e, day)}
+						>
+							{day.getDate()}
+						</button>
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	[data-calendar-grid] {
+		--dry-calendar-grid-gap: 1px;
+		display: grid;
+		gap: var(--dry-space-2);
+	}
+
+	[role='grid'] {
+		display: grid;
+		gap: var(--dry-calendar-grid-gap);
+	}
+
+	[data-calendar-row] {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+		gap: var(--dry-calendar-grid-gap);
+	}
+
+	[data-calendar-columnheader] {
+		display: grid;
+		place-items: center;
+		min-height: var(--dry-space-8);
+		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+		color: var(--dry-calendar-muted-color, var(--dry-color-text-weak));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	[data-calendar-cell] {
+		display: grid;
+		grid-template-columns: var(--dry-calendar-day-size, 2.25rem);
+		place-items: center;
+	}
+
+	[data-calendar-day-button] {
+		display: inline-grid;
+		place-items: center;
+		min-height: var(--dry-calendar-day-size, 2.25rem);
+		aspect-ratio: 1;
+		border: none;
+		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		font: inherit;
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+
+		&:hover:not([data-disabled]) {
+			background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 1px;
+		}
+
+		&[data-today]:not([data-selected]) {
+			color: var(--dry-calendar-today-color, var(--dry-color-fill-brand));
+			font-weight: 600;
+		}
+
+		&[data-selected] {
+			background: var(--dry-calendar-selected-bg, var(--dry-color-fill-brand));
+			color: var(--dry-calendar-selected-color, var(--dry-color-on-brand));
+			font-weight: 600;
+		}
+
+		&[data-selected]:hover:not([data-disabled]) {
+			background: var(--dry-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
+		}
+
+		&[data-in-range] {
+			background: var(
+				--dry-calendar-range-bg,
+				color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent)
+			);
+			border-radius: 0;
+		}
+
+		&[data-range-start],
+		&[data-range-end] {
+			border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
+		}
+
+		&[data-outside-month] {
+			color: var(--dry-calendar-outside-color, var(--dry-color-text-weak));
+			opacity: 0.6;
+		}
+
+		&[data-disabled] {
+			cursor: not-allowed;
+			opacity: 0.4;
+			pointer-events: none;
+		}
+	}
+</style>

package/dist/calendar/calendar-grid.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarGridProps } from './index.js';
+declare const CalendarGrid: import('svelte').Component<CalendarGridProps, {}, ''>;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/calendar/calendar-header.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div data-calendar-header class={className} {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	[data-calendar-header] {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		gap: var(--dry-space-2);
+		margin-bottom: var(--dry-space-2);
+	}
+</style>

package/dist/calendar/calendar-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarHeaderProps } from './index.js';
+declare const CalendarHeader: import('svelte').Component<CalendarHeaderProps, {}, ''>;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;

package/dist/calendar/calendar-heading.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCalendarCtx } from './context.svelte.js';
+	import { formatDate } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+
+	const ctx = getCalendarCtx();
+
+	const monthYearLabel = $derived(
+		formatDate(new Date(ctx.viewYear, ctx.viewMonth, 1), ctx.locale, {
+			month: 'long',
+			year: 'numeric'
+		})
+	);
+</script>
+
+<span data-calendar-heading aria-live="polite" aria-atomic="true" class={className} {...rest}>
+	{monthYearLabel}
+</span>
+
+<style>
+	[data-calendar-heading] {
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+</style>

package/dist/calendar/calendar-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarHeadingProps } from './index.js';
+declare const CalendarHeading: import('svelte').Component<CalendarHeadingProps, {}, ''>;
+type CalendarHeading = ReturnType<typeof CalendarHeading>;
+export default CalendarHeading;

package/dist/calendar/calendar-next.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getCalendarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+
+	const ctx = getCalendarCtx();
+</script>
+
+<button
+	type="button"
+	aria-label="Next month"
+	disabled={ctx.disabled}
+	data-calendar-nav
+	class={className}
+	onclick={() => ctx.nextMonth()}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		&#8250;
+	{/if}
+</button>
+
+<style>
+	[data-calendar-nav] {
+		display: inline-grid;
+		place-items: center;
+		height: var(--dry-space-8);
+		aspect-ratio: 1;
+		border: 1px solid transparent;
+		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default);
+
+		&:hover:not([disabled]) {
+			background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
+			border-color: var(--dry-color-stroke-strong);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 1px;
+		}
+	}
+</style>

package/dist/calendar/calendar-next.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarNextProps } from './index.js';
+declare const CalendarNext: import('svelte').Component<CalendarNextProps, {}, ''>;
+type CalendarNext = ReturnType<typeof CalendarNext>;
+export default CalendarNext;

package/dist/calendar/calendar-prev.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getCalendarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+
+	const ctx = getCalendarCtx();
+</script>
+
+<button
+	type="button"
+	aria-label="Previous month"
+	disabled={ctx.disabled}
+	data-calendar-nav
+	class={className}
+	onclick={() => ctx.prevMonth()}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		&#8249;
+	{/if}
+</button>
+
+<style>
+	[data-calendar-nav] {
+		display: inline-grid;
+		place-items: center;
+		height: var(--dry-space-8);
+		aspect-ratio: 1;
+		border: 1px solid transparent;
+		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default);
+
+		&:hover:not([disabled]) {
+			background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
+			border-color: var(--dry-color-stroke-strong);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 1px;
+		}
+	}
+</style>

package/dist/calendar/calendar-prev.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarPrevProps } from './index.js';
+declare const CalendarPrev: import('svelte').Component<CalendarPrevProps, {}, ''>;
+type CalendarPrev = ReturnType<typeof CalendarPrev>;
+export default CalendarPrev;

package/dist/calendar/calendar-root.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setCalendarCtx } from './context.svelte.js';
+	import { getWeekStartDay, addMonths } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: Date | null;
+		locale?: string;
+		min?: Date | null;
+		max?: Date | null;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable<Date | null>(null),
+		locale = 'en-US',
+		min = null,
+		max = null,
+		disabled = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const weekStartDay = $derived(getWeekStartDay(locale));
+
+	let viewMonth = $state(value ? value.getMonth() : new Date().getMonth());
+	let viewYear = $state(value ? value.getFullYear() : new Date().getFullYear());
+	let focusedDate = $state<Date>(value ?? new Date());
+
+	setCalendarCtx({
+		get value() {
+			return value;
+		},
+		get focusedDate() {
+			return focusedDate;
+		},
+		get viewMonth() {
+			return viewMonth;
+		},
+		get viewYear() {
+			return viewYear;
+		},
+		get locale() {
+			return locale;
+		},
+		get min() {
+			return min;
+		},
+		get max() {
+			return max;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get weekStartDay() {
+			return weekStartDay;
+		},
+		get multiple() {
+			return false;
+		},
+		get selectedDates() {
+			return value ? [value] : [];
+		},
+		select(date: Date) {
+			value = date;
+			focusedDate = date;
+			viewMonth = date.getMonth();
+			viewYear = date.getFullYear();
+		},
+		goToMonth(month: number) {
+			if (month < 0) {
+				viewMonth = 11;
+				viewYear = viewYear - 1;
+			} else if (month > 11) {
+				viewMonth = 0;
+				viewYear = viewYear + 1;
+			} else {
+				viewMonth = month;
+			}
+		},
+		goToYear(year: number) {
+			viewYear = year;
+		},
+		nextMonth() {
+			const next = addMonths(new Date(viewYear, viewMonth, 1), 1);
+			viewMonth = next.getMonth();
+			viewYear = next.getFullYear();
+		},
+		prevMonth() {
+			const prev = addMonths(new Date(viewYear, viewMonth, 1), -1);
+			viewMonth = prev.getMonth();
+			viewYear = prev.getFullYear();
+		},
+		setFocusedDate(date: Date) {
+			focusedDate = date;
+			viewMonth = date.getMonth();
+			viewYear = date.getFullYear();
+		}
+	});
+</script>
+
+<div
+	data-calendar
+	data-disabled={disabled || undefined}
+	class={className}
+	role="group"
+	aria-label="Calendar"
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-calendar] {
+		--dry-calendar-bg: var(--dry-color-bg-overlay);
+		--dry-calendar-border: var(--dry-color-stroke-weak);
+		--dry-calendar-radius: var(--dry-radius-lg);
+		--dry-calendar-shadow: var(--dry-shadow-sm);
+		--dry-calendar-padding: var(--dry-space-3);
+		--dry-calendar-header-color: var(--dry-color-text-strong);
+		--dry-calendar-muted-color: var(--dry-color-text-weak);
+		--dry-calendar-day-size: 2.25rem;
+		--dry-calendar-day-radius: var(--dry-radius-md);
+		--dry-calendar-day-hover-bg: var(--dry-color-bg-raised);
+		--dry-calendar-selected-bg: var(--dry-color-fill-brand);
+		--dry-calendar-selected-color: var(--dry-color-on-brand);
+		--dry-calendar-selected-hover-bg: var(--dry-color-fill-brand-hover);
+		--dry-calendar-range-bg: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
+		--dry-calendar-today-color: var(--dry-color-fill-brand);
+		--dry-calendar-outside-color: var(--dry-color-text-weak);
+
+		display: grid;
+		box-sizing: border-box;
+		padding: var(--dry-calendar-padding);
+		background: var(--dry-calendar-bg);
+		border: 1px solid var(--dry-calendar-border);
+		border-radius: var(--dry-calendar-radius);
+		box-shadow: var(--dry-calendar-shadow);
+		color: var(--dry-calendar-header-color);
+		font-family: var(--dry-font-sans);
+	}
+</style>

package/dist/calendar/calendar-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarRootProps } from './index.js';
+declare const CalendarRoot: import('svelte').Component<CalendarRootProps, {}, 'value'>;
+type CalendarRoot = ReturnType<typeof CalendarRoot>;
+export default CalendarRoot;

package/dist/calendar/context.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface CalendarContext {
+    readonly value: Date | null;
+    readonly focusedDate: Date;
+    readonly viewMonth: number;
+    readonly viewYear: number;
+    readonly locale: string;
+    readonly min: Date | null;
+    readonly max: Date | null;
+    readonly disabled: boolean;
+    readonly weekStartDay: number;
+    readonly multiple: boolean;
+    readonly selectedDates: Date[];
+    select: (date: Date) => void;
+    goToMonth: (month: number) => void;
+    goToYear: (year: number) => void;
+    nextMonth: () => void;
+    prevMonth: () => void;
+    setFocusedDate: (date: Date) => void;
+}
+export declare const setCalendarCtx: (ctx: CalendarContext) => CalendarContext, getCalendarCtx: () => CalendarContext;

package/dist/calendar/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setCalendarCtx, getCalendarCtx] = createContext('calendar');

package/dist/calendar/index.d.ts

@@ -0,0 +1,22 @@
+export type {
+	CalendarRootProps,
+	CalendarHeaderProps,
+	CalendarGridProps,
+	CalendarPrevProps,
+	CalendarNextProps,
+	CalendarHeadingProps
+} from '@dryui/primitives';
+import CalendarRoot from './calendar-root.svelte';
+import CalendarHeader from './calendar-header.svelte';
+import CalendarGrid from './calendar-grid.svelte';
+import CalendarPrev from './calendar-prev.svelte';
+import CalendarNext from './calendar-next.svelte';
+import CalendarHeading from './calendar-heading.svelte';
+export declare const Calendar: {
+	Root: typeof CalendarRoot;
+	Header: typeof CalendarHeader;
+	Grid: typeof CalendarGrid;
+	Prev: typeof CalendarPrev;
+	Next: typeof CalendarNext;
+	Heading: typeof CalendarHeading;
+};

package/dist/calendar/index.js

@@ -0,0 +1,14 @@
+import CalendarRoot from './calendar-root.svelte';
+import CalendarHeader from './calendar-header.svelte';
+import CalendarGrid from './calendar-grid.svelte';
+import CalendarPrev from './calendar-prev.svelte';
+import CalendarNext from './calendar-next.svelte';
+import CalendarHeading from './calendar-heading.svelte';
+export const Calendar = {
+    Root: CalendarRoot,
+    Header: CalendarHeader,
+    Grid: CalendarGrid,
+    Prev: CalendarPrev,
+    Next: CalendarNext,
+    Heading: CalendarHeading
+};