@nqmcreative/ui 0.2.3 → 0.4.0

package/dist/styles/matte/PinInput.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { caretIndex, clearFrom, fillFrom, sanitisePin, type PinMode } from '../../core/pin.js';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+
+	interface Props {
+		/** Bindable code. Shorter than `length` means still incomplete. */
+		value?: string;
+		/** How many boxes. */
+		length?: number;
+		/** What a box accepts. */
+		mode?: PinMode;
+		/** Render the characters as dots. */
+		mask?: boolean;
+		/** Draw a gap after this many boxes — `3` gives `123 456`. */
+		groupAfter?: number;
+		disabled?: boolean;
+		invalid?: boolean;
+		tone?: Tone;
+		/** `name` for a plain form submit — one hidden field holding the code. */
+		name?: string;
+		/** Fires once the last box is filled. */
+		oncomplete?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		length = 6,
+		mode = 'numeric',
+		mask = false,
+		groupAfter = 0,
+		disabled = false,
+		invalid = false,
+		tone = 'brand',
+		name,
+		oncomplete,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let boxes: HTMLInputElement[] = $state([]);
+
+	const chars = $derived(Array.from({ length }, (_, i) => value[i] ?? ''));
+
+	function focusAt(index: number) {
+		boxes[Math.max(0, Math.min(length - 1, index))]?.focus();
+	}
+
+	/**
+	 * The DOM is written back on every keystroke, not only when the value
+	 * changed: a refused character leaves the box holding text the state never
+	 * accepted, and nothing else would clear it.
+	 */
+	function sync(box: HTMLInputElement, index: number) {
+		box.value = value[index] ?? '';
+	}
+
+	function commit(next: string, from: number) {
+		const was = value;
+		value = next;
+		if (value.length === length && was.length < length) oncomplete?.(value);
+		// Land on the first empty box, or the one after whatever was just typed.
+		focusAt(Math.min(Math.max(from, caretIndex(value, length)), length - 1));
+	}
+
+	function onInput(event: Event & { currentTarget: HTMLInputElement }, index: number) {
+		const typed = sanitisePin(event.currentTarget.value, mode);
+		if (!typed) {
+			sync(event.currentTarget, index);
+			return;
+		}
+		const next = fillFrom(value, index, typed, length, mode);
+		commit(next, index + typed.length);
+		for (const [at, box] of boxes.entries()) sync(box, at);
+	}
+
+	function onKeydown(event: KeyboardEvent, index: number) {
+		if (event.key === 'Backspace') {
+			event.preventDefault();
+			// An empty box deletes the one before it, the way a caret would.
+			const target = value[index] ? index : index - 1;
+			if (target < 0) return;
+			value = clearFrom(value, target);
+			for (const [at, box] of boxes.entries()) sync(box, at);
+			focusAt(target);
+		} else if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			focusAt(index - 1);
+		} else if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			focusAt(index + 1);
+		}
+	}
+
+	function onPaste(event: ClipboardEvent, index: number) {
+		event.preventDefault();
+		const text = event.clipboardData?.getData('text') ?? '';
+		const clean = sanitisePin(text, mode);
+		if (!clean) return;
+		commit(fillFrom(value, index, clean, length, mode), index + clean.length);
+		for (const [at, box] of boxes.entries()) sync(box, at);
+	}
+</script>
+
+<div class="flex items-center gap-2 {className}">
+	{#each chars as char, index (index)}
+		{#if groupAfter && index > 0 && index % groupAfter === 0}
+			<span class="h-px w-2 bg-hairline-strong" aria-hidden="true"></span>
+		{/if}
+		<input
+			bind:this={boxes[index]}
+			value={char}
+			{disabled}
+			type={mask ? 'password' : 'text'}
+			inputmode={mode === 'numeric' ? 'numeric' : 'text'}
+			autocomplete={index === 0 ? 'one-time-code' : 'off'}
+			autocapitalize="characters"
+			spellcheck="false"
+			maxlength={length}
+			aria-label="{t.current.digit} {index + 1}"
+			aria-invalid={invalid ? 'true' : undefined}
+			oninput={(event) => onInput(event, index)}
+			onkeydown={(event) => onKeydown(event, index)}
+			onpaste={(event) => onPaste(event, index)}
+			onfocus={(event) => event.currentTarget.select()}
+			class="size-11 border bg-bg text-center font-mono text-base text-text transition-colors duration-150 ease-brand-out focus:outline-none
+				{invalid ? 'border-danger' : `border-hairline ${toneFocusBorder[tone]}`}
+				{disabled ? 'pointer-events-none opacity-50' : ''}"
+		/>
+	{/each}
+
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import { type PinMode } from '../../core/pin.js';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    /** Bindable code. Shorter than `length` means still incomplete. */
+    value?: string;
+    /** How many boxes. */
+    length?: number;
+    /** What a box accepts. */
+    mode?: PinMode;
+    /** Render the characters as dots. */
+    mask?: boolean;
+    /** Draw a gap after this many boxes — `3` gives `123 456`. */
+    groupAfter?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    tone?: Tone;
+    /** `name` for a plain form submit — one hidden field holding the code. */
+    name?: string;
+    /** Fires once the last box is filled. */
+    oncomplete?: (value: string) => void;
+    class?: string;
+}
+declare const PinInput: import("svelte").Component<Props, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/styles/matte/PricingCard.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneBorder, toneFill, toneSoft, toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		name: string;
@@ -12,6 +13,8 @@
 		description?: string;
 		/** One line each. Rendered with a tick. */
 		features?: string[];
+		/** Replaces the tick beside every feature. */
+		featureIcon?: Snippet;
 		/** Pill in the top corner, e.g. "Most popular". */
 		badge?: string;
 		/** Thicker border and a tinted header — for the plan you want chosen. */
@@ -29,6 +32,7 @@
 		period,
 		description,
 		features = [],
+		featureIcon,
 		badge,
 		featured = false,
 		tone = 'brand',
@@ -83,14 +87,18 @@
 		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-5">
 			{#each features as feature (feature)}
 				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
-					<svg
-						class="mt-0.5 size-4 shrink-0 {toneText[tone]}"
-						viewBox="0 0 16 16"
-						fill="none"
-						aria-hidden="true"
-					>
-						<path d="m3 8 3.2 3.2L13 4.4" stroke="currentColor" stroke-width="1.6" />
-					</svg>
+					{#if featureIcon}
+						<span class="mt-0.5 {iconMd}">{@render featureIcon()}</span>
+					{:else}
+						<svg
+							class="mt-0.5 size-4 shrink-0 {toneText[tone]}"
+							viewBox="0 0 16 16"
+							fill="none"
+							aria-hidden="true"
+						>
+							<path d="m3 8 3.2 3.2L13 4.4" stroke="currentColor" stroke-width="1.6" />
+						</svg>
+					{/if}
 					<span class="leading-snug">{feature}</span>
 				</li>
 			{/each}

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

@@ -10,6 +10,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     description?: string;
     /** One line each. Rendered with a tick. */
     features?: string[];
+    /** Replaces the tick beside every feature. */
+    featureIcon?: Snippet;
     /** Pill in the top corner, e.g. "Most popular". */
     badge?: string;
     /** Thicker border and a tinted header — for the plan you want chosen. */

package/dist/styles/matte/RadioGroup.svelte

@@ -3,10 +3,13 @@
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Radio from './Radio.svelte';
 	import type { Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 
 	export interface RadioOption {
 		value: string;
 		label: string;
+		/** Leading icon, 20px. Drawn in `boxed` mode only. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 	}
@@ -60,6 +63,9 @@
 							{value === option.value ? 'border-text bg-bg-alt' : 'border-hairline hover:border-hairline-strong'}
 							{option.disabled ? 'pointer-events-none opacity-50' : ''}"
 					>
+						{#if option.icon}
+							<span class={iconLg}>{@render option.icon()}</span>
+						{/if}
 						<Radio
 							bind:group={value}
 							value={option.value}

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

@@ -4,6 +4,8 @@ import type { Tone } from '../../core/tones.js';
 export interface RadioOption {
     value: string;
     label: string;
+    /** Leading icon, 20px. Drawn in `boxed` mode only. */
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
 }

package/dist/styles/matte/SearchInput.svelte

@@ -0,0 +1,87 @@
+<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.5" />
+				<path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+		{/if}
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if value}
+			<button
+				type="button"
+				onclick={clear}
+				aria-label={t.current.clearSearch}
+				class="-mr-1 p-1 text-text-muted transition-colors duration-150 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.5" />
+				</svg>
+			</button>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -1,10 +1,14 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	export interface SegmentOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		disabled?: boolean;
 	}
 
@@ -20,6 +24,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;
@@ -32,6 +38,7 @@
 		size = 'md',
 		tone = 'brand',
 		fullWidth = false,
+		iconOnly = false,
 		label,
 		disabled = false,
 		class: className = '',
@@ -44,6 +51,11 @@
 		md: 'h-9 px-3.5 text-sm'
 	};
 
+	const squares: Record<SegmentedSize, string> = {
+		sm: 'size-8 text-[13px]',
+		md: 'size-9 text-sm'
+	};
+
 	function select(option: SegmentOption) {
 		if (option.disabled || disabled) return;
 		value = option.value;
@@ -74,14 +86,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 font-sans whitespace-nowrap transition-colors 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 ? `${toneSoft[tone]} font-medium` : 'text-text-secondary 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/matte/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/matte/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/matte/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="font-mono text-xs tracking-wide text-text-muted uppercase">{label}</span>
+	<span class="flex items-center gap-2 font-mono text-xs tracking-wide text-text-muted uppercase"
+		>{#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-medium tracking-tight {tone ? toneText[tone] : 'text-text'}"

package/dist/styles/matte/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/matte/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';
 
 	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
@@ -67,6 +72,8 @@
 		<svg class="size-3.5" 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" />
 		</svg>
+	{:else if item.icon}
+		<span class={iconMd}>{@render item.icon()}</span>
 	{:else}
 		{index + 1}
 	{/if}

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