@nqmcreative/ui 0.1.0 → 0.2.0

package/dist/styles/paper/Table.svelte

@@ -0,0 +1,217 @@
+<script module lang="ts">
+	export interface TableColumn {
+		key: string;
+		label: string;
+		align?: 'left' | 'center' | 'right';
+		/** Extra classes for this column's cells, e.g. `'w-40 tabular-nums'`. */
+		class?: string;
+		/** Allow clicking the header to sort by this column. */
+		sortable?: boolean;
+	}
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Checkbox from './Checkbox.svelte';
+	import type { Tone } from '../../core/tones.js';
+	import { nextSort, sortRows, toggleKey, type TableSort } from '../../core/table.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
+		columns: TableColumn[];
+		rows: T[];
+		/** Custom cell rendering — falls back to the raw value. */
+		cell?: Snippet<[{ row: T; column: TableColumn; value: unknown }]>;
+		/** Shown instead of the body when `rows` is empty. */
+		empty?: Snippet;
+		caption?: string;
+		striped?: boolean;
+		hoverable?: boolean;
+		compact?: boolean;
+		/** Header stays put while the body scrolls — pair with a `max-h-*` class. */
+		stickyHeader?: boolean;
+
+		/** Bindable. Set it to sort; leave `sortable` columns to drive it. */
+		sort?: TableSort | null;
+		/** Sort the rows here rather than refetching them server-side. Default true. */
+		sortLocally?: boolean;
+		onsort?: (sort: TableSort | null) => void;
+
+		/** Turns on the checkbox column. Bindable list of selected row keys. */
+		selectable?: boolean;
+		selected?: string[];
+		/** Which field identifies a row. Default `'id'`. */
+		rowKey?: string;
+		tone?: Tone;
+		onselect?: (selected: string[]) => void;
+	}
+
+	let {
+		columns,
+		rows,
+		cell,
+		empty,
+		caption,
+		striped = false,
+		hoverable = true,
+		compact = false,
+		stickyHeader = false,
+		sort = $bindable(null),
+		sortLocally = true,
+		onsort,
+		selectable = false,
+		selected = $bindable([]),
+		rowKey = 'id',
+		tone = 'brand',
+		onselect,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const t = useLocale();
+
+	const aligns = {
+		left: 'text-left',
+		center: 'text-center',
+		right: 'text-right'
+	};
+
+	const pad = $derived(compact ? 'px-4 py-2' : 'px-4 py-3');
+
+	const sorted = $derived(sortLocally ? sortRows(rows, sort) : rows);
+
+	function toggleSort(column: TableColumn) {
+		if (!column.sortable) return;
+		const next = nextSort(sort, column.key);
+		sort = next;
+		onsort?.(next);
+	}
+
+	const keyOf = (row: T) => String(row[rowKey] ?? '');
+
+	const allSelected = $derived(
+		sorted.length > 0 && sorted.every((row) => selected.includes(keyOf(row)))
+	);
+	const someSelected = $derived(
+		!allSelected && sorted.some((row) => selected.includes(keyOf(row)))
+	);
+
+	function toggleAll() {
+		selected = allSelected ? [] : sorted.map(keyOf);
+		onselect?.(selected);
+	}
+
+	function toggleRow(row: T) {
+		selected = toggleKey(selected, keyOf(row));
+		onselect?.(selected);
+	}
+</script>
+
+<div
+	class="w-full overflow-auto rounded-lg border border-hairline bg-bg shadow-xs {className}"
+	{...rest}
+>
+	<table class="w-full border-collapse font-sans text-sm">
+		{#if caption}
+			<caption
+				class="border-b border-hairline px-4 py-3 text-left font-sans text-[13px] text-text-muted"
+			>
+				{caption}
+			</caption>
+		{/if}
+		<thead class={stickyHeader ? 'sticky top-0 z-10' : ''}>
+			<tr class="border-b border-hairline bg-bg-alt">
+				{#if selectable}
+					<th scope="col" class="w-10 {pad}">
+						<Checkbox
+							checked={allSelected}
+							indeterminate={someSelected}
+							{tone}
+							aria-label={t.current.selectAllRows}
+							onchange={toggleAll}
+						/>
+					</th>
+				{/if}
+				{#each columns as column (column.key)}
+					<th
+						scope="col"
+						aria-sort={sort?.key === column.key
+							? sort.direction === 'asc'
+								? 'ascending'
+								: 'descending'
+							: undefined}
+						class="text-[13px] font-semibold text-text-muted {pad} {aligns[
+							column.align ?? 'left'
+						]} {column.class ?? ''}"
+					>
+						{#if column.sortable}
+							<button
+								type="button"
+								onclick={() => toggleSort(column)}
+								class="inline-flex items-center gap-1.5 rounded transition-colors duration-150 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+									{sort?.key === column.key ? 'text-text' : ''}"
+							>
+								{column.label}
+								<span class="text-[9px] leading-none" aria-hidden="true">
+									{#if sort?.key === column.key}
+										{sort.direction === 'asc' ? '▲' : '▼'}
+									{:else}
+										⇅
+									{/if}
+								</span>
+							</button>
+						{:else}
+							{column.label}
+						{/if}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#if sorted.length === 0}
+				<tr>
+					<td
+						colspan={columns.length + (selectable ? 1 : 0)}
+						class="px-4 py-10 text-center text-sm text-text-muted"
+					>
+						{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
+					</td>
+				</tr>
+			{:else}
+				{#each sorted as row, i (selectable ? keyOf(row) : i)}
+					{@const isSelected = selectable && selected.includes(keyOf(row))}
+					<tr
+						aria-selected={selectable ? isSelected : undefined}
+						class="border-b border-hairline last:border-b-0
+							{isSelected ? 'bg-brand-light' : striped && i % 2 === 1 ? 'bg-bg-alt' : ''}
+							{hoverable ? 'transition-colors duration-150 hover:bg-bg-alt' : ''}"
+					>
+						{#if selectable}
+							<td class={pad}>
+								<Checkbox
+									checked={isSelected}
+									{tone}
+									aria-label={t.current.selectRow}
+									onchange={() => toggleRow(row)}
+								/>
+							</td>
+						{/if}
+						{#each columns as column (column.key)}
+							<td
+								class="text-text-secondary {pad} {aligns[column.align ?? 'left']} {column.class ??
+									''}"
+							>
+								{#if cell}
+									{@render cell({ row, column, value: row[column.key] })}
+								{:else}
+									{row[column.key] ?? ''}
+								{/if}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>

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

@@ -0,0 +1,66 @@
+export interface TableColumn {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    /** Extra classes for this column's cells, e.g. `'w-40 tabular-nums'`. */
+    class?: string;
+    /** Allow clicking the header to sort by this column. */
+    sortable?: boolean;
+}
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type TableSort } from '../../core/table.js';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "onselect"> & {
+        columns: TableColumn[];
+        rows: T[];
+        /** Custom cell rendering — falls back to the raw value. */
+        cell?: Snippet<[{
+            row: T;
+            column: TableColumn;
+            value: unknown;
+        }]>;
+        /** Shown instead of the body when `rows` is empty. */
+        empty?: Snippet;
+        caption?: string;
+        striped?: boolean;
+        hoverable?: boolean;
+        compact?: boolean;
+        /** Header stays put while the body scrolls — pair with a `max-h-*` class. */
+        stickyHeader?: boolean;
+        /** Bindable. Set it to sort; leave `sortable` columns to drive it. */
+        sort?: TableSort | null;
+        /** Sort the rows here rather than refetching them server-side. Default true. */
+        sortLocally?: boolean;
+        onsort?: (sort: TableSort | null) => void;
+        /** Turns on the checkbox column. Bindable list of selected row keys. */
+        selectable?: boolean;
+        selected?: string[];
+        /** Which field identifies a row. Default `'id'`. */
+        rowKey?: string;
+        tone?: Tone;
+        onselect?: (selected: string[]) => void;
+    };
+    exports: {};
+    bindings: "sort" | "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sort" | "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<string, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/styles/paper/Tabs.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		focusRing,
+		toneBorder,
+		toneRing,
+		toneSoft,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
+
+	export interface TabItem {
+		value: string;
+		label: string;
+		disabled?: boolean;
+		/** Small count/label rendered after the tab title. */
+		badge?: string | number;
+	}
+
+	export type TabsVariant = 'underline' | 'pill' | 'segmented';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+		items: TabItem[];
+		/** Bindable — the `value` of the active tab. */
+		value?: string;
+		variant?: TabsVariant;
+		tone?: Tone;
+		/** Spread tabs evenly across the full width. */
+		fullWidth?: boolean;
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		items,
+		value = $bindable(items[0]?.value ?? ''),
+		variant = 'underline',
+		tone = 'brand',
+		fullWidth = false,
+		onchange,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	function select(item: TabItem) {
+		if (item.disabled) return;
+		value = item.value;
+		onchange?.(item.value);
+	}
+
+	const listClass = $derived(
+		{
+			underline: 'gap-5 border-b border-hairline',
+			pill: 'gap-1.5',
+			segmented: 'gap-1 rounded-lg border border-hairline bg-bg-inset p-1'
+		}[variant]
+	);
+
+	function tabClass(active: boolean) {
+		const base = `inline-flex items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:opacity-40 disabled:pointer-events-none ${focusRing} ${toneRing[tone]}`;
+		if (variant === 'underline') {
+			return `${base} -mb-px rounded-t-md border-b-2 px-1 pb-2.5 ${
+				active
+					? `${toneBorder[tone]} ${toneText[tone]}`
+					: 'border-transparent text-text-muted hover:text-text'
+			}`;
+		}
+		if (variant === 'pill') {
+			return `${base} h-9 rounded-full px-3.5 ${
+				active ? toneSoft[tone] : 'text-text-muted hover:bg-bg-inset hover:text-text'
+			}`;
+		}
+		return `${base} h-8 rounded-md px-3.5 ${
+			active ? 'bg-bg text-text shadow-xs' : 'text-text-muted hover:text-text'
+		}`;
+	}
+</script>
+
+<div
+	role="tablist"
+	class="flex items-center overflow-x-auto {listClass} {fullWidth ? '*:flex-1' : ''} {className}"
+	{...rest}
+>
+	{#each items as item (item.value)}
+		<button
+			type="button"
+			role="tab"
+			aria-selected={value === item.value}
+			disabled={item.disabled}
+			onclick={() => select(item)}
+			class={tabClass(value === item.value)}
+		>
+			{item.label}
+			{#if item.badge !== undefined}
+				<span
+					class="rounded-full bg-bg-inset px-1.5 text-[11px] font-normal text-text-muted tabular-nums"
+				>
+					{item.badge}
+				</span>
+			{/if}
+		</button>
+	{/each}
+</div>

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export interface TabItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Small count/label rendered after the tab title. */
+    badge?: string | number;
+}
+export type TabsVariant = 'underline' | 'pill' | 'segmented';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    items: TabItem[];
+    /** Bindable — the `value` of the active tab. */
+    value?: string;
+    variant?: TabsVariant;
+    tone?: Tone;
+    /** Spread tabs evenly across the full width. */
+    fullWidth?: boolean;
+    onchange?: (value: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/styles/paper/Testimonial.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Avatar from './Avatar.svelte';
+	import { toneBorderLeft, toneSurface, type Tone } from '../../core/tones.js';
+
+	export type TestimonialVariant = 'plain' | 'card' | 'accent';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		quote: string;
+		author: string;
+		role?: string;
+		/** Avatar image. Falls back to the author's initials. */
+		avatar?: string;
+		tone?: Tone;
+		variant?: TestimonialVariant;
+		/** Bigger type, for a single pull quote. */
+		large?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		quote,
+		author,
+		role,
+		avatar,
+		tone = 'brand',
+		variant = 'plain',
+		large = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const variants = $derived({
+		plain: '',
+		card: 'rounded-lg border border-hairline bg-bg p-6 shadow-xs',
+		accent: `rounded-lg ${toneSurface[tone]} border-l-4 ${toneBorderLeft[tone]} p-6`
+	});
+</script>
+
+<figure class="flex flex-col gap-5 {variants[variant]} {className}" {...rest}>
+	<blockquote
+		class="font-sans leading-relaxed text-pretty text-text-secondary {large
+			? 'text-xl leading-relaxed sm:text-2xl'
+			: ''}"
+	>
+		“{quote}”
+	</blockquote>
+
+	{#if children}
+		{@render children()}
+	{/if}
+
+	<figcaption class="flex items-center gap-3">
+		<Avatar src={avatar} name={author} size="sm" {tone} />
+		<div class="flex min-w-0 flex-col">
+			<span class="font-sans text-sm font-semibold text-text">{author}</span>
+			{#if role}
+				<span class="font-sans text-[13px] text-text-muted">{role}</span>
+			{/if}
+		</div>
+	</figcaption>
+</figure>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type TestimonialVariant = 'plain' | 'card' | 'accent';
+interface Props extends HTMLAttributes<HTMLElement> {
+    quote: string;
+    author: string;
+    role?: string;
+    /** Avatar image. Falls back to the author's initials. */
+    avatar?: string;
+    tone?: Tone;
+    variant?: TestimonialVariant;
+    /** Bigger type, for a single pull quote. */
+    large?: boolean;
+    children?: Snippet;
+}
+declare const Testimonial: import("svelte").Component<Props, {}, "">;
+type Testimonial = ReturnType<typeof Testimonial>;
+export default Testimonial;

package/dist/styles/paper/Textarea.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLTextareaAttributes {
+		value?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Grow with the content instead of showing a scrollbar. */
+		autoresize?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		tone = 'brand',
+		invalid = false,
+		autoresize = false,
+		rows = 4,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	/** Grows the field to fit its content on input, and once on mount. */
+	function autosize(node: HTMLTextAreaElement, enabled: boolean) {
+		let on = enabled;
+		const resize = () => {
+			if (!on) return;
+			node.style.height = 'auto';
+			node.style.height = `${node.scrollHeight}px`;
+		};
+		resize();
+		node.addEventListener('input', resize);
+		return {
+			update(next: boolean) {
+				on = next;
+				if (on) resize();
+				else node.style.height = '';
+			},
+			destroy() {
+				node.removeEventListener('input', resize);
+			}
+		};
+	}
+</script>
+
+<textarea
+	use:autosize={autoresize}
+	bind:value
+	{rows}
+	aria-invalid={invalid ? 'true' : undefined}
+	class="w-full rounded-md border bg-bg px-3 py-2 font-sans text-sm text-text shadow-xs transition-colors duration-150 ease-brand-out placeholder:text-text-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50
+		{autoresize ? 'resize-none overflow-hidden' : 'resize-y'}
+		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusBorder[tone]}`} {className}"
+	{...rest}></textarea>

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

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLTextareaAttributes {
+    value?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Grow with the content instead of showing a scrollbar. */
+    autoresize?: boolean;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/styles/paper/ThemeToggle.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	// Choosing a theme is style-agnostic: every style reads the same two classes
+	// off <html>, so `applyTheme`, `storedTheme` and `Theme` live in core and
+	// are re-exported by the style barrel — not by this component.
+	import { focusRing, toneRing, type Tone } from '../../core/tones.js';
+	import {
+		applyTheme,
+		nextTheme,
+		persistTheme,
+		storedTheme,
+		type Theme
+	} from '../../core/theme.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	interface Props {
+		/** Bindable. `'system'` follows the OS until the visitor chooses. */
+		theme?: Theme;
+		/** `'button'` cycles light → dark → system; `'segmented'` shows all three. */
+		variant?: 'button' | 'segmented';
+		tone?: Tone;
+		/** Remember the choice in `localStorage`. Default true. */
+		persist?: boolean;
+		onchange?: (theme: Theme) => void;
+		class?: string;
+	}
+
+	let {
+		theme = $bindable(storedTheme()),
+		variant = 'button',
+		tone = 'neutral',
+		persist = true,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	$effect(() => {
+		applyTheme(theme);
+		if (persist) persistTheme(theme);
+	});
+
+	function set(next: Theme) {
+		theme = next;
+		onchange?.(next);
+	}
+
+	function cycle() {
+		set(nextTheme(theme));
+	}
+
+	const options = $derived([
+		{ value: 'light' as Theme, label: t.current.lightMode },
+		{ value: 'dark' as Theme, label: t.current.darkMode },
+		{ value: 'system' as Theme, label: 'Auto' }
+	]);
+</script>
+
+{#snippet glyph(which: Theme)}
+	{#if which === 'light'}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<circle cx="10" cy="10" r="3.5" stroke="currentColor" stroke-width="1.5" />
+			<path
+				d="M10 2v2M10 16v2M2 10h2M16 10h2M4.5 4.5 6 6M14 14l1.5 1.5M15.5 4.5 14 6M6 14l-1.5 1.5"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+			/>
+		</svg>
+	{:else if which === 'dark'}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<path
+				d="M16 12.3A6.8 6.8 0 0 1 7.7 4a6.8 6.8 0 1 0 8.3 8.3Z"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{:else}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<rect
+				x="2.5"
+				y="4"
+				width="15"
+				height="10"
+				rx="1.5"
+				stroke="currentColor"
+				stroke-width="1.5"
+			/>
+			<path d="M7 17h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+		</svg>
+	{/if}
+{/snippet}
+
+{#if variant === 'segmented'}
+	<div
+		role="radiogroup"
+		aria-label={t.current.toggleTheme}
+		class="inline-flex items-center gap-1 rounded-lg border border-hairline bg-bg-inset p-1 {className}"
+	>
+		{#each options as option (option.value)}
+			<button
+				type="button"
+				role="radio"
+				aria-checked={theme === option.value}
+				aria-label={option.label}
+				onclick={() => set(option.value)}
+				class="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 font-sans text-[13px] font-medium transition-all duration-150 ease-brand-out {focusRing} {toneRing[
+					tone
+				]}
+					{theme === option.value ? 'bg-bg text-text shadow-xs' : 'text-text-muted hover:text-text'}"
+			>
+				{@render glyph(option.value)}
+				<span class="hidden sm:inline">{option.label}</span>
+			</button>
+		{/each}
+	</div>
+{:else}
+	<button
+		type="button"
+		onclick={cycle}
+		aria-label="{t.current.toggleTheme} ({theme})"
+		title={t.current.toggleTheme}
+		class="inline-flex size-9 items-center justify-center rounded-md border border-hairline bg-bg text-text-secondary shadow-xs transition-colors duration-150 ease-brand-out hover:bg-bg-alt hover:text-text {focusRing} {toneRing[
+			tone
+		]} {className}"
+	>
+		{@render glyph(theme)}
+	</button>
+{/if}