@nqmcreative/ui 0.1.1 → 0.2.1

package/dist/styles/paper/LocaleProvider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { provideLocale, type Locale } from '../../core/locale.svelte.js';
+
+	interface Props {
+		/** Full locale or just the keys you want to change. */
+		locale: Partial<Locale>;
+		children: Snippet;
+	}
+
+	let { locale, children }: Props = $props();
+
+	// Seeded during init so the first render already has the right strings —
+	// an effect would leave one frame (and the SSR output) in the default
+	// language. The effect below only handles later changes, e.g. a switcher.
+	// svelte-ignore state_referenced_locally
+	const store = provideLocale(locale);
+
+	$effect(() => {
+		store.replace(locale);
+	});
+</script>
+
+{@render children()}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type Locale } from '../../core/locale.svelte.js';
+interface Props {
+    /** Full locale or just the keys you want to change. */
+    locale: Partial<Locale>;
+    children: Snippet;
+}
+declare const LocaleProvider: import("svelte").Component<Props, {}, "">;
+type LocaleProvider = ReturnType<typeof LocaleProvider>;
+export default LocaleProvider;

package/dist/styles/paper/LogoCloud.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Logo {
+		name: string;
+		src?: string;
+		href?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		title?: string;
+		/** Without `src` the name is set in the heading face — fine for wordmarks. */
+		logos?: Logo[];
+		/** Dim until hovered, so the row does not compete with the headline. */
+		muted?: boolean;
+		/** Your own markup instead of `logos`. */
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		logos = [],
+		muted = true,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<section class="w-full px-6 py-14 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col items-center gap-8">
+		{#if title}
+			<p class="text-center font-sans text-[13px] font-medium text-text-muted">{title}</p>
+		{/if}
+
+		<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
+			{#if children}
+				{@render children()}
+			{:else}
+				{#each logos as logo (logo.name)}
+					<svelte:element
+						this={logo.href ? 'a' : 'div'}
+						href={logo.href}
+						class="flex items-center rounded transition-all duration-200 ease-brand-out {muted
+							? 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0'
+							: ''}"
+					>
+						{#if logo.src}
+							<img src={logo.src} alt={logo.name} class="h-7 w-auto object-contain" />
+						{:else}
+							<span class="font-heading text-lg font-semibold tracking-tight text-text-secondary">
+								{logo.name}
+							</span>
+						{/if}
+					</svelte:element>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface Logo {
+    name: string;
+    src?: string;
+    href?: string;
+}
+interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    /** Without `src` the name is set in the heading face — fine for wordmarks. */
+    logos?: Logo[];
+    /** Dim until hovered, so the row does not compete with the headline. */
+    muted?: boolean;
+    /** Your own markup instead of `logos`. */
+    children?: Snippet;
+}
+declare const LogoCloud: import("svelte").Component<Props, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

package/dist/styles/paper/MenuItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLButtonAttributes {
+		/** Renders an `<a>` instead of a `<button>`. */
+		href?: string;
+		tone?: Tone;
+		/** Leading glyph. */
+		icon?: Snippet;
+		/** Right-aligned hint — a keyboard shortcut, a count. */
+		shortcut?: string;
+		/** Shows a check on the left and marks the item as chosen. */
+		selected?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		href,
+		tone = 'neutral',
+		icon,
+		shortcut,
+		selected = false,
+		disabled = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	type={href ? undefined : 'button'}
+	role="menuitem"
+	disabled={href ? undefined : disabled}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={disabled ? undefined : -1}
+	class="mx-1 flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
+		{tone === 'neutral'
+		? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
+		: `${toneText[tone]} ${toneSoftHover[tone]}`}
+		{className}"
+	{...rest}
+>
+	{#if selected}
+		<svg class="size-3.5 shrink-0" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+			<path
+				d="m2 7 3.2 3.2L12 3.6"
+				stroke="currentColor"
+				stroke-width="1.8"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{:else if icon}
+		<span class="flex size-3.5 shrink-0 items-center justify-center">{@render icon()}</span>
+	{/if}
+	<span class="min-w-0 flex-1 truncate">{@render children()}</span>
+	{#if shortcut}
+		<span class="shrink-0 text-[11px] text-text-muted">{shortcut}</span>
+	{/if}
+</svelte:element>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLButtonAttributes {
+    /** Renders an `<a>` instead of a `<button>`. */
+    href?: string;
+    tone?: Tone;
+    /** Leading glyph. */
+    icon?: Snippet;
+    /** Right-aligned hint — a keyboard shortcut, a count. */
+    shortcut?: string;
+    /** Shows a check on the left and marks the item as chosen. */
+    selected?: boolean;
+    children: Snippet;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/styles/paper/MenuSeparator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** Optional caption, rendered as a section heading above the rule. */
+		label?: string;
+	}
+
+	let { label, class: className = '', ...rest }: Props = $props();
+</script>
+
+{#if label}
+	<div
+		class="mt-1 px-3 pt-2 pb-1 font-sans text-[11px] font-semibold text-text-muted {className}"
+		role="presentation"
+		{...rest}
+	>
+		{label}
+	</div>
+{:else}
+	<div role="separator" class="my-1 h-px bg-hairline {className}" {...rest}></div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Optional caption, rendered as a section heading above the rule. */
+    label?: string;
+}
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/styles/paper/Modal.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
+
+	export type ModalSize = 'sm' | 'md' | 'lg';
+
+	interface Props extends HTMLDialogAttributes {
+		/** Bindable. Uses the native `<dialog>` top layer + backdrop. */
+		open?: boolean;
+		title?: string;
+		description?: string;
+		size?: ModalSize;
+		/** Clicking the backdrop or pressing Escape closes the dialog. */
+		dismissible?: boolean;
+		/** Show the header's close button. Defaults to `dismissible` — turn it off
+		 *  when the footer already carries the way out. */
+		showClose?: boolean;
+		footer?: Snippet;
+		onclose?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		size = 'md',
+		dismissible = true,
+		showClose,
+		footer,
+		onclose,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+	let dialog: HTMLDialogElement | null = $state(null);
+
+	const closable = $derived(showClose ?? dismissible);
+
+	const sizes: Record<ModalSize, string> = {
+		sm: 'max-w-sm',
+		md: 'max-w-lg',
+		lg: 'max-w-2xl'
+	};
+
+	$effect(() => syncDialog(dialog, open));
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	function onBackdrop(event: MouseEvent) {
+		if (!dismissible) return;
+		if (isBackdropClick(event, dialog)) close();
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onclose={close}
+	onclick={onBackdrop}
+	oncancel={(event) => {
+		if (!dismissible) event.preventDefault();
+	}}
+	class="m-auto w-[calc(100%-2rem)] rounded-xl border border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px] {sizes[
+		size
+	]} {className}"
+	{...rest}
+>
+	<div class="flex flex-col">
+		{#if title || closable}
+			<div class="flex items-start gap-4 px-6 pt-5 pb-3">
+				<div class="flex min-w-0 flex-1 flex-col gap-1">
+					{#if title}
+						<h2 class="font-heading text-base font-semibold text-text">{title}</h2>
+					{/if}
+					{#if description}
+						<p class="font-sans text-[13px] text-text-muted">{description}</p>
+					{/if}
+				</div>
+				{#if closable}
+					<button
+						type="button"
+						onclick={close}
+						aria-label={t.current.close}
+						class="-m-1 shrink-0 rounded-md 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-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.6"
+								stroke-linecap="round"
+							/>
+						</svg>
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="px-6 py-2 pb-5 font-sans text-sm leading-relaxed text-text-secondary">
+			{@render children()}
+		</div>
+
+		{#if footer}
+			<div
+				class="flex items-center justify-end gap-2 rounded-b-xl border-t border-hairline bg-bg-alt px-6 py-4"
+			>
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+</dialog>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export type ModalSize = 'sm' | 'md' | 'lg';
+interface Props extends HTMLDialogAttributes {
+    /** Bindable. Uses the native `<dialog>` top layer + backdrop. */
+    open?: boolean;
+    title?: string;
+    description?: string;
+    size?: ModalSize;
+    /** Clicking the backdrop or pressing Escape closes the dialog. */
+    dismissible?: boolean;
+    /** Show the header's close button. Defaults to `dismissible` — turn it off
+     *  when the footer already carries the way out. */
+    showClose?: boolean;
+    footer?: Snippet;
+    onclose?: () => void;
+    children: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/styles/paper/MultiSelect.svelte

@@ -0,0 +1,287 @@
+<script module lang="ts">
+	export interface MultiSelectOption {
+		value: string;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+		group?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, portal } from '../../core/actions/dismissable.js';
+	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		/** Bindable — the `value` of every chosen option. */
+		value?: string[];
+		options: MultiSelectOption[];
+		placeholder?: string;
+		emptyText?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		disabled?: boolean;
+		clearable?: boolean;
+		/** Cap on how many may be chosen. `0` means no limit. */
+		max?: number;
+		/** Collapse to "n selected" past this many chips. `0` shows them all. */
+		maxChips?: number;
+		id?: string;
+		/** Submits one hidden input per value. */
+		name?: string;
+		onchange?: (value: string[]) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable([]),
+		options,
+		placeholder,
+		emptyText,
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		clearable = true,
+		max = 0,
+		maxChips = 0,
+		id,
+		name,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let open = $state(false);
+	let query = $state('');
+	let wrapper: HTMLElement | null = $state(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+	let listEl: HTMLElement | null = $state(null);
+
+	const chosen = $derived(
+		value.map((v) => options.find((o) => o.value === v)).filter(Boolean) as MultiSelectOption[]
+	);
+	const full = $derived(max > 0 && value.length >= max);
+	const collapsed = $derived(maxChips > 0 && chosen.length > maxChips);
+
+	const matches = $derived(
+		matchQuery(options, query, (option) => `${option.label} ${option.description ?? ''}`)
+	);
+
+	const groups = $derived(groupItems(matches));
+	const flat = $derived(groups.flatMap(([, items]) => items));
+
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
+	function toggle(option: MultiSelectOption) {
+		const has = value.includes(option.value);
+		if (option.disabled || (!has && full)) return;
+		value = has ? value.filter((v) => v !== option.value) : [...value, option.value];
+		onchange?.(value);
+	}
+
+	function remove(option: MultiSelectOption) {
+		value = value.filter((v) => v !== option.value);
+		onchange?.(value);
+	}
+
+	function move(step: number) {
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				if (!open) open = true;
+				else move(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				if (open) move(-1);
+				break;
+			case 'Enter':
+				if (open && cursor.current) {
+					event.preventDefault();
+					toggle(cursor.current);
+				}
+				break;
+			case 'Backspace':
+				// Empty query: peel the last chip off, the way tag inputs behave.
+				if (!query && chosen.length) {
+					event.preventDefault();
+					remove(chosen[chosen.length - 1]);
+				}
+				break;
+			case 'Escape':
+				if (open) {
+					event.preventDefault();
+					event.stopPropagation();
+					open = false;
+					query = '';
+				}
+				break;
+			case 'Tab':
+				open = false;
+				break;
+		}
+	}
+</script>
+
+<div
+	bind:this={wrapper}
+	class="flex w-full flex-wrap items-center gap-1.5 rounded-md border bg-bg py-1.5 pr-1 pl-2 shadow-xs transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+>
+	{#if collapsed}
+		<span
+			class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium {toneSoft[tone]}"
+		>
+			{chosen.length}
+			{t.current.selected}
+		</span>
+	{:else}
+		{#each chosen as option (option.value)}
+			<span
+				class="inline-flex items-center gap-1 rounded-md py-0.5 pr-0.5 pl-2 text-xs font-medium {toneSoft[
+					tone
+				]}"
+			>
+				{option.label}
+				<button
+					type="button"
+					onclick={() => remove(option)}
+					aria-label="{t.current.removeItem} {option.label}"
+					class="inline-flex size-4 items-center justify-center rounded transition-colors duration-150 hover:bg-bg/70 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current"
+				>
+					<svg class="size-2.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+						<path
+							d="m2 2 10 10M12 2 2 12"
+							stroke="currentColor"
+							stroke-width="2.2"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			</span>
+		{/each}
+	{/if}
+
+	<input
+		bind:this={inputEl}
+		bind:value={query}
+		{id}
+		{disabled}
+		type="text"
+		role="combobox"
+		autocomplete="off"
+		aria-expanded={open}
+		aria-controls="{id ?? 'multiselect'}-listbox"
+		aria-invalid={invalid ? 'true' : undefined}
+		placeholder={chosen.length ? '' : (placeholder ?? t.current.comboboxPlaceholder)}
+		oninput={() => {
+			open = true;
+			cursor.index = 0;
+		}}
+		onfocus={() => (open = true)}
+		onkeydown={onKeydown}
+		class="h-7 min-w-24 flex-1 bg-transparent px-1 font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
+	/>
+
+	{#if name}
+		{#each value as v (v)}<input type="hidden" {name} value={v} />{/each}
+	{/if}
+
+	{#if clearable && chosen.length && !disabled}
+		<button
+			type="button"
+			onclick={() => {
+				value = [];
+				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}
+</div>
+
+{#if open}
+	<div
+		bind:this={listEl}
+		use:portal
+		use:anchored={{ anchor: wrapper, placement: 'bottom-start', offset: 4, matchWidth: true }}
+		use:clickOutside={{ onoutside: () => (open = false), ignore: [wrapper] }}
+		id="{id ?? 'multiselect'}-listbox"
+		role="listbox"
+		aria-multiselectable="true"
+		class="z-50 max-h-64 overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg"
+	>
+		{#if flat.length === 0}
+			<p class="px-3 py-6 text-center text-sm text-text-muted">
+				{emptyText ?? t.current.noMatches}
+			</p>
+		{:else}
+			{#each groups as [group, items] (group)}
+				{#if group}
+					<p class="px-3 pt-2 pb-1 text-[11px] font-semibold text-text-muted">{group}</p>
+				{/if}
+				{#each items as option (option.value)}
+					{@const index = flat.indexOf(option)}
+					{@const checked = value.includes(option.value)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						data-index={index}
+						role="option"
+						tabindex="-1"
+						aria-selected={checked}
+						aria-disabled={option.disabled || (full && !checked)}
+						onclick={() => toggle(option)}
+						onpointermove={() => (cursor.index = index)}
+						class="mx-1 flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 text-sm transition-colors duration-100
+							{option.disabled || (full && !checked) ? 'pointer-events-none opacity-40' : ''}
+							{index === active ? toneSoft[tone] : 'text-text-secondary'}"
+					>
+						<span
+							class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border transition-colors duration-100
+								{checked ? `border-transparent ${toneText[tone]}` : 'border-hairline-strong'}"
+						>
+							{#if checked}
+								<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+									<path
+										d="m2 6 2.6 2.6L10 3.2"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							{/if}
+						</span>
+						<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+							<span class="truncate">{option.label}</span>
+							{#if option.description}
+								<span class="truncate text-xs text-text-muted">{option.description}</span>
+							{/if}
+						</span>
+					</div>
+				{/each}
+			{/each}
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,31 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    group?: string;
+}
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    /** Bindable — the `value` of every chosen option. */
+    value?: string[];
+    options: MultiSelectOption[];
+    placeholder?: string;
+    emptyText?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    /** Cap on how many may be chosen. `0` means no limit. */
+    max?: number;
+    /** Collapse to "n selected" past this many chips. `0` shows them all. */
+    maxChips?: number;
+    id?: string;
+    /** Submits one hidden input per value. */
+    name?: string;
+    onchange?: (value: string[]) => void;
+    class?: string;
+}
+declare const MultiSelect: import("svelte").Component<Props, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;