alus-ui 0.1.0

package/dist/components/form/color-picker/ColorPicker.svelte

@@ -0,0 +1,178 @@
+<script lang="ts" module>
+	function normalizeHex(v: string): string | null {
+		let s = v.trim().replace(/^#/, '');
+		if (/^[0-9a-fA-F]{3}$/.test(s)) {
+			s = s
+				.split('')
+				.map((c) => c + c)
+				.join('');
+		}
+		if (/^[0-9a-fA-F]{6}$/.test(s)) return '#' + s.toLowerCase();
+		if (/^[0-9a-fA-F]{8}$/.test(s)) return '#' + s.toLowerCase();
+		return null;
+	}
+</script>
+
+<script lang="ts">
+	interface Props {
+		value?: string;
+		swatches?: string[];
+		showInput?: boolean;
+		showNative?: boolean;
+		disabled?: boolean;
+		class?: string;
+		nativeClass?: string;
+		inputClass?: string;
+		swatchesClass?: string;
+		swatchClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		onChange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable('#000000'),
+		swatches,
+		showInput = true,
+		showNative = true,
+		disabled = false,
+		class: className = '',
+		nativeClass = '',
+		inputClass = '',
+		swatchesClass = '',
+		swatchClass = '',
+		'aria-label': ariaLabel = 'Color',
+		'aria-labelledby': ariaLabelledby,
+		onChange
+	}: Props = $props();
+
+	let textValue = $state(value);
+
+	$effect(() => {
+		textValue = value;
+	});
+
+	function setHex(hex: string) {
+		value = hex;
+		onChange?.(hex);
+	}
+
+	function onNative(e: Event) {
+		setHex((e.target as HTMLInputElement).value);
+	}
+
+	function onTextInput(e: Event) {
+		const raw = (e.target as HTMLInputElement).value;
+		textValue = raw;
+		const n = normalizeHex(raw);
+		if (n) setHex(n);
+	}
+
+	function pick(c: string) {
+		const n = normalizeHex(c) ?? c;
+		setHex(n);
+	}
+
+	let swatchListEl: HTMLDivElement | null = $state(null);
+	let swatchFocusIndex = $state(0);
+
+	function focusSwatch(i: number) {
+		queueMicrotask(() => {
+			const el = swatchListEl?.querySelectorAll<HTMLButtonElement>('[role="option"]')[i];
+			el?.focus();
+		});
+	}
+
+	function onSwatchKeydown(e: KeyboardEvent) {
+		if (!swatches || !swatches.length) return;
+		const n = swatches.length;
+		let target = -1;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowDown':
+				target = (swatchFocusIndex + 1) % n;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowUp':
+				target = (swatchFocusIndex - 1 + n) % n;
+				break;
+			case 'Home':
+				target = 0;
+				break;
+			case 'End':
+				target = n - 1;
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				pick(swatches[swatchFocusIndex]);
+				return;
+		}
+		if (target >= 0) {
+			e.preventDefault();
+			swatchFocusIndex = target;
+			focusSwatch(target);
+		}
+	}
+</script>
+
+<div
+	class={className}
+	role="group"
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	aria-disabled={disabled || undefined}
+>
+	{#if showNative}
+		<input
+			type="color"
+			aria-label={`${ariaLabel} picker`}
+			{disabled}
+			{value}
+			class={nativeClass}
+			oninput={onNative}
+		/>
+	{/if}
+	{#if showInput}
+		<input
+			type="text"
+			aria-label={`${ariaLabel} hex`}
+			spellcheck="false"
+			maxlength="9"
+			{disabled}
+			value={textValue}
+			class={inputClass}
+			oninput={onTextInput}
+		/>
+	{/if}
+	{#if swatches && swatches.length}
+		<div
+			class={swatchesClass}
+			role="listbox"
+			tabindex="-1"
+			aria-label="Color swatches"
+			bind:this={swatchListEl}
+			onkeydown={onSwatchKeydown}
+		>
+			{#each swatches as c, i (c)}
+				{@const sel = c.toLowerCase() === value.toLowerCase()}
+				<button
+					type="button"
+					role="option"
+					aria-selected={sel}
+					aria-label={c}
+					tabindex={i === swatchFocusIndex ? 0 : -1}
+					{disabled}
+					class={swatchClass}
+					style={`background:${c};`}
+					data-selected={sel ? '' : undefined}
+					onclick={() => {
+						swatchFocusIndex = i;
+						pick(c);
+					}}
+					onfocus={() => (swatchFocusIndex = i)}
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/components/form/color-picker/ColorPicker.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    value?: string;
+    swatches?: string[];
+    showInput?: boolean;
+    showNative?: boolean;
+    disabled?: boolean;
+    class?: string;
+    nativeClass?: string;
+    inputClass?: string;
+    swatchesClass?: string;
+    swatchClass?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onChange?: (value: string) => void;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/form/color-picker/index.d.ts

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

package/dist/components/form/color-picker/index.js

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

package/dist/components/form/date-picker/DatePicker.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset } from '@floating-ui/dom';
+	import {
+		DateFormatter,
+		getLocalTimeZone,
+		today as iToday,
+		type DateValue
+	} from '@internationalized/date';
+	import { useEventListener } from 'runed';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { trap, focusFirst } from '../../../utils/a11y/index.js';
+	import Portal from '../../utility/portal/Portal.svelte';
+	import Calendar from '../calendar/Calendar.svelte';
+
+	interface Props {
+		value?: DateValue | null;
+		open?: boolean;
+		min?: DateValue;
+		max?: DateValue;
+		locale?: string;
+		timeZone?: string;
+		dateOptions?: Intl.DateTimeFormatOptions;
+		placeholder?: string;
+		disabled?: boolean;
+		required?: boolean;
+		closeOnSelect?: boolean;
+		isDateDisabled?: (date: DateValue) => boolean;
+		class?: string;
+		inputClass?: string;
+		popoverClass?: string;
+		calendarClass?: string;
+		headerClass?: string;
+		gridClass?: string;
+		weekdayClass?: string;
+		dayClass?: string;
+		monthClass?: string;
+		yearClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		onSelect?: (date: DateValue) => void;
+	}
+
+	let {
+		value = $bindable(null),
+		open = $bindable(false),
+		min,
+		max,
+		locale,
+		timeZone = getLocalTimeZone(),
+		dateOptions = { year: 'numeric', month: 'short', day: 'numeric' },
+		placeholder = 'Select date…',
+		disabled = false,
+		required = false,
+		closeOnSelect = true,
+		isDateDisabled,
+		class: className = '',
+		inputClass = '',
+		popoverClass = '',
+		calendarClass = '',
+		headerClass = '',
+		gridClass = '',
+		weekdayClass = '',
+		dayClass = '',
+		monthClass = '',
+		yearClass = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		onSelect
+	}: Props = $props();
+
+	const popId = generateCounterId('datepicker-pop');
+
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let popEl = $state<HTMLDivElement | null>(null);
+	let viewDate = $state<DateValue>(value ?? iToday(getLocalTimeZone()));
+	let view = $state<'days' | 'months' | 'years'>('days');
+
+	const resolvedLocale = $derived(
+		locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en-US')
+	);
+	const fmt = $derived(new DateFormatter(resolvedLocale, dateOptions));
+	const display = $derived(value ? fmt.format(value.toDate(timeZone)) : '');
+
+	function toggle() {
+		if (disabled) return;
+		open = !open;
+		if (open) {
+			if (value) viewDate = value;
+			view = 'days';
+		}
+	}
+
+	function onPick(d: DateValue) {
+		value = d;
+		onSelect?.(d);
+		if (closeOnSelect) {
+			open = false;
+			triggerEl?.focus();
+		}
+	}
+
+	const popRef: Attachment<HTMLDivElement> = (node) => {
+		popEl = node;
+		let cleanup: (() => void) | undefined;
+		if (triggerEl) {
+			cleanup = autoUpdate(triggerEl, node, async () => {
+				const { x, y } = await computePosition(triggerEl as HTMLButtonElement, node, {
+					placement: 'bottom-start',
+					strategy: 'fixed',
+					middleware: [offset(4), flip(), shift({ padding: 8 })]
+				});
+				Object.assign(node.style, { left: `${x}px`, top: `${y}px` });
+			});
+		}
+		const release = trap(node);
+		focusFirst(node);
+		return () => {
+			cleanup?.();
+			release();
+			popEl = null;
+		};
+	};
+
+	useEventListener(
+		() => (open ? document : null),
+		'pointerdown',
+		(e) => {
+			if (!popEl) return;
+			const t = e.target as Node;
+			if (popEl.contains(t) || triggerEl?.contains(t)) return;
+			open = false;
+			triggerEl?.focus();
+		},
+		{ capture: true }
+	);
+
+	useEventListener(
+		() => (open ? document : null),
+		'keydown',
+		(e) => {
+			if (e.key === 'Escape') {
+				open = false;
+				triggerEl?.focus();
+			}
+		}
+	);
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		triggerEl = node;
+		return () => {
+			triggerEl = null;
+		};
+	};
+</script>
+
+<div class={className}>
+	<button
+		type="button"
+		{disabled}
+		aria-haspopup="dialog"
+		aria-expanded={open}
+		aria-controls={popId}
+		data-required={required || undefined}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		class={inputClass}
+		onclick={toggle}
+		{@attach triggerRef}
+	>
+		{#if display}
+			<span>{display}</span>
+		{:else}
+			<span data-placeholder>{placeholder}</span>
+		{/if}
+	</button>
+
+	{#if open}
+		<Portal>
+			<div
+				id={popId}
+				role="dialog"
+				aria-modal="true"
+				aria-label={ariaLabel ?? 'Choose date'}
+				tabindex="-1"
+				class={popoverClass}
+				style="position:fixed; top:0; left:0;"
+				{@attach popRef}
+			>
+				<Calendar
+					bind:value
+					bind:viewDate
+					bind:view
+					{min}
+					{max}
+					{locale}
+					{timeZone}
+					{isDateDisabled}
+					onSelect={onPick}
+					class={calendarClass}
+					{headerClass}
+					{gridClass}
+					{weekdayClass}
+					{dayClass}
+					{monthClass}
+					{yearClass}
+				/>
+			</div>
+		</Portal>
+	{/if}
+</div>

package/dist/components/form/date-picker/DatePicker.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type DateValue } from '@internationalized/date';
+interface Props {
+    value?: DateValue | null;
+    open?: boolean;
+    min?: DateValue;
+    max?: DateValue;
+    locale?: string;
+    timeZone?: string;
+    dateOptions?: Intl.DateTimeFormatOptions;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    closeOnSelect?: boolean;
+    isDateDisabled?: (date: DateValue) => boolean;
+    class?: string;
+    inputClass?: string;
+    popoverClass?: string;
+    calendarClass?: string;
+    headerClass?: string;
+    gridClass?: string;
+    weekdayClass?: string;
+    dayClass?: string;
+    monthClass?: string;
+    yearClass?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onSelect?: (date: DateValue) => void;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value" | "open">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/form/date-picker/index.d.ts

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

package/dist/components/form/date-picker/index.js

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

package/dist/components/form/date-range/DateRange.svelte

@@ -0,0 +1,162 @@
+<script lang="ts" module>
+	import {
+		type DateValue,
+		getLocalTimeZone,
+		isSameDay,
+		today as iToday
+	} from '@internationalized/date';
+
+	export interface DateRangeValue {
+		start: DateValue | null;
+		end: DateValue | null;
+	}
+</script>
+
+<script lang="ts">
+	import Calendar, { type CalendarDay, type CalendarView } from '../calendar/Calendar.svelte';
+
+	interface Props {
+		start?: DateValue | null;
+		end?: DateValue | null;
+		viewDate?: DateValue;
+		view?: CalendarView;
+		min?: DateValue;
+		max?: DateValue;
+		weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+		locale?: string;
+		timeZone?: string;
+		disabled?: boolean;
+		numberOfMonths?: 1 | 2;
+		isDateDisabled?: (date: DateValue) => boolean;
+		class?: string;
+		monthsClass?: string;
+		calendarClass?: string;
+		headerClass?: string;
+		gridClass?: string;
+		weekdayClass?: string;
+		dayClass?: string;
+		monthClass?: string;
+		yearClass?: string;
+		'aria-label'?: string;
+		onChange?: (range: DateRangeValue) => void;
+	}
+
+	let {
+		start = $bindable(null),
+		end = $bindable(null),
+		viewDate = $bindable(iToday(getLocalTimeZone())),
+		view = $bindable('days'),
+		min,
+		max,
+		weekStartsOn,
+		locale,
+		timeZone = getLocalTimeZone(),
+		disabled = false,
+		numberOfMonths = 1,
+		isDateDisabled,
+		class: className = '',
+		monthsClass = '',
+		calendarClass = '',
+		headerClass = '',
+		gridClass = '',
+		weekdayClass = '',
+		dayClass = '',
+		monthClass = '',
+		yearClass = '',
+		'aria-label': ariaLabel = 'Date range',
+		onChange
+	}: Props = $props();
+
+	let hovered = $state<DateValue | null>(null);
+
+	const secondViewDate = $derived(viewDate.add({ months: 1 }));
+	let secondView = $state<CalendarView>('days');
+
+	function pick(d: DateValue) {
+		if (!start || (start && end)) {
+			start = d;
+			end = null;
+			onChange?.({ start, end });
+			return;
+		}
+		if (d.compare(start) < 0) {
+			end = start;
+			start = d;
+		} else {
+			end = d;
+		}
+		onChange?.({ start, end });
+	}
+
+	function dayAttrs(d: CalendarDay): Record<string, string | undefined> {
+		const s = !!start && isSameDay(d.date, start);
+		const e = !!end && isSameDay(d.date, end);
+		const upper = end ?? hovered;
+		let between = false;
+		if (start && upper && !s && !e) {
+			const [lo, hi] = upper.compare(start) < 0 ? [upper, start] : [start, upper];
+			between = d.date.compare(lo) >= 0 && d.date.compare(hi) <= 0;
+		}
+		return {
+			'data-range-start': s ? '' : undefined,
+			'data-range-end': e ? '' : undefined,
+			'data-in-range': between ? '' : undefined
+		};
+	}
+
+	function onHover(d: DateValue) {
+		hovered = d;
+	}
+</script>
+
+<div class={className} role="group" aria-label={ariaLabel} onpointerleave={() => (hovered = null)}>
+	<div class={monthsClass}>
+		<Calendar
+			value={null}
+			bind:viewDate
+			bind:view
+			{min}
+			{max}
+			{weekStartsOn}
+			{locale}
+			{timeZone}
+			{disabled}
+			{isDateDisabled}
+			dayDataAttrs={dayAttrs}
+			onDayHover={onHover}
+			onSelect={pick}
+			class={calendarClass}
+			{headerClass}
+			{gridClass}
+			{weekdayClass}
+			{dayClass}
+			{monthClass}
+			{yearClass}
+		/>
+
+		{#if numberOfMonths === 2}
+			<Calendar
+				value={null}
+				viewDate={secondViewDate}
+				bind:view={secondView}
+				{min}
+				{max}
+				{weekStartsOn}
+				{locale}
+				{timeZone}
+				{disabled}
+				{isDateDisabled}
+				dayDataAttrs={dayAttrs}
+				onDayHover={onHover}
+				onSelect={pick}
+				class={calendarClass}
+				{headerClass}
+				{gridClass}
+				{weekdayClass}
+				{dayClass}
+				{monthClass}
+				{yearClass}
+			/>
+		{/if}
+	</div>
+</div>

package/dist/components/form/date-range/DateRange.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type DateValue } from '@internationalized/date';
+export interface DateRangeValue {
+    start: DateValue | null;
+    end: DateValue | null;
+}
+import { type CalendarView } from '../calendar/Calendar.svelte';
+interface Props {
+    start?: DateValue | null;
+    end?: DateValue | null;
+    viewDate?: DateValue;
+    view?: CalendarView;
+    min?: DateValue;
+    max?: DateValue;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale?: string;
+    timeZone?: string;
+    disabled?: boolean;
+    numberOfMonths?: 1 | 2;
+    isDateDisabled?: (date: DateValue) => boolean;
+    class?: string;
+    monthsClass?: string;
+    calendarClass?: string;
+    headerClass?: string;
+    gridClass?: string;
+    weekdayClass?: string;
+    dayClass?: string;
+    monthClass?: string;
+    yearClass?: string;
+    'aria-label'?: string;
+    onChange?: (range: DateRangeValue) => void;
+}
+declare const DateRange: import("svelte").Component<Props, {}, "view" | "end" | "start" | "viewDate">;
+type DateRange = ReturnType<typeof DateRange>;
+export default DateRange;

package/dist/components/form/date-range/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRange } from './DateRange.svelte';
+export type { DateRangeValue } from './DateRange.svelte';

package/dist/components/form/date-range/index.js

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