@nqmcreative/ui 0.1.0

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

@@ -0,0 +1,36 @@
+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[];
+}
+import type { Snippet } from 'svelte';
+import { 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;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "value" | "collapsed">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type SkeletonVariant = 'text' | 'block' | 'circle';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		variant?: SkeletonVariant;
+		/** `text` only — number of stacked lines, the last one runs short. */
+		lines?: number;
+		/** Any CSS length, e.g. `'12rem'` or `'60%'`. */
+		width?: string;
+		height?: string;
+	}
+
+	let {
+		variant = 'text',
+		lines = 1,
+		width,
+		height,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const variants: Record<SkeletonVariant, string> = {
+		text: 'h-4 w-full',
+		block: 'h-24 w-full',
+		circle: 'size-10 rounded-full'
+	};
+</script>
+
+{#if variant === 'text' && lines > 1}
+	<div class="flex w-full flex-col gap-2 {className}" {...rest}>
+		{#each { length: lines }, i (i)}
+			<div
+				class="h-4 animate-pulse bg-bg-inset {i === lines - 1 ? 'w-2/3' : 'w-full'}"
+				style={width && i !== lines - 1 ? `width:${width}` : undefined}
+			></div>
+		{/each}
+	</div>
+{:else}
+	<div
+		class="animate-pulse bg-bg-inset {variants[variant]} {className}"
+		style="{width ? `width:${width};` : ''}{height ? `height:${height};` : ''}"
+		{...rest}
+	></div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type SkeletonVariant = 'text' | 'block' | 'circle';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: SkeletonVariant;
+    /** `text` only — number of stacked lines, the last one runs short. */
+    lines?: number;
+    /** Any CSS length, e.g. `'12rem'` or `'60%'`. */
+    width?: string;
+    height?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Slider.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { toneText, 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;
+		label?: string;
+		/** Prints the current value on the right of the label row. */
+		showValue?: boolean;
+		/** Appended to the printed value, e.g. `'%'`. */
+		unit?: string;
+		/** Tick labels under the track — usually just `[min, max]`. */
+		marks?: (number | string)[];
+	}
+
+	let {
+		value = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 1,
+		tone = 'brand',
+		label,
+		showValue = false,
+		unit = '',
+		marks,
+		disabled = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const pct = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)));
+
+	// The filled part of the track and the thumb both paint with `currentColor`,
+	// so a single tone class on the input drives every vendor pseudo-element.
+	// The gradient classes below are spelled out twice on purpose: Tailwind only
+	// sees literal class strings, so a shared JS constant would produce nothing.
+</script>
+
+<div class="flex w-full flex-col gap-2 {disabled ? 'opacity-50' : ''} {className}">
+	{#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 tabular-nums {toneText[tone]}">{value}{unit}</span>
+			{/if}
+		</div>
+	{/if}
+
+	<input
+		type="range"
+		bind:value
+		{min}
+		{max}
+		{step}
+		{disabled}
+		aria-label={label}
+		style="--pct:{pct}%"
+		class="h-5 w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed
+			{toneText[tone]}
+			focus-visible:outline-2 focus-visible:outline-offset-4
+			[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full
+			[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-bg [&::-moz-range-thumb]:bg-current [&::-moz-range-track]:h-1 [&::-moz-range-track]:bg-[linear-gradient(to_right,currentColor_var(--pct),var(--color-bg-inset)_var(--pct))] [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,currentColor_var(--pct),var(--color-bg-inset)_var(--pct))]
+			[&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2
+			[&::-webkit-slider-thumb]:border-bg [&::-webkit-slider-thumb]:bg-current"
+		{...rest}
+	/>
+
+	{#if marks?.length}
+		<div class="flex justify-between font-mono text-[11px] text-text-muted">
+			{#each marks as mark (mark)}
+				<span>{mark}</span>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,19 @@
+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;
+    label?: string;
+    /** Prints the current value on the right of the label row. */
+    showValue?: boolean;
+    /** Appended to the printed value, e.g. `'%'`. */
+    unit?: string;
+    /** Tick labels under the track — usually just `[min, max]`. */
+    marks?: (number | string)[];
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Spinner.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneText, type Tone } from '../tones.js';
+	import { useLocale } from '../locale.svelte.js';
+
+	export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		size?: SpinnerSize;
+		/** Omit to inherit the parent's `currentColor` (e.g. inside a Button). */
+		tone?: Tone;
+		/** Defaults to the locale's loading string; pass `''` to hide it. */
+		label?: string;
+	}
+
+	const t = useLocale();
+
+	let { size = 'md', tone, label, class: className = '', ...rest }: Props = $props();
+
+	const sizes: Record<SpinnerSize, string> = {
+		xs: 'size-3 border',
+		sm: 'size-4 border',
+		md: 'size-5 border-2',
+		lg: 'size-8 border-2'
+	};
+</script>
+
+<span
+	role="status"
+	aria-label={label ?? t.current.loading}
+	class="inline-block shrink-0 animate-spin rounded-full border-current border-t-transparent
+		{sizes[size]} {tone ? toneText[tone] : ''} {className}"
+	{...rest}
+></span>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    size?: SpinnerSize;
+    /** Omit to inherit the parent's `currentColor` (e.g. inside a Button). */
+    tone?: Tone;
+    /** Defaults to the locale's loading string; pass `''` to hide it. */
+    label?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Stat.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneText, type Tone } from '../tones.js';
+
+	export type StatTrend = 'up' | 'down' | 'flat';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		label: string;
+		value: string | number;
+		/** Secondary figure, e.g. `'+12.4%'`. */
+		delta?: string;
+		trend?: StatTrend;
+		hint?: string;
+		/** Colour of the value itself. Leave unset for plain `text`. */
+		tone?: Tone;
+	}
+
+	let {
+		label,
+		value,
+		delta,
+		trend = 'flat',
+		hint,
+		tone,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const trendTone: Record<StatTrend, Tone> = { up: 'success', down: 'danger', flat: 'neutral' };
+	const trendGlyph: Record<StatTrend, string> = { up: '↑', down: '↓', flat: '→' };
+</script>
+
+<div class="flex flex-col gap-1 font-sans {className}" {...rest}>
+	<span class="font-mono text-xs tracking-wide text-text-muted uppercase">{label}</span>
+	<div class="flex items-baseline gap-2">
+		<span
+			class="font-heading text-3xl font-medium tracking-tight {tone ? toneText[tone] : 'text-text'}"
+		>
+			{value}
+		</span>
+		{#if delta}
+			<span class="font-mono text-xs {toneText[trendTone[trend]]}">
+				{trendGlyph[trend]}
+				{delta}
+			</span>
+		{/if}
+	</div>
+	{#if hint}<span class="text-sm text-text-muted">{hint}</span>{/if}
+</div>

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export type StatTrend = 'up' | 'down' | 'flat';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value: string | number;
+    /** Secondary figure, e.g. `'+12.4%'`. */
+    delta?: string;
+    trend?: StatTrend;
+    hint?: string;
+    /** Colour of the value itself. Leave unset for plain `text`. */
+    tone?: Tone;
+}
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/components/Steps.svelte

@@ -0,0 +1,136 @@
+<script module lang="ts">
+	export interface StepItem {
+		label: string;
+		description?: string;
+		/** Marks the step as failed — shown in `danger` regardless of position. */
+		error?: boolean;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../tones.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
+		items: StepItem[];
+		/** Bindable, zero-based. Steps before it count as done. */
+		current?: number;
+		orientation?: 'horizontal' | 'vertical';
+		tone?: Tone;
+		/** Let the user jump to a completed step by clicking it. */
+		clickable?: boolean;
+		/** Hide the connecting rule between steps. */
+		bare?: boolean;
+		onchange?: (index: number) => void;
+	}
+
+	let {
+		items,
+		current = $bindable(0),
+		orientation = 'horizontal',
+		tone = 'brand',
+		clickable = false,
+		bare = false,
+		class: className = '',
+		onchange,
+		...rest
+	}: Props = $props();
+
+	function status(index: number): 'done' | 'current' | 'todo' {
+		if (index < current) return 'done';
+		if (index === current) return 'current';
+		return 'todo';
+	}
+
+	const marker =
+		'flex size-7 shrink-0 items-center justify-center rounded-full border font-mono text-[11px] transition-colors duration-150 ease-brand-out';
+
+	function markerTone(state: 'done' | 'current' | 'todo', item: StepItem) {
+		if (item.error) return 'border-danger bg-danger-light text-danger';
+		if (state === 'done') return `${toneFill[tone]} border-transparent text-text-inverse`;
+		if (state === 'current') return `border-current bg-bg ${toneText[tone]}`;
+		return 'border-hairline-strong bg-bg text-text-muted';
+	}
+
+	function go(index: number, item: StepItem) {
+		if (!clickable || item.disabled || index > current) return;
+		current = index;
+		onchange?.(index);
+	}
+</script>
+
+{#snippet glyph(index: number, state: 'done' | 'current' | 'todo', item: StepItem)}
+	{#if item.error}
+		!
+	{:else if state === 'done'}
+		<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+			<path d="m2 7 3.2 3.2L12 3.6" stroke="currentColor" stroke-width="1.8" />
+		</svg>
+	{:else}
+		{index + 1}
+	{/if}
+{/snippet}
+
+<nav
+	aria-label="Progress"
+	class="flex w-full {orientation === 'vertical' ? 'flex-col gap-0' : 'flex-row'} {className}"
+	{...rest}
+>
+	{#each items as item, i (item.label)}
+		{@const state = status(i)}
+		<div
+			class="flex min-w-0 {orientation === 'vertical' ? 'flex-row gap-3' : 'flex-1 flex-col gap-2'}"
+		>
+			<!-- marker + rule -->
+			<div
+				class="flex shrink-0 items-center {orientation === 'vertical'
+					? 'flex-col self-stretch'
+					: 'w-full flex-row'}"
+			>
+				{#if clickable && state !== 'todo' && !item.disabled}
+					<button
+						type="button"
+						onclick={() => go(i, item)}
+						aria-current={state === 'current' ? 'step' : undefined}
+						class="{marker} cursor-pointer {markerTone(state, item)} {focusRing} {toneRing[tone]}"
+					>
+						{@render glyph(i, state, item)}
+					</button>
+				{:else}
+					<div
+						aria-current={state === 'current' ? 'step' : undefined}
+						class="{marker} {markerTone(state, item)}"
+					>
+						{@render glyph(i, state, item)}
+					</div>
+				{/if}
+
+				{#if !bare && i < items.length - 1}
+					<span
+						class="{orientation === 'vertical' ? 'my-1 w-px flex-1' : 'mx-3 h-px flex-1'} {i <
+						current
+							? toneFill[tone]
+							: 'bg-hairline'}"
+					></span>
+				{/if}
+			</div>
+
+			<!-- copy -->
+			<div class="flex min-w-0 flex-col gap-0.5 {orientation === 'vertical' ? 'pb-6' : 'pr-3'}">
+				<span
+					class="font-sans text-sm leading-snug break-words {state === 'todo'
+						? 'text-text-muted'
+						: 'font-medium text-text'}"
+				>
+					{item.label}
+				</span>
+				{#if item.description}
+					<span class="font-sans text-xs leading-snug break-words text-text-muted">
+						{item.description}
+					</span>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</nav>

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

@@ -0,0 +1,24 @@
+export interface StepItem {
+    label: string;
+    description?: string;
+    /** Marks the step as failed — shown in `danger` regardless of position. */
+    error?: boolean;
+    disabled?: boolean;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
+    items: StepItem[];
+    /** Bindable, zero-based. Steps before it count as done. */
+    current?: number;
+    orientation?: 'horizontal' | 'vertical';
+    tone?: Tone;
+    /** Let the user jump to a completed step by clicking it. */
+    clickable?: boolean;
+    /** Hide the connecting rule between steps. */
+    bare?: boolean;
+    onchange?: (index: number) => void;
+}
+declare const Steps: import("svelte").Component<Props, {}, "current">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/components/Switch.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { focusRing, toneFill, toneRing, type Tone } from '../tones.js';
+
+	export type SwitchSize = 'sm' | 'md';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'onclick' | 'onchange'> {
+		checked?: boolean;
+		label?: string;
+		description?: string;
+		tone?: Tone;
+		size?: SwitchSize;
+		onchange?: (checked: boolean) => void;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		description,
+		tone = 'brand',
+		size = 'md',
+		disabled = false,
+		onchange,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const sizes: Record<SwitchSize, { track: string; thumb: string; travel: string }> = {
+		sm: { track: 'h-5 w-9', thumb: 'size-4', travel: 'translate-x-4' },
+		md: { track: 'h-6 w-11', thumb: 'size-5', travel: 'translate-x-5' }
+	};
+
+	function toggle() {
+		checked = !checked;
+		onchange?.(checked);
+	}
+</script>
+
+<div class="inline-flex items-start gap-3 {disabled ? 'opacity-50' : ''} {className}">
+	<button
+		type="button"
+		role="switch"
+		aria-checked={checked}
+		aria-label={label}
+		{disabled}
+		onclick={toggle}
+		class="relative mt-0.5 inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors duration-200 ease-brand-out disabled:pointer-events-none
+			{sizes[size].track} {checked ? toneFill[tone] : 'bg-hairline-strong'} {focusRing} {toneRing[tone]}"
+		{...rest}
+	>
+		<span
+			class="rounded-full bg-bg transition-transform duration-200 ease-brand-out
+				{sizes[size].thumb} {checked ? sizes[size].travel : 'translate-x-0'}"
+		></span>
+	</button>
+	{#if label || description}
+		<span class="flex flex-col gap-0.5 font-sans text-[15px]">
+			{#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}
+</div>

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

@@ -0,0 +1,14 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Tone } from '../tones.js';
+export type SwitchSize = 'sm' | 'md';
+interface Props extends Omit<HTMLButtonAttributes, 'onclick' | 'onchange'> {
+    checked?: boolean;
+    label?: string;
+    description?: string;
+    tone?: Tone;
+    size?: SwitchSize;
+    onchange?: (checked: boolean) => void;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;