@nqmcreative/ui 0.1.0 → 0.2.0

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;

package/dist/styles/paper/PricingCard.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorder, toneSoft, toneSolid, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		name: string;
+		/** Already formatted — the component does not do currency. */
+		price: string;
+		/** `/ month`, `per seat`, whatever follows the figure. */
+		period?: string;
+		description?: string;
+		/** One line each. Rendered with a tick. */
+		features?: string[];
+		/** Pill in the top corner, e.g. "Most popular". */
+		badge?: string;
+		/** Ring, lift and a tinted header — for the plan you want chosen. */
+		featured?: boolean;
+		tone?: Tone;
+		/** The button. */
+		action?: Snippet;
+		/** Extra content under the feature list. */
+		children?: Snippet;
+	}
+
+	let {
+		name,
+		price,
+		period,
+		description,
+		features = [],
+		badge,
+		featured = false,
+		tone = 'brand',
+		action,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	class="flex flex-col rounded-xl bg-bg {featured
+		? `border-2 shadow-lg ${toneBorder[tone]}`
+		: 'border border-hairline shadow-xs'} {className}"
+	{...rest}
+>
+	<div class="flex flex-col gap-4 p-6">
+		<div class="flex items-start justify-between gap-3">
+			<h3 class="font-heading text-base font-semibold text-text">{name}</h3>
+			{#if badge}
+				<span
+					class="shrink-0 rounded-full px-2.5 py-0.5 font-sans text-[11px] font-medium {featured
+						? toneSolid[tone]
+						: toneSoft[tone]}"
+				>
+					{badge}
+				</span>
+			{/if}
+		</div>
+
+		<div class="flex items-baseline gap-1.5">
+			<span class="font-heading text-4xl font-semibold tracking-tight text-text tabular-nums">
+				{price}
+			</span>
+			{#if period}
+				<span class="font-sans text-sm text-text-muted">{period}</span>
+			{/if}
+		</div>
+
+		{#if description}
+			<p class="font-sans text-sm leading-relaxed text-text-secondary">{description}</p>
+		{/if}
+	</div>
+
+	{#if features.length}
+		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-6">
+			{#each features as feature (feature)}
+				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
+					<span
+						class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full {toneSoft[
+							tone
+						]}"
+					>
+						<svg class="size-2.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+							<path
+								d="m3 8 3.2 3.2L13 4.4"
+								stroke="currentColor"
+								stroke-width="2.4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</span>
+					<span class="leading-snug">{feature}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if children}
+		<div class="px-6 pb-2">{@render children()}</div>
+	{/if}
+
+	{#if action}
+		<div class="p-6 pt-2">{@render action()}</div>
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    name: string;
+    /** Already formatted — the component does not do currency. */
+    price: string;
+    /** `/ month`, `per seat`, whatever follows the figure. */
+    period?: string;
+    description?: string;
+    /** One line each. Rendered with a tick. */
+    features?: string[];
+    /** Pill in the top corner, e.g. "Most popular". */
+    badge?: string;
+    /** Ring, lift and a tinted header — for the plan you want chosen. */
+    featured?: boolean;
+    tone?: Tone;
+    /** The button. */
+    action?: Snippet;
+    /** Extra content under the feature list. */
+    children?: Snippet;
+}
+declare const PricingCard: import("svelte").Component<Props, {}, "">;
+type PricingCard = ReturnType<typeof PricingCard>;
+export default PricingCard;

package/dist/styles/paper/Progress.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneFill, type Tone } from '../../core/tones.js';
+	import { percentOf } from '../../core/number.js';
+
+	export type ProgressSize = 'sm' | 'md' | 'lg';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: number;
+		max?: number;
+		tone?: Tone;
+		size?: ProgressSize;
+		label?: string;
+		/** Prints the percentage on the right of the label row. */
+		showValue?: boolean;
+		/** Ignores `value` and runs a looping sweep. */
+		indeterminate?: boolean;
+	}
+
+	let {
+		value = 0,
+		max = 100,
+		tone = 'brand',
+		size = 'md',
+		label,
+		showValue = false,
+		indeterminate = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<ProgressSize, string> = { sm: 'h-1.5', md: 'h-2', lg: 'h-3' };
+	const pct = $derived(percentOf(value, 0, max));
+</script>
+
+<div class="flex w-full flex-col gap-2 {className}" {...rest}>
+	{#if label || showValue}
+		<div class="flex items-baseline justify-between gap-4 font-sans text-sm">
+			{#if label}<span class="text-text-secondary">{label}</span>{/if}
+			{#if showValue}
+				<span class="text-xs font-medium text-text-muted tabular-nums">{Math.round(pct)}%</span>
+			{/if}
+		</div>
+	{/if}
+	<div
+		role="progressbar"
+		aria-valuenow={indeterminate ? undefined : Math.round(pct)}
+		aria-valuemin={0}
+		aria-valuemax={100}
+		aria-label={label}
+		class="w-full overflow-hidden rounded-full bg-bg-inset {sizes[size]}"
+	>
+		<div
+			class="h-full rounded-full transition-[width] duration-300 ease-brand {toneFill[tone]}
+				{indeterminate ? 'w-1/3 animate-pulse' : ''}"
+			style={indeterminate ? undefined : `width:${pct}%`}
+		></div>
+	</div>
+</div>

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    tone?: Tone;
+    size?: ProgressSize;
+    label?: string;
+    /** Prints the percentage on the right of the label row. */
+    showValue?: boolean;
+    /** Ignores `value` and runs a looping sweep. */
+    indeterminate?: boolean;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;