@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/styles/paper/CommandPalette.svelte

@@ -0,0 +1,209 @@
+<script module lang="ts">
+	export interface CommandItem {
+		id: string;
+		label: string;
+		/** Second line under the label. */
+		description?: string;
+		/** Items sharing a group are rendered under one heading. */
+		group?: string;
+		/** Right-aligned hint, e.g. `'⌘K'`. */
+		shortcut?: string;
+		/** Extra words to match on that aren't in the label. */
+		keywords?: string;
+		disabled?: boolean;
+		onselect?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import { focusTrap } from '../../core/actions/dismissable.js';
+	import { syncDialog } from '../../core/dialog.svelte.js';
+	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
+	import Kbd from './Kbd.svelte';
+
+	interface Props {
+		open?: boolean;
+		items: CommandItem[];
+		placeholder?: string;
+		emptyText?: string;
+		tone?: Tone;
+		/**
+		 * Key that opens the palette with Cmd/Ctrl held. Default `'k'`.
+		 * Pass `null` to wire your own trigger only.
+		 */
+		hotkey?: string | null;
+		onselect?: (item: CommandItem) => void;
+		class?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		items,
+		placeholder,
+		emptyText,
+		tone = 'brand',
+		hotkey = 'k',
+		onselect,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let dialog: HTMLDialogElement | null = $state(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+	let listEl: HTMLElement | null = $state(null);
+	let query = $state('');
+
+	const matches = $derived(
+		matchQuery(
+			items,
+			query,
+			(item) => `${item.label} ${item.description ?? ''} ${item.keywords ?? ''} ${item.group ?? ''}`
+		)
+	);
+
+	const groups = $derived(groupItems(matches));
+	const flat = $derived(groups.flatMap(([, group]) => group));
+
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
+	$effect(() => {
+		if (!dialog) return;
+		const wasOpen = dialog.open;
+		syncDialog(dialog, open);
+		if (open && !wasOpen) {
+			query = '';
+			cursor.reset();
+			queueMicrotask(() => inputEl?.focus());
+		}
+	});
+
+	$effect(() => {
+		if (!hotkey) return;
+		const onKeydown = (event: KeyboardEvent) => {
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === hotkey.toLowerCase()) {
+				event.preventDefault();
+				open = !open;
+			}
+		};
+		window.addEventListener('keydown', onKeydown);
+		return () => window.removeEventListener('keydown', onKeydown);
+	});
+
+	function run(item: CommandItem) {
+		if (item.disabled) return;
+		open = false;
+		item.onselect?.();
+		onselect?.(item);
+	}
+
+	function move(step: number) {
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				move(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				move(-1);
+				break;
+			case 'Enter':
+				if (cursor.current) {
+					event.preventDefault();
+					run(cursor.current);
+				}
+				break;
+			case 'Escape':
+				event.preventDefault();
+				open = false;
+				break;
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onclose={() => (open = false)}
+	onclick={(event) => {
+		if (event.target === dialog) open = false;
+	}}
+	class="mx-auto mt-[12vh] mb-auto w-[min(36rem,calc(100vw-2rem))] max-w-none rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {className}"
+>
+	<div use:focusTrap={{ autofocus: false }} onkeydown={onKeydown} role="none" class="flex flex-col">
+		<div class="flex items-center gap-3 border-b border-hairline px-4">
+			<svg
+				class="size-4 shrink-0 text-text-muted"
+				viewBox="0 0 16 16"
+				fill="none"
+				aria-hidden="true"
+			>
+				<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5" />
+				<path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+			</svg>
+			<input
+				bind:this={inputEl}
+				bind:value={query}
+				oninput={() => cursor.reset()}
+				type="text"
+				autocomplete="off"
+				aria-label={placeholder ?? t.current.commandPlaceholder}
+				placeholder={placeholder ?? t.current.commandPlaceholder}
+				class="h-12 w-full min-w-0 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
+			/>
+			<Kbd>esc</Kbd>
+		</div>
+
+		<div
+			bind:this={listEl}
+			role="listbox"
+			aria-label="Commands"
+			class="max-h-80 overflow-y-auto py-1"
+		>
+			{#if flat.length === 0}
+				<p class="px-4 py-10 text-center font-sans text-sm text-text-muted">
+					{emptyText ?? t.current.noResults}
+				</p>
+			{:else}
+				{#each groups as [group, groupItems] (group)}
+					{#if group}
+						<p class="px-4 pt-3 pb-1 text-[11px] font-semibold text-text-muted">{group}</p>
+					{/if}
+					{#each groupItems as item (item.id)}
+						{@const index = flat.indexOf(item)}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							data-index={index}
+							role="option"
+							tabindex="-1"
+							aria-selected={index === active}
+							aria-disabled={item.disabled}
+							onclick={() => run(item)}
+							onpointermove={() => (cursor.index = index)}
+							class="mx-2 flex cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 font-sans text-sm transition-colors duration-100
+								{item.disabled ? 'pointer-events-none opacity-40' : ''}
+								{index === active ? toneSoft[tone] : 'text-text-secondary'}"
+						>
+							<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+								<span class="truncate">{item.label}</span>
+								{#if item.description}
+									<span class="truncate text-xs text-text-muted">{item.description}</span>
+								{/if}
+							</span>
+							{#if item.shortcut}
+								<span class="shrink-0 text-[11px] text-text-muted">{item.shortcut}</span>
+							{/if}
+						</div>
+					{/each}
+				{/each}
+			{/if}
+		</div>
+	</div>
+</dialog>

package/dist/styles/paper/CommandPalette.svelte.d.ts

@@ -0,0 +1,32 @@
+export interface CommandItem {
+    id: string;
+    label: string;
+    /** Second line under the label. */
+    description?: string;
+    /** Items sharing a group are rendered under one heading. */
+    group?: string;
+    /** Right-aligned hint, e.g. `'⌘K'`. */
+    shortcut?: string;
+    /** Extra words to match on that aren't in the label. */
+    keywords?: string;
+    disabled?: boolean;
+    onselect?: () => void;
+}
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    open?: boolean;
+    items: CommandItem[];
+    placeholder?: string;
+    emptyText?: string;
+    tone?: Tone;
+    /**
+     * Key that opens the palette with Cmd/Ctrl held. Default `'k'`.
+     * Pass `null` to wire your own trigger only.
+     */
+    hotkey?: string | null;
+    onselect?: (item: CommandItem) => void;
+    class?: string;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/styles/paper/ConfirmDialog.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import Modal from './Modal.svelte';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** Drives the confirm button and the glyph. `danger` for destructive acts. */
+		tone?: Tone;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		/** Spins the confirm button and blocks dismissal while the action runs. */
+		loading?: boolean;
+		/** Awaited — the dialog stays open and busy until it settles. */
+		onconfirm?: () => void | Promise<void>;
+		oncancel?: () => void;
+		icon?: Snippet;
+		/** Extra content between the description and the buttons. */
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		tone = 'danger',
+		confirmLabel,
+		cancelLabel,
+		loading = $bindable(false),
+		onconfirm,
+		oncancel,
+		icon,
+		children
+	}: Props = $props();
+
+	const t = useLocale();
+
+	async function confirm() {
+		try {
+			loading = true;
+			await onconfirm?.();
+			open = false;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function cancel() {
+		if (loading) return;
+		open = false;
+		oncancel?.();
+	}
+</script>
+
+<Modal
+	bind:open
+	size="sm"
+	dismissible={!loading}
+	showClose={false}
+	onclose={() => (loading = false)}
+>
+	<div class="flex items-start gap-4">
+		<span class="flex size-10 shrink-0 items-center justify-center rounded-full {toneSoft[tone]}">
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<svg class="size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.5" />
+					<path d="M10 5.75v5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+					<circle cx="10" cy="14" r="1" fill="currentColor" />
+				</svg>
+			{/if}
+		</span>
+		<div class="flex min-w-0 flex-1 flex-col gap-1.5">
+			<h2 class="font-heading text-base font-semibold text-text">{title}</h2>
+			{#if description}
+				<p class="text-[13px] leading-relaxed text-text-secondary">{description}</p>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+
+	{#snippet footer()}
+		<Button variant="outline" tone="neutral" onclick={cancel} disabled={loading}>
+			{cancelLabel ?? t.current.cancel}
+		</Button>
+		<Button {tone} onclick={confirm} {loading}>
+			{confirmLabel ?? t.current.confirm}
+		</Button>
+	{/snippet}
+</Modal>

package/dist/styles/paper/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Drives the confirm button and the glyph. `danger` for destructive acts. */
+    tone?: Tone;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Spins the confirm button and blocks dismissal while the action runs. */
+    loading?: boolean;
+    /** Awaited — the dialog stays open and busy until it settles. */
+    onconfirm?: () => void | Promise<void>;
+    oncancel?: () => void;
+    icon?: Snippet;
+    /** Extra content between the description and the buttons. */
+    children?: Snippet;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "open" | "loading">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/styles/paper/ContextMenu.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
+	import { menuItems } from '../../core/trigger.js';
+	import { useLocale } from '../../core/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;
+		}
+		navigateList(event, menuItems(menuEl));
+	}
+</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-48 flex-col overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg {menuClass}"
+	>
+		{@render menu()}
+	</div>
+{/if}

package/dist/styles/paper/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/styles/paper/DatePicker.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, portal } from '../../core/actions/dismissable.js';
+	import { dateHint } from '../../core/calendar.js';
+	import { formatISO, parseFormatted } from '../../core/date.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/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 ?? dateHint(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 rounded-md border bg-bg pr-1 pl-3 shadow-xs transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline-strong ${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-10 w-full min-w-0 bg-transparent font-sans text-sm 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 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset 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.6"
+					stroke-linecap="round"
+				/>
+			</svg>
+		</button>
+	{/if}
+
+	<button
+		type="button"
+		{disabled}
+		onclick={() => (open = !open)}
+		aria-label={t.current.selectDate}
+		aria-expanded={open}
+		class="shrink-0 rounded p-1.5 text-text-muted transition-colors duration-150 hover:bg-bg-inset 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" rx="2" stroke="currentColor" stroke-width="1.4" />
+			<path
+				d="M3 8.5h14M7 3v3M13 3v3"
+				stroke="currentColor"
+				stroke-width="1.4"
+				stroke-linecap="round"
+			/>
+		</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 rounded-lg border border-hairline bg-bg shadow-lg"
+	>
+		<Calendar
+			bind:value
+			{min}
+			{max}
+			{isDisabled}
+			{weekStart}
+			{tone}
+			onselect={(next) => {
+				editing = false;
+				open = false;
+				onchange?.(next);
+				inputEl?.focus();
+			}}
+		/>
+	</div>
+{/if}

package/dist/styles/paper/DatePicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Tone } from '../../core/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;