@nqmcreative/ui 0.2.3 → 0.4.0

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

@@ -12,6 +12,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     padded?: boolean;
     title?: string;
     eyebrow?: string;
+    /** Leading icon above the title. Ignored when you pass `header`. */
+    icon?: Snippet;
     header?: Snippet;
     footer?: Snippet;
     children: Snippet;

package/dist/styles/sprout/CheckboxGroup.svelte

@@ -3,11 +3,14 @@
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Checkbox from './Checkbox.svelte';
 	import { toneBorder, toneSurface, type Tone } from '../../core/tones.js';
+	import { iconLg } from './icon.js';
 	import { edge } from './lift.js';
 
 	export interface CheckboxOption {
 		value: string;
 		label: string;
+		/** Leading icon, 20px. Drawn in `boxed` mode only. */
+		icon?: Snippet;
 		description?: string;
 		disabled?: boolean;
 	}
@@ -79,6 +82,9 @@
 							: 'border-hairline bg-bg hover:border-hairline-strong'}
 							{disabled ? 'pointer-events-none opacity-50' : ''}"
 					>
+						{#if option.icon}
+							<span class={iconLg}>{@render option.icon()}</span>
+						{/if}
 						<Checkbox
 							{checked}
 							{disabled}

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

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

package/dist/styles/sprout/ColorInput.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { normaliseHex } from '../../core/color.js';
+	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' | 'suffix' | 'type'> {
+		/** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Fixed choices under the field. Empty hides the row. */
+		swatches?: string[];
+		class?: string;
+	}
+
+	let {
+		value = $bindable('#000000'),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		swatches = [],
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	// The text can be mid-typing (`#a2`) while the swatch needs a real colour,
+	// so the swatch follows the last value that parsed rather than the field.
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	const resolved = $derived(normaliseHex(text) ?? normaliseHex(value) ?? '#000000');
+
+	// Same reason as CurrencyInput: at input time the bound `text` is one
+	// keystroke behind, so the element is the only current source.
+	function onText(event: Event & { currentTarget: HTMLInputElement }) {
+		const hex = normaliseHex(event.currentTarget.value);
+		if (hex) value = hex;
+	}
+
+	function settle() {
+		editing = false;
+		value = normaliseHex(text) ?? value;
+		text = value;
+	}
+
+	function choose(hex: string) {
+		value = normaliseHex(hex) ?? value;
+		text = value;
+	}
+</script>
+
+<div class="flex w-full flex-col gap-2 {className}">
+	<Input
+		bind:value={text}
+		{size}
+		{tone}
+		{invalid}
+		{disabled}
+		spellcheck="false"
+		autocapitalize="none"
+		placeholder="#000000"
+		oninput={onText}
+		onfocus={() => (editing = true)}
+		onblur={settle}
+		class="[&_input]:uppercase [&_input]:tabular-nums"
+		{...rest}
+	>
+		{#snippet prefix()}
+			<span
+				class="relative grid size-5 place-items-center overflow-hidden rounded border border-hairline-strong"
+			>
+				<span class="absolute inset-0" style="background-color: {resolved}"></span>
+				<input
+					type="color"
+					value={resolved}
+					{disabled}
+					aria-label={t.current.pickColour}
+					oninput={(event) => choose(event.currentTarget.value)}
+					class="absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+				/>
+			</span>
+		{/snippet}
+	</Input>
+
+	{#if swatches.length}
+		<div class="flex flex-wrap gap-1.5">
+			{#each swatches as swatch (swatch)}
+				<button
+					type="button"
+					{disabled}
+					onclick={() => choose(swatch)}
+					title={swatch}
+					aria-label={swatch}
+					aria-pressed={resolved === normaliseHex(swatch)}
+					class="size-6 rounded-lg border transition-transform duration-150 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50
+						{resolved === normaliseHex(swatch) ? 'border-text' : 'border-hairline-strong'}"
+					style="background-color: {swatch}"
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+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' | 'type'> {
+    /** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Fixed choices under the field. Empty hides the row. */
+    swatches?: string[];
+    class?: string;
+}
+declare const ColorInput: import("svelte").Component<Props, {}, "value">;
+type ColorInput = ReturnType<typeof ColorInput>;
+export default ColorInput;

package/dist/styles/sprout/Combobox.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { anchored } from '../../core/actions/anchor.js';
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
 	import { useLocale } from '../../core/locale.svelte.js';
+	import { iconMd } from './icon.js';
 	import { edge, soft } from './lift.js';
 
 	export interface ComboboxOption {
 		value: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		/** Second line under the label. */
 		description?: string;
 		disabled?: boolean;
@@ -238,6 +242,7 @@
 							{index === active ? toneSoft[tone] : 'text-text-secondary'}"
 					>
 						<span class="flex items-center gap-2">
+							{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
 							<span class="min-w-0 flex-1 truncate">{option.label}</span>
 							{#if option.value === value}
 								<svg

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

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import { type Tone } from '../../core/tones.js';
 export interface ComboboxOption {
     value: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     /** Second line under the label. */
     description?: string;
     disabled?: boolean;

package/dist/styles/sprout/CommandPalette.svelte

@@ -1,7 +1,11 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
 	export interface CommandItem {
 		id: string;
 		label: string;
+		/** Leading icon, 16px. */
+		icon?: Snippet;
 		/** Second line under the label. */
 		description?: string;
 		/** Items sharing a group are rendered under one heading. */
@@ -22,6 +26,7 @@
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 	import { isTypingTarget } from '../../core/trigger.js';
+	import { iconMd } from './icon.js';
 	import Kbd from './Kbd.svelte';
 	import { float } from './lift.js';
 
@@ -215,6 +220,7 @@
 								{item.disabled ? 'pointer-events-none opacity-40' : ''}
 								{index === active ? toneSoft[tone] : 'text-text-secondary'}"
 						>
+							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
 							<span class="flex min-w-0 flex-1 flex-col gap-0.5">
 								<span class="truncate">{item.label}</span>
 								{#if item.description}

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

@@ -1,6 +1,9 @@
+import type { Snippet } from 'svelte';
 export interface CommandItem {
     id: string;
     label: string;
+    /** Leading icon, 16px. */
+    icon?: Snippet;
     /** Second line under the label. */
     description?: string;
     /** Items sharing a group are rendered under one heading. */

package/dist/styles/sprout/CurrencyInput.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { formatGrouped, parseGrouped } from '../../core/number.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<
+		HTMLInputAttributes,
+		'size' | 'prefix' | 'suffix' | 'value' | 'min' | 'max'
+	> {
+		/** Bindable amount. `null` is an empty field, which is not the same as 0. */
+		value?: number | null;
+		min?: number;
+		max?: number;
+		/** Thousands separator. */
+		group?: string;
+		/** Decimal separator. */
+		decimal?: string;
+		/** Decimal places the amount settles to when the field loses focus. */
+		precision?: number;
+		/** Leading mark — `Rp`, `$`, `€`. */
+		currency?: string;
+		/** Trailing mark instead, for the locales that write it that way. */
+		unit?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(null),
+		min,
+		max,
+		group = ',',
+		decimal = '.',
+		precision = 2,
+		currency,
+		unit,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const options = $derived({ group, decimal, precision });
+
+	/**
+	 * What the field shows. Two states on purpose: grouped and padded while the
+	 * caret is elsewhere, and exactly what was typed while it is not — grouping
+	 * a number as it is typed moves the caret out from under the fingers.
+	 */
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (editing) return;
+		text = value === null || value === undefined ? '' : formatGrouped(value, options);
+	});
+
+	// Read off the element, not off `text`: the binding that feeds `text` has
+	// not flushed yet when this fires, so it still holds the previous keystroke.
+	function onInput(event: Event & { currentTarget: HTMLInputElement }) {
+		const parsed = parseGrouped(event.currentTarget.value, options);
+		value = parsed === null ? null : clamp(parsed);
+	}
+
+	function clamp(amount: number) {
+		if (min !== undefined && amount < min) return min;
+		if (max !== undefined && amount > max) return max;
+		return amount;
+	}
+
+	function settle() {
+		editing = false;
+		const parsed = parseGrouped(text, options);
+		value = parsed === null ? null : clamp(parsed);
+		text = value === null ? '' : formatGrouped(value, options);
+	}
+</script>
+
+<Input
+	bind:value={text}
+	{size}
+	{tone}
+	{invalid}
+	{disabled}
+	inputmode="decimal"
+	oninput={onInput}
+	onfocus={() => (editing = true)}
+	onblur={settle}
+	class={className}
+	{...rest}
+>
+	{#snippet prefix()}
+		{#if currency}
+			<span class="text-xs font-medium text-text-muted">{currency}</span>
+		{/if}
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if unit}
+			<span class="text-xs font-medium text-text-muted">{unit}</span>
+		{/if}
+	{/snippet}
+</Input>

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

@@ -0,0 +1,26 @@
+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' | 'value' | 'min' | 'max'> {
+    /** Bindable amount. `null` is an empty field, which is not the same as 0. */
+    value?: number | null;
+    min?: number;
+    max?: number;
+    /** Thousands separator. */
+    group?: string;
+    /** Decimal separator. */
+    decimal?: string;
+    /** Decimal places the amount settles to when the field loses focus. */
+    precision?: number;
+    /** Leading mark — `Rp`, `$`, `€`. */
+    currency?: string;
+    /** Trailing mark instead, for the locales that write it that way. */
+    unit?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    class?: string;
+}
+declare const CurrencyInput: import("svelte").Component<Props, {}, "value">;
+type CurrencyInput = ReturnType<typeof CurrencyInput>;
+export default CurrencyInput;

package/dist/styles/sprout/Drawer.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';
@@ -16,6 +17,8 @@
 		size?: DrawerSize;
 		title?: string;
 		description?: string;
+		/** Leading icon beside the title. */
+		icon?: Snippet;
 		dismissible?: boolean;
 		footer?: Snippet;
 		onclose?: () => void;
@@ -28,6 +31,7 @@
 		size = 'md',
 		title,
 		description,
+		icon,
 		dismissible = true,
 		footer,
 		onclose,
@@ -93,6 +97,7 @@
 	<div class="flex h-full flex-col">
 		{#if title || dismissible}
 			<div class="flex items-start gap-4 border-b border-hairline px-5 py-4">
+				{#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/Drawer.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props extends HTMLDialogAttributes {
     size?: DrawerSize;
     title?: string;
     description?: string;
+    /** Leading icon beside the title. */
+    icon?: Snippet;
     dismissible?: boolean;
     footer?: Snippet;
     onclose?: () => void;

package/dist/styles/sprout/FileInput.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { formatSize as toReadableSize, sortFiles, type RejectedFile } from '../../core/files.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { edge } from './lift.js';
+	import type { InputSize } from './Input.svelte';
+
+	interface Props {
+		/** Bindable list of accepted files. */
+		files?: File[];
+		/** Same syntax as the input's `accept` — `'image/*,.pdf'`. */
+		accept?: string;
+		multiple?: boolean;
+		/** Per-file ceiling in bytes. `0` means no limit. */
+		maxSize?: number;
+		/** Cap on how many files may be held at once. `0` means no limit. */
+		maxFiles?: number;
+		disabled?: boolean;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Text on the button. Defaults to the locale's `chooseFile`. */
+		label?: string;
+		/** Shown while nothing is chosen. Defaults to the locale's `noFile`. */
+		placeholder?: string;
+		/** Show the list of held files below the row. */
+		showList?: boolean;
+		/** The `name` the hidden input posts under, for a plain form submit. */
+		name?: string;
+		onaccept?: (files: File[]) => void;
+		onreject?: (rejected: RejectedFile[]) => void;
+		class?: string;
+	}
+
+	let {
+		files = $bindable([]),
+		accept,
+		multiple = false,
+		maxSize = 0,
+		maxFiles = 0,
+		disabled = false,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		label,
+		placeholder,
+		showList = true,
+		name,
+		onaccept,
+		onreject,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let input: HTMLInputElement | null = $state(null);
+	let rejected = $state<RejectedFile[]>([]);
+
+	const formatSize = (bytes: number) => toReadableSize(bytes, t.current.byteUnits);
+
+	/** One file reads as its name and weight; several read as a count. */
+	const summary = $derived.by(() => {
+		if (files.length === 0) return placeholder ?? t.current.noFile;
+		if (files.length === 1) return `${files[0].name} · ${formatSize(files[0].size)}`;
+		return `${files.length} ${t.current.selected}`;
+	});
+
+	function add(incoming: FileList | File[] | null) {
+		if (!incoming || disabled) return;
+
+		const { accepted, rejected: bad } = sortFiles(incoming, {
+			accept,
+			maxSize,
+			maxFiles,
+			multiple,
+			held: files.length
+		});
+
+		rejected = bad;
+		if (bad.length) onreject?.(bad);
+		if (accepted.length === 0) return;
+
+		files = multiple ? [...files, ...accepted] : accepted.slice(0, 1);
+		onaccept?.(accepted);
+	}
+
+	function clear() {
+		files = [];
+		rejected = [];
+		if (input) input.value = '';
+	}
+
+	const reasons: Record<RejectedFile['reason'], string> = $derived({
+		type: t.current.rejectedType,
+		size: t.current.rejectedSize,
+		count: t.current.rejectedCount
+	});
+
+	const sizes: Record<InputSize, string> = {
+		sm: 'h-8 text-[13px]',
+		md: 'h-10 text-sm',
+		lg: 'h-11 text-[15px]'
+	};
+
+	const buttons: Record<InputSize, string> = {
+		sm: 'h-6 px-2 text-[11px]',
+		md: 'h-7 px-2.5 text-xs',
+		lg: 'h-8 px-3 text-xs'
+	};
+</script>
+
+<div class="flex w-full flex-col gap-3 {className}">
+	<span
+		class="inline-flex w-full items-center gap-2 rounded-xl border bg-bg px-1 {edge} transition-colors duration-150 ease-brand-out
+			{sizes[size]}
+			{invalid
+			? 'border-danger focus-within:border-danger'
+			: `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''}"
+	>
+		<button
+			type="button"
+			{disabled}
+			onclick={() => input?.click()}
+			class="shrink-0 rounded-lg border border-hairline-strong bg-bg-alt font-sans font-medium text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+				{buttons[size]}"
+		>
+			{label ?? t.current.chooseFile}
+		</button>
+
+		<span
+			class="min-w-0 flex-1 truncate font-sans {files.length ? 'text-text' : 'text-text-muted'}"
+		>
+			{summary}
+		</span>
+
+		{#if files.length}
+			<button
+				type="button"
+				onclick={clear}
+				aria-label={t.current.remove}
+				class="mr-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+			>
+				<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}
+	</span>
+
+	<input
+		bind:this={input}
+		type="file"
+		{name}
+		{accept}
+		{multiple}
+		{disabled}
+		aria-invalid={invalid ? 'true' : undefined}
+		class="sr-only"
+		onchange={(event) => add(event.currentTarget.files)}
+	/>
+
+	{#if rejected.length}
+		<ul class="flex flex-col gap-1">
+			{#each rejected as item (item.file.name + item.reason)}
+				<li class="font-sans text-sm text-danger">
+					{item.file.name} — {reasons[item.reason]}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if showList && multiple && files.length > 1}
+		<ul class="flex flex-col rounded-[20px] border border-hairline bg-bg {edge}">
+			{#each files as file, i (file.name + file.size + i)}
+				<li
+					class="flex items-center gap-3 border-b border-hairline px-4 py-2.5 font-sans last:border-b-0"
+				>
+					<span class="min-w-0 flex-1 truncate text-sm text-text">{file.name}</span>
+					<span class="shrink-0 text-xs text-text-muted tabular-nums">{formatSize(file.size)}</span>
+					<button
+						type="button"
+						onclick={() => (files = files.filter((_, at) => at !== i))}
+						aria-label="{t.current.remove} {file.name}"
+						class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+					>
+						<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>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

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

@@ -0,0 +1,32 @@
+import { type RejectedFile } from '../../core/files.js';
+import { type Tone } from '../../core/tones.js';
+import type { InputSize } from './Input.svelte';
+interface Props {
+    /** Bindable list of accepted files. */
+    files?: File[];
+    /** Same syntax as the input's `accept` — `'image/*,.pdf'`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Per-file ceiling in bytes. `0` means no limit. */
+    maxSize?: number;
+    /** Cap on how many files may be held at once. `0` means no limit. */
+    maxFiles?: number;
+    disabled?: boolean;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Text on the button. Defaults to the locale's `chooseFile`. */
+    label?: string;
+    /** Shown while nothing is chosen. Defaults to the locale's `noFile`. */
+    placeholder?: string;
+    /** Show the list of held files below the row. */
+    showList?: boolean;
+    /** The `name` the hidden input posts under, for a plain form submit. */
+    name?: string;
+    onaccept?: (files: File[]) => void;
+    onreject?: (rejected: RejectedFile[]) => void;
+    class?: string;
+}
+declare const FileInput: import("svelte").Component<Props, {}, "files">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;