@nqmcreative/ui 0.2.3 → 0.4.0

package/dist/styles/sprout/SearchInput.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { useLocale } from '../../core/locale.svelte.js';
+	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();
+
+	const t = useLocale();
+
+	// 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={t.current.clearSearch}
+				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/sprout/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/sprout/SegmentedControl.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { focusRing, toneRing, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 	import { edge } from './lift.js';
 
 	export interface SegmentOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		disabled?: boolean;
 	}
 
@@ -21,6 +25,8 @@
 		tone?: Tone;
 		/** Spread the segments evenly across the full width. */
 		fullWidth?: boolean;
+		/** Icons only — each option's `label` becomes its accessible name. */
+		iconOnly?: boolean;
 		label?: string;
 		disabled?: boolean;
 		onchange?: (value: string) => void;
@@ -33,6 +39,7 @@
 		size = 'md',
 		tone = 'brand',
 		fullWidth = false,
+		iconOnly = false,
 		label,
 		disabled = false,
 		class: className = '',
@@ -45,6 +52,11 @@
 		md: 'h-8 px-3.5 text-sm'
 	};
 
+	const squares: Record<SegmentedSize, string> = {
+		sm: 'size-7 text-[13px]',
+		md: 'size-8 text-sm'
+	};
+
 	function select(option: SegmentOption) {
 		if (option.disabled || disabled) return;
 		value = option.value;
@@ -75,14 +87,16 @@
 			type="button"
 			role="radio"
 			aria-checked={value === option.value}
+			aria-label={iconOnly ? option.label : undefined}
 			disabled={option.disabled || disabled}
 			tabindex={value === option.value ? 0 : -1}
 			onclick={() => select(option)}
 			class="inline-flex items-center justify-center rounded-xl font-sans font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40
-				{sizes[size]} {focusRing} {toneRing[tone]}
+				{iconOnly ? squares[size] : sizes[size]} {focusRing} {toneRing[tone]}
 				{value === option.value ? `bg-bg text-text ${edge}` : 'text-text-muted hover:text-text'}"
 		>
-			{option.label}
+			{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
+			{#if !iconOnly}{option.label}{/if}
 		</button>
 	{/each}
 	{#if name}<input type="hidden" {name} {value} />{/if}

package/dist/styles/sprout/SegmentedControl.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 SegmentOption {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     disabled?: boolean;
 }
 export type SegmentedSize = 'sm' | 'md';
@@ -16,6 +19,8 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
     tone?: Tone;
     /** Spread the segments evenly across the full width. */
     fullWidth?: boolean;
+    /** Icons only — each option's `label` becomes its accessible name. */
+    iconOnly?: boolean;
     label?: string;
     disabled?: boolean;
     onchange?: (value: string) => void;

package/dist/styles/sprout/Sidebar.svelte

@@ -36,6 +36,7 @@
 
 <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';
 
 	interface Props {
@@ -126,7 +127,7 @@
 <!-- One box for every glyph, so rows line up whether or not an item has one. -->
 {#snippet glyph(item: SidebarItem)}
 	{#if item.icon}
-		<span class="grid size-4 shrink-0 place-items-center *:size-4">{@render item.icon()}</span>
+		<span class={iconMd}>{@render item.icon()}</span>
 	{/if}
 {/snippet}
 

package/dist/styles/sprout/Stat.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	export type StatTrend = 'up' | 'down' | 'flat';
 
@@ -11,6 +13,8 @@
 		delta?: string;
 		trend?: StatTrend;
 		hint?: string;
+		/** Leading icon on the label row. */
+		icon?: Snippet;
 		/** Colour of the value itself. Leave unset for plain `text`. */
 		tone?: Tone;
 	}
@@ -21,6 +25,7 @@
 		delta,
 		trend = 'flat',
 		hint,
+		icon,
 		tone,
 		class: className = '',
 		...rest
@@ -31,7 +36,9 @@
 </script>
 
 <div class="flex flex-col gap-1 font-sans {className}" {...rest}>
-	<span class="text-sm font-medium text-text-muted">{label}</span>
+	<span class="flex items-center gap-2 text-sm font-medium text-text-muted"
+		>{#if icon}<span class={iconMd}>{@render icon()}</span>{/if}{label}</span
+	>
 	<div class="flex items-baseline gap-2">
 		<span
 			class="font-heading text-3xl font-semibold tracking-tight tabular-nums {tone

package/dist/styles/sprout/Stat.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Tone } from '../../core/tones.js';
 export type StatTrend = 'up' | 'down' | 'flat';
@@ -8,6 +9,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     delta?: string;
     trend?: StatTrend;
     hint?: string;
+    /** Leading icon on the label row. */
+    icon?: Snippet;
     /** Colour of the value itself. Leave unset for plain `text`. */
     tone?: Tone;
 }

package/dist/styles/sprout/Steps.svelte

@@ -1,7 +1,11 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
 	export interface StepItem {
 		label: string;
 		description?: string;
+		/** Replaces the step number. A finished step still shows its check. */
+		icon?: Snippet;
 		/** Marks the step as failed — shown in `danger` regardless of position. */
 		error?: boolean;
 		disabled?: boolean;
@@ -10,6 +14,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { iconMd } from './icon.js';
 	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../../core/tones.js';
 	import { liftSm } from './lift.js';
 
@@ -75,6 +80,8 @@
 				stroke-linejoin="round"
 			/>
 		</svg>
+	{:else if item.icon}
+		<span class={iconMd}>{@render item.icon()}</span>
 	{:else}
 		{index + 1}
 	{/if}

package/dist/styles/sprout/Steps.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 export interface StepItem {
     label: string;
     description?: string;
+    /** Replaces the step number. A finished step still shows its check. */
+    icon?: Snippet;
     /** Marks the step as failed — shown in `danger` regardless of position. */
     error?: boolean;
     disabled?: boolean;

package/dist/styles/sprout/Table.svelte

@@ -33,6 +33,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. */
@@ -58,6 +68,9 @@
 		hoverable = true,
 		compact = false,
 		stickyHeader = false,
+		header,
+		footer,
+		bulkActions,
 		sort = $bindable(null),
 		sortLocally = true,
 		onsort,
@@ -107,112 +120,155 @@
 		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 rounded-[20px] border border-hairline bg-bg {edge} {className}"
+	class="flex w-full flex-col overflow-hidden rounded-[20px] border border-hairline bg-bg {edge} {className}"
 	{...rest}
 >
-	<table class="w-full border-collapse font-sans text-sm">
-		{#if caption}
-			<caption
-				class="border-b border-hairline px-4 py-3 text-left font-sans text-[13px] text-text-muted"
+	{#if bulkBar}
+		<div
+			class="flex flex-wrap items-center gap-3 border-b border-hairline bg-brand-light px-4 py-3"
+		>
+			<span class="font-sans text-[13px] font-semibold text-text">
+				{selected.length}
+				{t.current.selected}
+			</span>
+			<button
+				type="button"
+				onclick={clearSelection}
+				class="rounded-full 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"
 			>
-				{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="text-[13px] font-semibold text-text-muted {pad} {aligns[
-							column.align ?? 'left'
-						]} {column.class ?? ''}"
-					>
-						{#if column.sortable}
-							<button
-								type="button"
-								onclick={() => toggleSort(column)}
-								class="inline-flex items-center gap-1.5 rounded 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-4 py-3 font-sans text-[13px] 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-sm">
+			{#if caption}
+				<caption
+					class="border-b border-hairline px-4 py-3 text-left font-sans text-[13px] 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="text-[13px] font-semibold text-text-muted {pad} {aligns[
+								column.align ?? 'left'
+							]} {column.class ?? ''}"
+						>
+							{#if column.sortable}
+								<button
+									type="button"
+									onclick={() => toggleSort(column)}
+									class="inline-flex items-center gap-1.5 rounded 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-4 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-4 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-brand-light' : striped && i % 2 === 1 ? 'bg-bg-alt' : ''}
 							{hoverable ? 'transition-colors duration-150 hover:bg-bg-alt' : ''}"
-					>
-						{#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-4 py-3 font-sans text-[13px] text-text-secondary"
+		>
+			{@render footer()}
+		</div>
+	{/if}
 </div>

package/dist/styles/sprout/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/sprout/Tabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { edge } from './lift.js';
 	import {
@@ -9,10 +10,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;
@@ -90,6 +94,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

package/dist/styles/sprout/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;