alus-ui 0.1.0

package/dist/components/interactive/virtual-list/index.d.ts

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

package/dist/components/interactive/virtual-list/index.js

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

package/dist/components/layout/columns/Columns.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		count?: number;
+		width?: string;
+		gap?: string | number;
+		balance?: boolean;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		children,
+		count,
+		width,
+		gap = '1rem',
+		balance = true,
+		class: className = '',
+		style: extraStyle = ''
+	}: Props = $props();
+
+	function toCssValue(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const baseStyle = $derived.by(() => {
+		const parts: string[] = [];
+		if (count !== undefined) parts.push(`column-count:${count};`);
+		if (width !== undefined) parts.push(`column-width:${width};`);
+		parts.push(`column-gap:${toCssValue(gap)};`);
+		parts.push(`column-fill:${balance ? 'balance' : 'auto'};`);
+		return parts.join('');
+	});
+
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/layout/columns/Columns.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    count?: number;
+    width?: string;
+    gap?: string | number;
+    balance?: boolean;
+    class?: string;
+    style?: string;
+}
+declare const Columns: import("svelte").Component<Props, {}, "">;
+type Columns = ReturnType<typeof Columns>;
+export default Columns;

package/dist/components/layout/columns/index.d.ts

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

package/dist/components/layout/columns/index.js

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

package/dist/components/layout/container/Container.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+
+	const sizeMap: Record<Size, string> = {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px',
+		'2xl': '1536px',
+		full: '100%'
+	};
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		maxWidth?: Size | string;
+		padding?: string | number;
+		center?: boolean;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		children,
+		maxWidth = 'lg',
+		padding = '1rem',
+		center = true,
+		class: className = '',
+		style: extraStyle = ''
+	}: Props = $props();
+
+	function toCssValue(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const mw = $derived(maxWidth in sizeMap ? sizeMap[maxWidth as Size] : (maxWidth as string));
+
+	const baseStyle = $derived(
+		`max-width:${mw};${center ? 'margin-left:auto;margin-right:auto;' : ''}padding-left:${toCssValue(padding)};padding-right:${toCssValue(padding)};width:100%;`
+	);
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style} data-max-width={maxWidth}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/layout/container/Container.svelte.d.ts

