alus-ui 0.1.0

package/dist/components/overlay/lightbox/Lightbox.svelte.d.ts

@@ -0,0 +1,38 @@
+export interface LightboxImage {
+    src: string;
+    alt: string;
+    caption?: string;
+}
+interface Props {
+    images: LightboxImage[];
+    index?: number;
+    open?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    loop?: boolean;
+    class?: string;
+    backdropClass?: string;
+    imageClass?: string;
+    style?: string;
+    controls?: import('svelte').Snippet<[
+        {
+            prev: () => void;
+            next: () => void;
+            close: () => void;
+            index: number;
+            total: number;
+            hasPrev: boolean;
+            hasNext: boolean;
+        }
+    ]>;
+    caption?: import('svelte').Snippet<[{
+        image: LightboxImage;
+        index: number;
+        total: number;
+    }]>;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number) => void;
+}
+declare const Lightbox: import("svelte").Component<Props, {}, "open" | "index">;
+type Lightbox = ReturnType<typeof Lightbox>;
+export default Lightbox;

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

@@ -0,0 +1,2 @@
+export { default as Lightbox } from './Lightbox.svelte';
+export type { LightboxImage } from './Lightbox.svelte';

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

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

package/dist/components/overlay/modal/Modal.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:modal');
+
+	export interface ModalContext {
+		open: () => boolean;
+		setOpen: (v: boolean) => void;
+		modal: () => boolean;
+		role: () => 'dialog' | 'alertdialog';
+		triggerEl: { current: HTMLElement | null };
+		setTriggerEl: (el: HTMLElement | null) => void;
+		contentId: string;
+		titleId: string;
+		descriptionId: string;
+		hasTitle: () => boolean;
+		setHasTitle: (v: boolean) => void;
+		hasDescription: () => boolean;
+		setHasDescription: (v: boolean) => void;
+	}
+
+	export function getModalContext(): ModalContext {
+		const ctx = getContext<ModalContext | undefined>(KEY);
+		if (!ctx) throw new Error('Modal subcomponent must be inside <Modal>');
+		return ctx;
+	}
+
+	export function setModalContext(ctx: ModalContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		modal?: boolean;
+		role?: 'dialog' | 'alertdialog';
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		open = $bindable(false),
+		modal = true,
+		role = 'dialog',
+		onOpenChange
+	}: Props = $props();
+
+	let triggerEl = $state<HTMLElement | null>(null);
+	let hasTitle = $state(false);
+	let hasDescription = $state(false);
+
+	const contentId = generateCounterId('modal-content');
+	const titleId = generateCounterId('modal-title');
+	const descriptionId = generateCounterId('modal-description');
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	setModalContext({
+		open: () => open,
+		setOpen,
+		modal: () => modal,
+		role: () => role,
+		triggerEl: {
+			get current() {
+				return triggerEl;
+			}
+		},
+		setTriggerEl: (el) => (triggerEl = el),
+		contentId,
+		titleId,
+		descriptionId,
+		hasTitle: () => hasTitle,
+		setHasTitle: (v) => (hasTitle = v),
+		hasDescription: () => hasDescription,
+		setHasDescription: (v) => (hasDescription = v)
+	});
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/components/overlay/modal/Modal.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface ModalContext {
+    open: () => boolean;
+    setOpen: (v: boolean) => void;
+    modal: () => boolean;
+    role: () => 'dialog' | 'alertdialog';
+    triggerEl: {
+        current: HTMLElement | null;
+    };
+    setTriggerEl: (el: HTMLElement | null) => void;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    hasTitle: () => boolean;
+    setHasTitle: (v: boolean) => void;
+    hasDescription: () => boolean;
+    setHasDescription: (v: boolean) => void;
+}
+export declare function getModalContext(): ModalContext;
+export declare function setModalContext(ctx: ModalContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    modal?: boolean;
+    role?: 'dialog' | 'alertdialog';
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/overlay/modal/ModalClose.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getModalContext } from './Modal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let { children, class: className = '', 'aria-label': ariaLabel = 'Close' }: Props = $props();
+
+	const ctx = getModalContext();
+</script>
+
+<button type="button" class={className} aria-label={ariaLabel} onclick={() => ctx.setOpen(false)}>
+	{#if children}{@render children()}{/if}
+</button>

package/dist/components/overlay/modal/ModalClose.svelte.d.ts

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

package/dist/components/overlay/modal/ModalContent.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { trap, focusFirst } from '../../../utils/a11y/index.js';
+	import { getModalContext } from './Modal.svelte';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		backdropClass?: string;
+		closeOnEscape?: boolean;
+		closeOnOutsideClick?: boolean;
+		trapFocus?: boolean;
+		restoreFocus?: boolean;
+		autoFocus?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		backdropClass = '',
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		trapFocus = true,
+		restoreFocus = true,
+		autoFocus = true
+	}: Props = $props();
+
+	const ctx = getModalContext();
+
+	const contentRef: Attachment<HTMLDivElement> = (node) => {
+		const previouslyFocused = document.activeElement as HTMLElement | null;
+		let releaseTrap: (() => void) | undefined;
+
+		if (trapFocus) releaseTrap = trap(node);
+		if (autoFocus) focusFirst(node);
+
+		function onKeydown(e: KeyboardEvent) {
+			if (closeOnEscape && e.key === 'Escape') {
+				e.preventDefault();
+				ctx.setOpen(false);
+			}
+		}
+
+		document.addEventListener('keydown', onKeydown);
+
+		return () => {
+			releaseTrap?.();
+			document.removeEventListener('keydown', onKeydown);
+			if (restoreFocus) {
+				const trigger = ctx.triggerEl.current ?? previouslyFocused;
+				trigger?.focus?.();
+			}
+		};
+	};
+
+	function onBackdropClick(e: MouseEvent) {
+		if (!closeOnOutsideClick) return;
+		if (e.target === e.currentTarget) ctx.setOpen(false);
+	}
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		{#if ctx.modal()}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div data-modal-backdrop class={backdropClass} onclick={onBackdropClick}>
+				<div
+					id={ctx.contentId}
+					role={ctx.role()}
+					aria-modal="true"
+					aria-labelledby={ctx.hasTitle() ? ctx.titleId : undefined}
+					aria-describedby={ctx.hasDescription() ? ctx.descriptionId : undefined}
+					tabindex="-1"
+					class={className}
+					{@attach contentRef}
+				>
+					{#if children}{@render children()}{/if}
+				</div>
+			</div>
+		{:else}
+			<div
+				id={ctx.contentId}
+				role={ctx.role()}
+				aria-labelledby={ctx.hasTitle() ? ctx.titleId : undefined}
+				aria-describedby={ctx.hasDescription() ? ctx.descriptionId : undefined}
+				tabindex="-1"
+				class={className}
+				{@attach contentRef}
+			>
+				{#if children}{@render children()}{/if}
+			</div>
+		{/if}
+	</Portal>
+{/if}

package/dist/components/overlay/modal/ModalContent.svelte.d.ts

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

package/dist/components/overlay/modal/ModalDescription.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getModalContext } from './Modal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+
+	const ctx = getModalContext();
+
+	$effect(() => {
+		ctx.setHasDescription(true);
+		return () => ctx.setHasDescription(false);
+	});
+</script>
+
+<p id={ctx.descriptionId} class={className}>
+	{#if children}{@render children()}{/if}
+</p>

package/dist/components/overlay/modal/ModalDescription.svelte.d.ts

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

package/dist/components/overlay/modal/ModalTitle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { getModalContext } from './Modal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	}
+
+	let { children, class: className = '', as = 'h2' }: Props = $props();
+
+	const ctx = getModalContext();
+
+	$effect(() => {
+		ctx.setHasTitle(true);
+		return () => ctx.setHasTitle(false);
+	});
+</script>
+
+<svelte:element this={as} id={ctx.titleId} class={className}>
+	{#if children}{@render children()}{/if}
+</svelte:element>

package/dist/components/overlay/modal/ModalTitle.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const ModalTitle: import("svelte").Component<Props, {}, "">;
+type ModalTitle = ReturnType<typeof ModalTitle>;
+export default ModalTitle;

package/dist/components/overlay/modal/ModalTrigger.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getModalContext } from './Modal.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 = getModalContext();
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		ctx.setTriggerEl(node);
+		return () => ctx.setTriggerEl(null);
+	};
+
+	function openModal() {
+		if (disabled) return;
+		ctx.setOpen(true);
+	}
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			interactiveStateAttrs({ expanded: ctx.open(), disabled }),
+			widgetAttrs({ controls: ctx.contentId, haspopup: 'dialog' })
+		)
+	);
+</script>
+
+<button
+	type="button"
+	data-state={ctx.open() ? 'open' : 'closed'}
+	{disabled}
+	class={className}
+	onclick={openModal}
+	{...ariaAttrs}
+	{@attach triggerRef}
+>
+	{#if children}{@render children({ open: ctx.open() })}{/if}
+</button>

package/dist/components/overlay/modal/ModalTrigger.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+export { default as Modal, getModalContext, setModalContext } from './Modal.svelte';
+export { default as ModalTrigger } from './ModalTrigger.svelte';
+export { default as ModalContent } from './ModalContent.svelte';
+export { default as ModalTitle } from './ModalTitle.svelte';
+export { default as ModalDescription } from './ModalDescription.svelte';
+export { default as ModalClose } from './ModalClose.svelte';
+export type { ModalContext } from './Modal.svelte';

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

@@ -0,0 +1,6 @@
+export { default as Modal, getModalContext, setModalContext } from './Modal.svelte';
+export { default as ModalTrigger } from './ModalTrigger.svelte';
+export { default as ModalContent } from './ModalContent.svelte';
+export { default as ModalTitle } from './ModalTitle.svelte';
+export { default as ModalDescription } from './ModalDescription.svelte';
+export { default as ModalClose } from './ModalClose.svelte';

package/dist/components/overlay/overlay/Overlay.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { useEventListener } from 'runed';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		closeOnEscape?: boolean;
+		closeOnOutsideClick?: boolean;
+		portal?: boolean;
+		class?: string;
+		style?: string;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		open = $bindable(false),
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		portal = true,
+		class: className = '',
+		style,
+		onOpenChange
+	}: Props = $props();
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	useEventListener(
+		() => (open ? document : null),
+		'keydown',
+		(e) => {
+			if (closeOnEscape && e.key === 'Escape') {
+				e.preventDefault();
+				setOpen(false);
+			}
+		}
+	);
+
+	function onBackdropClick(e: MouseEvent) {
+		if (!closeOnOutsideClick) return;
+		if (e.target === e.currentTarget) setOpen(false);
+	}
+</script>
+
+{#snippet inner()}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={className} {style} data-overlay onclick={onBackdropClick}>
+		{#if children}{@render children()}{/if}
+	</div>
+{/snippet}
+
+{#if open}
+	{#if portal}
+		<Portal>{@render inner()}</Portal>
+	{:else}
+		{@render inner()}
+	{/if}
+{/if}

package/dist/components/overlay/overlay/Overlay.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    portal?: boolean;
+    class?: string;
+    style?: string;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Overlay: import("svelte").Component<Props, {}, "open">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

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

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

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

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

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

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:popover');
+
+	export interface PopoverContext {
+		open: () => boolean;
+		setOpen: (v: boolean) => void;
+		disabled: () => boolean;
+		triggerEl: { current: HTMLElement | null };
+		setTriggerEl: (el: HTMLElement | null) => void;
+		contentEl: { current: HTMLElement | null };
+		setContentEl: (el: HTMLElement | null) => void;
+		contentId: string;
+		triggerId: string;
+	}
+
+	export function getPopoverContext(): PopoverContext {
+		const ctx = getContext<PopoverContext | undefined>(KEY);
+		if (!ctx) throw new Error('Popover subcomponent must be inside <Popover>');
+		return ctx;
+	}
+
+	export function setPopoverContext(ctx: PopoverContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		disabled?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { children, open = $bindable(false), disabled = false, onOpenChange }: Props = $props();
+
+	let triggerEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
+
+	const triggerId = generateCounterId('popover-trigger');
+	const contentId = generateCounterId('popover-content');
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	setPopoverContext({
+		open: () => open,
+		setOpen,
+		disabled: () => disabled,
+		triggerEl: {
+			get current() {
+				return triggerEl;
+			}
+		},
+		setTriggerEl: (el) => (triggerEl = el),
+		contentEl: {
+			get current() {
+				return contentEl;
+			}
+		},
+		setContentEl: (el) => (contentEl = el),
+		contentId,
+		triggerId
+	});
+</script>
+
+{#if children}{@render children()}{/if}

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

@@ -0,0 +1,26 @@
+export interface PopoverContext {
+    open: () => boolean;
+    setOpen: (v: boolean) => void;
+    disabled: () => boolean;
+    triggerEl: {
+        current: HTMLElement | null;
+    };
+    setTriggerEl: (el: HTMLElement | null) => void;
+    contentEl: {
+        current: HTMLElement | null;
+    };
+    setContentEl: (el: HTMLElement | null) => void;
+    contentId: string;
+    triggerId: string;
+}
+export declare function getPopoverContext(): PopoverContext;
+export declare function setPopoverContext(ctx: PopoverContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;