alus-ui 0.1.0

package/dist/components/form/input/Input.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { labelAttrs, validationAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+	import type { InputType, InputMode, AutocompleteValue, AriaBoolean } from '../../../types/index.js';
+
+	interface Props {
+		type?: InputType;
+		placeholder?: string;
+		value?: string;
+		class?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		name?: string;
+		id?: string;
+		min?: number | string;
+		max?: number | string;
+		step?: number | string;
+		pattern?: string;
+		minlength?: number;
+		maxlength?: number;
+		autocomplete?: AutocompleteValue;
+		inputmode?: InputMode;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		onkeyup?: (event: KeyboardEvent) => void;
+		// Accessibility attributes
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-invalid'?: AriaBoolean;
+		'aria-required'?: AriaBoolean;
+		'aria-errormessage'?: string;
+		tabindex?: number;
+	}
+
+	let {
+		type = 'text',
+		placeholder = '',
+		value = $bindable(),
+		class: className = '',
+		disabled = false,
+		readonly = false,
+		required = false,
+		name,
+		id,
+		min,
+		max,
+		step,
+		pattern,
+		minlength,
+		maxlength,
+		autocomplete,
+		inputmode,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+		onkeyup,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-required': ariaRequired,
+		'aria-errormessage': ariaErrormessage,
+		tabindex
+	}: Props = $props();
+
+	// Build ARIA attributes using reusable utilities
+	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
+			})
+		)
+	);
+</script>
+
+<input
+	{type}
+	{placeholder}
+	bind:value
+	{disabled}
+	{readonly}
+	{required}
+	{name}
+	{id}
+	{min}
+	{max}
+	{step}
+	{pattern}
+	{minlength}
+	{maxlength}
+	{autocomplete}
+	{inputmode}
+	class={className}
+	{oninput}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+	{onkeyup}
+	{tabindex}
+	{...ariaAttrs}
+/>

