@nqmcreative/ui 0.1.0

package/dist/components/Navbar.svelte

@@ -0,0 +1,190 @@
+<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 '../locale.svelte.js';
+	import { focusRing, toneRing, toneText, type Tone } from '../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();
+
+	const link =
+		'inline-flex items-center gap-2 font-sans text-[15px] 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-6 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
+										? toneText[tone]
+										: 'text-text-secondary 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="square"
+										/>
+									</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
+								? toneText[tone]
+								: 'text-text-secondary hover:text-text'} {item.disabled
+								? 'pointer-events-none opacity-50'
+								: ''}"
+						>
+							{item.label}
+							{#if item.badge !== undefined}
+								<span class="font-mono text-[11px] text-text-muted">{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-3 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 text-text-secondary transition-colors duration-150 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" />
+				</svg>
+			</button>
+		</div>
+	</nav>
+</header>
+
+<Drawer bind:open={menuOpen} side="right" size="sm" title={t.current.navigation}>
+	<ul class="flex flex-col">
+		{#each items as item (item.label)}
+			<li class="border-b border-hairline last:border-b-0">
+				<a
+					href={item.href}
+					onclick={() => (menuOpen = false)}
+					aria-current={item.active ? 'page' : undefined}
+					class="flex items-center justify-between gap-3 py-3 font-sans text-[15px] {item.active
+						? toneText[tone]
+						: 'text-text-secondary'} {item.disabled ? 'pointer-events-none opacity-50' : ''}"
+				>
+					{item.label}
+					{#if item.badge !== undefined}
+						<span class="font-mono text-[11px] text-text-muted">{item.badge}</span>
+					{/if}
+				</a>
+				{#if item.items?.length}
+					<ul class="flex flex-col pb-2 pl-4">
+						{#each item.items as child (child.label)}
+							<li>
+								<a
+									href={child.href}
+									onclick={() => (menuOpen = false)}
+									class="block py-2 font-sans text-sm text-text-muted"
+								>
+									{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/components/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 '../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/components/NumberInput.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.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 decimals = $derived((String(step).split('.')[1] ?? '').length);
+
+	function clamp(next: number) {
+		if (Number.isNaN(next)) return min === -Infinity ? 0 : min;
+		return Number(Math.min(max, Math.max(min, next)).toFixed(decimals));
+	}
+
+	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-8 shrink-0 items-center justify-center 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 border bg-bg pr-1 pl-4 transition-colors duration-150 ease-brand-out
+		{invalid ? 'border-danger' : `border-hairline ${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-11 w-full min-w-0 [appearance:textfield] bg-transparent font-sans text-[15px] 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-2 font-mono 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.5" />
+		</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.5" />
+		</svg>
+	</button>
+</span>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../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/components/Pagination.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneRing, toneSolid, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.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.by<(number | '…')[]>(() => {
+		if (total <= 5 + siblings * 2) {
+			return Array.from({ length: total }, (_, i) => i + 1);
+		}
+		const start = Math.max(2, page - siblings);
+		const end = Math.min(total - 1, page + siblings);
+		const out: (number | '…')[] = [1];
+		if (start > 2) out.push('…');
+		for (let i = start; i <= end; i++) out.push(i);
+		if (end < total - 1) out.push('…');
+		out.push(total);
+		return out;
+	});
+
+	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 px-2 font-mono text-[13px] 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)}
+	>
+		←
+	</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]
+					: '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)}
+	>
+		→
+	</button>
+</nav>

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../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/components/PasswordInput.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneFocusWithinBorder, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.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);
+
+	/** Deliberately simple: length plus character variety, four buckets. */
+	const score = $derived.by(() => {
+		if (!value) return 0;
+		let points = 0;
+		if (value.length >= 8) points++;
+		if (value.length >= 12) points++;
+		if (/[a-z]/.test(value) && /[A-Z]/.test(value)) points++;
+		if (/\d/.test(value)) points++;
+		if (/[^\w\s]/.test(value)) points++;
+		return Math.min(4, points);
+	});
+
+	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 border bg-bg pr-2 pl-4 transition-colors duration-150 ease-brand-out
+			{invalid ? 'border-danger' : `border-hairline ${toneFocusWithinBorder[tone]}`}
+			{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+	>
+		<input
+			bind:value
+			{disabled}
+			type={visible ? 'text' : 'password'}
+			aria-invalid={invalid ? 'true' : undefined}
+			class="h-11 w-full min-w-0 bg-transparent font-sans text-[15px] 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 p-2 text-text-muted transition-colors duration-150 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" />
+				</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 transition-colors duration-200 {segment < score
+							? bars[score]
+							: 'bg-bg-inset'}"
+					></span>
+				{/each}
+			</div>
+			<span class="font-mono text-xs {value ? texts[score] : 'text-text-muted'}">
+				{value ? t.current.passwordStrength[score] : '—'}
+			</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../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/components/Popover.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { anchored, type Placement } from '../actions/anchor.js';
+	import { clickOutside, focusTrap, portal } from '../actions/dismissable.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);
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function triggerBehaviour(node: HTMLElement) {
+		const toggle = () => (open = !open);
+		const show = () => {
+			clearTimeout(closeTimer);
+			open = true;
+		};
+		const hide = () => {
+			closeTimer = setTimeout(() => (open = false), 120);
+		};
+
+		if (on === 'click') {
+			node.addEventListener('click', toggle);
+		} else {
+			node.addEventListener('pointerenter', show);
+			node.addEventListener('pointerleave', hide);
+			node.addEventListener('focusin', show);
+			node.addEventListener('focusout', hide);
+		}
+
+		return {
+			destroy() {
+				clearTimeout(closeTimer);
+				node.removeEventListener('click', toggle);
+				node.removeEventListener('pointerenter', show);
+				node.removeEventListener('pointerleave', hide);
+				node.removeEventListener('focusin', show);
+				node.removeEventListener('focusout', hide);
+			}
+		};
+	}
+
+	$effect(() => {
+		const control = anchorEl?.querySelector('button, a, [role="button"]');
+		if (!control) return;
+		control.setAttribute('aria-haspopup', 'dialog');
+		control.setAttribute('aria-expanded', String(open));
+	});
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		open = false;
+	}
+</script>
+
+<span bind:this={anchorEl} use:triggerBehaviour 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), 120);
+		}}
+		role="dialog"
+		aria-label={title}
+		tabindex="-1"
+		class="z-50 flex max-w-xs flex-col gap-2 border border-hairline bg-bg p-4 font-sans {className}"
+	>
+		{#if title}
+			<p class="font-heading text-sm font-medium text-text">{title}</p>
+		{/if}
+		<div class="text-sm leading-relaxed text-text-secondary">
+			{@render children()}
+		</div>
+	</div>
+{/if}