alus-ui 0.1.0

package/dist/components/display/list/index.js

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

package/dist/components/display/stat-card/StatCard.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	type Trend = 'up' | 'down' | 'flat';
+
+	interface Props {
+		label: string;
+		value: string | number;
+		valueClass?: string;
+		labelClass?: string;
+		hint?: string;
+		change?: string | number;
+		trend?: Trend;
+		icon?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		change_snippet?: import('svelte').Snippet<[{ trend: Trend; change: string | number }]>;
+		class?: string;
+		hintClass?: string;
+		changeClass?: string;
+		'aria-label'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		label,
+		value,
+		valueClass = '',
+		labelClass = '',
+		hint,
+		change,
+		trend,
+		icon,
+		actions,
+		change_snippet,
+		class: className = '',
+		hintClass = '',
+		changeClass = '',
+		'aria-label': ariaLabel,
+		'aria-describedby': ariaDescribedby
+	}: Props = $props();
+
+	const labelId = generateCounterId('stat-label');
+	const valueId = generateCounterId('stat-value');
+
+	const trendText = $derived(trend === 'up' ? ' increased' : trend === 'down' ? ' decreased' : '');
+	const inferredLabel = $derived(`${label}: ${value}${trendText}`);
+</script>
+
+<div
+	role="group"
+	class={className}
+	data-trend={trend}
+	{...mergeAttrs(
+		labelAttrs({
+			label: ariaLabel,
+			labelledby: labelId,
+			describedby: ariaDescribedby ?? valueId
+		})
+	)}
+>
+	{#if icon}{@render icon()}{/if}
+	<div>
+		<div id={labelId} class={labelClass}>{label}</div>
+		<div id={valueId} class={valueClass} {...labelAttrs({ label: inferredLabel })}>{value}</div>
+		{#if change !== undefined}
+			{#if change_snippet}
+				{@render change_snippet({ trend: trend ?? 'flat', change })}
+			{:else}
+				<div class={changeClass} data-trend={trend}>{change}</div>
+			{/if}
+		{/if}
+		{#if hint}<div class={hintClass}>{hint}</div>{/if}
+	</div>
+	{#if actions}{@render actions()}{/if}
+</div>

package/dist/components/display/stat-card/StatCard.svelte.d.ts

@@ -0,0 +1,24 @@
+type Trend = 'up' | 'down' | 'flat';
+interface Props {
+    label: string;
+    value: string | number;
+    valueClass?: string;
+    labelClass?: string;
+    hint?: string;
+    change?: string | number;
+    trend?: Trend;
+    icon?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    change_snippet?: import('svelte').Snippet<[{
+        trend: Trend;
+        change: string | number;
+    }]>;
+    class?: string;
+    hintClass?: string;
+    changeClass?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+declare const StatCard: import("svelte").Component<Props, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/components/display/stat-card/index.d.ts

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

package/dist/components/display/stat-card/index.js

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

package/dist/components/display/table/Table.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		'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>
+
+<table class={className} {...ariaAttrs}>
+	{#if children}{@render children()}{/if}
+</table>

package/dist/components/display/table/Table.svelte.d.ts

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

package/dist/components/display/table/TableBody.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<tbody class={className}>
+	{#if children}{@render children()}{/if}
+</tbody>

package/dist/components/display/table/TableBody.svelte.d.ts

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

package/dist/components/display/table/TableCaption.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		side?: 'top' | 'bottom';
+	}
+
+	let { children, class: className = '', side = 'top' }: Props = $props();
+</script>
+
+<caption class={className} style="caption-side:{side};">
+	{#if children}{@render children()}{/if}
+</caption>

package/dist/components/display/table/TableCaption.svelte.d.ts

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

package/dist/components/display/table/TableCell.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		colspan?: number;
+		rowspan?: number;
+		headers?: string;
+	}
+	let { children, class: className = '', colspan, rowspan, headers }: Props = $props();
+</script>
+
+<td class={className} {colspan} {rowspan} {headers}>
+	{#if children}{@render children()}{/if}
+</td>

package/dist/components/display/table/TableCell.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    colspan?: number;
+    rowspan?: number;
+    headers?: string;
+}
+declare const TableCell: import("svelte").Component<Props, {}, "">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/components/display/table/TableFoot.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<tfoot class={className}>
+	{#if children}{@render children()}{/if}
+</tfoot>

package/dist/components/display/table/TableFoot.svelte.d.ts

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

package/dist/components/display/table/TableHead.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<thead class={className}>
+	{#if children}{@render children()}{/if}
+</thead>

package/dist/components/display/table/TableHead.svelte.d.ts

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

package/dist/components/display/table/TableHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+		sort?: 'ascending' | 'descending' | 'none' | 'other';
+		colspan?: number;
+		rowspan?: number;
+	}
+	let { children, class: className = '', scope = 'col', sort, colspan, rowspan }: Props = $props();
+</script>
+
+<th class={className} {scope} aria-sort={sort} {colspan} {rowspan}>
+	{#if children}{@render children()}{/if}
+</th>

package/dist/components/display/table/TableHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+    sort?: 'ascending' | 'descending' | 'none' | 'other';
+    colspan?: number;
+    rowspan?: number;
+}
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/display/table/TableRow.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		selected?: boolean;
+	}
+	let { children, class: className = '', selected }: Props = $props();
+</script>
+
+<tr class={className} aria-selected={selected || undefined} data-selected={selected || undefined}>
+	{#if children}{@render children()}{/if}
+</tr>

package/dist/components/display/table/TableRow.svelte.d.ts

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

package/dist/components/display/table/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.svelte';
+export { default as TableCaption } from './TableCaption.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableFoot } from './TableFoot.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableCell } from './TableCell.svelte';

package/dist/components/display/table/index.js

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.svelte';
+export { default as TableCaption } from './TableCaption.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableFoot } from './TableFoot.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableCell } from './TableCell.svelte';

package/dist/components/display/timeline/Timeline.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		orientation?: 'vertical' | 'horizontal';
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		orientation = 'vertical',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }))
+	);
+</script>
+
+<ol role="list" class={className} data-orientation={orientation} {...ariaAttrs}>
+	{#if children}{@render children()}{/if}
+</ol>

package/dist/components/display/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    orientation?: 'vertical' | 'horizontal';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/display/timeline/TimelineItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		marker?: import('svelte').Snippet;
+		time?: string;
+		datetime?: string;
+		status?: 'completed' | 'current' | 'upcoming';
+	}
+
+	let { children, class: className = '', marker, time, datetime, status }: Props = $props();
+</script>
+
+<li
+	role="listitem"
+	class={className}
+	data-status={status}
+	aria-current={status === 'current' ? 'step' : undefined}
+>
+	{#if marker}
+		<span data-timeline-marker aria-hidden="true">{@render marker()}</span>
+	{/if}
+	{#if time || datetime}
+		<time {datetime}>{time ?? datetime}</time>
+	{/if}
+	{#if children}{@render children()}{/if}
+</li>

package/dist/components/display/timeline/TimelineItem.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    marker?: import('svelte').Snippet;
+    time?: string;
+    datetime?: string;
+    status?: 'completed' | 'current' | 'upcoming';
+}
+declare const TimelineItem: import("svelte").Component<Props, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/components/display/timeline/index.d.ts

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

package/dist/components/display/timeline/index.js

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

package/dist/components/display/timestamp/Timestamp.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	type Mode = 'absolute' | 'relative' | 'both';
+	type Style = 'long' | 'short' | 'narrow';
+
+	interface Props {
+		value: Date | string | number;
+		mode?: Mode;
+		relativeStyle?: Style;
+		updateInterval?: number;
+		locale?: string;
+		dateOptions?: Intl.DateTimeFormatOptions;
+		separator?: string;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		value,
+		mode = 'relative',
+		relativeStyle = 'long',
+		updateInterval = 30000,
+		locale,
+		dateOptions = { dateStyle: 'medium', timeStyle: 'short' },
+		separator = ' · ',
+		class: className = '',
+		'aria-label': ariaLabel
+	}: Props = $props();
+
+	let now = $state(Date.now());
+	const date = $derived(value instanceof Date ? value : new Date(value));
+
+	$effect(() => {
+		if (mode === 'absolute') return;
+		const id = setInterval(() => {
+			now = Date.now();
+		}, updateInterval);
+		return () => clearInterval(id);
+	});
+
+	const absolute = $derived(new Intl.DateTimeFormat(locale, dateOptions).format(date));
+
+	const relative = $derived.by(() => {
+		const diffMs = date.getTime() - now;
+		const abs = Math.abs(diffMs);
+		const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: relativeStyle });
+		const units: [Intl.RelativeTimeFormatUnit, number][] = [
+			['year', 365 * 24 * 3600 * 1000],
+			['month', 30 * 24 * 3600 * 1000],
+			['week', 7 * 24 * 3600 * 1000],
+			['day', 24 * 3600 * 1000],
+			['hour', 3600 * 1000],
+			['minute', 60 * 1000],
+			['second', 1000]
+		];
+		if (abs < units[units.length - 1][1]) return rtf.format(0, 'second');
+		for (const [unit, ms] of units) {
+			if (abs >= ms) return rtf.format(Math.round(diffMs / ms), unit);
+		}
+		return rtf.format(0, 'second');
+	});
+
+	const text = $derived(
+		mode === 'absolute'
+			? absolute
+			: mode === 'relative'
+				? relative
+				: `${relative}${separator}${absolute}`
+	);
+
+	const iso = $derived(date.toISOString());
+</script>
+
+<time datetime={iso} title={absolute} class={className} aria-label={ariaLabel ?? text}>
+	{text}
+</time>

package/dist/components/display/timestamp/Timestamp.svelte.d.ts

@@ -0,0 +1,16 @@
+type Mode = 'absolute' | 'relative' | 'both';
+type Style = 'long' | 'short' | 'narrow';
+interface Props {
+    value: Date | string | number;
+    mode?: Mode;
+    relativeStyle?: Style;
+    updateInterval?: number;
+    locale?: string;
+    dateOptions?: Intl.DateTimeFormatOptions;
+    separator?: string;
+    class?: string;
+    'aria-label'?: string;
+}
+declare const Timestamp: import("svelte").Component<Props, {}, "">;
+type Timestamp = ReturnType<typeof Timestamp>;
+export default Timestamp;

package/dist/components/display/timestamp/index.d.ts

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

package/dist/components/display/timestamp/index.js

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

package/dist/components/display/tree-view/TreeItem.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { getTreeViewContext } from './TreeView.svelte';
+	import { getContext, setContext } from 'svelte';
+	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	const LEVEL_KEY = Symbol('alus-ui:tree-item-level');
+
+	interface Props {
+		id: string;
+		label?: import('svelte').Snippet<[{ expanded: boolean; selected: boolean }]>;
+		children?: import('svelte').Snippet;
+		class?: string;
+		disabled?: boolean;
+	}
+
+	let { id, label, children, class: className = '', disabled = false }: Props = $props();
+
+	const ctx = getTreeViewContext();
+	const parentLevel = getContext<number>(LEVEL_KEY) ?? 0;
+	const level = parentLevel + 1;
+	setContext(LEVEL_KEY, level);
+
+	const hasChildren = $derived(!!children);
+	const expanded = $derived(ctx.isExpanded(id));
+	const selected = $derived(ctx.isSelected(id));
+	const focused = $derived(ctx.focused() === id);
+
+	let itemEl = $state<HTMLLIElement | null>(null);
+
+	function onClick(e: MouseEvent) {
+		if (disabled) return;
+		e.stopPropagation();
+		ctx.setFocused(id);
+		ctx.select(id);
+		if (hasChildren) ctx.toggle(id);
+		itemEl?.focus();
+	}
+
+	function tabIndex(): number {
+		const f = ctx.focused();
+		if (f === id) return 0;
+		if (f === null) {
+			const first = ctx.rootEl.current?.querySelector<HTMLElement>('[role="treeitem"]');
+			if (first === itemEl) return 0;
+		}
+		return -1;
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<li
+	bind:this={itemEl}
+	role="treeitem"
+	class={className}
+	data-tree-item-id={id}
+	data-disabled={disabled || undefined}
+	data-selected={selected || undefined}
+	data-expanded={hasChildren ? expanded : undefined}
+	tabindex={tabIndex()}
+	onclick={onClick}
+	{...mergeAttrs(
+		interactiveStateAttrs({
+			expanded: hasChildren ? expanded : undefined,
+			selected: selected || undefined,
+			disabled
+		}),
+		widgetAttrs({ level })
+	)}
+>
+	{#if label}{@render label({ expanded, selected })}{/if}
+	{#if hasChildren}
+		<ul role="group" hidden={!expanded}>
+			{#if children}{@render children()}{/if}
+		</ul>
+	{/if}
+</li>

package/dist/components/display/tree-view/TreeItem.svelte.d.ts

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