alus-ui 0.1.0

package/dist/components/overlay/popover/PopoverContent.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';
+	import { useEventListener } from 'runed';
+	import { trap, focusFirst } from '../../../utils/a11y/index.js';
+	import { getPopoverContext } from './Popover.svelte';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		placement?:
+			| 'top'
+			| 'bottom'
+			| 'left'
+			| 'right'
+			| 'top-start'
+			| 'top-end'
+			| 'bottom-start'
+			| 'bottom-end'
+			| 'left-start'
+			| 'left-end'
+			| 'right-start'
+			| 'right-end';
+		offset?: number;
+		sameWidth?: boolean;
+		closeOnEscape?: boolean;
+		closeOnOutsideClick?: boolean;
+		trapFocus?: boolean;
+		restoreFocus?: boolean;
+		autoFocus?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		placement = 'bottom-start',
+		offset: offsetPx = 4,
+		sameWidth = false,
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		trapFocus = false,
+		restoreFocus = true,
+		autoFocus = false
+	}: Props = $props();
+
+	const ctx = getPopoverContext();
+
+	const contentRef: Attachment<HTMLDivElement> = (node) => {
+		ctx.setContentEl(node);
+		const trigger = ctx.triggerEl.current;
+		let cleanupAutoUpdate: (() => void) | undefined;
+		let releaseTrap: (() => void) | undefined;
+
+		if (trigger) {
+			cleanupAutoUpdate = autoUpdate(trigger, node, async () => {
+				const { x, y } = await computePosition(trigger, node, {
+					placement,
+					strategy: 'fixed',
+					middleware: [
+						offset(offsetPx),
+						flip(),
+						shift({ padding: 8 }),
+						size({
+							apply({ rects, elements }) {
+								if (sameWidth) {
+									Object.assign(elements.floating.style, {
+										minWidth: `${rects.reference.width}px`
+									});
+								}
+							}
+						})
+					]
+				});
+				Object.assign(node.style, { left: `${x}px`, top: `${y}px` });
+			});
+		}
+
+		if (trapFocus) releaseTrap = trap(node);
+		if (autoFocus) focusFirst(node);
+
+		return () => {
+			cleanupAutoUpdate?.();
+			releaseTrap?.();
+			ctx.setContentEl(null);
+			if (restoreFocus) ctx.triggerEl.current?.focus();
+		};
+	};
+
+	useEventListener(
+		() => (ctx.open() ? document : null),
+		'pointerdown',
+		(e) => {
+			if (!closeOnOutsideClick) return;
+			const node = ctx.contentEl.current;
+			if (!node) return;
+			const t = e.target as Node;
+			if (node.contains(t) || ctx.triggerEl.current?.contains(t)) return;
+			ctx.setOpen(false);
+		},
+		{ capture: true }
+	);
+
+	useEventListener(
+		() => (ctx.open() ? document : null),
+		'keydown',
+		(e) => {
+			if (closeOnEscape && e.key === 'Escape') {
+				e.preventDefault();
+				ctx.setOpen(false);
+			}
+		}
+	);
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		<div
+			id={ctx.contentId}
+			role="dialog"
+			aria-labelledby={ctx.triggerId}
+			tabindex="-1"
+			class={className}
+			style="position:fixed; top:0; left:0;"
+			{@attach contentRef}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</Portal>
+{/if}

package/dist/components/overlay/popover/PopoverContent.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    offset?: number;
+    sameWidth?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
+    autoFocus?: boolean;
+}
+declare const PopoverContent: import("svelte").Component<Props, {}, "">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/components/overlay/popover/PopoverTrigger.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getPopoverContext } from './Popover.svelte';
+	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ open: boolean }]>;
+		class?: string;
+		disabled?: boolean;
+	}
+
+	let { children, class: className = '', disabled = false }: Props = $props();
+
+	const ctx = getPopoverContext();
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		ctx.setTriggerEl(node);
+		return () => ctx.setTriggerEl(null);
+	};
+
+	function toggle() {
+		if (disabled || ctx.disabled()) return;
+		ctx.setOpen(!ctx.open());
+	}
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			interactiveStateAttrs({ expanded: ctx.open(), disabled: disabled || ctx.disabled() }),
+			widgetAttrs({ controls: ctx.contentId, haspopup: 'dialog' })
+		)
+	);
+</script>
+
+<button
+	id={ctx.triggerId}
+	type="button"
+	data-state={ctx.open() ? 'open' : 'closed'}
+	disabled={disabled || ctx.disabled()}
+	class={className}
+	onclick={toggle}
+	{...ariaAttrs}
+	{@attach triggerRef}
+>
+	{#if children}{@render children({ open: ctx.open() })}{/if}
+</button>

package/dist/components/overlay/popover/PopoverTrigger.svelte.d.ts

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

package/dist/components/overlay/popover/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Popover, getPopoverContext, setPopoverContext } from './Popover.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';
+export type { PopoverContext } from './Popover.svelte';

