@nqmcreative/ui 0.2.3 → 0.4.0

package/dist/styles/sprout/Footer.svelte

@@ -2,6 +2,8 @@
 	export interface FooterLink {
 		label: string;
 		href?: string;
+		/** Leading icon, 14px. */
+		icon?: Snippet;
 		external?: boolean;
 	}
 
@@ -14,6 +16,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { toneHoverText, type Tone } from '../../core/tones.js';
+	import { iconSm } from './icon.js';
 
 	interface Props {
 		columns?: FooterColumn[];
@@ -57,11 +60,12 @@
 												href={item.href}
 												target={item.external ? '_blank' : undefined}
 												rel={item.external ? 'noreferrer' : undefined}
-												class="font-sans text-[13px] text-text-muted transition-colors duration-150 ease-brand-out {toneHoverText[
+												class="inline-flex items-center gap-2 font-sans text-[13px] text-text-muted transition-colors duration-150 ease-brand-out {toneHoverText[
 													tone
 												]}"
 											>
-												{item.label}
+												{#if item.icon}<span class={iconSm}>{@render item.icon()}</span
+													>{/if}{item.label}
 												{#if item.external}<span aria-hidden="true" class="text-[0.85em]">↗</span
 													>{/if}
 											</a>

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

@@ -1,6 +1,8 @@
 export interface FooterLink {
     label: string;
     href?: string;
+    /** Leading icon, 14px. */
+    icon?: Snippet;
     external?: boolean;
 }
 export interface FooterColumn {

package/dist/styles/sprout/InputAddon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { edge } from './lift.js';
+	import type { InputSize } from './Input.svelte';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		/** Match the Input it sits beside — the heights have to agree. */
+		size?: InputSize;
+		/** Paint it like a field instead of a fixed label. */
+		variant?: 'muted' | 'plain';
+		children: Snippet;
+	}
+
+	let {
+		size = 'md',
+		variant = 'muted',
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<InputSize, string> = {
+		sm: 'h-8 px-2.5 text-[13px]',
+		md: 'h-10 px-3 text-sm',
+		lg: 'h-11 px-3 text-[15px]'
+	};
+</script>
+
+<span
+	class="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-hairline-strong font-sans whitespace-nowrap text-text-secondary {edge}
+		{sizes[size]}
+		{variant === 'muted' ? 'bg-bg-alt' : 'bg-bg'} {className}"
+	{...rest}
+>
+	{@render children()}
+</span>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { InputSize } from './Input.svelte';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Match the Input it sits beside — the heights have to agree. */
+    size?: InputSize;
+    /** Paint it like a field instead of a fixed label. */
+    variant?: 'muted' | 'plain';
+    children: Snippet;
+}
+declare const InputAddon: import("svelte").Component<Props, {}, "">;
+type InputAddon = ReturnType<typeof InputAddon>;
+export default InputAddon;

package/dist/styles/sprout/Link.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { focusRing, toneHoverText, toneRing, toneText, type Tone } from '../../core/tones.js';
+	import { iconSm } from './icon.js';
 
 	interface Props extends HTMLAnchorAttributes {
 		tone?: Tone;
@@ -11,6 +12,10 @@
 		external?: boolean;
 		/** Inherit the surrounding text colour instead of the tone. */
 		muted?: boolean;
+		/** Leading icon, 14px. */
+		icon?: Snippet;
+		/** Trailing icon, before the external mark. */
+		iconEnd?: Snippet;
 		children: Snippet;
 	}
 
@@ -19,6 +24,8 @@
 		underline = 'hover',
 		external = false,
 		muted = false,
+		icon,
+		iconEnd,
 		class: className = '',
 		children,
 		...rest
@@ -39,6 +46,8 @@
 		{underlines[underline]} {focusRing} {toneRing[tone]} {className}"
 	{...rest}
 >
+	{#if icon}<span class={iconSm}>{@render icon()}</span>{/if}
 	{@render children()}
+	{#if iconEnd}<span class={iconSm}>{@render iconEnd()}</span>{/if}
 	{#if external}<span aria-hidden="true" class="text-[0.85em]">↗</span>{/if}
 </a>

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

@@ -9,6 +9,10 @@ interface Props extends HTMLAnchorAttributes {
     external?: boolean;
     /** Inherit the surrounding text colour instead of the tone. */
     muted?: boolean;
+    /** Leading icon, 14px. */
+    icon?: Snippet;
+    /** Trailing icon, before the external mark. */
+    iconEnd?: Snippet;
     children: Snippet;
 }
 declare const Link: import("svelte").Component<Props, {}, "">;

package/dist/styles/sprout/MenuItem.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLButtonAttributes {
 		/** Renders an `<a>` instead of a `<button>`. */
@@ -55,7 +56,7 @@
 			/>
 		</svg>
 	{:else if icon}
-		<span class="flex size-3.5 shrink-0 items-center justify-center">{@render icon()}</span>
+		<span class={iconMd}>{@render icon()}</span>
 	{/if}
 	<span class="min-w-0 flex-1 truncate">{@render children()}</span>
 	{#if shortcut}

package/dist/styles/sprout/Modal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { iconLg } from './icon.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
@@ -12,6 +13,8 @@
 		open?: boolean;
 		title?: string;
 		description?: string;
+		/** Leading icon beside the title. */
+		icon?: Snippet;
 		size?: ModalSize;
 		/** Clicking the backdrop or pressing Escape closes the dialog. */
 		dismissible?: boolean;
@@ -27,6 +30,7 @@
 		open = $bindable(false),
 		title,
 		description,
+		icon,
 		size = 'md',
 		dismissible = true,
 		showClose,
@@ -76,6 +80,7 @@
 	<div class="flex flex-col">
 		{#if title || closable}
 			<div class="flex items-start gap-4 px-6 pt-5 pb-3">
+				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				<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>

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

@@ -6,6 +6,8 @@ interface Props extends HTMLDialogAttributes {
     open?: boolean;
     title?: string;
     description?: string;
+    /** Leading icon beside the title. */
+    icon?: Snippet;
     size?: ModalSize;
     /** Clicking the backdrop or pressing Escape closes the dialog. */
     dismissible?: boolean;

package/dist/styles/sprout/MultiSelect.svelte

@@ -1,7 +1,11 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
 	export interface MultiSelectOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 		group?: string;
@@ -13,6 +17,7 @@
 	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 { iconMd, iconSm } from './icon.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import { edge, soft } from './lift.js';
 
@@ -154,7 +159,7 @@
 					tone
 				]}"
 			>
-				{option.label}
+				{#if option.icon}<span class={iconSm}>{@render option.icon()}</span>{/if}{option.label}
 				<button
 					type="button"
 					onclick={() => remove(option)}
@@ -274,6 +279,7 @@
 								</svg>
 							{/if}
 						</span>
+						{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
 						<span class="flex min-w-0 flex-1 flex-col gap-0.5">
 							<span class="truncate">{option.label}</span>
 							{#if option.description}

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

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 export interface MultiSelectOption {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
     group?: string;

package/dist/styles/sprout/Navbar.svelte

@@ -2,6 +2,8 @@
 	export interface NavItem {
 		label: string;
 		href?: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		/** Marks the current page — also sets `aria-current`. */
 		active?: boolean;
 		disabled?: boolean;
@@ -15,6 +17,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 	import { focusRing, toneRing, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import Drawer from './Drawer.svelte';
 	import Dropdown from './Dropdown.svelte';
@@ -84,6 +87,7 @@
 										? `${toneSoft[tone]}`
 										: 'text-text-secondary hover:bg-bg-inset hover:text-text'}"
 								>
+									{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 									{item.label}
 									<svg class="size-3" viewBox="0 0 16 16" fill="none" aria-hidden="true">
 										<path
@@ -96,7 +100,12 @@
 								</button>
 							{/snippet}
 							{#each item.items as child (child.label)}
-								<MenuItem href={child.href} disabled={child.disabled} selected={child.active}>
+								<MenuItem
+									href={child.href}
+									disabled={child.disabled}
+									selected={child.active}
+									icon={child.icon}
+								>
 									{child.label}
 								</MenuItem>
 							{/each}
@@ -111,6 +120,7 @@
 								? 'pointer-events-none opacity-50'
 								: ''}"
 						>
+							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 							{item.label}
 							{#if item.badge !== undefined}
 								<span class="text-[11px] text-text-muted tabular-nums">{item.badge}</span>
@@ -163,7 +173,10 @@
 						? 'pointer-events-none opacity-50'
 						: ''}"
 				>
-					{item.label}
+					<span class="flex min-w-0 items-center gap-2.5">
+						{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
+						{item.label}
+					</span>
 					{#if item.badge !== undefined}
 						<span class="text-[11px] text-text-muted tabular-nums">{item.badge}</span>
 					{/if}
@@ -175,11 +188,12 @@
 								<a
 									href={child.href}
 									onclick={() => (menuOpen = false)}
-									class="block rounded-xl px-3 py-2 font-sans text-[13px] text-text-muted hover:bg-bg-inset {toneText[
+									class="flex items-center gap-2.5 rounded-xl px-3 py-2 font-sans text-[13px] text-text-muted hover:bg-bg-inset {toneText[
 										tone
 									]}"
 								>
-									{child.label}
+									{#if child.icon}<span class={iconMd}>{@render child.icon()}</span
+										>{/if}{child.label}
 								</a>
 							</li>
 						{/each}

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

@@ -1,6 +1,8 @@
 export interface NavItem {
     label: string;
     href?: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     /** Marks the current page — also sets `aria-current`. */
     active?: boolean;
     disabled?: boolean;

package/dist/styles/sprout/PinInput.svelte

@@ -0,0 +1,138 @@
+<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';
+	import { edge } from './lift.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 rounded-xl border bg-bg text-center font-sans text-base font-medium text-text tabular-nums {edge} transition-colors duration-150 ease-brand-out focus:outline-none
+				{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusBorder[tone]}`}
+				{disabled ? 'pointer-events-none opacity-50' : ''}"
+		/>
+	{/each}
+
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+</div>

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

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneBorder, toneSoft, toneSolid, type Tone } from '../../core/tones.js';
+	import { iconMd } from './icon.js';
 	import { edge, soft } from './lift.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -13,6 +14,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;
 		/** Ring, lift and a tinted header — for the plan you want chosen. */
@@ -30,6 +33,7 @@
 		period,
 		description,
 		features = [],
+		featureIcon,
 		badge,
 		featured = false,
 		tone = 'brand',
@@ -78,21 +82,25 @@
 		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-6">
 			{#each features as feature (feature)}
 				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
-					<span
-						class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full {toneSoft[
-							tone
-						]}"
-					>
-						<svg class="size-2.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-							<path
-								d="m3 8 3.2 3.2L13 4.4"
-								stroke="currentColor"
-								stroke-width="2.4"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-					</span>
+					{#if featureIcon}
+						<span class="mt-0.5 {iconMd}">{@render featureIcon()}</span>
+					{:else}
+						<span
+							class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full {toneSoft[
+								tone
+							]}"
+						>
+							<svg class="size-2.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+								<path
+									d="m3 8 3.2 3.2L13 4.4"
+									stroke="currentColor"
+									stroke-width="2.4"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</span>
+					{/if}
 					<span class="leading-snug">{feature}</span>
 				</li>
 			{/each}

package/dist/styles/sprout/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;
     /** Ring, lift and a tinted header — for the plan you want chosen. */

package/dist/styles/sprout/RadioGroup.svelte

@@ -3,11 +3,14 @@
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Radio from './Radio.svelte';
 	import { toneBorder, toneSurface, type Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 	import { edge } from './lift.js';
 
 	export interface RadioOption {
 		value: string;
 		label: string;
+		/** Leading icon, 20px. Drawn in `boxed` mode only. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 	}
@@ -63,6 +66,9 @@
 							: 'border-hairline bg-bg 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/sprout/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;
 }