alus-ui 0.1.0

package/dist/components/form/date-range-picker/DateRangePicker.svelte

@@ -0,0 +1,220 @@
+<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 DateRange, { type DateRangeValue } from '../date-range/DateRange.svelte';
+
+	interface Props {
+		start?: DateValue | null;
+		end?: DateValue | null;
+		open?: boolean;
+		min?: DateValue;
+		max?: DateValue;
+		locale?: string;
+		timeZone?: string;
+		dateOptions?: Intl.DateTimeFormatOptions;
+		placeholder?: string;
+		separator?: string;
+		disabled?: boolean;
+		required?: boolean;
+		closeOnSelect?: boolean;
+		numberOfMonths?: 1 | 2;
+		isDateDisabled?: (date: DateValue) => boolean;
+		class?: string;
+		inputClass?: string;
+		popoverClass?: string;
+		rangeClass?: string;
+		monthsClass?: string;
+		calendarClass?: string;
+		headerClass?: string;
+		gridClass?: string;
+		weekdayClass?: string;
+		dayClass?: string;
+		monthClass?: string;
+		yearClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		onChange?: (range: DateRangeValue) => void;
+	}
+
+	let {
+		start = $bindable(null),
+		end = $bindable(null),
+		open = $bindable(false),
+		min,
+		max,
+		locale,
+		timeZone = getLocalTimeZone(),
+		dateOptions = { year: 'numeric', month: 'short', day: 'numeric' },
+		placeholder = 'Select range…',
+		separator = '–',
+		disabled = false,
+		required = false,
+		closeOnSelect = true,
+		numberOfMonths = 2,
+		isDateDisabled,
+		class: className = '',
+		inputClass = '',
+		popoverClass = '',
+		rangeClass = '',
+		monthsClass = '',
+		calendarClass = '',
+		headerClass = '',
+		gridClass = '',
+		weekdayClass = '',
+		dayClass = '',
+		monthClass = '',
+		yearClass = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		onChange
+	}: Props = $props();
+
+	const popId = generateCounterId('daterange-pop');
+
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let popEl = $state<HTMLDivElement | null>(null);
+	let viewDate = $state<DateValue>(start ?? iToday(getLocalTimeZone()));
+
+	const resolvedLocale = $derived(
+		locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en-US')
+	);
+	const fmt = $derived(new DateFormatter(resolvedLocale, dateOptions));
+	const startLabel = $derived(start ? fmt.format(start.toDate(timeZone)) : '');
+	const endLabel = $derived(end ? fmt.format(end.toDate(timeZone)) : '');
+
+	function toggle() {
+		if (disabled) return;
+		open = !open;
+		if (open && start) viewDate = start;
+	}
+
+	function onRangeChange(r: DateRangeValue) {
+		onChange?.(r);
+		if (closeOnSelect && r.start && r.end) {
+			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 start || end}
+			<span>{startLabel || '…'} {separator} {endLabel || '…'}</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 range'}
+				tabindex="-1"
+				class={popoverClass}
+				style="position:fixed; top:0; left:0;"
+				{@attach popRef}
+			>
+				<DateRange
+					bind:start
+					bind:end
+					bind:viewDate
+					{min}
+					{max}
+					{locale}
+					{timeZone}
+					{numberOfMonths}
+					{isDateDisabled}
+					onChange={onRangeChange}
+					class={rangeClass}
+					{monthsClass}
+					{calendarClass}
+					{headerClass}
+					{gridClass}
+					{weekdayClass}
+					{dayClass}
+					{monthClass}
+					{yearClass}
+				/>
+			</div>
+		</Portal>
+	{/if}
+</div>

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

@@ -0,0 +1,37 @@
+import { type DateValue } from '@internationalized/date';
+import { type DateRangeValue } from '../date-range/DateRange.svelte';
+interface Props {
+    start?: DateValue | null;
+    end?: DateValue | null;
+    open?: boolean;
+    min?: DateValue;
+    max?: DateValue;
+    locale?: string;
+    timeZone?: string;
+    dateOptions?: Intl.DateTimeFormatOptions;
+    placeholder?: string;
+    separator?: string;
+    disabled?: boolean;
+    required?: boolean;
+    closeOnSelect?: boolean;
+    numberOfMonths?: 1 | 2;
+    isDateDisabled?: (date: DateValue) => boolean;
+    class?: string;
+    inputClass?: string;
+    popoverClass?: string;
+    rangeClass?: string;
+    monthsClass?: string;
+    calendarClass?: string;
+    headerClass?: string;
+    gridClass?: string;
+    weekdayClass?: string;
+    dayClass?: string;
+    monthClass?: string;
+    yearClass?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onChange?: (range: DateRangeValue) => void;
+}
+declare const DateRangePicker: import("svelte").Component<Props, {}, "open" | "end" | "start">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

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

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

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

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

package/dist/components/form/field-error/FieldError.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { AriaLive } from '../../../types/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		message?: string;
+		id?: string;
+		class?: string;
+		live?: AriaLive;
+		atomic?: boolean;
+	}
+
+	let {
+		children,
+		message,
+		id,
+		class: className = '',
+		live = 'polite',
+		atomic = true
+	}: Props = $props();
+
+	let hasContent = $derived(!!message || !!children);
+</script>
+
+{#if hasContent}
+	<p {id} role="alert" class={className} aria-live={live} aria-atomic={atomic ? 'true' : 'false'}>
+		{#if children}{@render children()}{:else}{message}{/if}
+	</p>
+{/if}

package/dist/components/form/field-error/FieldError.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AriaLive } from '../../../types/index.js';
+interface Props {
+    children?: import('svelte').Snippet;
+    message?: string;
+    id?: string;
+    class?: string;
+    live?: AriaLive;
+    atomic?: boolean;
+}
+declare const FieldError: import("svelte").Component<Props, {}, "">;
+type FieldError = ReturnType<typeof FieldError>;
+export default FieldError;

package/dist/components/form/field-error/index.d.ts

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

package/dist/components/form/field-error/index.js

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

package/dist/components/form/fieldset/Fieldset.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		legend?: import('svelte').Snippet;
+		class?: string;
+		legendClass?: string;
+		disabled?: boolean;
+		name?: string;
+		id?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		children,
+		legend,
+		class: className = '',
+		legendClass = '',
+		disabled = false,
+		name,
+		id,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+</script>
+
+<fieldset {disabled} {name} {id} class={className} {...ariaAttrs}>
+	{#if legend}
+		<legend class={legendClass}>{@render legend()}</legend>
+	{/if}
+	{#if children}{@render children()}{/if}
+</fieldset>

package/dist/components/form/fieldset/Fieldset.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    legend?: import('svelte').Snippet;
+    class?: string;
+    legendClass?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+declare const Fieldset: import("svelte").Component<Props, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/components/form/fieldset/index.d.ts

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

package/dist/components/form/fieldset/index.js

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

package/dist/components/form/file-input/FileInput.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { labelAttrs, validationAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ files: FileList | null; open: () => void }]>;
+		files?: FileList | null;
+		accept?: string;
+		multiple?: boolean;
+		disabled?: boolean;
+		required?: boolean;
+		name?: string;
+		id?: string;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-invalid'?: boolean;
+		'aria-errormessage'?: string;
+		onchange?: (files: FileList | null) => void;
+	}
+
+	let {
+		children,
+		files = $bindable(null),
+		accept,
+		multiple = false,
+		disabled = false,
+		required = false,
+		name,
+		id,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-errormessage': ariaErrormessage,
+		onchange
+	}: Props = $props();
+
+	let input: HTMLInputElement | undefined = $state();
+
+	function open() {
+		input?.click();
+	}
+
+	function handleChange(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		files = target.files;
+		onchange?.(files);
+	}
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			validationAttrs({ invalid: ariaInvalid, required, errormessage: ariaErrormessage })
+		)
+	);
+</script>
+
+{#if children}
+	<input
+		bind:this={input}
+		type="file"
+		{id}
+		{name}
+		{accept}
+		{multiple}
+		{disabled}
+		{required}
+		class="sr-only"
+		style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+		onchange={handleChange}
+		{...ariaAttrs}
+	/>
+	{@render children({ files, open })}
+{:else}
+	<input
+		type="file"
+		{id}
+		{name}
+		{accept}
+		{multiple}
+		{disabled}
+		{required}
+		class={className}
+		onchange={handleChange}
+		{...ariaAttrs}
+	/>
+{/if}

package/dist/components/form/file-input/FileInput.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        files: FileList | null;
+        open: () => void;
+    }]>;
+    files?: FileList | null;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-errormessage'?: string;
+    onchange?: (files: FileList | null) => void;
+}
+declare const FileInput: import("svelte").Component<Props, {}, "files">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

