@nqmcreative/ui 0.2.3 → 0.4.0

package/dist/styles/matte/Table.svelte

@@ -32,6 +32,16 @@
 		/** Header stays put while the body scrolls — pair with a `max-h-*` class. */
 		stickyHeader?: boolean;
 
+		/** Bar above the table — a title, a search field, a filter row. */
+		header?: Snippet;
+		/** Bar below the table — pagination, a total, a summary line. */
+		footer?: Snippet;
+		/**
+		 * Shown in place of `header` while rows are ticked, after the count and the
+		 * clear button. Passing it is what turns the bulk bar on.
+		 */
+		bulkActions?: Snippet<[{ selected: string[]; clear: () => void }]>;
+
 		/** Bindable. Set it to sort; leave `sortable` columns to drive it. */
 		sort?: TableSort | null;
 		/** Sort the rows here rather than refetching them server-side. Default true. */
@@ -57,6 +67,9 @@
 		hoverable = true,
 		compact = false,
 		stickyHeader = false,
+		header,
+		footer,
+		bulkActions,
 		sort = $bindable(null),
 		sortLocally = true,
 		onsort,
@@ -106,109 +119,152 @@
 		selected = toggleKey(selected, keyOf(row));
 		onselect?.(selected);
 	}
+
+	function clearSelection() {
+		selected = [];
+		onselect?.(selected);
+	}
+
+	/** The bulk bar takes the header's place, so only one of the two is up. */
+	const bulkBar = $derived(selectable && bulkActions !== undefined && selected.length > 0);
 </script>
 
