alus-ui 0.1.0

package/dist/components/form/select/SelectOption.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        selected: boolean;
+        highlighted: boolean;
+    }]>;
+    value: unknown;
+    class?: string;
+    disabled?: boolean;
+}
+declare const SelectOption: import("svelte").Component<Props, {}, "">;
+type SelectOption = ReturnType<typeof SelectOption>;
+export default SelectOption;

package/dist/components/form/select/SelectTrigger.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getSelectContext } from './Select.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		disabled?: boolean;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		disabled = false,
+		'aria-label': ariaLabel
+	}: Props = $props();
+
+	const ctx = getSelectContext();
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		ctx.setTriggerEl(node);
+		return () => ctx.setTriggerEl(null);
+	};
+
+	function onClick() {
+		if (disabled || ctx.disabled()) return;
+		const next = !ctx.open();
+		ctx.setOpen(next);
+		if (next) {
+			ctx.setHighlighted(ctx.value() ?? ctx.options()[0]?.value);
+		}
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled || ctx.disabled()) return;
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			if (!ctx.open()) {
+				ctx.setOpen(true);
+				const opts = ctx.options();
+				ctx.setHighlighted(
+					ctx.value() ?? (e.key === 'ArrowUp' ? opts.at(-1)?.value : opts[0]?.value)
+				);
+			}
+		}
+	}
+
+	let isDisabled = $derived(disabled || ctx.disabled());
+</script>
+
+<button
+	type="button"
+	id={ctx.triggerId}
+	class={className}
+	disabled={isDisabled}
+	aria-haspopup="listbox"
+	aria-expanded={ctx.open()}
+	aria-controls={ctx.contentId}
+	aria-labelledby={ctx.labelId()}
+	aria-label={ariaLabel}
+	onclick={onClick}
+	onkeydown={onKeydown}
+	{@attach triggerRef}
+>
+	{#if children}{@render children()}{/if}
+</button>

package/dist/components/form/select/SelectTrigger.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

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

@@ -0,0 +1,5 @@
+export { default as Select, getSelectContext, setSelectContext } from './Select.svelte';
+export type { SelectContext, SelectOptionEntry } from './Select.svelte';
+export { default as SelectTrigger } from './SelectTrigger.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
+export { default as SelectOption } from './SelectOption.svelte';

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

@@ -0,0 +1,4 @@
+export { default as Select, getSelectContext, setSelectContext } from './Select.svelte';
+export { default as SelectTrigger } from './SelectTrigger.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
+export { default as SelectOption } from './SelectOption.svelte';

package/dist/components/form/slider/Slider.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import {
+		labelAttrs,
+		validationAttrs,
+		widgetAttrs,
+		interactiveStateAttrs,
+		mergeAttrs
+	} from '../../../utils/a11y/index.js';
+
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		required?: boolean;
+		name?: string;
+		id?: string;
+		class?: string;
+		orientation?: 'horizontal' | 'vertical';
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-valuetext'?: string;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+	}
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		required = false,
+		name,
+		id,
+		class: className = '',
+		orientation = 'horizontal',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-valuetext': ariaValuetext,
+		oninput,
+		onchange
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled }),
+			validationAttrs({ required }),
+			widgetAttrs({
+				orientation,
+				valuenow: value,
+				valuemin: min,
+				valuemax: max,
+				valuetext: ariaValuetext
+			})
+		)
+	);
+</script>
+
+<input
+	type="range"
+	{id}
+	{name}
+	{min}
+	{max}
+	{step}
+	{disabled}
+	{required}
+	bind:value
+	class={className}
+	{oninput}
+	{onchange}
+	{...ariaAttrs}
+/>

package/dist/components/form/slider/Slider.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    class?: string;
+    orientation?: 'horizontal' | 'vertical';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-valuetext'?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

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

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

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

