@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/styles/paper/Navbar.svelte

@@ -0,0 +1,201 @@
+<script module lang="ts">
+	export interface NavItem {
+		label: string;
+		href?: string;
+		/** Marks the current page — also sets `aria-current`. */
+		active?: boolean;
+		disabled?: boolean;
+		/** Renders a dropdown instead of a plain link. */
+		items?: NavItem[];
+		/** Small count or tag after the label. */
+		badge?: string | number;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { focusRing, toneRing, toneSoft, toneText, type Tone } from '../../core/tones.js';
+	import Drawer from './Drawer.svelte';
+	import Dropdown from './Dropdown.svelte';
+	import MenuItem from './MenuItem.svelte';
+
+	interface Props {
+		items?: NavItem[];
+		/** Logo or wordmark on the left. */
+		brand?: Snippet;
+		/** Buttons on the right — sign in, theme toggle, avatar. */
+		actions?: Snippet;
+		/** Extra content inside the mobile drawer, under the links. */
+		mobileExtra?: Snippet;
+		tone?: Tone;
+		/** Sticks to the top of the viewport. */
+		sticky?: boolean;
+		/** Hairline along the bottom edge. Default true. */
+		bordered?: boolean;
+		/** Bindable — the mobile drawer's state. */
+		menuOpen?: boolean;
+		class?: string;
+	}
+
+	let {
+		items = [],
+		brand,
+		actions,
+		mobileExtra,
+		tone = 'brand',
+		sticky = false,
+		bordered = true,
+		menuOpen = $bindable(false),
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	// paper gives the active link a pill rather than a colour change, so the
+	// current page is legible without relying on hue alone.
+	const link =
+		'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 font-sans text-sm font-medium transition-colors duration-150 ease-brand-out';
+</script>
+
+<header
+	class="w-full bg-bg {sticky ? 'sticky top-0 z-40' : ''} {bordered
+		? 'border-b border-hairline'
+		: ''} {className}"
+>
+	<nav
+		aria-label={t.current.navigation}
+		class="mx-auto flex h-16 w-full max-w-6xl items-center gap-6 px-6"
+	>
+		{#if brand}
+			<div class="flex shrink-0 items-center">{@render brand()}</div>
+		{/if}
+
+		<!-- desktop links -->
+		<ul class="hidden flex-1 items-center gap-1 md:flex">
+			{#each items as item (item.label)}
+				<li>
+					{#if item.items?.length}
+						<Dropdown label={item.label}>
+							{#snippet trigger()}
+								<button
+									type="button"
+									class="{link} {focusRing} {toneRing[tone]} {item.active
+										? `${toneSoft[tone]}`
+										: 'text-text-secondary hover:bg-bg-inset hover:text-text'}"
+								>
+									{item.label}
+									<svg class="size-3" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+										<path
+											d="m4 6 4 4 4-4"
+											stroke="currentColor"
+											stroke-width="1.8"
+											stroke-linecap="round"
+										/>
+									</svg>
+								</button>
+							{/snippet}
+							{#each item.items as child (child.label)}
+								<MenuItem href={child.href} disabled={child.disabled} selected={child.active}>
+									{child.label}
+								</MenuItem>
+							{/each}
+						</Dropdown>
+					{:else}
+						<a
+							href={item.href}
+							aria-current={item.active ? 'page' : undefined}
+							class="{link} {focusRing} {toneRing[tone]} {item.active
+								? toneSoft[tone]
+								: 'text-text-secondary hover:bg-bg-inset hover:text-text'} {item.disabled
+								? 'pointer-events-none opacity-50'
+								: ''}"
+						>
+							{item.label}
+							{#if item.badge !== undefined}
+								<span class="text-[11px] text-text-muted tabular-nums">{item.badge}</span>
+							{/if}
+						</a>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+
+		<div class="ml-auto flex items-center gap-3">
+			{#if actions}
+				<div class="hidden items-center gap-2 md:flex">{@render actions()}</div>
+			{/if}
+
+			<!-- mobile trigger -->
+			<button
+				type="button"
+				onclick={() => (menuOpen = true)}
+				aria-label={t.current.openMenu}
+				aria-expanded={menuOpen}
+				class="inline-flex size-9 items-center justify-center rounded-md text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text md:hidden {focusRing} {toneRing[
+					tone
+				]}"
+			>
+				<svg class="size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<path
+						d="M3 6h14M3 10h14M3 14h14"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	</nav>
+</header>
+
+<Drawer bind:open={menuOpen} side="right" size="sm" title={t.current.navigation}>
+	<ul class="flex flex-col gap-0.5">
+		{#each items as item (item.label)}
+			<li>
+				<a
+					href={item.href}
+					onclick={() => (menuOpen = false)}
+					aria-current={item.active ? 'page' : undefined}
+					class="flex items-center justify-between gap-3 rounded-md px-3 py-2.5 font-sans text-sm font-medium {item.active
+						? `${toneSoft[tone]}`
+						: 'text-text-secondary hover:bg-bg-inset'} {item.disabled
+						? 'pointer-events-none opacity-50'
+						: ''}"
+				>
+					{item.label}
+					{#if item.badge !== undefined}
+						<span class="text-[11px] text-text-muted tabular-nums">{item.badge}</span>
+					{/if}
+				</a>
+				{#if item.items?.length}
+					<ul class="flex flex-col pb-1 pl-3">
+						{#each item.items as child (child.label)}
+							<li>
+								<a
+									href={child.href}
+									onclick={() => (menuOpen = false)}
+									class="block rounded-md px-3 py-2 font-sans text-[13px] text-text-muted hover:bg-bg-inset {toneText[
+										tone
+									]}"
+								>
+									{child.label}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+
+	{#if actions || mobileExtra}
+		<div class="mt-6 flex flex-col gap-3 border-t border-hairline pt-6">
+			{#if mobileExtra}
+				{@render mobileExtra()}
+			{:else if actions}
+				{@render actions()}
+			{/if}
+		</div>
+	{/if}
+</Drawer>

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

@@ -0,0 +1,33 @@
+export interface NavItem {
+    label: string;
+    href?: string;
+    /** Marks the current page — also sets `aria-current`. */
+    active?: boolean;
+    disabled?: boolean;
+    /** Renders a dropdown instead of a plain link. */
+    items?: NavItem[];
+    /** Small count or tag after the label. */
+    badge?: string | number;
+}
+import type { Snippet } from 'svelte';
+import { type Tone } from '../../core/tones.js';
+interface Props {
+    items?: NavItem[];
+    /** Logo or wordmark on the left. */
+    brand?: Snippet;
+    /** Buttons on the right — sign in, theme toggle, avatar. */
+    actions?: Snippet;
+    /** Extra content inside the mobile drawer, under the links. */
+    mobileExtra?: Snippet;
+    tone?: Tone;
+    /** Sticks to the top of the viewport. */
+    sticky?: boolean;
+    /** Hairline along the bottom edge. Default true. */
+    bordered?: boolean;
+    /** Bindable — the mobile drawer's state. */
+    menuOpen?: boolean;
+    class?: string;
+}
+declare const Navbar: import("svelte").Component<Props, {}, "menuOpen">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/styles/paper/NumberInput.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { clampToStep } from '../../core/number.js';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Short unit rendered inside the field, e.g. `'px'` or `'%'`. */
+		unit?: string;
+	}
+
+	let {
+		value = $bindable(0),
+		min = -Infinity,
+		max = Infinity,
+		step = 1,
+		tone = 'brand',
+		invalid = false,
+		unit,
+		disabled = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	const clamp = (next: number) => clampToStep(next, min, max, step);
+
+	function nudge(direction: 1 | -1) {
+		value = clamp(value + direction * step);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			nudge(1);
+		} else if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			nudge(-1);
+		}
+	}
+
+	const stepper =
+		'flex size-7 shrink-0 items-center justify-center rounded text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current';
+</script>
+
+<span
+	class="inline-flex w-full items-center rounded-md border bg-bg pr-1 pl-3 shadow-xs transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+>
+	<input
+		type="number"
+		{min}
+		{max}
+		{step}
+		{disabled}
+		{value}
+		oninput={(event) => (value = clamp(event.currentTarget.valueAsNumber))}
+		onkeydown={onKeydown}
+		aria-invalid={invalid ? 'true' : undefined}
+		class="h-10 w-full min-w-0 [appearance:textfield] bg-transparent font-sans text-sm text-text tabular-nums placeholder:text-text-muted focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+		{...rest}
+	/>
+	{#if unit}
+		<span class="shrink-0 px-1.5 text-xs text-text-muted">{unit}</span>
+	{/if}
+	<button
+		type="button"
+		class={stepper}
+		onclick={() => nudge(-1)}
+		disabled={disabled || value <= min}
+		aria-label={t.current.decrease}
+	>
+		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+			<path d="M2.5 7h9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+		</svg>
+	</button>
+	<button
+		type="button"
+		class={stepper}
+		onclick={() => nudge(1)}
+		disabled={disabled || value >= max}
+		aria-label={t.current.increase}
+	>
+		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+			<path d="M7 2.5v9M2.5 7h9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+		</svg>
+	</button>
+</span>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Short unit rendered inside the field, e.g. `'px'` or `'%'`. */
+    unit?: string;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/styles/paper/Pagination.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneRing, toneSolid, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { pageRange } from '../../core/pagination.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
+		/** Bindable, 1-based. */
+		page?: number;
+		/** Total number of pages. */
+		total: number;
+		/** Pages shown either side of the current one before collapsing to `…`. */
+		siblings?: number;
+		tone?: Tone;
+		onchange?: (page: number) => void;
+	}
+
+	let {
+		page = $bindable(1),
+		total,
+		siblings = 1,
+		tone = 'brand',
+		class: className = '',
+		onchange,
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	const pages = $derived(pageRange(page, total, siblings));
+
+	function go(next: number) {
+		const clamped = Math.min(total, Math.max(1, next));
+		if (clamped === page) return;
+		page = clamped;
+		onchange?.(clamped);
+	}
+
+	const cell = `inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 font-sans text-sm font-medium tabular-nums transition-colors duration-150 ease-brand-out disabled:opacity-40 disabled:pointer-events-none ${focusRing}`;
+</script>
+
+<nav aria-label={t.current.pagination} class="flex items-center gap-1 {className}" {...rest}>
+	<button
+		type="button"
+		class="{cell} {toneRing[tone]} text-text-secondary hover:bg-bg-inset"
+		disabled={page <= 1}
+		aria-label={t.current.previousPage}
+		onclick={() => go(page - 1)}
+	>
+		<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+			<path d="m10 4-4 4 4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+		</svg>
+	</button>
+
+	{#each pages as item, i (`${item}-${i}`)}
+		{#if item === '…'}
+			<span class="{cell} text-text-muted">…</span>
+		{:else}
+			<button
+				type="button"
+				aria-current={item === page ? 'page' : undefined}
+				class="{cell} {toneRing[tone]} {item === page
+					? `${toneSolid[tone]} shadow-xs`
+					: 'text-text-secondary hover:bg-bg-inset'}"
+				onclick={() => go(item)}
+			>
+				{item}
+			</button>
+		{/if}
+	{/each}
+
+	<button
+		type="button"
+		class="{cell} {toneRing[tone]} text-text-secondary hover:bg-bg-inset"
+		disabled={page >= total}
+		aria-label={t.current.nextPage}
+		onclick={() => go(page + 1)}
+	>
+		<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+			<path d="m6 4 4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+		</svg>
+	</button>
+</nav>

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
+    /** Bindable, 1-based. */
+    page?: number;
+    /** Total number of pages. */
+    total: number;
+    /** Pages shown either side of the current one before collapsing to `…`. */
+    siblings?: number;
+    tone?: Tone;
+    onchange?: (page: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/styles/paper/PasswordInput.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { passwordScore } from '../../core/password.js';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
+		value?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Draws a four-segment strength meter under the field. */
+		strength?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		tone = 'brand',
+		invalid = false,
+		strength = false,
+		disabled = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	let visible = $state(false);
+
+	const score = $derived(passwordScore(value));
+
+	const bars = ['bg-danger', 'bg-danger', 'bg-warning', 'bg-info', 'bg-success'];
+	const texts = ['text-danger', 'text-danger', 'text-warning', 'text-info', 'text-success'];
+</script>
+
+<div class="flex w-full flex-col gap-2">
+	<span
+		class="inline-flex w-full items-center gap-2 rounded-md border bg-bg pr-1 pl-3 shadow-xs transition-colors duration-150 ease-brand-out
+			{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+	>
+		<input
+			bind:value
+			{disabled}
+			type={visible ? 'text' : 'password'}
+			aria-invalid={invalid ? 'true' : undefined}
+			class="h-10 w-full min-w-0 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
+			{...rest}
+		/>
+		<button
+			type="button"
+			onclick={() => (visible = !visible)}
+			aria-label={visible ? t.current.hidePassword : t.current.showPassword}
+			aria-pressed={visible}
+			class="shrink-0 rounded p-1.5 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-current"
+		>
+			{#if visible}
+				<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<path
+						d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"
+						stroke="currentColor"
+						stroke-width="1.4"
+					/>
+					<circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.4" />
+					<path
+						d="m3.5 16.5 13-13"
+						stroke="currentColor"
+						stroke-width="1.4"
+						stroke-linecap="round"
+					/>
+				</svg>
+			{:else}
+				<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+					<path
+						d="M2.5 10S5.5 4.5 10 4.5 17.5 10 17.5 10 14.5 15.5 10 15.5 2.5 10 2.5 10Z"
+						stroke="currentColor"
+						stroke-width="1.4"
+					/>
+					<circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.4" />
+				</svg>
+			{/if}
+		</button>
+	</span>
+
+	{#if strength}
+		<div class="flex items-center gap-3">
+			<div class="flex flex-1 gap-1" aria-hidden="true">
+				{#each [0, 1, 2, 3] as segment (segment)}
+					<span
+						class="h-1 flex-1 rounded-full transition-colors duration-200 {segment < score
+							? bars[score]
+							: 'bg-bg-inset'}"
+					></span>
+				{/each}
+			</div>
+			<span class="text-xs font-medium {value ? texts[score] : 'text-text-muted'}">
+				{value ? t.current.passwordStrength[score] : '—'}
+			</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'type'> {
+    value?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Draws a four-segment strength meter under the field. */
+    strength?: boolean;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/styles/paper/Popover.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { anchored, type Placement } from '../../core/actions/anchor.js';
+	import { clickOutside, focusTrap, portal } from '../../core/actions/dismissable.js';
+	import { HOVER_GRACE, describeTrigger, popupTrigger } from '../../core/trigger.js';
+
+	interface Props {
+		trigger: Snippet;
+		children: Snippet;
+		open?: boolean;
+		placement?: Placement;
+		offset?: number;
+		title?: string;
+		/** `'hover'` also opens on focus, for read-only content. */
+		on?: 'click' | 'hover';
+		/** Keep focus where it is — right for hover popovers and hover cards. */
+		trapFocus?: boolean;
+		class?: string;
+		triggerClass?: string;
+	}
+
+	let {
+		trigger,
+		children,
+		open = $bindable(false),
+		placement = 'bottom',
+		offset = 8,
+		title,
+		on = 'click',
+		trapFocus = true,
+		class: className = '',
+		triggerClass = ''
+	}: Props = $props();
+
+	let anchorEl: HTMLElement | null = $state(null);
+	/** Held so the panel itself can cancel the hover close it inherited. */
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => describeTrigger(anchorEl, 'dialog', open));
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		open = false;
+	}
+</script>
+
+<span
+	bind:this={anchorEl}
+	use:popupTrigger={{
+		toggle: () => (open = !open),
+		open: () => (open = true),
+		close: () => (open = false),
+		on
+	}}
+	class="inline-flex {triggerClass}"
+>
+	{@render trigger()}
+</span>
+
+{#if open}
+	<div
+		use:portal
+		use:anchored={{ anchor: anchorEl, placement, offset }}
+		use:clickOutside={{
+			onoutside: () => (open = false),
+			ignore: [anchorEl],
+			enabled: on === 'click'
+		}}
+		use:focusTrap={{ enabled: trapFocus, autofocus: trapFocus, restore: trapFocus }}
+		onkeydown={onKeydown}
+		onpointerenter={() => clearTimeout(closeTimer)}
+		onpointerleave={() => {
+			if (on === 'hover') closeTimer = setTimeout(() => (open = false), HOVER_GRACE);
+		}}
+		role="dialog"
+		aria-label={title}
+		tabindex="-1"
+		class="z-50 flex max-w-xs flex-col gap-2 rounded-lg border border-hairline bg-bg p-4 font-sans shadow-lg {className}"
+	>
+		{#if title}
+			<p class="font-heading text-sm font-semibold text-text">{title}</p>
+		{/if}
+		<div class="text-[13px] leading-relaxed text-text-secondary">
+			{@render children()}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type Placement } from '../../core/actions/anchor.js';
+interface Props {
+    trigger: Snippet;
+    children: Snippet;
+    open?: boolean;
+    placement?: Placement;
+    offset?: number;
+    title?: string;
+    /** `'hover'` also opens on focus, for read-only content. */
+    on?: 'click' | 'hover';
+    /** Keep focus where it is — right for hover popovers and hover cards. */
+    trapFocus?: boolean;
+    class?: string;
+    triggerClass?: string;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;