@nqmcreative/ui 0.1.0

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { anchored } from '../actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../actions/dismissable.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	interface Props {
+		/** The region that responds to a right-click. */
+		children: Snippet;
+		/** Menu contents: `MenuItem`, `MenuSeparator`, anything. */
+		menu: Snippet;
+		open?: boolean;
+		label?: string;
+		disabled?: boolean;
+		class?: string;
+		menuClass?: string;
+	}
+
+	let {
+		children,
+		menu,
+		open = $bindable(false),
+		label,
+		disabled = false,
+		class: className = '',
+		menuClass = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let menuEl: HTMLElement | null = $state(null);
+	/**
+	 * A 0×0 element parked at the pointer, so the same `anchored` action that
+	 * positions dropdowns can flip and clamp this menu too.
+	 */
+	let cursor: HTMLElement | null = $state(null);
+
+	function onContextMenu(event: MouseEvent) {
+		if (disabled) return;
+		event.preventDefault();
+		if (!cursor) {
+			cursor = document.createElement('div');
+			cursor.style.cssText = 'position:fixed;width:0;height:0;pointer-events:none';
+			document.body.appendChild(cursor);
+		}
+		cursor.style.left = `${event.clientX}px`;
+		cursor.style.top = `${event.clientY}px`;
+		open = true;
+	}
+
+	$effect(() => () => cursor?.remove());
+
+	function onMenuKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' || event.key === 'Tab') {
+			if (event.key === 'Escape') event.preventDefault();
+			event.stopPropagation();
+			open = false;
+			return;
+		}
+		if (!menuEl) return;
+		navigateList(event, [
+			...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
+		]);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div oncontextmenu={onContextMenu} class={className}>
+	{@render children()}
+</div>
+
+{#if open}
+	<div
+		bind:this={menuEl}
+		use:portal
+		use:anchored={{ anchor: cursor, placement: 'bottom-start', offset: 2 }}
+		use:clickOutside={{ onoutside: () => (open = false) }}
+		use:focusTrap={{ restore: true }}
+		onkeydown={onMenuKeydown}
+		onclick={(event) => {
+			if ((event.target as HTMLElement).closest('[role="menuitem"]:not([disabled])')) open = false;
+		}}
+		role="menu"
+		aria-label={label ?? t.current.menu}
+		tabindex="-1"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-44 flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {menuClass}"
+	>
+		{@render menu()}
+	</div>
+{/if}

package/dist/components/ContextMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The region that responds to a right-click. */
+    children: Snippet;
+    /** Menu contents: `MenuItem`, `MenuSeparator`, anything. */
+    menu: Snippet;
+    open?: boolean;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    menuClass?: string;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/DatePicker.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { anchored } from '../actions/anchor.js';
+	import { clickOutside, portal } from '../actions/dismissable.js';
+	import { formatISO, parseFormatted } from '../date.js';
+	import { useLocale } from '../locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+	import Calendar from './Calendar.svelte';
+
+	interface Props {
+		/** Bindable `YYYY-MM-DD` — the same shape as `<input type="date">`. */
+		value?: string;
+		/** Inclusive bounds, `YYYY-MM-DD`. */
+		min?: string;
+		max?: string;
+		isDisabled?: (date: Date) => boolean;
+		weekStart?: 0 | 1;
+		tone?: Tone;
+		invalid?: boolean;
+		disabled?: boolean;
+		clearable?: boolean;
+		placeholder?: string;
+		id?: string;
+		/** Submits the ISO value with a form. */
+		name?: string;
+		onchange?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		min,
+		max,
+		isDisabled,
+		weekStart = 1,
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		clearable = true,
+		placeholder,
+		id,
+		name,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let open = $state(false);
+	let text = $state('');
+	let editing = $state(false);
+	let wrapper: HTMLElement | null = $state(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+
+	/** While typing the field shows the raw text; otherwise the formatted value. */
+	const display = $derived(editing ? text : formatISO(value, t.current.dateFormat));
+	const hint = $derived(placeholder ?? formatHint());
+
+	function formatHint() {
+		const parts = { dmy: 'DD/MM/YYYY', mdy: 'MM/DD/YYYY', ymd: 'YYYY/MM/DD' };
+		return parts[t.current.dateFormat];
+	}
+
+	function commit() {
+		editing = false;
+		if (!text.trim()) {
+			if (value) {
+				value = '';
+				onchange?.('');
+			}
+			return;
+		}
+		const parsed = parseFormatted(text, t.current.dateFormat);
+		if (parsed && parsed !== value) {
+			value = parsed;
+			onchange?.(parsed);
+		}
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			open = false;
+			return;
+		}
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			commit();
+			open = false;
+			return;
+		}
+		if (event.key === 'ArrowDown' && !open) {
+			event.preventDefault();
+			open = true;
+		}
+	}
+</script>
+
+<div
+	bind:this={wrapper}
+	class="inline-flex w-full items-center gap-1 border bg-bg pr-1 pl-4 transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+>
+	<input
+		bind:this={inputEl}
+		{id}
+		{disabled}
+		type="text"
+		inputmode="numeric"
+		autocomplete="off"
+		role="combobox"
+		aria-haspopup="dialog"
+		aria-controls="{id ?? 'datepicker'}-calendar"
+		aria-invalid={invalid ? 'true' : undefined}
+		aria-expanded={open}
+		placeholder={hint}
+		value={display}
+		oninput={(event) => {
+			editing = true;
+			text = event.currentTarget.value;
+		}}
+		onblur={commit}
+		onkeydown={onKeydown}
+		class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] text-text tabular-nums placeholder:text-text-muted focus:outline-none"
+	/>
+
+	{#if name}<input type="hidden" {name} {value} />{/if}
+
+	{#if clearable && value && !disabled}
+		<button
+			type="button"
+			onclick={() => {
+				value = '';
+				text = '';
+				onchange?.('');
+				inputEl?.focus();
+			}}
+			aria-label={t.current.clear}
+			class="shrink-0 p-1.5 text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+		>
+			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+				<path d="m2 2 10 10M12 2 2 12" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+		</button>
+	{/if}
+
+	<button
+		type="button"
+		{disabled}
+		onclick={() => (open = !open)}
+		aria-label={t.current.selectDate}
+		aria-expanded={open}
+		class="shrink-0 p-2 text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+	>
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<rect x="3" y="4.5" width="14" height="12" stroke="currentColor" stroke-width="1.4" />
+			<path d="M3 8h14M7 3v3M13 3v3" stroke="currentColor" stroke-width="1.4" />
+		</svg>
+	</button>
+</div>
+
+{#if open}
+	<div
+		use:portal
+		use:anchored={{ anchor: wrapper, placement: 'bottom-start', offset: 4 }}
+		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
+		id="{id ?? 'datepicker'}-calendar"
+		class="z-50 border border-hairline bg-bg"
+	>
+		<Calendar
+			bind:value
+			{min}
+			{max}
+			{isDisabled}
+			{weekStart}
+			{tone}
+			onselect={(next) => {
+				editing = false;
+				open = false;
+				onchange?.(next);
+				inputEl?.focus();
+			}}
+		/>
+	</div>
+{/if}

package/dist/components/DatePicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Tone } from '../tones.js';
+interface Props {
+    /** Bindable `YYYY-MM-DD` — the same shape as `<input type="date">`. */
+    value?: string;
+    /** Inclusive bounds, `YYYY-MM-DD`. */
+    min?: string;
+    max?: string;
+    isDisabled?: (date: Date) => boolean;
+    weekStart?: 0 | 1;
+    tone?: Tone;
+    invalid?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    id?: string;
+    /** Submits the ISO value with a form. */
+    name?: string;
+    onchange?: (value: string) => void;
+    class?: string;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/Divider.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type DividerOrientation = 'horizontal' | 'vertical';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		orientation?: DividerOrientation;
+		/** Centred caption drawn over a horizontal rule. */
+		label?: string;
+	}
+
+	let { orientation = 'horizontal', label, class: className = '', ...rest }: Props = $props();
+</script>
+
+{#if orientation === 'vertical'}
+	<div
+		role="separator"
+		aria-orientation="vertical"
+		class="w-px self-stretch bg-hairline {className}"
+		{...rest}
+	></div>
+{:else if label}
+	<div class="flex items-center gap-4 {className}" {...rest}>
+		<span class="h-px flex-1 bg-hairline"></span>
+		<span class="font-mono text-xs tracking-wide text-text-muted uppercase">{label}</span>
+		<span class="h-px flex-1 bg-hairline"></span>
+	</div>
+{:else}
+	<div role="separator" class="h-px w-full bg-hairline {className}" {...rest}></div>
+{/if}

package/dist/components/Divider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type DividerOrientation = 'horizontal' | 'vertical';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    orientation?: DividerOrientation;
+    /** Centred caption drawn over a horizontal rule. */
+    label?: string;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Drawer.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import { useLocale } from '../locale.svelte.js';
+
+	export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+	export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+
+	interface Props extends HTMLDialogAttributes {
+		/** Bindable. Built on the native `<dialog>`, so it gets the top layer,
+		 *  the backdrop, Escape handling and focus containment for free. */
+		open?: boolean;
+		side?: DrawerSide;
+		size?: DrawerSize;
+		title?: string;
+		description?: string;
+		dismissible?: boolean;
+		footer?: Snippet;
+		onclose?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		side = 'right',
+		size = 'md',
+		title,
+		description,
+		dismissible = true,
+		footer,
+		onclose,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+	let dialog: HTMLDialogElement | null = $state(null);
+
+	const horizontal = $derived(side === 'left' || side === 'right');
+
+	const widths: Record<DrawerSize, string> = {
+		sm: 'w-[min(20rem,100vw)]',
+		md: 'w-[min(28rem,100vw)]',
+		lg: 'w-[min(40rem,100vw)]',
+		full: 'w-screen'
+	};
+
+	const heights: Record<DrawerSize, string> = {
+		sm: 'h-[min(16rem,100vh)]',
+		md: 'h-[min(24rem,100vh)]',
+		lg: 'h-[min(36rem,100vh)]',
+		full: 'h-screen'
+	};
+
+	const sides: Record<DrawerSide, string> = {
+		left: 'mr-auto ml-0 h-screen max-h-screen border-r',
+		right: 'mr-0 ml-auto h-screen max-h-screen border-l',
+		top: 'mt-0 mb-auto w-screen max-w-screen border-b',
+		bottom: 'mt-auto mb-0 w-screen max-w-screen border-t'
+	};
+
+	const slide: Record<DrawerSide, string> = {
+		left: 'animate-[drawer-left_220ms_cubic-bezier(0.16,1,0.3,1)]',
+		right: 'animate-[drawer-right_220ms_cubic-bezier(0.16,1,0.3,1)]',
+		top: 'animate-[drawer-top_220ms_cubic-bezier(0.16,1,0.3,1)]',
+		bottom: 'animate-[drawer-bottom_220ms_cubic-bezier(0.16,1,0.3,1)]'
+	};
+
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		else if (!open && dialog.open) dialog.close();
+	});
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onclose={close}
+	onclick={(event) => {
+		if (dismissible && event.target === dialog) close();
+	}}
+	oncancel={(event) => {
+		if (!dismissible) event.preventDefault();
+	}}
+	class="max-h-none max-w-none border-hairline bg-bg p-0 text-text backdrop:bg-text/40
+		{sides[side]} {horizontal ? widths[size] : heights[size]} {slide[side]} {className}"
+	{...rest}
+>
+	<div class="flex h-full flex-col">
+		{#if title || dismissible}
+			<div class="flex items-start gap-4 border-b border-hairline px-6 py-5">
+				<div class="flex min-w-0 flex-1 flex-col gap-1">
+					{#if title}
+						<h2 class="font-heading text-lg font-medium tracking-tight">{title}</h2>
+					{/if}
+					{#if description}
+						<p class="font-sans text-sm text-text-secondary">{description}</p>
+					{/if}
+				</div>
+				{#if dismissible}
+					<button
+						type="button"
+						onclick={close}
+						aria-label={t.current.close}
+						class="-m-1 shrink-0 p-1 text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+					>
+						<svg class="size-4" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+							<path d="m2 2 10 10M12 2 2 12" stroke="currentColor" stroke-width="1.5" />
+						</svg>
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		<div
+			class="flex-1 overflow-y-auto px-6 py-5 font-sans text-[15px] leading-relaxed text-text-secondary"
+		>
+			{@render children()}
+		</div>
+
+		{#if footer}
+			<div class="flex items-center justify-end gap-3 border-t border-hairline px-6 py-4">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+	@keyframes -global-drawer-right {
+		from {
+			transform: translateX(100%);
+		}
+	}
+	@keyframes -global-drawer-left {
+		from {
+			transform: translateX(-100%);
+		}
+	}
+	@keyframes -global-drawer-top {
+		from {
+			transform: translateY(-100%);
+		}
+	}
+	@keyframes -global-drawer-bottom {
+		from {
+			transform: translateY(100%);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		dialog {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/Drawer.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+interface Props extends HTMLDialogAttributes {
+    /** Bindable. Built on the native `<dialog>`, so it gets the top layer,
+     *  the backdrop, Escape handling and focus containment for free. */
+    open?: boolean;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    title?: string;
+    description?: string;
+    dismissible?: boolean;
+    footer?: Snippet;
+    onclose?: () => void;
+    children: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { anchored, type Placement } from '../actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../actions/dismissable.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	interface Props {
+		/** The control that opens the menu — put a `Button` in here. */
+		trigger: Snippet;
+		/** Menu contents: `MenuItem`, `MenuSeparator`, or anything else. */
+		children: Snippet;
+		open?: boolean;
+		placement?: Placement;
+		offset?: number;
+		/** Stretch the menu to the trigger's width. */
+		matchWidth?: boolean;
+		/** Close as soon as an item inside is activated. Default true. */
+		closeOnSelect?: boolean;
+		/** Accessible name for the menu. Defaults to the locale's `menu`. */
+		label?: string;
+		class?: string;
+		/** Classes for the wrapper around the trigger. */
+		triggerClass?: string;
+	}
+
+	let {
+		trigger,
+		children,
+		open = $bindable(false),
+		placement = 'bottom-start',
+		offset = 6,
+		matchWidth = false,
+		closeOnSelect = true,
+		label,
+		class: className = '',
+		triggerClass = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let anchorEl: HTMLElement | null = $state(null);
+	let menuEl: HTMLElement | null = $state(null);
+
+	/**
+	 * Wires the consumer's own trigger element rather than wrapping it in another
+	 * button: the ARIA state belongs on the real control, not on our span.
+	 */
+	function triggerBehaviour(node: HTMLElement) {
+		const toggle = () => (open = !open);
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key === 'ArrowDown' && !open) {
+				event.preventDefault();
+				open = true;
+			}
+		};
+		node.addEventListener('click', toggle);
+		node.addEventListener('keydown', onKeydown);
+		return {
+			destroy() {
+				node.removeEventListener('click', toggle);
+				node.removeEventListener('keydown', onKeydown);
+			}
+		};
+	}
+
+	$effect(() => {
+		const control = anchorEl?.querySelector('button, a, [role="button"]');
+		if (!control) return;
+		control.setAttribute('aria-haspopup', 'menu');
+		control.setAttribute('aria-expanded', String(open));
+	});
+
+	function onMenuKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' || event.key === 'Tab') {
+			if (event.key === 'Escape') event.preventDefault();
+			event.stopPropagation();
+			open = false;
+			return;
+		}
+		if (!menuEl) return;
+		navigateList(event, [
+			...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
+		]);
+	}
+
+	function onMenuClick(event: MouseEvent) {
+		if (!closeOnSelect) return;
+		if ((event.target as HTMLElement).closest('[role="menuitem"]:not([disabled])')) open = false;
+	}
+</script>
+
+<span bind:this={anchorEl} use:triggerBehaviour class="inline-flex {triggerClass}">
+	{@render trigger()}
+</span>
+
+{#if open}
+	<div
+		bind:this={menuEl}
+		use:portal
+		use:anchored={{ anchor: anchorEl, placement, offset, matchWidth }}
+		use:clickOutside={{ onoutside: () => (open = false), ignore: [anchorEl] }}
+		use:focusTrap={{ restore: true }}
+		onkeydown={onMenuKeydown}
+		onclick={onMenuClick}
+		role="menu"
+		aria-label={label ?? t.current.menu}
+		tabindex="-1"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-44 flex-col overflow-y-auto border border-hairline bg-bg py-1 font-sans {className}"
+	>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/Dropdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import { type Placement } from '../actions/anchor.js';
+interface Props {
+    /** The control that opens the menu — put a `Button` in here. */
+    trigger: Snippet;
+    /** Menu contents: `MenuItem`, `MenuSeparator`, or anything else. */
+    children: Snippet;
+    open?: boolean;
+    placement?: Placement;
+    offset?: number;
+    /** Stretch the menu to the trigger's width. */
+    matchWidth?: boolean;
+    /** Close as soon as an item inside is activated. Default true. */
+    closeOnSelect?: boolean;
+    /** Accessible name for the menu. Defaults to the locale's `menu`. */
+    label?: string;
+    class?: string;
+    /** Classes for the wrapper around the trigger. */
+    triggerClass?: string;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;