package/dist/components/form/file-input/index.d.ts

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

package/dist/components/form/file-input/index.js

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

package/dist/components/form/form/Form.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		action?: string;
+		method?: 'get' | 'post' | 'dialog';
+		enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+		target?: string;
+		name?: string;
+		id?: string;
+		autocomplete?: 'on' | 'off';
+		novalidate?: boolean;
+		onsubmit?: (event: SubmitEvent) => void;
+		onreset?: (event: Event) => void;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		action,
+		method,
+		enctype,
+		target,
+		name,
+		id,
+		autocomplete,
+		novalidate = false,
+		onsubmit,
+		onreset,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+</script>
+
+<form
+	{action}
+	{method}
+	{enctype}
+	{target}
+	{name}
+	{id}
+	{autocomplete}
+	{novalidate}
+	class={className}
+	{onsubmit}
+	{onreset}
+	{...ariaAttrs}
+>
+	{#if children}{@render children()}{/if}
+</form>

package/dist/components/form/form/Form.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog';
+    enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    target?: string;
+    name?: string;
+    id?: string;
+    autocomplete?: 'on' | 'off';
+    novalidate?: boolean;
+    onsubmit?: (event: SubmitEvent) => void;
+    onreset?: (event: Event) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+declare const Form: import("svelte").Component<Props, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/form/form/index.d.ts

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

package/dist/components/form/form/index.js

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

package/dist/components/form/icon-button/IconButton.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		'aria-label': string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-pressed'?: boolean;
+		'aria-expanded'?: boolean;
+		'aria-controls'?: string;
+		'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+		onclick?: (e: MouseEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+	}
+
+	let {
+		children,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-pressed': ariaPressed,
+		'aria-expanded': ariaExpanded,
+		'aria-controls': ariaControls,
+		'aria-haspopup': ariaHaspopup,
+		type = 'button',
+		disabled = false,
+		class: className = '',
+		style,
+		onclick,
+		onkeydown
+	}: Props = $props();
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled, pressed: ariaPressed, expanded: ariaExpanded })
+		)
+	);
+</script>
+
+<button
+	{type}
+	{disabled}
+	class={className}
+	{style}
+	aria-controls={ariaControls}
+	aria-haspopup={ariaHaspopup}
+	{onclick}
+	{onkeydown}
+	{...ariaAttrs}
+>
+	{#if children}{@render children()}{/if}
+</button>

package/dist/components/form/icon-button/IconButton.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-pressed'?: boolean;
+    'aria-expanded'?: boolean;
+    'aria-controls'?: string;
+    'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/form/icon-button/index.d.ts

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

package/dist/components/form/icon-button/index.js

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