alus-ui 0.1.0

package/dist/components/feedback/toast/toast.svelte.js

@@ -0,0 +1,228 @@
+import { getContext, setContext, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+const KEY = Symbol('alus-ui:toaster');
+let counter = 0;
+function genId(prefix) {
+    return `alus-${prefix}-${++counter}`;
+}
+function isTouchEvent(e) {
+    return e.pointerType === 'touch';
+}
+/**
+ * rAF-driven elapsed timer. Pauses cleanly (no drift from setTimeout).
+ */
+class AnimationFrames {
+    #cb;
+    #raf = null;
+    #last = 0;
+    constructor(cb) {
+        this.#cb = cb;
+    }
+    start() {
+        if (this.#raf != null)
+            return;
+        this.#last = performance.now();
+        const tick = (now) => {
+            const delta = now - this.#last;
+            this.#last = now;
+            this.#cb({ delta });
+            this.#raf = requestAnimationFrame(tick);
+        };
+        this.#raf = requestAnimationFrame(tick);
+    }
+    stop() {
+        if (this.#raf == null)
+            return;
+        cancelAnimationFrame(this.#raf);
+        this.#raf = null;
+    }
+}
+export class Toast {
+    #props;
+    #contentId;
+    #titleId;
+    #descriptionId;
+    #frames;
+    id;
+    createdAt;
+    data = $state();
+    closeDelay = $state(0);
+    type = $state('polite');
+    timeElapsed = $state(0);
+    percentage = $derived(this.closeDelay > 0 ? (100 * this.timeElapsed) / this.closeDelay : 0);
+    constructor(props) {
+        this.#props = props;
+        this.id = props.id;
+        this.data = props.data;
+        this.closeDelay = props.closeDelay;
+        this.type = props.type;
+        this.createdAt = performance.now();
+        this.#contentId = genId('toast-content');
+        this.#titleId = genId('toast-title');
+        this.#descriptionId = genId('toast-description');
+        if (this.closeDelay > 0) {
+            this.#frames = new AnimationFrames(({ delta }) => {
+                this.timeElapsed += delta;
+                if (this.timeElapsed >= this.closeDelay) {
+                    this.removeSelf();
+                }
+            });
+            this.#frames.start();
+        }
+    }
+    get toaster() {
+        return this.#props.toaster;
+    }
+    removeSelf = () => {
+        this.#props.toaster.removeToast(this.id);
+    };
+    /** @internal */
+    cleanup = () => {
+        this.#frames?.stop();
+    };
+    pause = () => {
+        this.#frames?.stop();
+    };
+    resume = () => {
+        this.#frames?.start();
+    };
+    reset = () => {
+        this.timeElapsed = 0;
+        this.#frames?.start();
+    };
+    get content() {
+        const onpointerenter = (e) => {
+            if (isTouchEvent(e))
+                return;
+            const hover = this.#props.toaster.hover;
+            if (hover === 'pause')
+                this.pause();
+            else if (hover === 'pause-all')
+                this.#props.toaster.pauseAll();
+        };
+        const onpointerleave = (e) => {
+            if (isTouchEvent(e))
+                return;
+            const hover = this.#props.toaster.hover;
+            if (hover === 'pause')
+                this.resume();
+            else if (hover === 'pause-all')
+                this.#props.toaster.resumeAll();
+        };
+        return {
+            id: this.#contentId,
+            role: this.type === 'assertive' ? 'alert' : 'status',
+            'aria-labelledby': this.#titleId,
+            'aria-describedby': this.#descriptionId,
+            'aria-live': this.type,
+            'aria-atomic': 'true',
+            tabindex: -1,
+            'data-toast-id': this.id,
+            onpointerenter,
+            onpointerleave
+        };
+    }
+    get title() {
+        return { id: this.#titleId };
+    }
+    get description() {
+        return { id: this.#descriptionId };
+    }
+    get close() {
+        return {
+            type: 'button',
+            'aria-label': 'Dismiss',
+            onclick: () => this.removeSelf()
+        };
+    }
+}
+export class Toaster {
+    closeDelay = $state(5000);
+    type = $state('polite');
+    hover = $state('pause');
+    tabHidden = $state('pause-all');
+    #toastsMap = new SvelteMap();
+    #visibilityCleanup;
+    toasts = $derived(Array.from(this.#toastsMap.values()));
+    constructor(props = {}) {
+        if (props.closeDelay !== undefined)
+            this.closeDelay = props.closeDelay;
+        if (props.type !== undefined)
+            this.type = props.type;
+        if (props.hover !== undefined)
+            this.hover = props.hover;
+        if (props.tabHidden !== undefined)
+            this.tabHidden = props.tabHidden;
+        if (typeof document !== 'undefined') {
+            const onVisibility = () => {
+                if (this.tabHidden === 'pause-all' && document.hidden)
+                    this.pauseAll();
+                else
+                    this.resumeAll();
+            };
+            document.addEventListener('visibilitychange', onVisibility);
+            this.#visibilityCleanup = () => document.removeEventListener('visibilitychange', onVisibility);
+        }
+    }
+    addToast = (args) => {
+        const id = args.id ?? genId('toast');
+        const toast = new Toast({
+            toaster: this,
+            id,
+            closeDelay: args.closeDelay ?? this.closeDelay,
+            type: args.type ?? this.type,
+            data: args.data
+        });
+        this.#toastsMap.set(id, toast);
+        return toast;
+    };
+    removeToast = (id) => {
+        const t = this.#toastsMap.get(id);
+        if (!t)
+            return;
+        this.#toastsMap.delete(id);
+        t.cleanup();
+    };
+    updateToast = (args) => {
+        const t = this.#toastsMap.get(args.id);
+        if (!t)
+            return;
+        if (args.data !== undefined)
+            t.data = args.data;
+        if (typeof args.closeDelay === 'number')
+            t.closeDelay = args.closeDelay;
+        if (typeof args.type === 'string')
+            t.type = args.type;
+    };
+    pauseAll = () => {
+        for (const t of this.toasts)
+            t.pause();
+    };
+    resumeAll = () => {
+        for (const t of this.toasts)
+            t.resume();
+    };
+    clear = () => {
+        for (const t of this.toasts)
+            t.cleanup();
+        this.#toastsMap.clear();
+    };
+    /** @internal */
+    dispose = () => {
+        this.clear();
+        this.#visibilityCleanup?.();
+        this.#visibilityCleanup = undefined;
+    };
+}
+export function setToasterContext(toaster) {
+    setContext(KEY, toaster);
+}
+export function getToasterContext() {
+    const t = getContext(KEY);
+    if (!t)
+        throw new Error('Toaster context missing. Place <Toaster /> in your layout.');
+    return t;
+}
+export function createToaster(props = {}) {
+    return untrack(() => new Toaster(props));
+}

package/dist/components/form/auto-complete/AutoComplete.svelte

@@ -0,0 +1,273 @@
+<script lang="ts" module>
+	export interface AutoCompleteOption<T = unknown> {
+		value: T;
+		label: string;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';
+	import { useEventListener } from 'runed';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import {
+		labelAttrs,
+		validationAttrs,
+		interactiveStateAttrs,
+		widgetAttrs,
+		mergeAttrs
+	} from '../../../utils/a11y/index.js';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		options: AutoCompleteOption<T>[];
+		value?: string;
+		selected?: AutoCompleteOption<T> | null;
+		open?: boolean;
+		placeholder?: string;
+		disabled?: boolean;
+		required?: boolean;
+		minLength?: number;
+		maxResults?: number;
+		filter?: (option: AutoCompleteOption<T>, query: string) => boolean;
+		class?: string;
+		inputClass?: string;
+		listClass?: string;
+		optionClass?: string;
+		emptyClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		empty?: import('svelte').Snippet<[{ query: string }]>;
+		option?: import('svelte').Snippet<
+			[{ option: AutoCompleteOption<T>; highlighted: boolean; index: number }]
+		>;
+		onSelect?: (option: AutoCompleteOption<T>) => void;
+		onInput?: (value: string) => void;
+	}
+
+	let {
+		options,
+		value = $bindable(''),
+		selected = $bindable(null),
+		open = $bindable(false),
+		placeholder,
+		disabled = false,
+		required = false,
+		minLength = 0,
+		maxResults = 50,
+		filter,
+		class: className = '',
+		inputClass = '',
+		listClass = '',
+		optionClass = '',
+		emptyClass = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		empty,
+		option,
+		onSelect,
+		onInput
+	}: Props = $props();
+
+	const listId = generateCounterId('autocomplete-list');
+	const optionId = (i: number) => `${listId}-opt-${i}`;
+
+	let inputEl = $state<HTMLInputElement | null>(null);
+	let listEl = $state<HTMLUListElement | null>(null);
+	let highlighted = $state(0);
+
+	const filtered = $derived.by(() => {
+		const q = value.trim().toLowerCase();
+		if (q.length < minLength) return [];
+		const fn = filter ?? ((o: AutoCompleteOption<T>) => o.label.toLowerCase().includes(q));
+		const out: AutoCompleteOption<T>[] = [];
+		for (const o of options) {
+			if (fn(o, q)) {
+				out.push(o);
+				if (out.length >= maxResults) break;
+			}
+		}
+		return out;
+	});
+
+	const showList = $derived(open && filtered.length > 0);
+	const showEmpty = $derived(open && filtered.length === 0 && value.length >= minLength);
+
+	function onInputEvent(e: Event) {
+		const v = (e.target as HTMLInputElement).value;
+		value = v;
+		open = true;
+		highlighted = 0;
+		selected = null;
+		onInput?.(v);
+	}
+
+	function select(o: AutoCompleteOption<T>) {
+		if (o.disabled) return;
+		selected = o;
+		value = o.label;
+		open = false;
+		onSelect?.(o);
+	}
+
+	function moveHighlight(dir: 1 | -1) {
+		if (!filtered.length) return;
+		highlighted = (highlighted + dir + filtered.length) % filtered.length;
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				if (!open) open = true;
+				else moveHighlight(1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				moveHighlight(-1);
+				break;
+			case 'Enter':
+				if (open && filtered[highlighted]) {
+					e.preventDefault();
+					select(filtered[highlighted]);
+				}
+				break;
+			case 'Escape':
+				if (open) {
+					e.preventDefault();
+					open = false;
+				}
+				break;
+			case 'Tab':
+				open = false;
+				break;
+		}
+	}
+
+	function onFocus() {
+		if (!disabled && value.length >= minLength) open = true;
+	}
+
+	const listRef: Attachment<HTMLUListElement> = (node) => {
+		listEl = node;
+		if (!inputEl) return () => (listEl = null);
+		const cleanup = autoUpdate(inputEl, node, async () => {
+			const { x, y } = await computePosition(inputEl as HTMLInputElement, node, {
+				placement: 'bottom-start',
+				strategy: 'fixed',
+				middleware: [
+					offset(2),
+					flip(),
+					shift({ padding: 8 }),
+					size({
+						apply({ rects, elements }) {
+							Object.assign(elements.floating.style, {
+								minWidth: `${rects.reference.width}px`
+							});
+						}
+					})
+				]
+			});
+			Object.assign(node.style, { left: `${x}px`, top: `${y}px` });
+		});
+
+		return () => {
+			cleanup();
+			listEl = null;
+		};
+	};
+
+	useEventListener(
+		() => (open ? document : null),
+		'pointerdown',
+		(e) => {
+			if (!listEl) return;
+			const t = e.target as Node;
+			if (listEl.contains(t) || inputEl?.contains(t)) return;
+			open = false;
+		},
+		{ capture: true }
+	);
+
+	const inputRef: Attachment<HTMLInputElement> = (node) => {
+		inputEl = node;
+		return () => {
+			inputEl = null;
+		};
+	};
+
+	const activeId = $derived(showList ? optionId(highlighted) : undefined);
+
+	const inputAriaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+			interactiveStateAttrs({ expanded: open, disabled }),
+			validationAttrs({ required }),
+			widgetAttrs({ controls: listId, activedescendant: activeId })
+		)
+	);
+</script>
+
+<div class={className}>
+	<input
+		type="text"
+		role="combobox"
+		autocomplete="off"
+		spellcheck="false"
+		{disabled}
+		{required}
+		{placeholder}
+		{value}
+		aria-autocomplete="list"
+		class={inputClass}
+		oninput={onInputEvent}
+		onkeydown={onKeydown}
+		onfocus={onFocus}
+		{...inputAriaAttrs}
+		{@attach inputRef}
+	/>
+
+	{#if showList || showEmpty}
+		<Portal>
+			<ul
+				id={listId}
+				role="listbox"
+				class={listClass}
+				style="position:fixed; top:0; left:0;"
+				{@attach listRef}
+			>
+				{#if showList}
+					{#each filtered as o, i (o.value)}
+						<li
+							id={optionId(i)}
+							role="option"
+							data-highlighted={i === highlighted ? '' : undefined}
+							class={optionClass}
+							{...interactiveStateAttrs({ selected: i === highlighted, disabled: o.disabled })}
+							onmouseenter={() => (highlighted = i)}
+							onmousedown={(e) => {
+								e.preventDefault();
+								select(o);
+							}}
+						>
+							{#if option}
+								{@render option({ option: o, highlighted: i === highlighted, index: i })}
+							{:else}
+								{o.label}
+							{/if}
+						</li>
+					{/each}
+				{:else}
+					<li role="option" aria-disabled="true" aria-selected="false" class={emptyClass}>
+						{#if empty}
+							{@render empty({ query: value })}
+						{:else}
+							No results.
+						{/if}
+					</li>
+				{/if}
+			</ul>
+		</Portal>
+	{/if}
+</div>

package/dist/components/form/auto-complete/AutoComplete.svelte.d.ts

@@ -0,0 +1,57 @@
+export interface AutoCompleteOption<T = unknown> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+declare function $$render<T>(): {
+    props: {
+        options: AutoCompleteOption<T>[];
+        value?: string;
+        selected?: AutoCompleteOption<T> | null;
+        open?: boolean;
+        placeholder?: string;
+        disabled?: boolean;
+        required?: boolean;
+        minLength?: number;
+        maxResults?: number;
+        filter?: (option: AutoCompleteOption<T>, query: string) => boolean;
+        class?: string;
+        inputClass?: string;
+        listClass?: string;
+        optionClass?: string;
+        emptyClass?: string;
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
+        empty?: import("svelte").Snippet<[{
+            query: string;
+        }]>;
+        option?: import("svelte").Snippet<[{
+            option: AutoCompleteOption<T>;
+            highlighted: boolean;
+            index: number;
+        }]>;
+        onSelect?: (option: AutoCompleteOption<T>) => void;
+        onInput?: (value: string) => void;
+    };
+    exports: {};
+    bindings: "value" | "open" | "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "open" | "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AutoComplete: $$IsomorphicComponent;
+type AutoComplete<T> = InstanceType<typeof AutoComplete<T>>;
+export default AutoComplete;

package/dist/components/form/auto-complete/index.d.ts

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

package/dist/components/form/auto-complete/index.js

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

package/dist/components/form/button/Button.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+	import type {
+		ButtonType,
+		FormEncType,
+		FormMethod,
+		FormTarget,
+		AriaBoolean,
+		AriaTristate,
+		AriaHaspopup
+	} from '../../../types/index.js';
+
+	interface Props {
+		onclick?: (event: MouseEvent) => void;
+		children?: import('svelte').Snippet;
+		class?: string;
+		type?: ButtonType;
+		disabled?: boolean;
+		id?: string;
+		// Accessibility attributes
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-pressed'?: AriaTristate;
+		'aria-expanded'?: AriaBoolean;
+		'aria-controls'?: string;
+		'aria-haspopup'?: AriaHaspopup;
+		tabindex?: number;
+		// Form attributes
+		name?: string;
+		value?: string;
+		form?: string;
+		formaction?: string;
+		formenctype?: FormEncType;
+		formmethod?: FormMethod;
+		formnovalidate?: boolean;
+		formtarget?: FormTarget;
+	}
+
+	let {
+		onclick,
+		children,
+		class: className = '',
+		type = 'button',
+		disabled = false,
+		id,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-pressed': ariaPressed,
+		'aria-expanded': ariaExpanded,
+		'aria-controls': ariaControls,
+		'aria-haspopup': ariaHaspopup,
+		tabindex,
+		name,
+		value,
+		form,
+		formaction,
+		formenctype,
+		formmethod,
+		formnovalidate,
+		formtarget
+	}: Props = $props();
+
+	// Build ARIA attributes using reusable utilities
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({
+				pressed: ariaPressed === 'false' ? false : ariaPressed === 'true' ? true : ariaPressed,
+				expanded: ariaExpanded === 'false' ? false : ariaExpanded === 'true' ? true : ariaExpanded,
+				disabled
+			}),
+			widgetAttrs({ controls: ariaControls, haspopup: ariaHaspopup })
+		)
+	);
+</script>
+
+<button
+	{type}
+	{disabled}
+	{id}
+	{name}
+	{value}
+	{form}
+	{formaction}
+	{formenctype}
+	{formmethod}
+	{formnovalidate}
+	{formtarget}
+	class={className}
+	{onclick}
+	{tabindex}
+	{...ariaAttrs}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>

package/dist/components/form/button/Button.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonType, FormEncType, FormMethod, FormTarget, AriaBoolean, AriaTristate, AriaHaspopup } from '../../../types/index.js';
+interface Props {
+    onclick?: (event: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    class?: string;
+    type?: ButtonType;
+    disabled?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-pressed'?: AriaTristate;
+    'aria-expanded'?: AriaBoolean;
+    'aria-controls'?: string;
+    'aria-haspopup'?: AriaHaspopup;
+    tabindex?: number;
+    name?: string;
+    value?: string;
+    form?: string;
+    formaction?: string;
+    formenctype?: FormEncType;
+    formmethod?: FormMethod;
+    formnovalidate?: boolean;
+    formtarget?: FormTarget;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

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

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

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