@nqmcreative/ui 0.1.0 → 0.2.0

package/dist/{components → styles/matte}/Dropzone.svelte

@@ -1,12 +1,8 @@
 <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';
-	}
+	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. */
@@ -67,46 +63,18 @@
 		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;
-		});
-	}
+	const formatSize = (bytes: number) => toReadableSize(bytes, t.current.byteUnits);
 
 	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;
-		}
+		const { accepted, rejected: bad } = sortFiles(incoming, {
+			accept,
+			maxSize,
+			maxFiles,
+			multiple,
+			held: files.length
+		});
 
 		rejected = bad;
 		if (bad.length) onreject?.(bad);

package/dist/{components → styles/matte}/Dropzone.svelte.d.ts

@@ -1,9 +1,6 @@
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
-export interface RejectedFile {
-    file: File;
-    reason: 'type' | 'size' | 'count';
-}
+import { type Tone } from '../../core/tones.js';
+import { type RejectedFile } from '../../core/files.js';
 interface Props {
     /** Bindable list of accepted files. */
     files?: File[];

package/dist/{components → styles/matte}/EmptyState.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneSoft, type Tone } from '../tones.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		title: string;

package/dist/{components → styles/matte}/EmptyState.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     description?: string;

package/dist/styles/matte/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 bg-bg p-6 {href
+		? `transition-colors duration-150 ease-brand-out ${focusRing} ${toneRing[tone]}`
+		: ''} {className}"
+	{...rest}
+>
+	{#if icon}
+		<span class="flex size-10 items-center justify-center {toneSoft[tone]}">
+			{@render icon()}
+		</span>
+	{/if}
+
+	<h3
+		class="font-heading text-base font-medium 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/matte/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/matte/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;
+		/** Hairline grid rather than free-standing cards. */
+		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-mono text-xs tracking-wide text-text-muted uppercase">{eyebrow}</span>
+				{/if}
+				{#if title}
+					<h2 class="font-heading text-3xl font-medium 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 border border-hairline bg-hairline'
+				: 'gap-10'}"
+		>
+			{@render children()}
+		</div>
+	</div>
+</section>

package/dist/styles/matte/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;
+    /** Hairline grid rather than free-standing cards. */
+    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/{components → styles/matte}/Footer.svelte

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { toneHoverText, type Tone } from '../tones.js';
+	import { toneHoverText, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		columns?: FooterColumn[];

package/dist/{components → styles/matte}/Footer.svelte.d.ts

@@ -8,7 +8,7 @@ export interface FooterColumn {
     links: FooterLink[];
 }
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     columns?: FooterColumn[];
     /** Logo, wordmark and a line of copy on the left. */

package/dist/styles/matte/HeroSection.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		/** Small line above the headline. */
+		eyebrow?: string;
+		title: string;
+		description?: string;
+		tone?: Tone;
+		/** `center` also centres the actions. Ignored when `media` is set. */
+		align?: 'left' | 'center';
+		/** Buttons under the copy. */
+		actions?: Snippet;
+		/** Anything on the right — a screenshot, an illustration, a form. */
+		media?: Snippet;
+		/** Extra content between the description and the actions. */
+		children?: Snippet;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		tone = 'brand',
+		align = 'left',
+		actions,
+		media,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	// A media column only makes sense next to left-aligned copy.
+	const centred = $derived(align === 'center' && !media);
+</script>
+
+<section class="w-full px-6 py-20 sm:py-28 {className}" {...rest}>
+	<div
+		class="mx-auto flex w-full max-w-6xl gap-16
+			{media ? 'flex-col lg:flex-row lg:items-center' : 'flex-col'}"
+	>
+		<div
+			class="flex min-w-0 flex-1 flex-col gap-6 {centred
+				? 'items-center text-center'
+				: 'items-start'}"
+		>
+			{#if eyebrow}
+				<span class="font-mono text-xs tracking-wide uppercase {toneText[tone]}">{eyebrow}</span>
+			{/if}
+
+			<h1
+				class="max-w-2xl font-heading text-4xl leading-tight font-medium tracking-tight text-balance text-text sm:text-5xl"
+			>
+				{title}
+			</h1>
+
+			{#if description}
+				<p class="max-w-xl font-sans text-lg leading-relaxed text-pretty text-text-secondary">
+					{description}
+				</p>
+			{/if}
+
+			{#if children}
+				{@render children()}
+			{/if}
+
+			{#if actions}
+				<div class="flex flex-wrap items-center gap-3 pt-2 {centred ? 'justify-center' : ''}">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+
+		{#if media}
+			<div class="min-w-0 flex-1">{@render media()}</div>
+		{/if}
+	</div>
+</section>

package/dist/styles/matte/HeroSection.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Small line above the headline. */
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    tone?: Tone;
+    /** `center` also centres the actions. Ignored when `media` is set. */
+    align?: 'left' | 'center';
+    /** Buttons under the copy. */
+    actions?: Snippet;
+    /** Anything on the right — a screenshot, an illustration, a form. */
+    media?: Snippet;
+    /** Extra content between the description and the actions. */
+    children?: Snippet;
+}
+declare const HeroSection: import("svelte").Component<Props, {}, "">;
+type HeroSection = ReturnType<typeof HeroSection>;
+export default HeroSection;

package/dist/{components → styles/matte}/Input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
 
 	export type InputSize = 'sm' | 'md' | 'lg';
 

package/dist/{components → styles/matte}/Input.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type InputSize = 'sm' | 'md' | 'lg';
 interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     value?: string;

package/dist/{components → styles/matte}/Link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import { focusRing, toneHoverText, toneRing, toneText, type Tone } from '../tones.js';
+	import { focusRing, toneHoverText, toneRing, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLAnchorAttributes {
 		tone?: Tone;

package/dist/{components → styles/matte}/Link.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLAnchorAttributes {
     tone?: Tone;
     /** `'hover'` shows the rule only on hover. */

package/dist/{components → styles/matte}/LocaleProvider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { provideLocale, type Locale } from '../locale.svelte.js';
+	import { provideLocale, type Locale } from '../../core/locale.svelte.js';
 
 	interface Props {
 		/** Full locale or just the keys you want to change. */

package/dist/{components → styles/matte}/LocaleProvider.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type Locale } from '../locale.svelte.js';
+import { type Locale } from '../../core/locale.svelte.js';
 interface Props {
     /** Full locale or just the keys you want to change. */
     locale: Partial<Locale>;

package/dist/styles/matte/LogoCloud.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Logo {
+		name: string;
+		src?: string;
+		href?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		title?: string;
+		/** Without `src` the name is set in the heading face — fine for wordmarks. */
+		logos?: Logo[];
+		/** Dim until hovered, so the row does not compete with the headline. */
+		muted?: boolean;
+		/** Your own markup instead of `logos`. */
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		logos = [],
+		muted = true,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<section class="w-full px-6 py-14 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col items-center gap-8">
+		{#if title}
+			<p class="text-center font-mono text-xs tracking-wide text-text-muted uppercase">{title}</p>
+		{/if}
+
+		<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
+			{#if children}
+				{@render children()}
+			{:else}
+				{#each logos as logo (logo.name)}
+					<svelte:element
+						this={logo.href ? 'a' : 'div'}
+						href={logo.href}
+						class="flex items-center transition-all duration-200 ease-brand-out {muted
+							? 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0'
+							: ''}"
+					>
+						{#if logo.src}
+							<img src={logo.src} alt={logo.name} class="h-7 w-auto object-contain" />
+						{:else}
+							<span class="font-heading text-lg font-medium tracking-tight text-text-secondary">
+								{logo.name}
+							</span>
+						{/if}
+					</svelte:element>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</section>

package/dist/styles/matte/LogoCloud.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface Logo {
+    name: string;
+    src?: string;
+    href?: string;
+}
+interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    /** Without `src` the name is set in the heading face — fine for wordmarks. */
+    logos?: Logo[];
+    /** Dim until hovered, so the row does not compete with the headline. */
+    muted?: boolean;
+    /** Your own markup instead of `logos`. */
+    children?: Snippet;
+}
+declare const LogoCloud: import("svelte").Component<Props, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

package/dist/{components → styles/matte}/MenuItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { toneSoftHover, toneText, type Tone } from '../tones.js';
+	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLButtonAttributes {
 		/** Renders an `<a>` instead of a `<button>`. */

package/dist/{components → styles/matte}/MenuItem.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLButtonAttributes {
     /** Renders an `<a>` instead of a `<button>`. */
     href?: string;

package/dist/{components → styles/matte}/Modal.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { useLocale } from '../locale.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
 
 	export type ModalSize = 'sm' | 'md' | 'lg';
 
@@ -46,11 +47,7 @@
 		lg: 'max-w-2xl'
 	};
 
-	$effect(() => {
-		if (!dialog) return;
-		if (open && !dialog.open) dialog.showModal();
-		else if (!open && dialog.open) dialog.close();
-	});
+	$effect(() => syncDialog(dialog, open));
 
 	function close() {
 		open = false;
@@ -59,7 +56,7 @@
 
 	function onBackdrop(event: MouseEvent) {
 		if (!dismissible) return;
-		if (event.target === dialog) close();
+		if (isBackdropClick(event, dialog)) close();
 	}
 </script>