package/dist/components/form/switch/Switch.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import {
+		labelAttrs,
+		interactiveStateAttrs,
+		validationAttrs,
+		mergeAttrs
+	} from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ checked: boolean }]>;
+		checked?: boolean;
+		class?: string;
+		disabled?: boolean;
+		required?: boolean;
+		invalid?: boolean;
+		errormessage?: string;
+		name?: string;
+		id?: string;
+		value?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		onchange?: (checked: boolean) => void;
+	}
+
+	let {
+		children,
+		checked = $bindable(false),
+		class: className = '',
+		disabled = false,
+		required = false,
+		invalid = false,
+		errormessage,
+		name,
+		id,
+		value = 'on',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		onchange
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ checked, disabled }),
+			validationAttrs({ invalid, required, errormessage })
+		)
+	);
+
+	function toggle() {
+		if (disabled) return;
+		checked = !checked;
+		onchange?.(checked);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			toggle();
+		}
+	}
+</script>
+
+<button
+	type="button"
+	role="switch"
+	{id}
+	class={className}
+	{disabled}
+	data-state={checked ? 'checked' : 'unchecked'}
+	onclick={toggle}
+	onkeydown={onKeydown}
+	{...ariaAttrs}
+>
+	{#if children}{@render children({ checked })}{/if}
+</button>
+
+{#if name}
+	<input type="hidden" {name} value={checked ? value : ''} />
+{/if}

package/dist/components/form/switch/Switch.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        checked: boolean;
+    }]>;
+    checked?: boolean;
+    class?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    errormessage?: string;
+    name?: string;
+    id?: string;
+    value?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onchange?: (checked: boolean) => void;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

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

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

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

package/dist/components/form/textarea/Textarea.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { labelAttrs, validationAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+	import type { AriaBoolean } from '../../../types/index.js';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		class?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		name?: string;
+		id?: string;
+		rows?: number;
+		cols?: number;
+		minlength?: number;
+		maxlength?: number;
+		wrap?: 'hard' | 'soft' | 'off';
+		autocomplete?: 'on' | 'off';
+		resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-invalid'?: AriaBoolean;
+		'aria-required'?: AriaBoolean;
+		'aria-errormessage'?: string;
+		tabindex?: number;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		class: className = '',
+		disabled = false,
+		readonly = false,
+		required = false,
+		name,
+		id,
+		rows,
+		cols,
+		minlength,
+		maxlength,
+		wrap,
+		autocomplete,
+		resize,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-required': ariaRequired,
+		'aria-errormessage': ariaErrormessage,
+		tabindex
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			validationAttrs({
+				invalid: ariaInvalid === 'false' ? false : ariaInvalid === 'true' ? true : ariaInvalid,
+				required:
+					(ariaRequired === 'false' ? false : ariaRequired === 'true' ? true : ariaRequired) ??
+					required,
+				errormessage: ariaErrormessage
+			})
+		)
+	);
+
+	let style = $derived(resize ? `resize:${resize};` : undefined);
+</script>
+
+<textarea
+	bind:value
+	{placeholder}
+	{disabled}
+	{readonly}
+	{required}
+	{name}
+	{id}
+	{rows}
+	{cols}
+	{minlength}
+	{maxlength}
+	{wrap}
+	{autocomplete}
+	{style}
+	class={className}
+	{oninput}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+	{tabindex}
+	{...ariaAttrs}
+></textarea>