package/dist/components/overlay/popover/index.js

@@ -0,0 +1,3 @@
+export { default as Popover, getPopoverContext, setPopoverContext } from './Popover.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';

package/dist/components/overlay/sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer as Sheet, DrawerContent as SheetContent, DrawerTrigger as SheetTrigger, DrawerTitle as SheetTitle, DrawerDescription as SheetDescription, DrawerClose as SheetClose } from '../drawer/index.js';
+export type { DrawerSide as SheetSide } from '../drawer/index.js';

package/dist/components/overlay/sheet/index.js

@@ -0,0 +1 @@
+export { Drawer as Sheet, DrawerContent as SheetContent, DrawerTrigger as SheetTrigger, DrawerTitle as SheetTitle, DrawerDescription as SheetDescription, DrawerClose as SheetClose } from '../drawer/index.js';

package/dist/components/overlay/tooltip/Tooltip.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:tooltip');
+
+	export interface TooltipContext {
+		open: () => boolean;
+		setOpen: (v: boolean) => void;
+		openDelay: () => number;
+		closeDelay: () => number;
+		disabled: () => boolean;
+		triggerEl: { current: HTMLElement | null };
+		setTriggerEl: (el: HTMLElement | null) => void;
+		contentId: string;
+		scheduleOpen: () => void;
+		scheduleClose: () => void;
+		cancel: () => void;
+	}
+
+	export function getTooltipContext(): TooltipContext {
+		const ctx = getContext<TooltipContext | undefined>(KEY);
+		if (!ctx) throw new Error('Tooltip subcomponent must be inside <Tooltip>');
+		return ctx;
+	}
+
+	export function setTooltipContext(ctx: TooltipContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		openDelay?: number;
+		closeDelay?: number;
+		disabled?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		open = $bindable(false),
+		openDelay = 200,
+		closeDelay = 100,
+		disabled = false,
+		onOpenChange
+	}: Props = $props();
+
+	let triggerEl = $state<HTMLElement | null>(null);
+	const contentId = generateCounterId('tooltip-content');
+
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	function cancel() {
+		if (timer !== undefined) {
+			clearTimeout(timer);
+			timer = undefined;
+		}
+	}
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	function scheduleOpen() {
+		if (disabled) return;
+		cancel();
+		timer = setTimeout(() => setOpen(true), openDelay);
+	}
+
+	function scheduleClose() {
+		cancel();
+		timer = setTimeout(() => setOpen(false), closeDelay);
+	}
+
+	setTooltipContext({
+		open: () => open,
+		setOpen,
+		openDelay: () => openDelay,
+		closeDelay: () => closeDelay,
+		disabled: () => disabled,
+		triggerEl: {
+			get current() {
+				return triggerEl;
+			}
+		},
+		setTriggerEl: (el) => (triggerEl = el),
+		contentId,
+		scheduleOpen,
+		scheduleClose,
+		cancel
+	});
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/components/overlay/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,28 @@
+export interface TooltipContext {
+    open: () => boolean;
+    setOpen: (v: boolean) => void;
+    openDelay: () => number;
+    closeDelay: () => number;
+    disabled: () => boolean;
+    triggerEl: {
+        current: HTMLElement | null;
+    };
+    setTriggerEl: (el: HTMLElement | null) => void;
+    contentId: string;
+    scheduleOpen: () => void;
+    scheduleClose: () => void;
+    cancel: () => void;
+}
+export declare function getTooltipContext(): TooltipContext;
+export declare function setTooltipContext(ctx: TooltipContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/overlay/tooltip/TooltipContent.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset } from '@floating-ui/dom';
+	import { getTooltipContext } from './Tooltip.svelte';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		placement?:
+			| 'top'
+			| 'bottom'
+			| 'left'
+			| 'right'
+			| 'top-start'
+			| 'top-end'
+			| 'bottom-start'
+			| 'bottom-end'
+			| 'left-start'
+			| 'left-end'
+			| 'right-start'
+			| 'right-end';
+		offset?: number;
+		interactive?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		placement = 'top',
+		offset: offsetPx = 6,
+		interactive = false
+	}: Props = $props();
+
+	const ctx = getTooltipContext();
+
+	const contentRef: Attachment<HTMLDivElement> = (node) => {
+		const trigger = ctx.triggerEl.current;
+		if (!trigger) return;
+
+		const cleanup = autoUpdate(trigger, node, async () => {
+			const { x, y } = await computePosition(trigger, node, {
+				placement,
+				strategy: 'fixed',
+				middleware: [offset(offsetPx), flip(), shift({ padding: 8 })]
+			});
+			Object.assign(node.style, { left: `${x}px`, top: `${y}px` });
+		});
+
+		return cleanup;
+	};
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		<div
+			id={ctx.contentId}
+			role="tooltip"
+			class={className}
+			style="position:fixed; top:0; left:0;{interactive ? '' : ' pointer-events:none;'}"
+			onpointerenter={interactive ? ctx.cancel : undefined}
+			onpointerleave={interactive ? ctx.scheduleClose : undefined}
+			{@attach contentRef}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</Portal>
+{/if}

