@nqmcreative/ui 0.2.3 → 0.4.0

package/dist/styles/matte/FileInput.svelte

@@ -0,0 +1,194 @@
+<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 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-[15px]',
+		lg: 'h-11 text-base'
+	};
+
+	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 border bg-bg pr-1 pl-1 transition-colors duration-150 ease-brand-out
+			{sizes[size]}
+			{invalid
+			? 'border-danger focus-within:border-danger'
+			: `border-hairline ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''}"
+	>
+		<button
+			type="button"
+			{disabled}
+			onclick={() => input?.click()}
+			class="shrink-0 border border-hairline bg-bg-alt font-mono tracking-wide 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 p-1 text-text-muted transition-colors duration-150 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.5" />
+				</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 border border-hairline">
+			{#each files as file, i (file.name + file.size + i)}
+				<li
+					class="flex items-center gap-3 border-b border-hairline px-3.5 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 font-mono text-xs text-text-muted">{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 p-1 text-text-muted transition-colors duration-150 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.5" />
+						</svg>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

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

package/dist/styles/matte/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[];
@@ -59,11 +62,12 @@
 												href={item.href}
 												target={item.external ? '_blank' : undefined}
 												rel={item.external ? 'noreferrer' : undefined}
-												class="font-sans text-sm text-text-secondary transition-colors duration-150 ease-brand-out {toneHoverText[
+												class="inline-flex items-center gap-2 font-sans text-sm text-text-secondary 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/matte/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/matte/InputAddon.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	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;
+	}
+
+	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.5 text-[15px]',
+		lg: 'h-11 px-3.5 text-base'
+	};
+</script>
+
+<span
+	class="inline-flex shrink-0 items-center gap-1.5 border border-hairline font-mono whitespace-nowrap text-text-secondary
+		{sizes[size]}
+		{variant === 'muted' ? 'bg-bg-alt' : 'bg-bg'} {className}"
+	{...rest}
+>
+	{@render children()}
+</span>

package/dist/styles/matte/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/matte/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/matte/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/matte/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>`. */
@@ -49,7 +50,7 @@
 			<path d="m2 7 3.2 3.2L12 3.6" stroke="currentColor" stroke-width="1.6" />
 		</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/matte/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';
@@ -11,6 +12,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;
@@ -26,6 +29,7 @@
 		open = $bindable(false),
 		title,
 		description,
+		icon,
 		size = 'md',
 		dismissible = true,
 		showClose,
@@ -75,6 +79,7 @@
 	<div class="flex flex-col">
 		{#if title || closable}
 			<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-lg font-medium tracking-tight">{title}</h2>

package/dist/styles/matte/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/matte/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';
 
 	interface Props {
@@ -153,7 +158,7 @@
 					tone
 				]}"
 			>
-				{option.label}
+				{#if option.icon}<span class={iconSm}>{@render option.icon()}</span>{/if}{option.label}
 				<button
 					type="button"
 					onclick={() => remove(option)}
@@ -259,6 +264,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/matte/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/matte/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, toneText, type Tone } from '../../core/tones.js';
 	import Drawer from './Drawer.svelte';
 	import Dropdown from './Dropdown.svelte';
@@ -82,6 +85,7 @@
 										? toneText[tone]
 										: 'text-text-secondary 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
@@ -94,7 +98,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}
@@ -109,6 +118,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="font-mono text-[11px] text-text-muted">{item.badge}</span>
@@ -154,7 +164,10 @@
 						? toneText[tone]
 						: 'text-text-secondary'} {item.disabled ? '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="font-mono text-[11px] text-text-muted">{item.badge}</span>
 					{/if}
@@ -166,9 +179,10 @@
 								<a
 									href={child.href}
 									onclick={() => (menuOpen = false)}
-									class="block py-2 font-sans text-sm text-text-muted"
+									class="flex items-center gap-2.5 py-2 font-sans text-sm text-text-muted"
 								>
-									{child.label}
+									{#if child.icon}<span class={iconMd}>{@render child.icon()}</span
+										>{/if}{child.label}
 								</a>
 							</li>
 						{/each}

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