alus-ui 0.1.0

package/dist/components/display/carousel/Carousel.svelte

@@ -0,0 +1,130 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:carousel');
+
+	export interface CarouselContext {
+		index: () => number;
+		setIndex: (i: number) => void;
+		count: () => number;
+		registerSlide: () => { id: number; unregister: () => void };
+		next: () => void;
+		prev: () => void;
+		goTo: (i: number) => void;
+		loop: () => boolean;
+		slidesId: string;
+	}
+
+	export function getCarouselContext(): CarouselContext {
+		const ctx = getContext<CarouselContext | undefined>(KEY);
+		if (!ctx) throw new Error('Carousel subcomponent must be inside <Carousel>');
+		return ctx;
+	}
+
+	export function setCarouselContext(ctx: CarouselContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		index?: number;
+		loop?: boolean;
+		autoplay?: boolean | number;
+		pauseOnHover?: boolean;
+		onIndexChange?: (i: number) => void;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		index = $bindable(0),
+		loop = false,
+		autoplay = false,
+		pauseOnHover = true,
+		onIndexChange,
+		'aria-label': ariaLabel = 'Carousel',
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+
+	let count = $state(0);
+	let nextId = 0;
+	let paused = $state(false);
+	const slidesId = generateCounterId('carousel-slides');
+	const interval = $derived(typeof autoplay === 'number' ? autoplay : autoplay ? 4000 : 0);
+
+	function setIndex(i: number) {
+		index = i;
+		onIndexChange?.(i);
+	}
+
+	function clamp(i: number): number {
+		if (count === 0) return 0;
+		if (loop) return ((i % count) + count) % count;
+		return Math.max(0, Math.min(count - 1, i));
+	}
+
+	setCarouselContext({
+		index: () => index,
+		setIndex: (i) => setIndex(clamp(i)),
+		count: () => count,
+		registerSlide: () => {
+			const id = nextId++;
+			count++;
+			return {
+				id,
+				unregister: () => {
+					count = Math.max(0, count - 1);
+				}
+			};
+		},
+		next: () => setIndex(clamp(index + 1)),
+		prev: () => setIndex(clamp(index - 1)),
+		goTo: (i) => setIndex(clamp(i)),
+		loop: () => loop,
+		slidesId
+	});
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }))
+	);
+
+	$effect(() => {
+		if (interval <= 0 || count < 2 || paused) return;
+		const id = setInterval(() => {
+			if (typeof document !== 'undefined' && document.hidden) return;
+			const cur = index;
+			const next = cur + 1;
+			if (next >= count && !loop) return;
+			setIndex(clamp(next));
+		}, interval);
+		return () => clearInterval(id);
+	});
+
+	function onEnter() {
+		if (pauseOnHover) paused = true;
+	}
+	function onLeave() {
+		if (pauseOnHover) paused = false;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<section
+	aria-roledescription="carousel"
+	class={className}
+	onpointerenter={onEnter}
+	onpointerleave={onLeave}
+	onfocusin={onEnter}
+	onfocusout={onLeave}
+	{...ariaAttrs}
+>
+	{#if children}{@render children()}{/if}
+</section>

package/dist/components/display/carousel/Carousel.svelte.d.ts

@@ -0,0 +1,30 @@
+export interface CarouselContext {
+    index: () => number;
+    setIndex: (i: number) => void;
+    count: () => number;
+    registerSlide: () => {
+        id: number;
+        unregister: () => void;
+    };
+    next: () => void;
+    prev: () => void;
+    goTo: (i: number) => void;
+    loop: () => boolean;
+    slidesId: string;
+}
+export declare function getCarouselContext(): CarouselContext;
+export declare function setCarouselContext(ctx: CarouselContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    index?: number;
+    loop?: boolean;
+    autoplay?: boolean | number;
+    pauseOnHover?: boolean;
+    onIndexChange?: (i: number) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "index">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/display/carousel/CarouselIndicators.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { getCarouselContext } from './Carousel.svelte';
+
+	interface Props {
+		class?: string;
+		item?: import('svelte').Snippet<[{ index: number; active: boolean }]>;
+		'aria-label'?: string;
+	}
+
+	let { class: className = '', item, 'aria-label': ariaLabel = 'Choose slide' }: Props = $props();
+	const ctx = getCarouselContext();
+
+	let listEl: HTMLDivElement | null = $state(null);
+
+	function focusActive(i: number) {
+		queueMicrotask(() => {
+			const btn = listEl?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[i];
+			btn?.focus();
+		});
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const n = ctx.count();
+		if (!n) return;
+		const cur = ctx.index();
+		let target = -1;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowDown':
+				target = (cur + 1) % n;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowUp':
+				target = (cur - 1 + n) % n;
+				break;
+			case 'Home':
+				target = 0;
+				break;
+			case 'End':
+				target = n - 1;
+				break;
+		}
+		if (target >= 0) {
+			e.preventDefault();
+			ctx.goTo(target);
+			focusActive(target);
+		}
+	}
+</script>
+
+<div
+	role="tablist"
+	tabindex="-1"
+	aria-label={ariaLabel}
+	class={className}
+	onkeydown={onKeydown}
+	bind:this={listEl}
+>
+	{#each Array(ctx.count()) as _, i (i)}
+		{@const active = ctx.index() === i}
+		<button
+			type="button"
+			role="tab"
+			aria-selected={active}
+			aria-controls={ctx.slidesId}
+			aria-label={`Go to slide ${i + 1}`}
+			tabindex={active ? 0 : -1}
+			data-active={active || undefined}
+			onclick={() => ctx.goTo(i)}
+		>
+			{#if item}{@render item({ index: i, active })}{:else}<span aria-hidden="true">●</span>{/if}
+		</button>
+	{/each}
+</div>

package/dist/components/display/carousel/CarouselIndicators.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    item?: import('svelte').Snippet<[{
+        index: number;
+        active: boolean;
+    }]>;
+    'aria-label'?: string;
+}
+declare const CarouselIndicators: import("svelte").Component<Props, {}, "">;
+type CarouselIndicators = ReturnType<typeof CarouselIndicators>;
+export default CarouselIndicators;

package/dist/components/display/carousel/CarouselNext.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { getCarouselContext } from './Carousel.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let { children, class: className = '', 'aria-label': ariaLabel = 'Next slide' }: Props = $props();
+	const ctx = getCarouselContext();
+	const disabled = $derived(!ctx.loop() && ctx.index() >= ctx.count() - 1);
+</script>
+
+<button
+	type="button"
+	class={className}
+	aria-label={ariaLabel}
+	aria-controls={ctx.slidesId}
+	{disabled}
+	onclick={() => ctx.next()}
+>
+	{#if children}{@render children()}{/if}
+</button>

package/dist/components/display/carousel/CarouselNext.svelte.d.ts

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

package/dist/components/display/carousel/CarouselPrev.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getCarouselContext } from './Carousel.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel = 'Previous slide'
+	}: Props = $props();
+	const ctx = getCarouselContext();
+	const disabled = $derived(!ctx.loop() && ctx.index() === 0);
+</script>
+
+<button
+	type="button"
+	class={className}
+	aria-label={ariaLabel}
+	aria-controls={ctx.slidesId}
+	{disabled}
+	onclick={() => ctx.prev()}
+>
+	{#if children}{@render children()}{/if}
+</button>

package/dist/components/display/carousel/CarouselPrev.svelte.d.ts

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

package/dist/components/display/carousel/CarouselSlide.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { getCarouselContext } from './Carousel.svelte';
+
+	interface Props {
+		index: number;
+		children?: import('svelte').Snippet<[{ active: boolean }]>;
+		class?: string;
+		label?: string;
+	}
+
+	let { index, children, class: className = '', label }: Props = $props();
+
+	const ctx = getCarouselContext();
+	const active = $derived(ctx.index() === index);
+
+	$effect(() => {
+		const reg = ctx.registerSlide();
+		return reg.unregister;
+	});
+</script>
+
+<div
+	role="group"
+	aria-roledescription="slide"
+	aria-label={label ?? `Slide ${index + 1} of ${ctx.count()}`}
+	aria-hidden={!active}
+	hidden={!active || undefined}
+	data-active={active || undefined}
+	class={className}
+>
+	{#if children}{@render children({ active })}{/if}
+</div>

package/dist/components/display/carousel/CarouselSlide.svelte.d.ts

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

package/dist/components/display/carousel/CarouselSlides.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getCarouselContext } from './Carousel.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		live?: 'polite' | 'off';
+	}
+
+	let { children, class: className = '', live = 'polite' }: Props = $props();
+	const ctx = getCarouselContext();
+</script>
+
+<div id={ctx.slidesId} class={className} aria-live={live} aria-atomic="false">
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/display/carousel/CarouselSlides.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+export { default as Carousel, getCarouselContext, setCarouselContext } from './Carousel.svelte';
+export type { CarouselContext } from './Carousel.svelte';
+export { default as CarouselSlides } from './CarouselSlides.svelte';
+export { default as CarouselSlide } from './CarouselSlide.svelte';
+export { default as CarouselPrev } from './CarouselPrev.svelte';
+export { default as CarouselNext } from './CarouselNext.svelte';
+export { default as CarouselIndicators } from './CarouselIndicators.svelte';

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

@@ -0,0 +1,6 @@
+export { default as Carousel, getCarouselContext, setCarouselContext } from './Carousel.svelte';
+export { default as CarouselSlides } from './CarouselSlides.svelte';
+export { default as CarouselSlide } from './CarouselSlide.svelte';
+export { default as CarouselPrev } from './CarouselPrev.svelte';
+export { default as CarouselNext } from './CarouselNext.svelte';
+export { default as CarouselIndicators } from './CarouselIndicators.svelte';

package/dist/components/display/code-block/CodeBlock.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	interface Props {
+		code: string;
+		language?: string;
+		filename?: string;
+		showLineNumbers?: boolean;
+		actions?: import('svelte').Snippet<
+			[{ code: string; copy: () => Promise<void>; copied: boolean }]
+		>;
+		class?: string;
+		preClass?: string;
+		codeClass?: string;
+		lineNumbersClass?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		code,
+		language,
+		filename,
+		showLineNumbers = false,
+		actions,
+		class: className = '',
+		preClass = '',
+		codeClass = '',
+		lineNumbersClass = '',
+		'aria-label': ariaLabel
+	}: Props = $props();
+
+	let copied = $state(false);
+	let resetHandle: ReturnType<typeof setTimeout> | null = null;
+
+	const lines = $derived(code.replace(/\n$/, '').split('\n'));
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			if (resetHandle) clearTimeout(resetHandle);
+			resetHandle = setTimeout(() => (copied = false), 1500);
+		} catch {
+			/* noop */
+		}
+	}
+</script>
+
+<div class={className} data-language={language} data-filename={filename}>
+	{#if actions}
+		{@render actions({ code, copy, copied })}
+	{/if}
+	<pre
+		class={preClass}
+		data-language={language}
+		aria-label={ariaLabel ?? (language ? `${language} code` : 'code')}>{#if showLineNumbers}<span
+				class={lineNumbersClass}
+				aria-hidden="true"
+				data-line-numbers
+				>{#each lines as _, i}{i + 1}{#if i < lines.length - 1}{'\n'}{/if}{/each}</span
+			><code class={codeClass}>{code}</code>{:else}<code class={codeClass}>{code}</code>{/if}</pre>
+</div>

package/dist/components/display/code-block/CodeBlock.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    code: string;
+    language?: string;
+    filename?: string;
+    showLineNumbers?: boolean;
+    actions?: import('svelte').Snippet<[
+        {
+            code: string;
+            copy: () => Promise<void>;
+            copied: boolean;
+        }
+    ]>;
+    class?: string;
+    preClass?: string;
+    codeClass?: string;
+    lineNumbersClass?: string;
+    'aria-label'?: string;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/display/code-block/index.d.ts

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

package/dist/components/display/code-block/index.js

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