@dryui/ui 2.0.2 → 4.0.0

package/src/internal/calendar-grid-utils.ts

@@ -0,0 +1,123 @@
+import { formatDate } from '@dryui/primitives';
+import type { CalendarVisibleMonths } from './calendar-event-layout.js';
+
+interface CalendarKeydownOptions {
+	onSelect: (date: Date) => void;
+	onEscape: () => void;
+	setFocusedDate: (date: Date) => void;
+	weekStartDay: number;
+	min: Date | null;
+	max: Date | null;
+}
+
+type CalendarKeydownResult = { type: 'navigate'; newDate: Date } | null;
+
+export function normalizeVisibleMonths(
+	value: CalendarVisibleMonths | undefined
+): CalendarVisibleMonths {
+	return value === 2 ? 2 : 1;
+}
+
+export function formatVisibleMonthRangeLabel(
+	year: number,
+	month: number,
+	locale: string,
+	visibleMonths: CalendarVisibleMonths = 1
+): string {
+	const monthCount = normalizeVisibleMonths(visibleMonths);
+	const firstDate = new Date(year, month, 1);
+	const firstLabel = formatDate(firstDate, locale, {
+		month: 'long',
+		year: 'numeric'
+	});
+
+	if (monthCount === 1) return firstLabel;
+
+	const lastDate = new Date(year, month + monthCount - 1, 1);
+	const lastLabel = formatDate(lastDate, locale, {
+		month: 'long',
+		year: 'numeric'
+	});
+
+	if (firstDate.getFullYear() !== lastDate.getFullYear()) {
+		return `${firstLabel} - ${lastLabel}`;
+	}
+
+	const firstMonthLabel = formatDate(firstDate, locale, { month: 'long' });
+	return `${firstMonthLabel} - ${lastLabel}`;
+}
+
+export function generateWeekdayLabels(locale: string, weekStartDay: number): string[] {
+	const formatter = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
+	const labels: string[] = [];
+	for (let i = 0; i < 7; i++) {
+		const dayIndex = (weekStartDay + i) % 7;
+		// Jan 7 2024 = Sunday (getDay() === 0)
+		const d = new Date(2024, 0, 7 + dayIndex);
+		labels.push(formatter.format(d));
+	}
+	return labels;
+}
+
+export 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;
+}
+
+export function getDayISOString(day: Date): string {
+	const year = day.getFullYear();
+	const month = String(day.getMonth() + 1).padStart(2, '0');
+	const date = String(day.getDate()).padStart(2, '0');
+	return `${year}-${month}-${date}`;
+}
+
+export function handleCalendarKeydown(
+	e: KeyboardEvent,
+	day: Date,
+	options: CalendarKeydownOptions
+): CalendarKeydownResult {
+	const { onSelect, onEscape, setFocusedDate } = options;
+	let delta = 0;
+
+	switch (e.key) {
+		case 'ArrowRight':
+			delta = 1;
+			break;
+		case 'ArrowLeft':
+			delta = -1;
+			break;
+		case 'ArrowDown':
+			delta = 7;
+			break;
+		case 'ArrowUp':
+			delta = -7;
+			break;
+		case 'Enter':
+		case ' ':
+			e.preventDefault();
+			onSelect(day);
+			return null;
+		case 'Escape':
+			e.preventDefault();
+			onEscape();
+			return null;
+		default:
+			return null;
+	}
+
+	e.preventDefault();
+	const newDate = new Date(day);
+	newDate.setDate(newDate.getDate() + delta);
+	setFocusedDate(newDate);
+	return { type: 'navigate', newDate };
+}
+
+export function focusCalendarDay(container: HTMLElement | undefined, date: Date): void {
+	if (!container) return;
+	const iso = getDayISOString(date);
+	const el = container.querySelector<HTMLElement>(`[data-calendar-day="${iso}"]`);
+	el?.focus();
+}