package/dist/components/form/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { AriaBoolean } from '../../../types/index.js';
+interface Props {
+    value?: string;
+    placeholder?: string;
+    class?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    rows?: number;
+    cols?: number;
+    minlength?: number;
+    maxlength?: number;
+    wrap?: 'hard' | 'soft' | 'off';
+    autocomplete?: 'on' | 'off';
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaBoolean;
+    'aria-required'?: AriaBoolean;
+    'aria-errormessage'?: string;
+    tabindex?: number;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

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

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

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

package/dist/components/form/time-picker/TimePicker.svelte

@@ -0,0 +1,209 @@
+<script lang="ts" module>
+	export interface Time {
+		hour: number;
+		minute: number;
+		second?: number;
+	}
+
+	function pad(n: number) {
+		return n.toString().padStart(2, '0');
+	}
+
+	function clamp(n: number, lo: number, hi: number) {
+		return Math.min(hi, Math.max(lo, n));
+	}
+</script>
+
+<script lang="ts">
+	import {
+		labelAttrs,
+		validationAttrs,
+		interactiveStateAttrs,
+		mergeAttrs
+	} from '../../../utils/a11y/index.js';
+
+	interface Props {
+		value?: Time | null;
+		hour12?: boolean;
+		showSeconds?: boolean;
+		step?: number;
+		minuteStep?: number;
+		secondStep?: number;
+		disabled?: boolean;
+		required?: boolean;
+		class?: string;
+		fieldClass?: string;
+		separatorClass?: string;
+		periodClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		onChange?: (value: Time) => void;
+	}
+
+	let {
+		value = $bindable(null),
+		hour12 = false,
+		showSeconds = false,
+		step = 1,
+		minuteStep,
+		secondStep,
+		disabled = false,
+		required = false,
+		class: className = '',
+		fieldClass = '',
+		separatorClass = '',
+		periodClass = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		onChange
+	}: Props = $props();
+
+	const mStep = $derived(minuteStep ?? step);
+	const sStep = $derived(secondStep ?? step);
+
+	const cur = $derived<Time>(value ?? { hour: 0, minute: 0, second: 0 });
+
+	const hourDisplay = $derived.by(() => {
+		if (!hour12) return pad(cur.hour);
+		const h = cur.hour % 12;
+		return pad(h === 0 ? 12 : h);
+	});
+
+	const period = $derived(cur.hour >= 12 ? 'PM' : 'AM');
+
+	function emit(next: Time) {
+		value = next;
+		onChange?.(next);
+	}
+
+	function setHour(h: number) {
+		emit({ ...cur, hour: clamp(h, 0, 23) });
+	}
+
+	function setMinute(m: number) {
+		emit({ ...cur, minute: clamp(m, 0, 59) });
+	}
+
+	function setSecond(s: number) {
+		emit({ ...cur, second: clamp(s, 0, 59) });
+	}
+
+	function togglePeriod() {
+		setHour((cur.hour + 12) % 24);
+	}
+
+	function onHourInput(e: Event) {
+		const raw = parseInt((e.target as HTMLInputElement).value || '0', 10);
+		if (isNaN(raw)) return;
+		if (hour12) {
+			const base = clamp(raw, 1, 12) % 12;
+			setHour(period === 'PM' ? base + 12 : base);
+		} else {
+			setHour(raw);
+		}
+	}
+
+	function onMinuteInput(e: Event) {
+		const v = parseInt((e.target as HTMLInputElement).value || '0', 10);
+		if (!isNaN(v)) setMinute(v);
+	}
+
+	function onSecondInput(e: Event) {
+		const v = parseInt((e.target as HTMLInputElement).value || '0', 10);
+		if (!isNaN(v)) setSecond(v);
+	}
+
+	function onHourKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			setHour(cur.hour + 1 > 23 ? 0 : cur.hour + 1);
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			setHour(cur.hour - 1 < 0 ? 23 : cur.hour - 1);
+		}
+	}
+
+	function onMinuteKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			setMinute(cur.minute + mStep > 59 ? 0 : cur.minute + mStep);
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			setMinute(cur.minute - mStep < 0 ? 59 : cur.minute - mStep);
+		}
+	}
+
+	function onSecondKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			setSecond((cur.second ?? 0) + sStep > 59 ? 0 : (cur.second ?? 0) + sStep);
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			setSecond((cur.second ?? 0) - sStep < 0 ? 59 : (cur.second ?? 0) - sStep);
+		}
+	}
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled }),
+			validationAttrs({ required })
+		)
+	);
+</script>
+
+<div class={className} role="group" data-required={required || undefined} {...ariaAttrs}>
+	<input
+		type="text"
+		inputmode="numeric"
+		maxlength="2"
+		aria-label="Hour"
+		{disabled}
+		value={hourDisplay}
+		class={fieldClass}
+		oninput={onHourInput}
+		onkeydown={onHourKey}
+	/>
+	<span class={separatorClass} aria-hidden="true">:</span>
+	<input
+		type="text"
+		inputmode="numeric"
+		maxlength="2"
+		aria-label="Minute"
+		{disabled}
+		value={pad(cur.minute)}
+		class={fieldClass}
+		oninput={onMinuteInput}
+		onkeydown={onMinuteKey}
+	/>
+	{#if showSeconds}
+		<span class={separatorClass} aria-hidden="true">:</span>
+		<input
+			type="text"
+			inputmode="numeric"
+			maxlength="2"
+			aria-label="Second"
+			{disabled}
+			value={pad(cur.second ?? 0)}
+			class={fieldClass}
+			oninput={onSecondInput}
+			onkeydown={onSecondKey}
+		/>
+	{/if}
+	{#if hour12}
+		<button
+			type="button"
+			class={periodClass}
+			{disabled}
+			onclick={togglePeriod}
+			{...mergeAttrs(
+				labelAttrs({ label: `Toggle period, currently ${period}` }),
+				interactiveStateAttrs({ pressed: period === 'PM' })
+			)}
+		>
+			{period}
+		</button>
+	{/if}
+</div>

package/dist/components/form/time-picker/TimePicker.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface Time {
+    hour: number;
+    minute: number;
+    second?: number;
+}
+interface Props {
+    value?: Time | null;
+    hour12?: boolean;
+    showSeconds?: boolean;
+    step?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    fieldClass?: string;
+    separatorClass?: string;
+    periodClass?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onChange?: (value: Time) => void;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;