@nqmcreative/ui 0.1.0

package/dist/components/Dropzone.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { toneBorder, toneSoft, toneSurface, toneText, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	export interface RejectedFile {
+		file: File;
+		reason: 'type' | 'size' | 'count';
+	}
+
+	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;
+		tone?: Tone;
+		/** Headline inside the zone. Defaults to the locale's `dropFiles`. */
+		label?: string;
+		hint?: string;
+		/** Hide the built-in file list to render your own. */
+		showList?: boolean;
+		onaccept?: (files: File[]) => void;
+		onreject?: (rejected: RejectedFile[]) => void;
+		/** Replaces the glyph above the label. */
+		icon?: Snippet;
+		class?: string;
+	}
+
+	let {
+		files = $bindable([]),
+		accept,
+		multiple = true,
+		maxSize = 0,
+		maxFiles = 0,
+		disabled = false,
+		tone = 'brand',
+		label,
+		hint,
+		showList = true,
+		onaccept,
+		onreject,
+		icon,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let input: HTMLInputElement | null = $state(null);
+	let dragging = $state(false);
+	let rejected = $state<RejectedFile[]>([]);
+	/** Nested elements fire dragleave too, so count depth instead of toggling. */
+	let depth = 0;
+
+	const defaultHint = $derived.by(() => {
+		if (hint) return hint;
+		// Symbols rather than words, so the auto-hint needs no translation.
+		const parts: string[] = [];
+		if (accept) parts.push(accept.replace(/,\s*/g, ', '));
+		if (maxSize) parts.push(`≤ ${formatSize(maxSize)}`);
+		if (maxFiles) parts.push(`×${maxFiles}`);
+		return parts.join(' · ');
+	});
+
+	function formatSize(bytes: number) {
+		const units = t.current.byteUnits;
+		if (bytes < 1024) return `${bytes} ${units[0]}`;
+		let value = bytes / 1024;
+		let i = 1;
+		while (value >= 1024 && i < units.length - 1) {
+			value /= 1024;
+			i++;
+		}
+		return `${value.toFixed(Number.isInteger(value) || value >= 10 ? 0 : 1)} ${units[i]}`;
+	}
+
+	function matchesAccept(file: File) {
+		if (!accept) return true;
+		return accept.split(',').some((raw) => {
+			const rule = raw.trim().toLowerCase();
+			if (!rule) return true;
+			if (rule.startsWith('.')) return file.name.toLowerCase().endsWith(rule);
+			if (rule.endsWith('/*')) return file.type.startsWith(rule.slice(0, -1));
+			return file.type.toLowerCase() === rule;
+		});
+	}
+
+	function add(incoming: FileList | File[] | null) {
+		if (!incoming || disabled) return;
+
+		const accepted: File[] = [];
+		const bad: RejectedFile[] = [];
+		let room = maxFiles ? maxFiles - (multiple ? files.length : 0) : Infinity;
+
+		for (const file of Array.from(incoming)) {
+			if (!matchesAccept(file)) bad.push({ file, reason: 'type' });
+			else if (maxSize && file.size > maxSize) bad.push({ file, reason: 'size' });
+			else if (room <= 0) bad.push({ file, reason: 'count' });
+			else {
+				accepted.push(file);
+				room--;
+			}
+			if (!multiple && accepted.length === 1) break;
+		}
+
+		rejected = bad;
+		if (bad.length) onreject?.(bad);
+		if (accepted.length === 0) return;
+
+		files = multiple ? [...files, ...accepted] : accepted.slice(0, 1);
+		onaccept?.(accepted);
+	}
+
+	function remove(index: number) {
+		files = files.filter((_, i) => i !== index);
+	}
+
+	function onDrop(event: DragEvent) {
+		event.preventDefault();
+		depth = 0;
+		dragging = false;
+		add(event.dataTransfer?.files ?? null);
+	}
+
+	const reasons: Record<RejectedFile['reason'], string> = $derived({
+		type: t.current.rejectedType,
+		size: t.current.rejectedSize,
+		count: t.current.rejectedCount
+	});
+</script>
+
+<div class="flex w-full flex-col gap-3 {className}">
+	<button
+		type="button"
+		{disabled}
+		onclick={() => input?.click()}
+		ondragenter={(event) => {
+			event.preventDefault();
+			depth++;
+			dragging = true;
+		}}
+		ondragover={(event) => event.preventDefault()}
+		ondragleave={() => {
+			depth = Math.max(0, depth - 1);
+			if (depth === 0) dragging = false;
+		}}
+		ondrop={onDrop}
+		class="flex w-full flex-col items-center gap-3 border border-dashed px-6 py-10 text-center font-sans transition-colors duration-150 ease-brand-out focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50
+			{dragging
+			? `${toneBorder[tone]} ${toneSurface[tone]}`
+			: 'border-hairline-strong bg-bg hover:bg-bg-alt'}
+			{toneText[tone]}"
+	>
+		<span class="flex size-12 items-center justify-center rounded-full {toneSoft[tone]}">
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<svg class="size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<path d="M10 14V3.5M6 7.5 10 3.5l4 4" stroke="currentColor" stroke-width="1.5" />
+					<path d="M3.5 13v3.5h13V13" stroke="currentColor" stroke-width="1.5" />
+				</svg>
+			{/if}
+		</span>
+		<span class="flex flex-col gap-1">
+			<span class="text-[15px] font-medium text-text">{label ?? t.current.dropFiles}</span>
+			<span class="text-sm text-text-secondary">
+				{t.current.or}
+				<span class="underline underline-offset-4">{t.current.browse}</span>
+			</span>
+			{#if defaultHint}
+				<span class="font-mono text-xs text-text-muted">{defaultHint}</span>
+			{/if}
+		</span>
+	</button>
+
+	<input
+		bind:this={input}
+		type="file"
+		{accept}
+		{multiple}
+		{disabled}
+		class="sr-only"
+		onchange={(event) => {
+			add(event.currentTarget.files);
+			event.currentTarget.value = '';
+		}}
+	/>
+
+	{#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 && files.length}
+		<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-4 py-3 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={() => remove(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/components/Dropzone.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import { type Tone } from '../tones.js';
+export interface RejectedFile {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+}
+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;
+    tone?: Tone;
+    /** Headline inside the zone. Defaults to the locale's `dropFiles`. */
+    label?: string;
+    hint?: string;
+    /** Hide the built-in file list to render your own. */
+    showList?: boolean;
+    onaccept?: (files: File[]) => void;
+    onreject?: (rejected: RejectedFile[]) => void;
+    /** Replaces the glyph above the label. */
+    icon?: Snippet;
+    class?: string;
+}
+declare const Dropzone: import("svelte").Component<Props, {}, "files">;
+type Dropzone = ReturnType<typeof Dropzone>;
+export default Dropzone;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneSoft, type Tone } from '../tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		title: string;
+		description?: string;
+		tone?: Tone;
+		/** Glyph inside the tinted circle. Defaults to a plain outline. */
+		icon?: Snippet;
+		/** Buttons or links under the copy. */
+		action?: Snippet;
+		/** Draws a dashed placeholder border around the block. */
+		bordered?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		tone = 'neutral',
+		icon,
+		action,
+		bordered = true,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	class="flex flex-col items-center gap-4 px-6 py-12 text-center font-sans
+		{bordered ? 'border border-dashed border-hairline-strong' : ''} {className}"
+	{...rest}
+>
+	<span class="flex size-12 items-center justify-center rounded-full {toneSoft[tone]}">
+		{#if icon}
+			{@render icon()}
+		{:else}
+			<svg class="size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+				<rect x="3" y="3" width="14" height="14" stroke="currentColor" stroke-width="1.5" />
+				<path d="M3 13.5 7 9.5l3 3 3-3 4 4" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+		{/if}
+	</span>
+	<div class="flex flex-col gap-1.5">
+		<p class="font-heading text-base font-medium text-text">{title}</p>
+		{#if description}
+			<p class="max-w-sm text-sm leading-relaxed text-text-secondary">{description}</p>
+		{/if}
+	</div>
+	{#if children}{@render children()}{/if}
+	{#if action}
+		<div class="flex flex-wrap items-center justify-center gap-3 pt-1">{@render action()}</div>
+	{/if}
+</div>

package/dist/components/EmptyState.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    tone?: Tone;
+    /** Glyph inside the tinted circle. Defaults to a plain outline. */
+    icon?: Snippet;
+    /** Buttons or links under the copy. */
+    action?: Snippet;
+    /** Draws a dashed placeholder border around the block. */
+    bordered?: boolean;
+    children?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/Field.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		label?: string;
+		/** Helper text under the control. Hidden while `error` is set. */
+		hint?: string;
+		/** Replaces the hint and turns it red. */
+		error?: string;
+		required?: boolean;
+		/** `id` of the control — set the same value on the input inside. */
+		for?: string;
+		children: Snippet;
+	}
+
+	let {
+		label,
+		hint,
+		error,
+		required = false,
+		for: htmlFor,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div class="flex w-full flex-col gap-2 {className}" {...rest}>
+	{#if label}
+		<label for={htmlFor} class="font-sans text-sm font-medium text-text">
+			{label}
+			{#if required}<span class="text-danger" aria-hidden="true">*</span>{/if}
+		</label>
+	{/if}
+	{@render children()}
+	{#if error}
+		<p class="font-sans text-sm text-danger">{error}</p>
+	{:else if hint}
+		<p class="font-sans text-sm text-text-muted">{hint}</p>
+	{/if}
+</div>

package/dist/components/Field.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    /** Helper text under the control. Hidden while `error` is set. */
+    hint?: string;
+    /** Replaces the hint and turns it red. */
+    error?: string;
+    required?: boolean;
+    /** `id` of the control — set the same value on the input inside. */
+    for?: string;
+    children: Snippet;
+}
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/Footer.svelte

@@ -0,0 +1,93 @@
+<script module lang="ts">
+	export interface FooterLink {
+		label: string;
+		href?: string;
+		external?: boolean;
+	}
+
+	export interface FooterColumn {
+		title: string;
+		links: FooterLink[];
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { toneHoverText, type Tone } from '../tones.js';
+
+	interface Props {
+		columns?: FooterColumn[];
+		/** Logo, wordmark and a line of copy on the left. */
+		brand?: Snippet;
+		/** Right side of the bottom bar — social links, a locale picker. */
+		bottom?: Snippet;
+		/** Left side of the bottom bar. Ignored when `bottom` covers both. */
+		copyright?: string;
+		tone?: Tone;
+		class?: string;
+	}
+
+	let {
+		columns = [],
+		brand,
+		bottom,
+		copyright,
+		tone = 'brand',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<footer class="w-full border-t border-hairline bg-bg {className}">
+	<div class="mx-auto flex w-full max-w-6xl flex-col gap-12 px-6 py-14">
+		{#if brand || columns.length}
+			<div class="flex flex-col gap-10 md:flex-row md:justify-between">
+				{#if brand}
+					<div class="flex max-w-xs flex-col gap-3">{@render brand()}</div>
+				{/if}
+
+				{#if columns.length}
+					<div class="grid grid-cols-2 gap-10 sm:grid-cols-3 md:gap-16">
+						{#each columns as column (column.title)}
+							<div class="flex flex-col gap-3">
+								<p class="font-mono text-[10px] tracking-wide text-text-muted uppercase">
+									{column.title}
+								</p>
+								<ul class="flex flex-col gap-2">
+									{#each column.links as item (item.label)}
+										<li>
+											<a
+												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[
+													tone
+												]}"
+											>
+												{item.label}
+												{#if item.external}<span aria-hidden="true" class="text-[0.85em]">↗</span
+													>{/if}
+											</a>
+										</li>
+									{/each}
+								</ul>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if copyright || bottom}
+			<div
+				class="flex flex-col gap-4 border-t border-hairline pt-6 sm:flex-row sm:items-center sm:justify-between"
+			>
+				{#if copyright}
+					<p class="font-mono text-xs text-text-muted">{copyright}</p>
+				{/if}
+				{#if bottom}
+					<div class="flex items-center gap-4">{@render bottom()}</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</footer>

package/dist/components/Footer.svelte.d.ts

@@ -0,0 +1,25 @@
+export interface FooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+}
+export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+}
+import type { Snippet } from 'svelte';
+import { type Tone } from '../tones.js';
+interface Props {
+    columns?: FooterColumn[];
+    /** Logo, wordmark and a line of copy on the left. */
+    brand?: Snippet;
+    /** Right side of the bottom bar — social links, a locale picker. */
+    bottom?: Snippet;
+    /** Left side of the bottom bar. Ignored when `bottom` covers both. */
+    copyright?: string;
+    tone?: Tone;
+    class?: string;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/Input.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+
+	export type InputSize = 'sm' | 'md' | 'lg';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		/** Paints the field red and sets `aria-invalid`. */
+		invalid?: boolean;
+		/** Leading adornment — an icon, a currency symbol, `https://` … */
+		prefix?: Snippet;
+		/** Trailing adornment. */
+		suffix?: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		prefix,
+		suffix,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<InputSize, string> = {
+		sm: 'h-9 text-[13px]',
+		md: 'h-11 text-[15px]',
+		lg: 'h-12 text-base'
+	};
+</script>
+
+<span
+	class="inline-flex w-full items-center gap-2 border bg-bg px-4 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' : ''} {className}"
+>
+	{#if prefix}
+		<span class="shrink-0 text-text-muted">{@render prefix()}</span>
+	{/if}
+	<input
+		bind:value
+		{disabled}
+		aria-invalid={invalid ? 'true' : undefined}
+		class="w-full min-w-0 bg-transparent font-sans text-text placeholder:text-text-muted focus:outline-none"
+		{...rest}
+	/>
+	{#if suffix}
+		<span class="shrink-0 text-text-muted">{@render suffix()}</span>
+	{/if}
+</span>

package/dist/components/Input.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export type InputSize = 'sm' | 'md' | 'lg';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    /** Paints the field red and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Leading adornment — an icon, a currency symbol, `https://` … */
+    prefix?: Snippet;
+    /** Trailing adornment. */
+    suffix?: Snippet;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/InputGroup.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** Children sit flush against each other with shared hairlines —
+		 *  an Input plus a Button, a Select plus an Input, and so on. */
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div
+	class="flex w-full items-stretch [&>*]:min-w-0 [&>*]:rounded-none [&>*:focus-within]:relative [&>*:focus-within]:z-10 [&>*:not(:first-child)]:-ml-px {className}"
+	{...rest}
+>
+	{@render children()}
+</div>

package/dist/components/InputGroup.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Children sit flush against each other with shared hairlines —
+     *  an Input plus a Button, a Select plus an Input, and so on. */
+    children: Snippet;
+}
+declare const InputGroup: import("svelte").Component<Props, {}, "">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/Kbd.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<kbd
+	class="inline-flex h-6 min-w-6 items-center justify-center border border-b-2 border-hairline-strong bg-bg-alt px-1.5 font-mono text-[11px] text-text-secondary {className}"
+	{...rest}
+>
+	{@render children()}
+</kbd>

package/dist/components/Kbd.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/Label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLLabelAttributes {
+		required?: boolean;
+		children: Snippet;
+	}
+
+	let { required = false, class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<label class="font-sans text-sm font-medium text-text {className}" {...rest}>
+	{@render children()}
+	{#if required}<span class="text-danger" aria-hidden="true">*</span>{/if}
+</label>

package/dist/components/Label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+interface Props extends HTMLLabelAttributes {
+    required?: boolean;
+    children: Snippet;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;