package/src/internal/close-button-base.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import type { ButtonVariant, ButtonSize } from '../button/index.js';
+
+	interface Props extends HTMLButtonAttributes {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		label?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = 'trigger',
+		size = 'icon-sm',
+		label = 'Dismiss',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<Button
+	{variant}
+	{size}
+	type="button"
+	aria-label={children !== undefined ? undefined : label}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<span aria-hidden="true">&times;</span>
+	{/if}
+</Button>

package/src/internal/color-aliases.ts

@@ -0,0 +1,37 @@
+export const COLOR_ALIASES = {
+	info: 'blue',
+	success: 'green',
+	warning: 'yellow',
+	danger: 'red'
+} as const;
+
+export type BaseColor = 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'orange';
+export type SemanticColor = keyof typeof COLOR_ALIASES;
+export type AliasableColor = BaseColor | SemanticColor;
+
+const BASE_COLORS: ReadonlySet<string> = new Set<BaseColor>([
+	'gray',
+	'blue',
+	'red',
+	'green',
+	'yellow',
+	'purple',
+	'orange'
+]);
+
+function isSemanticColor(c: string): c is SemanticColor {
+	return c in COLOR_ALIASES;
+}
+
+function isBaseColor(c: string): c is BaseColor {
+	return BASE_COLORS.has(c);
+}
+
+export function resolveAlias(color: AliasableColor | undefined, fallback: BaseColor): BaseColor {
+	const resolved = color ?? fallback;
+	if (isSemanticColor(resolved)) {
+		return COLOR_ALIASES[resolved];
+	}
+
+	return isBaseColor(resolved) ? resolved : fallback;
+}

package/src/internal/date-family-controller.svelte.ts

@@ -0,0 +1,165 @@
+import { getWeekStartDay } from '@dryui/primitives';
+import { SvelteDate } from 'svelte/reactivity';
+
+interface DateViewControllerConfig {
+	initialDate?: Date | null;
+	locale: () => string;
+}
+
+interface DateViewController {
+	readonly focusedDate: Date;
+	readonly viewMonth: number;
+	readonly viewYear: number;
+	readonly weekStartDay: number;
+	focusDate: (date: Date) => void;
+	setFocusedDate: (date: Date) => void;
+	goToMonth: (month: number) => void;
+	goToYear: (year: number) => void;
+	nextMonth: () => void;
+	prevMonth: () => void;
+}
+
+export function createDateViewController({
+	initialDate = null,
+	locale
+}: DateViewControllerConfig): DateViewController {
+	const seedDate = initialDate ? new SvelteDate(initialDate.getTime()) : new SvelteDate();
+
+	let viewMonth = $state(seedDate.getMonth());
+	let viewYear = $state(seedDate.getFullYear());
+	let focusedTime = $state(seedDate.getTime());
+
+	const weekStartDay = $derived(getWeekStartDay(locale()));
+
+	function updateViewFromDate(date: Date) {
+		viewMonth = date.getMonth();
+		viewYear = date.getFullYear();
+	}
+
+	function goToMonth(month: number) {
+		if (month < 0) {
+			viewMonth = 11;
+			viewYear -= 1;
+			return;
+		}
+
+		if (month > 11) {
+			viewMonth = 0;
+			viewYear += 1;
+			return;
+		}
+
+		viewMonth = month;
+	}
+
+	function goToYear(year: number) {
+		viewYear = year;
+	}
+
+	return {
+		get focusedDate() {
+			return new SvelteDate(focusedTime);
+		},
+		get viewMonth() {
+			return viewMonth;
+		},
+		get viewYear() {
+			return viewYear;
+		},
+		get weekStartDay() {
+			return weekStartDay;
+		},
+		focusDate(date: Date) {
+			focusedTime = date.getTime();
+		},
+		setFocusedDate(date: Date) {
+			focusedTime = date.getTime();
+			updateViewFromDate(date);
+		},
+		goToMonth,
+		goToYear,
+		nextMonth() {
+			goToMonth(viewMonth + 1);
+		},
+		prevMonth() {
+			goToMonth(viewMonth - 1);
+		}
+	};
+}
+
+interface PickerPopoverControllerConfig {
+	triggerIdPrefix: string;
+	contentIdPrefix: string;
+	uid: string;
+	open: () => boolean;
+	setOpen: (open: boolean) => void;
+	disabled: () => boolean;
+	onShow?: () => void;
+	onClose?: () => void;
+}
+
+export interface PickerPopoverController {
+	readonly open: boolean;
+	readonly triggerId: string;
+	readonly contentId: string;
+	readonly triggerEl: HTMLElement | null;
+	show: () => void;
+	close: () => void;
+	toggle: () => void;
+}
+
+export function createPickerPopoverController({
+	triggerIdPrefix,
+	contentIdPrefix,
+	uid,
+	open,
+	setOpen,
+	disabled,
+	onShow,
+	onClose
+}: PickerPopoverControllerConfig) {
+	const triggerId = `${triggerIdPrefix}-${uid}`;
+	const contentId = `${contentIdPrefix}-${uid}`;
+
+	let triggerEl = $state<HTMLElement | null>(null);
+
+	return {
+		get triggerId() {
+			return triggerId;
+		},
+		get contentId() {
+			return contentId;
+		},
+		get triggerEl() {
+			return triggerEl;
+		},
+		setTriggerEl(element: HTMLElement | null) {
+			triggerEl = element;
+		},
+		show() {
+			if (disabled()) return;
+
+			onShow?.();
+			setOpen(true);
+		},
+		close() {
+			setOpen(false);
+			onClose?.();
+		},
+		toggle() {
+			if (disabled()) return;
+
+			const nextOpen = !open();
+
+			if (nextOpen) {
+				onShow?.();
+			}
+
+			setOpen(nextOpen);
+
+			if (!nextOpen) {
+				onClose?.();
+			}
+		}
+	};
+}

package/src/internal/form-control-wrapper-attrs.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * Wrapper-element HTMLAttributes restricted to the keys that should NOT
+ * land on the wrapper. `oninput`/`onchange`/`onfocus`/`onblur`/`onkeydown`/
+ * `onkeyup` and `autofocus`/`aria-invalid` are forwarded to the inner
+ * native `<input>`/`<textarea>` instead, where their typed signatures
+ * match the input element type and prevent variance errors.
+ */
+export type FormControlWrapperAttrs<T extends HTMLElement = HTMLSpanElement> = Omit<
+	HTMLAttributes<T>,
+	| 'oninput'
+	| 'onchange'
+	| 'onfocus'
+	| 'onblur'
+	| 'onkeydown'
+	| 'onkeyup'
+	| 'autofocus'
+	| 'aria-invalid'
+>;

package/src/internal/menu-group.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		children: Snippet;
+	}
+
+	let { className, children, ...rest }: Props = $props();
+</script>
+
+<div role="group" class={className} {...rest}>
+	{@render children()}
+</div>