@@ -0,0 +1,12 @@
+type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+interface Props {
+    children?: import('svelte').Snippet;
+    maxWidth?: Size | string;
+    padding?: string | number;
+    center?: boolean;
+    class?: string;
+    style?: string;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/layout/container/index.d.ts

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

package/dist/components/layout/container/index.js

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

package/dist/components/layout/flex/Flex.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+	type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+	type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+	type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		direction?: Direction;
+		align?: Align;
+		justify?: Justify;
+		wrap?: Wrap;
+		gap?: string | number;
+		inline?: boolean;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		children,
+		direction = 'row',
+		align = 'stretch',
+		justify = 'start',
+		wrap = 'nowrap',
+		gap = 0,
+		inline = false,
+		class: className = '',
+		style: extraStyle = ''
+	}: Props = $props();
+
+	function toCssValue(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const alignCss = $derived(
+		align === 'start'
+			? 'flex-start'
+			: align === 'end'
+				? 'flex-end'
+				: align === 'baseline'
+					? 'baseline'
+					: align
+	);
+	const justifyCss = $derived(
+		justify === 'start'
+			? 'flex-start'
+			: justify === 'end'
+				? 'flex-end'
+				: justify === 'between'
+					? 'space-between'
+					: justify === 'around'
+						? 'space-around'
+						: justify === 'evenly'
+							? 'space-evenly'
+							: justify
+	);
+
+	const baseStyle = $derived(
+		`display:${inline ? 'inline-flex' : 'flex'};flex-direction:${direction};align-items:${alignCss};justify-content:${justifyCss};flex-wrap:${wrap};gap:${toCssValue(gap)};`
+	);
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/layout/flex/Flex.svelte.d.ts

@@ -0,0 +1,18 @@
+type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+interface Props {
+    children?: import('svelte').Snippet;
+    direction?: Direction;
+    align?: Align;
+    justify?: Justify;
+    wrap?: Wrap;
+    gap?: string | number;
+    inline?: boolean;
+    class?: string;
+    style?: string;
+}
+declare const Flex: import("svelte").Component<Props, {}, "">;
+type Flex = ReturnType<typeof Flex>;
+export default Flex;

package/dist/components/layout/flex/index.d.ts

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

package/dist/components/layout/flex/index.js

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

package/dist/components/layout/grid/Grid.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	type Align = 'start' | 'center' | 'end' | 'stretch';
+	type Justify = 'start' | 'center' | 'end' | 'stretch';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		cols?: number | string;
+		rows?: number | string;
+		gap?: string | number;
+		colGap?: string | number;
+		rowGap?: string | number;
+		minColWidth?: string;
+		align?: Align;
+		justify?: Justify;
+		inline?: boolean;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		children,
+		cols,
+		rows,
+		gap = '1rem',
+		colGap,
+		rowGap,
+		minColWidth,
+		align = 'stretch',
+		justify = 'stretch',
+		inline = false,
+		class: className = '',
+		style: extraStyle = ''
+	}: Props = $props();
+
+	function toCssValue(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const templateCols = $derived.by(() => {
+		if (minColWidth) return `grid-template-columns:repeat(auto-fill,minmax(${minColWidth},1fr));`;
+		if (cols === undefined) return '';
+		return `grid-template-columns:${typeof cols === 'number' ? `repeat(${cols},minmax(0,1fr))` : cols};`;
+	});
+
+	const templateRows = $derived(
+		rows === undefined
+			? ''
+			: `grid-template-rows:${typeof rows === 'number' ? `repeat(${rows},minmax(0,auto))` : rows};`
+	);
+
+	const gapStyle = $derived.by(() => {
+		if (colGap !== undefined || rowGap !== undefined) {
+			const r = rowGap ?? gap;
+			const c = colGap ?? gap;
+			return `row-gap:${toCssValue(r)};column-gap:${toCssValue(c)};`;
+		}
+		return `gap:${toCssValue(gap)};`;
+	});
+
+	const alignCss = $derived(align);
+	const justifyCss = $derived(justify);
+
+	const baseStyle = $derived(
+		`display:${inline ? 'inline-grid' : 'grid'};${templateCols}${templateRows}${gapStyle}align-items:${alignCss};justify-items:${justifyCss};`
+	);
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/layout/grid/Grid.svelte.d.ts

@@ -0,0 +1,19 @@
+type Align = 'start' | 'center' | 'end' | 'stretch';
+type Justify = 'start' | 'center' | 'end' | 'stretch';
+interface Props {
+    children?: import('svelte').Snippet;
+    cols?: number | string;
+    rows?: number | string;
+    gap?: string | number;
+    colGap?: string | number;
+    rowGap?: string | number;
+    minColWidth?: string;
+    align?: Align;
+    justify?: Justify;
+    inline?: boolean;
+    class?: string;
+    style?: string;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/layout/grid/index.d.ts

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

package/dist/components/layout/grid/index.js

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

package/dist/components/layout/spacer/Spacer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	interface Props {
+		size?: string | number;
+		grow?: boolean;
+		axis?: 'horizontal' | 'vertical' | 'both';
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		size,
+		grow = true,
+		axis = 'both',
+		class: className = '',
+		style: extraStyle = ''
+	}: Props = $props();
+
+	function toCssValue(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const baseStyle = $derived.by(() => {
+		if (size !== undefined) {
+			const v = toCssValue(size);
+			if (axis === 'horizontal') return `width:${v};min-width:${v};height:1px;`;
+			if (axis === 'vertical') return `height:${v};min-height:${v};width:1px;`;
+			return `width:${v};height:${v};`;
+		}
+		return grow ? 'flex:1 1 auto;align-self:stretch;justify-self:stretch;' : '';
+	});
+
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style} aria-hidden="true" data-axis={axis}></div>

package/dist/components/layout/spacer/Spacer.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    size?: string | number;
+    grow?: boolean;
+    axis?: 'horizontal' | 'vertical' | 'both';
+    class?: string;
+    style?: string;
+}
+declare const Spacer: import("svelte").Component<Props, {}, "">;
+type Spacer = ReturnType<typeof Spacer>;
+export default Spacer;

package/dist/components/layout/spacer/index.d.ts

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

package/dist/components/layout/spacer/index.js

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

package/dist/components/layout/stack/Stack.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+	type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		gap?: string | number;
+		align?: Align;
+		justify?: Justify;
+		direction?: 'vertical' | 'horizontal';
+		wrap?: boolean;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		children,
+		gap = '1rem',
+		align = 'stretch',
+		justify = 'start',
+		direction = 'vertical',
+		wrap = false,
+		class: className = '',
+		style: extraStyle = ''
+	}: Props = $props();
+
+	function toCssValue(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const alignCss = $derived(
+		align === 'start'
+			? 'flex-start'
+			: align === 'end'
+				? 'flex-end'
+				: align === 'baseline'
+					? 'baseline'
+					: align
+	);
+	const justifyCss = $derived(
+		justify === 'start'
+			? 'flex-start'
+			: justify === 'end'
+				? 'flex-end'
+				: justify === 'between'
+					? 'space-between'
+					: justify === 'around'
+						? 'space-around'
+						: justify === 'evenly'
+							? 'space-evenly'
+							: justify
+	);
+
+	const baseStyle = $derived(
+		`display:flex;flex-direction:${direction === 'vertical' ? 'column' : 'row'};gap:${toCssValue(gap)};align-items:${alignCss};justify-content:${justifyCss};${wrap ? 'flex-wrap:wrap;' : ''}`
+	);
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style} data-direction={direction}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/layout/stack/Stack.svelte.d.ts

