@nqmcreative/ui 0.1.0

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type Placement } from '../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/components/Progress.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneFill, type Tone } from '../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;
+	}
+
+	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', md: 'h-2', lg: 'h-3' };
+	const pct = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+</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="font-mono text-xs text-text-muted">{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 bg-bg-inset {sizes[size]}"
+	>
+		<div
+			class="h-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/components/Progress.svelte.d.ts

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

package/dist/components/Radio.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { peerFocusRing, tonePeerChecked, tonePeerFocus, type Tone } from '../tones.js';
+
+	interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
+		/** Bind the same variable across a set of radios. */
+		group?: string;
+		value: string;
+		label?: string;
+		description?: string;
+		tone?: Tone;
+		children?: Snippet;
+	}
+
+	let {
+		group = $bindable(''),
+		value,
+		label,
+		description,
+		tone = 'brand',
+		disabled = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<label
+	class="group inline-flex items-start gap-3 font-sans text-[15px]
+		{disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'} {className}"
+>
+	<input type="radio" bind:group {value} {disabled} class="peer sr-only" {...rest} />
+	<span
+		class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-bg transition-colors duration-150 ease-brand-out
+			{tonePeerChecked[tone]} {peerFocusRing} {tonePeerFocus[tone]}"
+		aria-hidden="true"
+	>
+		<span
+			class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
+		></span>
+	</span>
+	{#if label || description || children}
+		<span class="flex flex-col gap-0.5">
+			{#if children}
+				{@render children()}
+			{:else if label}
+				<span class="leading-snug text-text">{label}</span>
+			{/if}
+			{#if description}
+				<span class="text-sm leading-snug text-text-muted">{description}</span>
+			{/if}
+		</span>
+	{/if}
+</label>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
+    /** Bind the same variable across a set of radios. */
+    group?: string;
+    value: string;
+    label?: string;
+    description?: string;
+    tone?: Tone;
+    children?: Snippet;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/RadioGroup.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLFieldsetAttributes } from 'svelte/elements';
+	import Radio from './Radio.svelte';
+	import type { Tone } from '../tones.js';
+
+	export interface RadioOption {
+		value: string;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+	}
+
+	interface Props extends HTMLFieldsetAttributes {
+		/** Bindable — the selected option's `value`. */
+		value?: string;
+		options?: RadioOption[];
+		legend?: string;
+		hint?: string;
+		error?: string;
+		required?: boolean;
+		tone?: Tone;
+		orientation?: 'vertical' | 'horizontal';
+		/** Wraps each option in a bordered, clickable card. */
+		boxed?: boolean;
+		/** Pass your own `Radio`s instead of `options`. */
+		children?: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		legend,
+		hint,
+		error,
+		required = false,
+		tone = 'brand',
+		orientation = 'vertical',
+		boxed = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<fieldset class="flex flex-col gap-3 border-0 p-0 {className}" {...rest}>
+	{#if legend}
+		<legend class="mb-1 font-sans text-sm font-medium text-text">
+			{legend}
+			{#if required}<span class="text-danger" aria-hidden="true">*</span>{/if}
+		</legend>
+	{/if}
+
+	<div class="flex gap-3 {orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col'}">
+		{#if options}
+			{#each options as option (option.value)}
+				{#if boxed}
+					<label
+						class="flex flex-1 cursor-pointer items-start gap-3 border p-4 transition-colors duration-150 ease-brand-out
+							{value === option.value ? 'border-text bg-bg-alt' : 'border-hairline hover:border-hairline-strong'}
+							{option.disabled ? 'pointer-events-none opacity-50' : ''}"
+					>
+						<Radio
+							bind:group={value}
+							value={option.value}
+							label={option.label}
+							description={option.description}
+							disabled={option.disabled}
+							{tone}
+						/>
+					</label>
+				{:else}
+					<Radio
+						bind:group={value}
+						value={option.value}
+						label={option.label}
+						description={option.description}
+						disabled={option.disabled}
+						{tone}
+					/>
+				{/if}
+			{/each}
+		{:else if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if error}
+		<p class="font-sans text-sm text-danger">{error}</p>
+	{:else if hint}
+		<p class="font-sans text-sm text-text-muted">{hint}</p>
+	{/if}
+</fieldset>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+import type { Tone } from '../tones.js';
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface Props extends HTMLFieldsetAttributes {
+    /** Bindable — the selected option's `value`. */
+    value?: string;
+    options?: RadioOption[];
+    legend?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    tone?: Tone;
+    orientation?: 'vertical' | 'horizontal';
+    /** Wraps each option in a bordered, clickable card. */
+    boxed?: boolean;
+    /** Pass your own `Radio`s instead of `options`. */
+    children?: Snippet;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/SegmentedControl.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
+
+	export interface SegmentOption {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
+
+	export type SegmentedSize = 'sm' | 'md';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+		/** Bindable — the selected option's `value`. */
+		value?: string;
+		options: SegmentOption[];
+		/** Submits with a form when set. */
+		name?: string;
+		size?: SegmentedSize;
+		tone?: Tone;
+		/** Spread the segments evenly across the full width. */
+		fullWidth?: boolean;
+		label?: string;
+		disabled?: boolean;
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		name,
+		size = 'md',
+		tone = 'brand',
+		fullWidth = false,
+		label,
+		disabled = false,
+		class: className = '',
+		onchange,
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<SegmentedSize, string> = {
+		sm: 'h-8 px-3 text-[13px]',
+		md: 'h-10 px-4 text-sm'
+	};
+
+	function select(option: SegmentOption) {
+		if (option.disabled || disabled) return;
+		value = option.value;
+		onchange?.(option.value);
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+		if (!step) return;
+		event.preventDefault();
+		const usable = options.filter((option) => !option.disabled);
+		const index = usable.findIndex((option) => option.value === value);
+		select(usable[(index + step + usable.length) % usable.length]);
+	}
+</script>
+
+<div
+	role="radiogroup"
+	aria-label={label}
+	onkeydown={onKeydown}
+	class="inline-flex items-center border border-hairline bg-bg-alt p-1
+		{fullWidth ? 'flex w-full *:flex-1' : ''}
+		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
+	{...rest}
+>
+	{#each options as option (option.value)}
+		<button
+			type="button"
+			role="radio"
+			aria-checked={value === option.value}
+			disabled={option.disabled || disabled}
+			tabindex={value === option.value ? 0 : -1}
+			onclick={() => select(option)}
+			class="inline-flex items-center justify-center font-sans whitespace-nowrap transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40
+				{sizes[size]} {focusRing} {toneRing[tone]}
+				{value === option.value ? `${toneSoft[tone]} font-medium` : 'text-text-secondary hover:text-text'}"
+		>
+			{option.label}
+		</button>
+	{/each}
+	{#if name}<input type="hidden" {name} {value} />{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export interface SegmentOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export type SegmentedSize = 'sm' | 'md';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    /** Bindable — the selected option's `value`. */
+    value?: string;
+    options: SegmentOption[];
+    /** Submits with a form when set. */
+    name?: string;
+    size?: SegmentedSize;
+    tone?: Tone;
+    /** Spread the segments evenly across the full width. */
+    fullWidth?: boolean;
+    label?: string;
+    disabled?: boolean;
+    onchange?: (value: string) => void;
+}
+declare const SegmentedControl: import("svelte").Component<Props, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/Select.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import { toneFocusBorder, type Tone } from '../tones.js';
+
+	export interface SelectOption {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
+
+	interface Props extends HTMLSelectAttributes {
+		value?: string;
+		/** Data-driven options. Omit and pass `children` to write `<option>`s yourself. */
+		options?: SelectOption[];
+		placeholder?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		placeholder,
+		tone = 'brand',
+		invalid = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<span class="relative inline-flex w-full items-center">
+	<select
+		bind:value
+		aria-invalid={invalid ? 'true' : undefined}
+		class="h-11 w-full appearance-none border bg-bg py-0 pr-10 pl-4 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-50
+			{invalid ? 'border-danger' : `border-hairline ${toneFocusBorder[tone]}`} {className}"
+		{...rest}
+	>
+		{#if placeholder}
+			<option value="" disabled>{placeholder}</option>
+		{/if}
+		{#if options}
+			{#each options as option (option.value)}
+				<option value={option.value} disabled={option.disabled}>{option.label}</option>
+			{/each}
+		{:else if children}
+			{@render children()}
+		{/if}
+	</select>
+	<svg
+		class="pointer-events-none absolute right-4 size-4 text-text-muted"
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+	>
+		<path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
+	</svg>
+</span>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props extends HTMLSelectAttributes {
+    value?: string;
+    /** Data-driven options. Omit and pass `children` to write `<option>`s yourself. */
+    options?: SelectOption[];
+    placeholder?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    children?: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Sidebar.svelte

@@ -0,0 +1,206 @@
+<script module lang="ts">
+	export interface SidebarItem {
+		/** Stable id used for the active state. Falls back to `href`. */
+		id?: string;
+		label: string;
+		href?: string;
+		disabled?: boolean;
+		badge?: string | number;
+		/** Nested links — the parent becomes a collapsible group. */
+		items?: SidebarItem[];
+		/** Open the group on first render. */
+		open?: boolean;
+	}
+
+	export interface SidebarSection {
+		/** Small heading above a run of items. */
+		label?: string;
+		items: SidebarItem[];
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useLocale } from '../locale.svelte.js';
+	import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
+
+	interface Props {
+		sections: SidebarSection[];
+		/** Bindable — the `id` (or `href`) of the current item. */
+		value?: string;
+		/** Bindable — narrow rail mode. */
+		collapsed?: boolean;
+		/** Show the collapse button. */
+		collapsible?: boolean;
+		tone?: Tone;
+		header?: Snippet;
+		footer?: Snippet;
+		onnavigate?: (item: SidebarItem) => void;
+		class?: string;
+	}
+
+	let {
+		sections,
+		value = $bindable(''),
+		collapsed = $bindable(false),
+		collapsible = true,
+		tone = 'brand',
+		header,
+		footer,
+		onnavigate,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	const keyOf = (item: SidebarItem) => item.id ?? item.href ?? item.label;
+
+	/** Groups start open when asked, or when they contain the active item. */
+	let opened = $state<Record<string, boolean>>({});
+
+	const isOpen = (item: SidebarItem) =>
+		opened[keyOf(item)] ?? (item.open || item.items!.some((child) => keyOf(child) === value));
+
+	function toggle(item: SidebarItem) {
+		opened = { ...opened, [keyOf(item)]: !isOpen(item) };
+	}
+
+	function go(item: SidebarItem) {
+		if (item.disabled) return;
+		value = keyOf(item);
+		onnavigate?.(item);
+	}
+
+	const row =
+		'flex w-full items-center gap-3 px-3 py-2 text-left font-sans text-sm transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40';
+</script>
+
+<aside
+	class="flex h-full shrink-0 flex-col border-r border-hairline bg-bg transition-[width] duration-200 ease-brand-out
+		{collapsed ? 'w-16' : 'w-60'} {className}"
+>
+	{#if header}
+		<div class="flex h-16 shrink-0 items-center gap-3 border-b border-hairline px-3">
+			{@render header()}
+		</div>
+	{/if}
+
+	<nav aria-label={t.current.navigation} class="flex-1 overflow-y-auto py-3">
+		{#each sections as section, i (section.label ?? i)}
+			<div class="flex flex-col gap-0.5 {i > 0 ? 'mt-4' : ''}">
+				{#if section.label && !collapsed}
+					<p class="px-3 pb-1 font-mono text-[10px] tracking-wide text-text-muted uppercase">
+						{section.label}
+					</p>
+				{:else if section.label && collapsed && i > 0}
+					<div class="mx-3 mb-1 h-px bg-hairline" role="separator"></div>
+				{/if}
+
+				{#each section.items as item (keyOf(item))}
+					{#if item.items?.length}
+						<button
+							type="button"
+							onclick={() => toggle(item)}
+							aria-expanded={isOpen(item)}
+							title={collapsed ? item.label : undefined}
+							class="{row} {focusRing} {toneRing[
+								tone
+							]} text-text-secondary hover:bg-bg-inset hover:text-text"
+						>
+							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
+							{#if !collapsed}
+								<svg
+									class="size-3 shrink-0 transition-transform duration-200 {isOpen(item)
+										? 'rotate-90'
+										: ''}"
+									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="square"
+									/>
+								</svg>
+							{/if}
+						</button>
+
+						{#if isOpen(item) && !collapsed}
+							<div class="ml-5 flex flex-col gap-0.5 border-l border-hairline pl-1">
+								{#each item.items as child (keyOf(child))}
+									<a
+										href={child.href}
+										onclick={() => go(child)}
+										aria-current={value === keyOf(child) ? 'page' : undefined}
+										class="{row} {focusRing} {toneRing[tone]} {value === keyOf(child)
+											? `${toneSoft[tone]} font-medium`
+											: 'text-text-muted hover:bg-bg-inset hover:text-text'} {child.disabled
+											? 'pointer-events-none opacity-40'
+											: ''}"
+									>
+										<span class="min-w-0 flex-1 truncate">{child.label}</span>
+										{#if child.badge !== undefined}
+											<span class="shrink-0 font-mono text-[11px]">{child.badge}</span>
+										{/if}
+									</a>
+								{/each}
+							</div>
+						{/if}
+					{:else}
+						<a
+							href={item.href}
+							onclick={() => go(item)}
+							aria-current={value === keyOf(item) ? 'page' : undefined}
+							title={collapsed ? item.label : undefined}
+							class="{row} {focusRing} {toneRing[tone]} {value === keyOf(item)
+								? `${toneSoft[tone]} font-medium`
+								: 'text-text-secondary hover:bg-bg-inset hover:text-text'} {item.disabled
+								? 'pointer-events-none opacity-40'
+								: ''}"
+						>
+							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
+							{#if item.badge !== undefined && !collapsed}
+								<span class="shrink-0 font-mono text-[11px] text-text-muted">{item.badge}</span>
+							{/if}
+						</a>
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</nav>
+
+	{#if footer || collapsible}
+		<div class="flex shrink-0 flex-col gap-2 border-t border-hairline p-3">
+			{#if footer}
+				{@render footer()}
+			{/if}
+			{#if collapsible}
+				<button
+					type="button"
+					onclick={() => (collapsed = !collapsed)}
+					aria-label={collapsed ? t.current.expandSidebar : t.current.collapseSidebar}
+					class="inline-flex h-8 items-center justify-center gap-2 font-sans text-xs text-text-muted transition-colors duration-150 hover:text-text {focusRing} {toneRing[
+						tone
+					]}"
+				>
+					<svg
+						class="size-4 transition-transform duration-200 {collapsed ? 'rotate-180' : ''}"
+						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="square"
+						/>
+					</svg>
+					{#if !collapsed}<span>{t.current.collapseSidebar}</span>{/if}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</aside>