package/dist/components/form/input/Input.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { InputType, InputMode, AutocompleteValue, AriaBoolean } from '../../../types/index.js';
+interface Props {
+    type?: InputType;
+    placeholder?: string;
+    value?: string;
+    class?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    pattern?: string;
+    minlength?: number;
+    maxlength?: number;
+    autocomplete?: AutocompleteValue;
+    inputmode?: InputMode;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (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 Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

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

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

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

package/dist/components/form/input-group/InputAddon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		position?: 'prefix' | 'suffix';
+	}
+
+	let { children, class: className = '', position = 'prefix' }: Props = $props();
+</script>
+
+<span data-input-addon={position} class={className}>
+	{#if children}{@render children()}{/if}
+</span>

package/dist/components/form/input-group/InputAddon.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    position?: 'prefix' | 'suffix';
+}
+declare const InputAddon: import("svelte").Component<Props, {}, "">;
+type InputAddon = ReturnType<typeof InputAddon>;
+export default InputAddon;

package/dist/components/form/input-group/InputGroup.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		prefix?: import('svelte').Snippet;
+		suffix?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		prefix,
+		suffix,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+</script>
+
+<div role="group" class={className} aria-label={ariaLabel} aria-labelledby={ariaLabelledby}>
+	{#if prefix}
+		<span data-input-addon="prefix">{@render prefix()}</span>
+	{/if}
+	{#if children}{@render children()}{/if}
+	{#if suffix}
+		<span data-input-addon="suffix">{@render suffix()}</span>
+	{/if}
+</div>

package/dist/components/form/input-group/InputGroup.svelte.d.ts

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

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

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

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

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

package/dist/components/form/label/Label.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		for?: string;
+		class?: string;
+		id?: string;
+		required?: boolean;
+		requiredIndicator?: import('svelte').Snippet;
+	}
+
+	let {
+		children,
+		for: htmlFor,
+		class: className = '',
+		id,
+		required = false,
+		requiredIndicator
+	}: Props = $props();
+</script>
+
+<label for={htmlFor} {id} class={className}>
+	{#if children}{@render children()}{/if}
+	{#if required}
+		{#if requiredIndicator}
+			{@render requiredIndicator()}
+		{:else}
+			<span aria-hidden="true">*</span>
+			<span class="sr-only">required</span>
+		{/if}
+	{/if}
+</label>

package/dist/components/form/label/Label.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    for?: string;
+    class?: string;
+    id?: string;
+    required?: boolean;
+    requiredIndicator?: import('svelte').Snippet;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

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

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

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

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

package/dist/components/form/number-input/NumberInput.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { labelAttrs, validationAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<
+			[{ value: number | null; increment: () => void; decrement: () => void }]
+		>;
+		value?: number | null;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		name?: string;
+		id?: string;
+		placeholder?: string;
+		class?: string;
+		inputClass?: string;
+		incrementLabel?: string;
+		decrementLabel?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-invalid'?: boolean;
+		'aria-errormessage'?: string;
+		oninput?: (event: Event) => void;
+		onchange?: (value: number | null) => void;
+	}
+
+	let {
+		children,
+		value = $bindable(null),
+		min,
+		max,
+		step = 1,
+		disabled = false,
+		readonly = false,
+		required = false,
+		name,
+		id,
+		placeholder = '',
+		class: className = '',
+		inputClass = '',
+		incrementLabel = 'Increment',
+		decrementLabel = 'Decrement',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-errormessage': ariaErrormessage,
+		oninput,
+		onchange
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			validationAttrs({ invalid: ariaInvalid, required, errormessage: ariaErrormessage })
+		)
+	);
+
+	function clamp(n: number): number {
+		let v = n;
+		if (typeof min === 'number') v = Math.max(min, v);
+		if (typeof max === 'number') v = Math.min(max, v);
+		return v;
+	}
+
+	function increment() {
+		if (disabled || readonly) return;
+		const next = clamp((value ?? 0) + step);
+		value = next;
+		onchange?.(value);
+	}
+
+	function decrement() {
+		if (disabled || readonly) return;
+		const next = clamp((value ?? 0) - step);
+		value = next;
+		onchange?.(value);
+	}
+
+	function handleInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		value = target.value === '' ? null : Number(target.value);
+		oninput?.(e);
+	}
+</script>
+
+{#if children}
+	{@render children({ value, increment, decrement })}
+{:else}
+	<div class={className}>
+		<button
+			type="button"
+			aria-label={decrementLabel}
+			onclick={decrement}
+			disabled={disabled || readonly || (typeof min === 'number' && (value ?? 0) <= min)}
+		>
+			−
+		</button>
+		<input
+			type="number"
+			{id}
+			{name}
+			{min}
+			{max}
+			{step}
+			{disabled}
+			{readonly}
+			{required}
+			{placeholder}
+			value={value ?? ''}
+			class={inputClass}
+			oninput={handleInput}
+			{...ariaAttrs}
+		/>
+		<button
+			type="button"
+			aria-label={incrementLabel}
+			onclick={increment}
+			disabled={disabled || readonly || (typeof max === 'number' && (value ?? 0) >= max)}
+		>
+			+
+		</button>
+	</div>
+{/if}

package/dist/components/form/number-input/NumberInput.svelte.d.ts

@@ -0,0 +1,33 @@
+interface Props {
+    children?: import('svelte').Snippet<[
+        {
+            value: number | null;
+            increment: () => void;
+            decrement: () => void;
+        }
+    ]>;
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    placeholder?: string;
+    class?: string;
+    inputClass?: string;
+    incrementLabel?: string;
+    decrementLabel?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-errormessage'?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (value: number | null) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

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

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

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

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

package/dist/components/form/radio/Radio.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import {
+		labelAttrs,
+		interactiveStateAttrs,
+		validationAttrs,
+		mergeAttrs
+	} from '../../../utils/a11y/index.js';
+	import type { AriaBoolean } from '../../../types/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		disabled?: boolean;
+		required?: boolean;
+		readonly?: boolean;
+		id?: string;
+		name?: string;
+		value?: string;
+		form?: string;
+		group?: unknown;
+		// Accessibility attributes
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-invalid'?: AriaBoolean;
+		onchange?: (event: Event) => void;
+		oninput?: (event: Event) => void;
+	}
+
+	let {
+		children,
+		class: className = '',
+		disabled = false,
+		required = false,
+		readonly = false,
+		id,
+		name,
+		value = '',
+		form,
+		group = $bindable(),
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		onchange,
+		oninput
+	}: Props = $props();
+
+	let radio = $state<HTMLInputElement>();
+
+	// Build ARIA attributes
+	let ariaAttrs: Record<string, string | boolean> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({
+				disabled
+			}),
+			validationAttrs({
+				invalid: ariaInvalid === 'false' ? false : ariaInvalid === 'true' ? true : ariaInvalid,
+				required
+			})
+		)
+	);
+</script>
+
+<input
+	bind:this={radio}
+	type="radio"
+	bind:group
+	{id}
+	{disabled}
+	{required}
+	{readonly}
+	{name}
+	{value}
+	{form}
+	class={className}
+	{onchange}
+	{oninput}
+	{...ariaAttrs}
+/>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/components/form/radio/Radio.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { AriaBoolean } from '../../../types/index.js';
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+    form?: string;
+    group?: unknown;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaBoolean;
+    onchange?: (event: Event) => void;
+    oninput?: (event: Event) => void;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

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

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

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

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

package/dist/components/form/radio-group/RadioGroup.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:radio-group');
+
+	export interface RadioGroupContext {
+		name: () => string;
+		value: () => unknown;
+		setValue: (v: unknown) => void;
+		disabled: () => boolean;
+		required: () => boolean;
+	}
+
+	export function getRadioGroup(): RadioGroupContext | undefined {
+		return getContext<RadioGroupContext | undefined>(KEY);
+	}
+
+	export function setRadioGroup(ctx: RadioGroupContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		name: string;
+		value?: unknown;
+		disabled?: boolean;
+		required?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		name,
+		value = $bindable(),
+		disabled = false,
+		required = false,
+		orientation = 'vertical',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby
+	}: Props = $props();
+
+	setRadioGroup({
+		name: () => name,
+		value: () => value,
+		setValue: (v) => (value = v),
+		disabled: () => disabled,
+		required: () => required
+	});
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			widgetAttrs({ orientation })
+		)
+	);
+</script>
+
+<div role="radiogroup" class={className} {...ariaAttrs}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/form/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface RadioGroupContext {
+    name: () => string;
+    value: () => unknown;
+    setValue: (v: unknown) => void;
+    disabled: () => boolean;
+    required: () => boolean;
+}
+export declare function getRadioGroup(): RadioGroupContext | undefined;
+export declare function setRadioGroup(ctx: RadioGroupContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    name: string;
+    value?: unknown;
+    disabled?: boolean;
+    required?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/form/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup, getRadioGroup, setRadioGroup } from './RadioGroup.svelte';
+export type { RadioGroupContext } from './RadioGroup.svelte';

package/dist/components/form/radio-group/index.js

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