@@ -0,0 +1,15 @@
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+interface Props {
+    children?: import('svelte').Snippet;
+    gap?: string | number;
+    align?: Align;
+    justify?: Justify;
+    direction?: 'vertical' | 'horizontal';
+    wrap?: boolean;
+    class?: string;
+    style?: string;
+}
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/components/layout/stack/index.d.ts

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

package/dist/components/layout/stack/index.js

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

package/dist/components/navigation/accordion/Accordion.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { setAccordionRoot, type AccordionType } from './context.js';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		type?: AccordionType;
+		value?: string[];
+		collapsible?: boolean;
+		disabled?: boolean;
+		class?: string;
+		id?: string;
+		onValueChange?: (v: string[]) => void;
+	}
+
+	let {
+		children,
+		type = 'single',
+		value = $bindable([]),
+		collapsible = true,
+		disabled = false,
+		class: className = '',
+		id,
+		onValueChange
+	}: Props = $props();
+
+	const baseId = untrack(() => id ?? generateCounterId('accordion'));
+
+	function setValue(v: string[]) {
+		value = v;
+		onValueChange?.(v);
+	}
+
+	function toggle(v: string) {
+		if (disabled) return;
+		const isOpen = value.includes(v);
+		if (type === 'single') {
+			if (isOpen) {
+				if (collapsible) setValue([]);
+			} else {
+				setValue([v]);
+			}
+		} else {
+			setValue(isOpen ? value.filter((x) => x !== v) : [...value, v]);
+		}
+	}
+
+	setAccordionRoot({
+		type: () => type,
+		value: () => value,
+		toggle,
+		isOpen: (v: string) => value.includes(v),
+		collapsible: () => collapsible,
+		baseId,
+		disabled: () => disabled
+	});
+</script>
+
+<div class={className} data-accordion-root={baseId} data-disabled={disabled || undefined}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/navigation/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type AccordionType } from './context.js';
+interface Props {
+    children?: import('svelte').Snippet;
+    type?: AccordionType;
+    value?: string[];
+    collapsible?: boolean;
+    disabled?: boolean;
+    class?: string;
+    id?: string;
+    onValueChange?: (v: string[]) => void;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/navigation/accordion/AccordionContent.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { getAccordionItem } from './context.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		forceMount?: boolean;
+	}
+
+	let { children, class: className = '', forceMount = false }: Props = $props();
+
+	const item = getAccordionItem();
+	let open = $derived(item.open());
+</script>
+
+{#if open || forceMount}
+	<div
+		id={item.contentId}
+		role="region"
+		aria-labelledby={item.triggerId}
+		hidden={!open}
+		data-state={open ? 'open' : 'closed'}
+		class={className}
+	>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/dist/components/navigation/accordion/AccordionContent.svelte.d.ts

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

package/dist/components/navigation/accordion/AccordionItem.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { getAccordionRoot, setAccordionItem } from './context.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ open: boolean }]>;
+		value: string;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let { children, value, disabled = false, class: className = '' }: Props = $props();
+
+	const root = getAccordionRoot();
+
+	let triggerId = $derived(`${root.baseId}-trigger-${value}`);
+	let contentId = $derived(`${root.baseId}-content-${value}`);
+
+	setAccordionItem({
+		get value() {
+			return value;
+		},
+		disabled: () => disabled || root.disabled(),
+		open: () => root.isOpen(value),
+		get triggerId() {
+			return `${root.baseId}-trigger-${value}`;
+		},
+		get contentId() {
+			return `${root.baseId}-content-${value}`;
+		}
+	});
+
+	let open = $derived(root.isOpen(value));
+</script>
+
+<div
+	class={className}
+	data-state={open ? 'open' : 'closed'}
+	data-disabled={disabled || root.disabled() || undefined}
+>
+	{#if children}{@render children({ open })}{/if}
+</div>

package/dist/components/navigation/accordion/AccordionItem.svelte.d.ts

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