package/dist/components/overlay/tooltip/TooltipContent.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    offset?: number;
+    interactive?: boolean;
+}
+declare const TooltipContent: import("svelte").Component<Props, {}, "">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/overlay/tooltip/TooltipTrigger.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getTooltipContext } from './Tooltip.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ open: boolean }]>;
+		class?: string;
+		asChild?: boolean;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+
+	const ctx = getTooltipContext();
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		ctx.setTriggerEl(node);
+		return () => ctx.setTriggerEl(null);
+	};
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') ctx.setOpen(false);
+	}
+</script>
+
+<button
+	type="button"
+	aria-describedby={ctx.open() ? ctx.contentId : undefined}
+	data-state={ctx.open() ? 'open' : 'closed'}
+	class={className}
+	onpointerenter={ctx.scheduleOpen}
+	onpointerleave={ctx.scheduleClose}
+	onfocus={ctx.scheduleOpen}
+	onblur={ctx.scheduleClose}
+	onkeydown={onKeydown}
+	{@attach triggerRef}
+>
+	{#if children}{@render children({ open: ctx.open() })}{/if}
+</button>

package/dist/components/overlay/tooltip/TooltipTrigger.svelte.d.ts

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

package/dist/components/overlay/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip, getTooltipContext, setTooltipContext } from './Tooltip.svelte';
+export { default as TooltipTrigger } from './TooltipTrigger.svelte';
+export { default as TooltipContent } from './TooltipContent.svelte';
+export type { TooltipContext } from './Tooltip.svelte';

package/dist/components/overlay/tooltip/index.js

@@ -0,0 +1,3 @@
+export { default as Tooltip, getTooltipContext, setTooltipContext } from './Tooltip.svelte';
+export { default as TooltipTrigger } from './TooltipTrigger.svelte';
+export { default as TooltipContent } from './TooltipContent.svelte';

package/dist/components/utility/conditional/Conditional.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	interface Props {
+		when: unknown;
+		children?: import('svelte').Snippet;
+		fallback?: import('svelte').Snippet;
+	}
+
+	let { when, children, fallback }: Props = $props();
+</script>
+
+{#if when}
+	{#if children}{@render children()}{/if}
+{:else if fallback}
+	{@render fallback()}
+{/if}

package/dist/components/utility/conditional/Conditional.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    when: unknown;
+    children?: import('svelte').Snippet;
+    fallback?: import('svelte').Snippet;
+}
+declare const Conditional: import("svelte").Component<Props, {}, "">;
+type Conditional = ReturnType<typeof Conditional>;
+export default Conditional;

package/dist/components/utility/conditional/index.d.ts

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

package/dist/components/utility/conditional/index.js

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

package/dist/components/utility/focus-trap/FocusTrap.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { trap, focusFirst } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		active?: boolean;
+		autoFocus?: boolean;
+		restoreFocus?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		active = true,
+		autoFocus = true,
+		restoreFocus = true
+	}: Props = $props();
+
+	const trapAttach: Attachment<HTMLDivElement> = (node) => {
+		if (!active) return;
+
+		const previouslyFocused = document.activeElement as HTMLElement | null;
+
+		if (autoFocus) focusFirst(node);
+
+		const cleanup = trap(node);
+
+		return () => {
+			cleanup();
+			if (restoreFocus) previouslyFocused?.focus?.();
+		};
+	};
+</script>
+
+<div class={className} {@attach trapAttach}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/utility/focus-trap/FocusTrap.svelte.d.ts

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

package/dist/components/utility/focus-trap/index.d.ts

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

package/dist/components/utility/focus-trap/index.js

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

package/dist/components/utility/portal/Portal.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		target?: HTMLElement | string;
+		disabled?: boolean;
+	}
+
+	let { children, target, disabled = false }: Props = $props();
+
+	let node: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (disabled || !node) return;
+
+		const dest =
+			typeof target === 'string' ? document.querySelector(target) : (target ?? document.body);
+
+		if (!dest) return;
+
+		dest.appendChild(node);
+
+		return () => {
+			if (node?.parentNode) {
+				node.parentNode.removeChild(node);
+			}
+		};
+	});
+</script>
+
+{#if disabled}
+	{#if children}{@render children()}{/if}
+{:else}
+	<div bind:this={node}>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/dist/components/utility/portal/Portal.svelte.d.ts

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

package/dist/components/utility/portal/index.d.ts

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

package/dist/components/utility/portal/index.js

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

package/dist/components/utility/screen-reader-only/index.d.ts

@@ -0,0 +1 @@
+export { VisuallyHidden as ScreenReaderOnly } from '../visually-hidden/index.js';

package/dist/components/utility/screen-reader-only/index.js

@@ -0,0 +1 @@
+export { VisuallyHidden as ScreenReaderOnly } from '../visually-hidden/index.js';