@nqmcreative/ui 0.1.0 → 0.2.0

package/dist/styles/paper/Dropzone.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { toneBorder, toneSoft, toneSurface, toneText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { formatSize as toReadableSize, sortFiles, type RejectedFile } from '../../core/files.js';
+
+	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 formatSize = (bytes: number) => toReadableSize(bytes, t.current.byteUnits);
+
+	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 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 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 = $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 rounded-lg border-2 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-alt/50 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"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M3.5 13v3.5h13V13"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+					/>
+				</svg>
+			{/if}
+		</span>
+		<span class="flex flex-col gap-1">
+			<span class="text-sm font-semibold text-text">{label ?? t.current.dropFiles}</span>
+			<span class="text-[13px] text-text-secondary">
+				{t.current.or}
+				<span class="underline underline-offset-2">{t.current.browse}</span>
+			</span>
+			{#if defaultHint}
+				<span class="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-[13px] text-danger">
+					{item.file.name} — {reasons[item.reason]}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if showList && files.length}
+		<ul class="flex flex-col rounded-lg border border-hairline bg-bg shadow-xs">
+			{#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={() => remove(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/paper/Dropzone.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import { type Tone } from '../../core/tones.js';
+import { type RejectedFile } from '../../core/files.js';
+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/styles/paper/EmptyState.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneSoft, type Tone } from '../../core/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 rounded-lg px-6 py-12 text-center font-sans
+		{bordered ? 'border border-dashed border-hairline-strong bg-bg-alt/50' : ''} {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"
+					rx="2.5"
+					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"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{/if}
+	</span>
+	<div class="flex flex-col gap-1.5">
+		<p class="font-heading text-base font-semibold 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/styles/paper/EmptyState.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/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/styles/paper/FeatureCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneHoverText, toneRing, toneSoft, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		title: string;
+		description?: string;
+		tone?: Tone;
+		/** Turns the whole card into a link. */
+		href?: string;
+		/** Glyph inside the tinted square. */
+		icon?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		tone = 'brand',
+		href,
+		icon,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{href}
+	class="group flex flex-col gap-3 rounded-lg bg-bg p-5 {href
+		? `transition-shadow duration-150 ease-brand-out hover:shadow-md ${focusRing} ${toneRing[tone]}`
+		: ''} {className}"
+	{...rest}
+>
+	{#if icon}
+		<span class="flex size-10 items-center justify-center rounded-lg {toneSoft[tone]}">
+			{@render icon()}
+		</span>
+	{/if}
+
+	<h3
+		class="font-heading text-base font-semibold text-text {href
+			? `transition-colors duration-150 ${toneHoverText[tone]}`
+			: ''}"
+	>
+		{title}
+	</h3>
+
+	{#if description}
+		<p class="font-sans text-sm leading-relaxed text-text-secondary">{description}</p>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

package/dist/styles/paper/FeatureCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    tone?: Tone;
+    /** Turns the whole card into a link. */
+    href?: string;
+    /** Glyph inside the tinted square. */
+    icon?: Snippet;
+    children?: Snippet;
+}
+declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/styles/paper/FeatureGrid.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type FeatureColumns = 2 | 3 | 4;
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		columns?: FeatureColumns;
+		/** Cards in a bordered grid rather than free-standing. */
+		bordered?: boolean;
+		/** `FeatureCard`s, or anything else. */
+		children: Snippet;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		columns = 3,
+		bordered = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const cols: Record<FeatureColumns, string> = {
+		2: 'sm:grid-cols-2',
+		3: 'sm:grid-cols-2 lg:grid-cols-3',
+		4: 'sm:grid-cols-2 lg:grid-cols-4'
+	};
+</script>
+
+<section class="w-full px-6 py-20 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col gap-12">
+		{#if eyebrow || title || description}
+			<div class="flex max-w-xl flex-col gap-3">
+				{#if eyebrow}
+					<span class="font-sans text-[13px] font-semibold text-text-muted">{eyebrow}</span>
+				{/if}
+				{#if title}
+					<h2 class="font-heading text-3xl font-semibold tracking-tight text-balance text-text">
+						{title}
+					</h2>
+				{/if}
+				{#if description}
+					<p class="font-sans leading-relaxed text-pretty text-text-secondary">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div
+			class="grid {cols[columns]} {bordered
+				? 'gap-px overflow-hidden rounded-lg border border-hairline bg-hairline'
+				: 'gap-6'}"
+		>
+			{@render children()}
+		</div>
+	</div>
+</section>

package/dist/styles/paper/FeatureGrid.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type FeatureColumns = 2 | 3 | 4;
+interface Props extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    columns?: FeatureColumns;
+    /** Cards in a bordered grid rather than free-standing. */
+    bordered?: boolean;
+    /** `FeatureCard`s, or anything else. */
+    children: Snippet;
+}
+declare const FeatureGrid: import("svelte").Component<Props, {}, "">;
+type FeatureGrid = ReturnType<typeof FeatureGrid>;
+export default FeatureGrid;

package/dist/styles/paper/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-1.5 {className}" {...rest}>
+	{#if label}
+		<label for={htmlFor} class="font-sans text-sm font-medium text-text">
+			{label}
+			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+		</label>
+	{/if}
+	{@render children()}
+	{#if error}
+		<p class="font-sans text-[13px] text-danger">{error}</p>
+	{:else if hint}
+		<p class="font-sans text-[13px] text-text-muted">{hint}</p>
+	{/if}
+</div>

package/dist/styles/paper/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/styles/paper/Footer.svelte

@@ -0,0 +1,91 @@
+<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 '../../core/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-alt {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-sans text-[13px] font-semibold text-text">{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-[13px] text-text-muted 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-sans text-[13px] 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/styles/paper/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 '../../core/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;