-<div class="w-full overflow-auto border border-hairline {className}" {...rest}>
-	<table class="w-full border-collapse font-sans text-[15px]">
-		{#if caption}
-			<caption
-				class="border-b border-hairline px-3.5 py-2.5 text-left font-sans text-sm text-text-muted"
+<div class="flex w-full flex-col overflow-hidden border border-hairline {className}" {...rest}>
+	{#if bulkBar}
+		<div
+			class="flex flex-wrap items-center gap-3 border-b border-hairline bg-bg-inset px-3.5 py-2.5"
+		>
+			<span class="font-mono text-xs font-medium tracking-wide text-text uppercase">
+				{selected.length}
+				{t.current.selected}
+			</span>
+			<button
+				type="button"
+				onclick={clearSelection}
+				class="font-mono text-xs tracking-wide text-text-muted uppercase transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
-				{caption}
-			</caption>
-		{/if}
-		<thead class={stickyHeader ? 'sticky top-0 z-10' : ''}>
-			<tr class="border-b border-hairline bg-bg-alt">
-				{#if selectable}
-					<th scope="col" class="w-10 {pad}">
-						<Checkbox
-							checked={allSelected}
-							indeterminate={someSelected}
-							{tone}
-							aria-label={t.current.selectAllRows}
-							onchange={toggleAll}
-						/>
-					</th>
-				{/if}
-				{#each columns as column (column.key)}
-					<th
-						scope="col"
-						aria-sort={sort?.key === column.key
-							? sort.direction === 'asc'
-								? 'ascending'
-								: 'descending'
-							: undefined}
-						class="font-mono text-xs font-medium tracking-wide text-text-muted uppercase {pad} {aligns[
-							column.align ?? 'left'
-						]} {column.class ?? ''}"
-					>
-						{#if column.sortable}
-							<button
-								type="button"
-								onclick={() => toggleSort(column)}
-								class="inline-flex items-center gap-1.5 uppercase transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+				{t.current.clear}
+			</button>
+			<div class="ml-auto flex flex-wrap items-center gap-2">
+				{@render bulkActions?.({ selected, clear: clearSelection })}
+			</div>
+		</div>
+	{:else if header}
+		<div
+			class="flex flex-wrap items-center gap-3 border-b border-hairline px-3.5 py-2.5 font-sans text-sm text-text-secondary"
+		>
+			{@render header()}
+		</div>
+	{/if}
+	<div class="min-h-0 w-full flex-1 overflow-auto">
+		<table class="w-full border-collapse font-sans text-[15px]">
+			{#if caption}
+				<caption
+					class="border-b border-hairline px-3.5 py-2.5 text-left font-sans text-sm text-text-muted"
+				>
+					{caption}
+				</caption>
+			{/if}
+			<thead class={stickyHeader ? 'sticky top-0 z-10' : ''}>
+				<tr class="border-b border-hairline bg-bg-alt">
+					{#if selectable}
+						<th scope="col" class="w-10 {pad}">
+							<Checkbox
+								checked={allSelected}
+								indeterminate={someSelected}
+								{tone}
+								aria-label={t.current.selectAllRows}
+								onchange={toggleAll}
+							/>
+						</th>
+					{/if}
+					{#each columns as column (column.key)}
+						<th
+							scope="col"
+							aria-sort={sort?.key === column.key
+								? sort.direction === 'asc'
+									? 'ascending'
+									: 'descending'
+								: undefined}
+							class="font-mono text-xs font-medium tracking-wide text-text-muted uppercase {pad} {aligns[
+								column.align ?? 'left'
+							]} {column.class ?? ''}"
+						>
+							{#if column.sortable}
+								<button
+									type="button"
+									onclick={() => toggleSort(column)}
+									class="inline-flex items-center gap-1.5 uppercase transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
 									{sort?.key === column.key ? 'text-text' : ''}"
-							>
+								>
+									{column.label}
+									<span class="text-[9px] leading-none" aria-hidden="true">
+										{#if sort?.key === column.key}
+											{sort.direction === 'asc' ? '▲' : '▼'}
+										{:else}
+											⇅
+										{/if}
+									</span>
+								</button>
+							{:else}
 								{column.label}
-								<span class="text-[9px] leading-none" aria-hidden="true">
-									{#if sort?.key === column.key}
-										{sort.direction === 'asc' ? '▲' : '▼'}
-									{:else}
-										⇅
-									{/if}
-								</span>
-							</button>
-						{:else}
-							{column.label}
-						{/if}
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#if sorted.length === 0}
-				<tr>
-					<td
-						colspan={columns.length + (selectable ? 1 : 0)}
-						class="px-3.5 py-10 text-center text-sm text-text-muted"
-					>
-						{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
-					</td>
+							{/if}
+						</th>
+					{/each}
 				</tr>
-			{:else}
-				{#each sorted as row, i (selectable ? keyOf(row) : i)}
-					{@const isSelected = selectable && selected.includes(keyOf(row))}
-					<tr
-						aria-selected={selectable ? isSelected : undefined}
-						class="border-b border-hairline last:border-b-0
+			</thead>
+			<tbody>
+				{#if sorted.length === 0}
+					<tr>
+						<td
+							colspan={columns.length + (selectable ? 1 : 0)}
+							class="px-3.5 py-10 text-center text-sm text-text-muted"
+						>
+							{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
+						</td>
+					</tr>
+				{:else}
+					{#each sorted as row, i (selectable ? keyOf(row) : i)}
+						{@const isSelected = selectable && selected.includes(keyOf(row))}
+						<tr
+							aria-selected={selectable ? isSelected : undefined}
+							class="border-b border-hairline last:border-b-0
 							{isSelected ? 'bg-bg-inset' : striped && i % 2 === 1 ? 'bg-bg-alt' : ''}
 							{hoverable ? 'transition-colors duration-150 hover:bg-bg-inset' : ''}"
-					>
-						{#if selectable}
-							<td class={pad}>
-								<Checkbox
-									checked={isSelected}
-									{tone}
-									aria-label={t.current.selectRow}
-									onchange={() => toggleRow(row)}
-								/>
-							</td>
-						{/if}
-						{#each columns as column (column.key)}
-							<td
-								class="text-text-secondary {pad} {aligns[column.align ?? 'left']} {column.class ??
-									''}"
-							>
-								{#if cell}
-									{@render cell({ row, column, value: row[column.key] })}
-								{:else}
-									{row[column.key] ?? ''}
-								{/if}
-							</td>
-						{/each}
-					</tr>
-				{/each}
-			{/if}
-		</tbody>
-	</table>
+						>
+							{#if selectable}
+								<td class={pad}>
+									<Checkbox
+										checked={isSelected}
+										{tone}
+										aria-label={t.current.selectRow}
+										onchange={() => toggleRow(row)}
+									/>
+								</td>
+							{/if}
+							{#each columns as column (column.key)}
+								<td
+									class="text-text-secondary {pad} {aligns[column.align ?? 'left']} {column.class ??
+										''}"
+								>
+									{#if cell}
+										{@render cell({ row, column, value: row[column.key] })}
+									{:else}
+										{row[column.key] ?? ''}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+	{#if footer}
+		<div
+			class="flex flex-wrap items-center gap-3 border-t border-hairline px-3.5 py-2.5 font-sans text-sm text-text-secondary"
+		>
+			{@render footer()}
+		</div>
+	{/if}
 </div>

package/dist/styles/matte/Table.svelte.d.ts

@@ -29,6 +29,18 @@ declare function $$render<T extends Record<string, unknown>>(): {
         compact?: boolean;
         /** Header stays put while the body scrolls — pair with a `max-h-*` class. */
         stickyHeader?: boolean;
+        /** Bar above the table — a title, a search field, a filter row. */
+        header?: Snippet;
+        /** Bar below the table — pagination, a total, a summary line. */
+        footer?: Snippet;
+        /**
+         * Shown in place of `header` while rows are ticked, after the count and the
+         * clear button. Passing it is what turns the bulk bar on.
+         */
+        bulkActions?: Snippet<[{
+            selected: string[];
+            clear: () => void;
+        }]>;
         /** Bindable. Set it to sort; leave `sortable` columns to drive it. */
         sort?: TableSort | null;
         /** Sort the rows here rather than refetching them server-side. Default true. */

package/dist/styles/matte/Tabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		focusRing,
@@ -8,10 +9,13 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	export interface TabItem {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		disabled?: boolean;
 		/** Small count/label rendered after the tab title. */
 		badge?: string | number;
@@ -89,6 +93,7 @@
 			onclick={() => select(item)}
 			class={tabClass(value === item.value)}
 		>
+			{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 			{item.label}
 			{#if item.badge !== undefined}
 				<span class="font-mono text-[11px] text-text-muted">{item.badge}</span>

package/dist/styles/matte/Tabs.svelte.d.ts

@@ -1,8 +1,11 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export interface TabItem {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     disabled?: boolean;
     /** Small count/label rendered after the tab title. */
     badge?: string | number;

package/dist/styles/matte/TagsInput.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { useLocale } from '../../core/locale.svelte.js';
+	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();
+
+	const t = useLocale();
+
+	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: t.current.duplicateTag,
+		full: `${t.current.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 border bg-bg py-1.5 pr-1.5 pl-2 transition-colors duration-150 ease-brand-out
+			{invalid
+			? 'border-danger focus-within:border-danger'
+			: `border-hairline ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''}"
+	>
+		{#each tags as tag, index (tag)}
+			<span
+				class="inline-flex items-center gap-1.5 rounded-full py-1 pr-1 pl-2.5 font-mono text-xs {toneSoft[
+					tone
+				]}"
+			>
+				{tag}
+				<button
+					type="button"
+					onclick={() => remove(index)}
+					aria-label="{t.current.removeItem} {tag}"
+					class="inline-flex size-4 items-center justify-center rounded-full transition-colors duration-150 hover:bg-bg 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.5" />
+					</svg>
+				</button>
+			</span>
+		{/each}
+
+		<input
+			bind:this={field}
+			bind:value={draft}
+			{disabled}
+			readonly={full}
+			placeholder={tags.length === 0 ? (placeholder ?? t.current.addTag) : ''}
+			aria-label={placeholder ?? t.current.addTag}
+			aria-invalid={invalid ? 'true' : undefined}
+			onkeydown={onKeydown}
+			onpaste={onPaste}
+			onblur={onBlur}
+			class="h-7 min-w-24 flex-1 bg-transparent font-sans text-[15px] 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="font-mono text-xs text-danger">{messages[refused]}</span>
+	{:else if max}
+		<span class="font-mono text-xs text-text-muted">{tags.length}/{max}</span>
+	{/if}
+</div>

package/dist/styles/matte/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/matte/TimeInput.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { useLocale } from '../../core/locale.svelte.js';
+	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();
+
+	const t = useLocale();
+
+	// 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 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.5" />
+			<path d="M10 6.5V10l2.5 1.5" stroke="currentColor" stroke-width="1.5" />
+		</svg>
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if steppers}
+			<span class="-mr-2 flex flex-col">
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(1)}
+					aria-label={t.current.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.5" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					class={stepper}
+					{disabled}
+					onclick={() => nudge(-1)}
+					aria-label={t.current.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.5" />
+					</svg>
+				</button>
+			</span>
+		{/if}
+	{/snippet}
+</Input>