@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/styles/paper/Divider.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type DividerOrientation = 'horizontal' | 'vertical';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		orientation?: DividerOrientation;
+		/** Centred caption drawn over a horizontal rule. */
+		label?: string;
+	}
+
+	let { orientation = 'horizontal', label, class: className = '', ...rest }: Props = $props();
+</script>
+
+{#if orientation === 'vertical'}
+	<div
+		role="separator"
+		aria-orientation="vertical"
+		class="w-px self-stretch bg-hairline {className}"
+		{...rest}
+	></div>
+{:else if label}
+	<div class="flex items-center gap-3 {className}" {...rest}>
+		<span class="h-px flex-1 bg-hairline"></span>
+		<span class="font-sans text-xs font-medium text-text-muted">{label}</span>
+		<span class="h-px flex-1 bg-hairline"></span>
+	</div>
+{:else}
+	<div role="separator" class="h-px w-full bg-hairline {className}" {...rest}></div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type DividerOrientation = 'horizontal' | 'vertical';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    orientation?: DividerOrientation;
+    /** Centred caption drawn over a horizontal rule. */
+    label?: string;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/styles/paper/Drawer.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { isBackdropClick, syncDialog } from '../../core/dialog.svelte.js';
+
+	export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+	export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+
+	interface Props extends HTMLDialogAttributes {
+		/** Bindable. Built on the native `<dialog>`, so it gets the top layer,
+		 *  the backdrop, Escape handling and focus containment for free. */
+		open?: boolean;
+		side?: DrawerSide;
+		size?: DrawerSize;
+		title?: string;
+		description?: string;
+		dismissible?: boolean;
+		footer?: Snippet;
+		onclose?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		side = 'right',
+		size = 'md',
+		title,
+		description,
+		dismissible = true,
+		footer,
+		onclose,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+	let dialog: HTMLDialogElement | null = $state(null);
+
+	const horizontal = $derived(side === 'left' || side === 'right');
+
+	const widths: Record<DrawerSize, string> = {
+		sm: 'w-[min(20rem,100vw)]',
+		md: 'w-[min(28rem,100vw)]',
+		lg: 'w-[min(40rem,100vw)]',
+		full: 'w-screen'
+	};
+
+	const heights: Record<DrawerSize, string> = {
+		sm: 'h-[min(16rem,100vh)]',
+		md: 'h-[min(24rem,100vh)]',
+		lg: 'h-[min(36rem,100vh)]',
+		full: 'h-screen'
+	};
+
+	const sides: Record<DrawerSide, string> = {
+		left: 'mr-auto ml-0 h-screen max-h-screen border-r',
+		right: 'mr-0 ml-auto h-screen max-h-screen border-l',
+		top: 'mt-0 mb-auto w-screen max-w-screen border-b',
+		bottom: 'mt-auto mb-0 w-screen max-w-screen border-t'
+	};
+
+	const slide: Record<DrawerSide, string> = {
+		left: 'animate-[drawer-left_220ms_cubic-bezier(0,0,0.2,1)]',
+		right: 'animate-[drawer-right_220ms_cubic-bezier(0,0,0.2,1)]',
+		top: 'animate-[drawer-top_220ms_cubic-bezier(0,0,0.2,1)]',
+		bottom: 'animate-[drawer-bottom_220ms_cubic-bezier(0,0,0.2,1)]'
+	};
+
+	$effect(() => syncDialog(dialog, open));
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onclose={close}
+	onclick={(event) => {
+		if (dismissible && isBackdropClick(event, dialog)) close();
+	}}
+	oncancel={(event) => {
+		if (!dismissible) event.preventDefault();
+	}}
+	class="max-h-none max-w-none border-hairline bg-bg p-0 text-text shadow-2xl backdrop:bg-text/30 backdrop:backdrop-blur-[1px]
+		{sides[side]} {horizontal ? widths[size] : heights[size]} {slide[side]} {className}"
+	{...rest}
+>
+	<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">
+				<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>
+					{/if}
+					{#if description}
+						<p class="font-sans text-[13px] text-text-muted">{description}</p>
+					{/if}
+				</div>
+				{#if dismissible}
+					<button
+						type="button"
+						onclick={close}
+						aria-label={t.current.close}
+						class="-m-1 shrink-0 rounded-md p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+					>
+						<svg class="size-4" 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}
+			</div>
+		{/if}
+
+		<div
+			class="flex-1 overflow-y-auto px-5 py-4 font-sans text-sm leading-relaxed text-text-secondary"
+		>
+			{@render children()}
+		</div>
+
+		{#if footer}
+			<div
+				class="flex items-center justify-end gap-2 border-t border-hairline bg-bg-alt px-5 py-3.5"
+			>
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+	@keyframes -global-drawer-right {
+		from {
+			transform: translateX(100%);
+		}
+	}
+	@keyframes -global-drawer-left {
+		from {
+			transform: translateX(-100%);
+		}
+	}
+	@keyframes -global-drawer-top {
+		from {
+			transform: translateY(-100%);
+		}
+	}
+	@keyframes -global-drawer-bottom {
+		from {
+			transform: translateY(100%);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		dialog {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+interface Props extends HTMLDialogAttributes {
+    /** Bindable. Built on the native `<dialog>`, so it gets the top layer,
+     *  the backdrop, Escape handling and focus containment for free. */
+    open?: boolean;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    title?: string;
+    description?: string;
+    dismissible?: boolean;
+    footer?: Snippet;
+    onclose?: () => void;
+    children: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/styles/paper/Dropdown.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { anchored, type Placement } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
+	import { describeTrigger, menuItems, popupTrigger } from '../../core/trigger.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	interface Props {
+		/** The control that opens the menu — put a `Button` in here. */
+		trigger: Snippet;
+		/** Menu contents: `MenuItem`, `MenuSeparator`, or anything else. */
+		children: Snippet;
+		open?: boolean;
+		placement?: Placement;
+		offset?: number;
+		/** Stretch the menu to the trigger's width. */
+		matchWidth?: boolean;
+		/** Close as soon as an item inside is activated. Default true. */
+		closeOnSelect?: boolean;
+		/** Accessible name for the menu. Defaults to the locale's `menu`. */
+		label?: string;
+		class?: string;
+		/** Classes for the wrapper around the trigger. */
+		triggerClass?: string;
+	}
+
+	let {
+		trigger,
+		children,
+		open = $bindable(false),
+		placement = 'bottom-start',
+		offset = 6,
+		matchWidth = false,
+		closeOnSelect = true,
+		label,
+		class: className = '',
+		triggerClass = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let anchorEl: HTMLElement | null = $state(null);
+	let menuEl: HTMLElement | null = $state(null);
+
+	// The ARIA state goes on the consumer's own control, not on our wrapper.
+	$effect(() => describeTrigger(anchorEl, 'menu', open));
+
+	function onMenuKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' || event.key === 'Tab') {
+			if (event.key === 'Escape') event.preventDefault();
+			event.stopPropagation();
+			open = false;
+			return;
+		}
+		navigateList(event, menuItems(menuEl));
+	}
+
+	function onMenuClick(event: MouseEvent) {
+		if (!closeOnSelect) return;
+		if ((event.target as HTMLElement).closest('[role="menuitem"]:not([disabled])')) open = false;
+	}
+</script>
+
+<span
+	bind:this={anchorEl}
+	use:popupTrigger={{
+		toggle: () => (open = !open),
+		open: () => (open = true),
+		close: () => (open = false),
+		arrowOpens: true,
+		isOpen: () => open
+	}}
+	class="inline-flex {triggerClass}"
+>
+	{@render trigger()}
+</span>
+
+{#if open}
+	<div
+		bind:this={menuEl}
+		use:portal
+		use:anchored={{ anchor: anchorEl, placement, offset, matchWidth }}
+		use:clickOutside={{ onoutside: () => (open = false), ignore: [anchorEl] }}
+		use:focusTrap={{ restore: true }}
+		onkeydown={onMenuKeydown}
+		onclick={onMenuClick}
+		role="menu"
+		aria-label={label ?? t.current.menu}
+		tabindex="-1"
+		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 flex-col overflow-y-auto rounded-lg border border-hairline bg-bg py-1 font-sans shadow-lg {className}"
+	>
+		{@render children()}
+	</div>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import { type Placement } from '../../core/actions/anchor.js';
+interface Props {
+    /** The control that opens the menu — put a `Button` in here. */
+    trigger: Snippet;
+    /** Menu contents: `MenuItem`, `MenuSeparator`, or anything else. */
+    children: Snippet;
+    open?: boolean;
+    placement?: Placement;
+    offset?: number;
+    /** Stretch the menu to the trigger's width. */
+    matchWidth?: boolean;
+    /** Close as soon as an item inside is activated. Default true. */
+    closeOnSelect?: boolean;
+    /** Accessible name for the menu. Defaults to the locale's `menu`. */
+    label?: string;
+    class?: string;
+    /** Classes for the wrapper around the trigger. */
+    triggerClass?: string;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

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;