package/src/internal/menu-item.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		close: () => void;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { className, close, disabled, children, onclick, onkeydown, ...rest }: Props = $props();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (onclick) {
+			(onclick as (event: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		}
+		close();
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+		if (onkeydown) {
+			(onkeydown as (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		}
+	}
+</script>
+
+<div
+	role="menuitem"
+	tabindex={disabled ? undefined : -1}
+	aria-disabled={disabled || undefined}
+	data-disabled={disabled || undefined}
+	class={className}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
+		border-radius: var(--dry-menu-item-radius, var(--dry-radius-nested-popover));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		color: var(--dry-color-text-strong);
+		min-height: var(--dry-space-11);
+
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+	}
+
+	div:hover:not([data-disabled]),
+	div:focus-visible {
+		background: var(--dry-color-fill);
+	}
+
+	div:active:not([data-disabled]) {
+		background: var(--dry-color-fill-hover);
+	}
+
+	div[data-disabled] {
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/src/internal/menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		children: Snippet;
+	}
+
+	let { className, children, ...rest }: Props = $props();
+</script>
+
+<div role="presentation" class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		padding: var(--dry-space-1_5) var(--dry-space-2);
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		color: var(--dry-color-text-weak);
+		font-weight: 500;
+	}
+</style>

package/src/internal/menu-root-state.svelte.ts

@@ -0,0 +1,73 @@
+export interface MenuRootState {
+	readonly open: boolean;
+	readonly triggerId: string;
+	readonly contentId: string;
+	triggerEl: HTMLElement | null;
+	show: () => void;
+	close: () => void;
+	toggle: () => void;
+}
+
+export interface MenuPosition {
+	x: number;
+	y: number;
+}
+
+export interface PositionedMenuRootState extends MenuRootState {
+	position: MenuPosition;
+}
+
+interface CreateMenuRootStateOptions {
+	idBase: string;
+	uid: string;
+	getOpen: () => boolean;
+	setOpen: (value: boolean) => void;
+}
+
+function createBaseMenuRootState(options: CreateMenuRootStateOptions) {
+	const triggerId = `${options.idBase}-trigger-${options.uid}`;
+	const contentId = `${options.idBase}-content-${options.uid}`;
+
+	return {
+		triggerId,
+		contentId,
+		triggerEl: null as HTMLElement | null,
+		show() {
+			options.setOpen(true);
+		},
+		close() {
+			options.setOpen(false);
+		},
+		toggle() {
+			options.setOpen(!options.getOpen());
+		}
+	};
+}
+
+export function createMenuRootState(options: CreateMenuRootStateOptions): MenuRootState {
+	return {
+		get open() {
+			return options.getOpen();
+		},
+		...createBaseMenuRootState(options)
+	};
+}
+
+export function createPositionedMenuRootState(
+	options: CreateMenuRootStateOptions
+): PositionedMenuRootState {
+	let position = $state<MenuPosition>({ x: 0, y: 0 });
+
+	return {
+		get open() {
+			return options.getOpen();
+		},
+		...createBaseMenuRootState(options),
+		get position() {
+			return position;
+		},
+		set position(value: MenuPosition) {
+			position = value;
+		}
+	};
+}

package/src/internal/menu-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+	}
+
+	let { className, ...rest }: Props = $props();
+</script>
+
+<div role="separator" class={className} {...rest}></div>
+
+<style>
+	div {
+		height: 1px;
+		background: var(--dry-color-stroke-weak);
+		margin: var(--dry-space-1) 0;
+	}
+</style>