@nqmcreative/ui 0.3.0 → 0.4.1

package/dist/styles/paper/SearchInput.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'type'> {
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/**
+		 * Milliseconds to wait after the last keystroke before `onsearch` fires.
+		 * `0` fires on every one.
+		 */
+		debounce?: number;
+		/** The debounced value. The bound `value` still updates immediately. */
+		onsearch?: (value: string) => void;
+		onclear?: () => void;
+		/** Replaces the magnifier. */
+		icon?: Snippet;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		debounce = 0,
+		onsearch,
+		onclear,
+		icon,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// The timer is cleared by the effect's own teardown, so a keystroke that
+	// lands mid-wait restarts the clock rather than queueing a second call.
+	$effect(() => {
+		const next = value;
+		if (!onsearch) return;
+		if (debounce <= 0) {
+			onsearch(next);
+			return;
+		}
+		const timer = setTimeout(() => onsearch(next), debounce);
+		return () => clearTimeout(timer);
+	});
+
+	function clear() {
+		value = '';
+		onclear?.();
+	}
+</script>
+
+<Input bind:value type="search" {size} {tone} {invalid} {disabled} class={className} {...rest}>
+	{#snippet prefix()}
+		{#if icon}
+			{@render icon()}
+		{:else}
+			<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+				<circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.6" />
+				<path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+			</svg>
+		{/if}
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if value}
+			<button
+				type="button"
+				onclick={clear}
+				aria-label="Clear search"
+				class="-mr-1 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}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'type'> {
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /**
+     * Milliseconds to wait after the last keystroke before `onsearch` fires.
+     * `0` fires on every one.
+     */
+    debounce?: number;
+    /** The debounced value. The bound `value` still updates immediately. */
+    onsearch?: (value: string) => void;
+    onclear?: () => void;
+    /** Replaces the magnifier. */
+    icon?: Snippet;
+    class?: string;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/styles/paper/Sidebar.svelte

@@ -35,7 +35,6 @@
 </script>
 
 <script lang="ts">
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
@@ -69,8 +68,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const keyOf = (item: SidebarItem) => item.id ?? item.href ?? item.label;
 
 	/** Groups start open when asked, or when they contain the active item. */
@@ -141,7 +138,7 @@
 		</div>
 	{/if}
 
-	<nav aria-label={t.current.navigation} class="flex-1 overflow-y-auto p-2">
+	<nav aria-label="Navigation" class="flex-1 overflow-y-auto p-2">
 		{#each sections as section, i (section.label ?? i)}
 			<div class="flex flex-col gap-0.5 {i > 0 ? 'mt-4' : ''}">
 				{#if section.label && !collapsed}
@@ -230,7 +227,7 @@
 				<button
 					type="button"
 					onclick={() => (collapsed = !collapsed)}
-					aria-label={collapsed ? t.current.expandSidebar : t.current.collapseSidebar}
+					aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
 					class="inline-flex h-8 items-center justify-center gap-2 rounded-md font-sans text-xs text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text {focusRing} {toneRing[
 						tone
 					]}"
@@ -248,7 +245,7 @@
 							stroke-linecap="round"
 						/>
 					</svg>
-					{#if !collapsed}<span>{t.current.collapseSidebar}</span>{/if}
+					{#if !collapsed}<span>Collapse sidebar</span>{/if}
 				</button>
 			{/if}
 		</div>

package/dist/styles/paper/Spinner.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -9,12 +8,10 @@
 		size?: SpinnerSize;
 		/** Omit to inherit the parent's `currentColor` (e.g. inside a Button). */
 		tone?: Tone;
-		/** Defaults to the locale's loading string; pass `''` to hide it. */
+		/** Defaults to `Loading`; pass `''` to hide it. */
 		label?: string;
 	}
 
-	const t = useLocale();
-
 	let { size = 'md', tone, label, class: className = '', ...rest }: Props = $props();
 
 	const sizes: Record<SpinnerSize, string> = {
@@ -27,7 +24,7 @@
 
 <span
 	role="status"
-	aria-label={label ?? t.current.loading}
+	aria-label={label ?? 'Loading'}
 	class="inline-block shrink-0 animate-spin rounded-full border-current/25 border-t-current
 		{sizes[size]} {tone ? toneText[tone] : ''} {className}"
 	{...rest}

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

@@ -5,7 +5,7 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: SpinnerSize;
     /** Omit to inherit the parent's `currentColor` (e.g. inside a Button). */
     tone?: Tone;
-    /** Defaults to the locale's loading string; pass `''` to hide it. */
+    /** Defaults to `Loading`; pass `''` to hide it. */
     label?: string;
 }
 declare const Spinner: import("svelte").Component<Props, {}, "">;

package/dist/styles/paper/Table.svelte

@@ -16,7 +16,6 @@
 	import Checkbox from './Checkbox.svelte';
 	import type { Tone } from '../../core/tones.js';
 	import { nextSort, sortRows, toggleKey, type TableSort } from '../../core/table.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
 		columns: TableColumn[];
@@ -82,8 +81,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const aligns = {
 		left: 'text-left',
 		center: 'text-center',
@@ -139,14 +136,14 @@
 		>
 			<span class="font-sans text-[13px] font-semibold text-text">
 				{selected.length}
-				{t.current.selected}
+				selected
 			</span>
 			<button
 				type="button"
 				onclick={clearSelection}
 				class="rounded font-sans text-[13px] font-medium text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
-				{t.current.clear}
+				Clear selection
 			</button>
 			<div class="ml-auto flex flex-wrap items-center gap-2">
 				{@render bulkActions?.({ selected, clear: clearSelection })}
@@ -176,7 +173,7 @@
 								checked={allSelected}
 								indeterminate={someSelected}
 								{tone}
-								aria-label={t.current.selectAllRows}
+								aria-label="Select all rows"
 								onchange={toggleAll}
 							/>
 						</th>
@@ -223,7 +220,7 @@
 							colspan={columns.length + (selectable ? 1 : 0)}
 							class="px-4 py-10 text-center text-sm text-text-muted"
 						>
-							{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
+							{#if empty}{@render empty()}{:else}No data{/if}
 						</td>
 					</tr>
 				{:else}
@@ -240,7 +237,7 @@
 									<Checkbox
 										checked={isSelected}
 										{tone}
-										aria-label={t.current.selectRow}
+										aria-label="Select row"
 										onchange={() => toggleRow(row)}
 									/>
 								</td>

package/dist/styles/paper/TagsInput.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { addTag, splitTags, type TagRejection } from '../../core/tags.js';
+	import { toneFocusWithinBorder, toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		/** Bindable list of tags, in the order they were added. */
+		tags?: string[];
+		placeholder?: string;
+		/** Cap on how many may be held. `0` means no limit. */
+		max?: number;
+		/** Shortest a tag may be, after trimming. */
+		minLength?: number;
+		/** Keys that commit the tag under the caret, besides Enter. */
+		separators?: string[];
+		/** Refuse a tag that differs from an existing one only in case. */
+		caseInsensitive?: boolean;
+		/** Commit whatever is half-typed when the field loses focus. */
+		commitOnBlur?: boolean;
+		disabled?: boolean;
+		invalid?: boolean;
+		tone?: Tone;
+		/** `name` for a plain form submit — one hidden field, comma-joined. */
+		name?: string;
+		onadd?: (tag: string) => void;
+		onremove?: (tag: string) => void;
+		onreject?: (reason: TagRejection, raw: string) => void;
+		class?: string;
+	}
+
+	let {
+		tags = $bindable([]),
+		placeholder,
+		max = 0,
+		minLength = 1,
+		separators = [','],
+		caseInsensitive = true,
+		commitOnBlur = true,
+		disabled = false,
+		invalid = false,
+		tone = 'brand',
+		name,
+		onadd,
+		onremove,
+		onreject,
+		class: className = ''
+	}: Props = $props();
+
+	let draft = $state('');
+	let field: HTMLInputElement | null = $state(null);
+	/** The last refusal, cleared as soon as the next keystroke lands. */
+	let refused = $state<TagRejection | null>(null);
+
+	const full = $derived(max > 0 && tags.length >= max);
+	const rules = $derived({ max, minLength, caseInsensitive });
+
+	function commit(raw: string) {
+		const { tags: next, rejected } = addTag(tags, raw, rules);
+		if (rejected) {
+			// An empty commit is the Enter key on an empty field, not a mistake.
+			if (rejected !== 'empty') {
+				refused = rejected;
+				onreject?.(rejected, raw);
+			}
+			return false;
+		}
+		tags = next;
+		onadd?.(next[next.length - 1]);
+		return true;
+	}
+
+	function remove(index: number) {
+		const [gone] = tags.slice(index, index + 1);
+		tags = tags.filter((_, at) => at !== index);
+		if (gone !== undefined) onremove?.(gone);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		refused = null;
+
+		if (event.key === 'Enter' || separators.includes(event.key)) {
+			event.preventDefault();
+			if (commit(draft)) draft = '';
+			return;
+		}
+
+		// Empty field: Backspace peels the last chip off, the way chips behave
+		// everywhere else in this library.
+		if (event.key === 'Backspace' && draft === '' && tags.length) {
+			event.preventDefault();
+			remove(tags.length - 1);
+		}
+	}
+
+	function onPaste(event: ClipboardEvent) {
+		const text = event.clipboardData?.getData('text') ?? '';
+		const parts = splitTags(text, separators);
+		if (parts.length <= 1) return;
+
+		event.preventDefault();
+		for (const part of parts) commit(part);
+		draft = '';
+	}
+
+	function onBlur() {
+		if (commitOnBlur && draft.trim() && commit(draft)) draft = '';
+	}
+
+	const messages: Record<TagRejection, string> = $derived({
+		empty: '',
+		short: `${minLength}+`,
+		duplicate: 'Already added',
+		full: `$selected ${tags.length}/${max}`
+	});
+</script>
+
+<div class="flex w-full flex-col gap-1.5 {className}">
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+	<div
+		onclick={() => field?.focus()}
+		class="flex w-full flex-wrap items-center gap-1.5 rounded-md border bg-bg py-1.5 pr-1.5 pl-2 shadow-xs transition-colors duration-150 ease-brand-out
+			{invalid
+			? 'border-danger focus-within:border-danger'
+			: `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''}"
+	>
+		{#each tags as tag, index (tag)}
+			<span
+				class="inline-flex items-center gap-1 rounded-md py-0.5 pr-0.5 pl-2 text-xs font-medium {toneSoft[
+					tone
+				]}"
+			>
+				{tag}
+				<button
+					type="button"
+					onclick={() => remove(index)}
+					aria-label="Remove {tag}"
+					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 10 10" fill="none" aria-hidden="true">
+						<path
+							d="m1.5 1.5 7 7M8.5 1.5l-7 7"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			</span>
+		{/each}
+
+		<input
+			bind:this={field}
+			bind:value={draft}
+			{disabled}
+			readonly={full}
+			placeholder={tags.length === 0 ? (placeholder ?? 'Add a tag') : ''}
+			aria-label={placeholder ?? 'Add a tag'}
+			aria-invalid={invalid ? 'true' : undefined}
+			onkeydown={onKeydown}
+			onpaste={onPaste}
+			onblur={onBlur}
+			class="h-7 min-w-24 flex-1 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
+		/>
+
+		{#if name}
+			<input type="hidden" {name} value={tags.join(',')} />
+		{/if}
+	</div>
+
+	{#if refused && messages[refused]}
+		<span class="text-xs font-medium text-danger">{messages[refused]}</span>
+	{:else if max}
+		<span class="text-xs text-text-muted tabular-nums">{tags.length}/{max}</span>
+	{/if}
+</div>

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

@@ -0,0 +1,29 @@
+import { type TagRejection } from '../../core/tags.js';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    /** Bindable list of tags, in the order they were added. */
+    tags?: string[];
+    placeholder?: string;
+    /** Cap on how many may be held. `0` means no limit. */
+    max?: number;
+    /** Shortest a tag may be, after trimming. */
+    minLength?: number;
+    /** Keys that commit the tag under the caret, besides Enter. */
+    separators?: string[];
+    /** Refuse a tag that differs from an existing one only in case. */
+    caseInsensitive?: boolean;
+    /** Commit whatever is half-typed when the field loses focus. */
+    commitOnBlur?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    tone?: Tone;
+    /** `name` for a plain form submit — one hidden field, comma-joined. */
+    name?: string;
+    onadd?: (tag: string) => void;
+    onremove?: (tag: string) => void;
+    onreject?: (reason: TagRejection, raw: string) => void;
+    class?: string;
+}
+declare const TagsInput: import("svelte").Component<Props, {}, "tags">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/styles/paper/ThemeToggle.svelte

@@ -10,7 +10,6 @@
 		storedTheme,
 		type Theme
 	} from '../../core/theme.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	interface Props {
 		/** Bindable. `'system'` follows the OS until the visitor chooses. */
@@ -33,8 +32,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	$effect(() => {
 		applyTheme(theme);
 		if (persist) persistTheme(theme);
@@ -50,8 +47,8 @@
 	}
 
 	const options = $derived([
-		{ value: 'light' as Theme, label: t.current.lightMode },
-		{ value: 'dark' as Theme, label: t.current.darkMode },
+		{ value: 'light' as Theme, label: 'Light' },
+		{ value: 'dark' as Theme, label: 'Dark' },
 		{ value: 'system' as Theme, label: 'Auto' }
 	]);
 </script>
@@ -95,7 +92,7 @@
 {#if variant === 'segmented'}
 	<div
 		role="radiogroup"
-		aria-label={t.current.toggleTheme}
+		aria-label="Toggle theme"
 		class="inline-flex items-center gap-1 rounded-lg border border-hairline bg-bg-inset p-1 {className}"
 	>
 		{#each options as option (option.value)}
@@ -119,8 +116,8 @@
 	<button
 		type="button"
 		onclick={cycle}
-		aria-label="{t.current.toggleTheme} ({theme})"
-		title={t.current.toggleTheme}
+		aria-label="Toggle theme ({theme})"
+		title="Toggle theme"
 		class="inline-flex size-9 items-center justify-center rounded-md border border-hairline bg-bg text-text-secondary shadow-xs transition-colors duration-150 ease-brand-out hover:bg-bg-alt hover:text-text {focusRing} {toneRing[
 			tone
 		]} {className}"

package/dist/styles/paper/TimeInput.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { clampTime, formatTime, parseTime, stepTime } from '../../core/time.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<
+		HTMLInputAttributes,
+		'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'
+	> {
+		/** Bindable `HH:MM`, or `''` for empty. */
+		value?: string;
+		/** Inclusive bounds, `HH:MM`. */
+		min?: string;
+		max?: string;
+		/** Minutes one press of a stepper moves, and what typing snaps to. */
+		step?: number;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Hide the steppers and let the field be typed into only. */
+		steppers?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		min,
+		max,
+		step = 15,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		steppers = true,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// Typed text and the bound value are separate until the field settles:
+	// `9` is a valid thing to be halfway through typing and an invalid time.
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	function settle() {
+		editing = false;
+		const minutes = parseTime(text);
+		value = minutes === null ? '' : formatTime(clampTime(minutes, min, max, step));
+		text = value;
+	}
+
+	function nudge(direction: 1 | -1) {
+		value = stepTime(value, direction, step, min, max);
+		text = value;
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			nudge(1);
+		} else if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			nudge(-1);
+		} else if (event.key === 'Enter') {
+			settle();
+		}
+	}
+
+	const stepper =
+		'grid size-6 place-items-center rounded text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current';
+</script>
+
+<Input
+	bind:value={text}
+	{size}
+	{tone}
+	{invalid}
+	{disabled}
+	inputmode="numeric"
+	placeholder="--:--"
+	onfocus={() => (editing = true)}
+	onblur={settle}
+	onkeydown={onKeydown}
+	class="[&_input]:tabular-nums {className}"
+	{...rest}
+>
+	{#snippet prefix()}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<circle
+				cx="10"
+				cy="10"
+				r="6.5"
+				stroke="currentColor"
+				stroke-width="1.6"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M10 6.5V10l2.5 1.5"
+				stroke="currentColor"
+				stroke-width="1.6"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if steppers}
+			<span class="-mr-2 flex flex-col">
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(1)}
+					aria-label="Increase"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="m3 7.5 3-3 3 3"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(-1)}
+					aria-label="Decrease"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="m3 4.5 3 3 3-3"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</span>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'min' | 'max' | 'step'> {
+    /** Bindable `HH:MM`, or `''` for empty. */
+    value?: string;
+    /** Inclusive bounds, `HH:MM`. */
+    min?: string;
+    max?: string;
+    /** Minutes one press of a stepper moves, and what typing snaps to. */
+    step?: number;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Hide the steppers and let the field be typed into only. */
+    steppers?: boolean;
+    class?: string;
+}
+declare const TimeInput: import("svelte").Component<Props, {}, "value">;
+type TimeInput = ReturnType<typeof TimeInput>;
+export default TimeInput;