@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,77 +1,13 @@
 /**
- * @nqmcreative/ui — public entry point.
- * Tokens live in `theme.css`; shared tone maps live in `tones.ts`.
+ * `@nqmcreative/ui` has no root export, on purpose.
+ *
+ * Every component belongs to a style, and a style is a deliberate choice — so
+ * it has to be named at the import:
+ *
+ *   import { Button } from '@nqmcreative/ui/matte';
+ *   import { Button } from '@nqmcreative/ui/paper';
+ *
+ * A default here would let people pick one by accident and never find out.
+ * Shared behaviour lives at `@nqmcreative/ui/core`.
  */
-/* --- tokens --- */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText } from './tones.js';
-/* --- behaviour (actions + stores) --- */
-export { anchored } from './actions/anchor.js';
-export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
-export { toast } from './toast.svelte.js';
-/* --- locale --- */
-export { locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore } from './locale.svelte.js';
-export { default as LocaleProvider } from './components/LocaleProvider.svelte';
-/* --- actions --- */
-export { default as Button } from './components/Button.svelte';
-export { default as Link } from './components/Link.svelte';
-/* --- forms --- */
-export { default as Input } from './components/Input.svelte';
-export { default as Textarea } from './components/Textarea.svelte';
-export { default as Select } from './components/Select.svelte';
-export { default as Checkbox } from './components/Checkbox.svelte';
-export { default as Radio } from './components/Radio.svelte';
-export { default as Switch } from './components/Switch.svelte';
-export { default as Field } from './components/Field.svelte';
-export { default as Label } from './components/Label.svelte';
-export { default as PasswordInput } from './components/PasswordInput.svelte';
-export { default as NumberInput } from './components/NumberInput.svelte';
-export { default as Slider } from './components/Slider.svelte';
-export { default as RadioGroup } from './components/RadioGroup.svelte';
-export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
-export { default as SegmentedControl } from './components/SegmentedControl.svelte';
-export { default as InputGroup } from './components/InputGroup.svelte';
-export { default as Combobox } from './components/Combobox.svelte';
-export { default as MultiSelect } from './components/MultiSelect.svelte';
-export { default as DatePicker } from './components/DatePicker.svelte';
-export { default as Calendar } from './components/Calendar.svelte';
-export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
-export { default as Dropzone } from './components/Dropzone.svelte';
-/* --- data display --- */
-export { default as Badge } from './components/Badge.svelte';
-export { default as Avatar } from './components/Avatar.svelte';
-export { default as AvatarGroup } from './components/AvatarGroup.svelte';
-export { default as Card } from './components/Card.svelte';
-export { default as Stat } from './components/Stat.svelte';
-export { default as Table } from './components/Table.svelte';
-export { default as Kbd } from './components/Kbd.svelte';
-/* --- feedback --- */
-export { default as Alert } from './components/Alert.svelte';
-export { default as Progress } from './components/Progress.svelte';
-export { default as Spinner } from './components/Spinner.svelte';
-export { default as Skeleton } from './components/Skeleton.svelte';
-export { default as EmptyState } from './components/EmptyState.svelte';
-export { default as Toaster } from './components/Toaster.svelte';
-/* --- layout & navigation --- */
-export { default as Divider } from './components/Divider.svelte';
-export { default as Tabs } from './components/Tabs.svelte';
-export { default as Accordion } from './components/Accordion.svelte';
-export { default as AccordionItem } from './components/AccordionItem.svelte';
-export { default as Breadcrumb } from './components/Breadcrumb.svelte';
-export { default as Pagination } from './components/Pagination.svelte';
-export { default as Steps } from './components/Steps.svelte';
-/* --- app shell --- */
-export { default as Navbar } from './components/Navbar.svelte';
-export { default as Sidebar } from './components/Sidebar.svelte';
-export { default as Footer } from './components/Footer.svelte';
-/* --- overlay --- */
-export { default as Modal } from './components/Modal.svelte';
-export { default as Drawer } from './components/Drawer.svelte';
-export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
-export { default as CommandPalette } from './components/CommandPalette.svelte';
-export { default as ContextMenu } from './components/ContextMenu.svelte';
-export { default as Dropdown } from './components/Dropdown.svelte';
-export { default as MenuItem } from './components/MenuItem.svelte';
-export { default as MenuSeparator } from './components/MenuSeparator.svelte';
-export { default as Popover } from './components/Popover.svelte';
-export { default as ThemeToggle, applyTheme, storedTheme } from './components/ThemeToggle.svelte';
-export { default as Tooltip } from './components/Tooltip.svelte';
+export {};

package/dist/{components → styles/matte}/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
+	import { toneText, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLAttributes<HTMLDetailsElement> {
 		title: string;

package/dist/{components → styles/matte}/AccordionItem.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLAttributes<HTMLDetailsElement> {
     title: string;
     open?: boolean;

package/dist/{components → styles/matte}/Alert.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneBorder, toneBorderSoft, toneSurface, toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import {
+		toneBorder,
+		toneBorderSoft,
+		toneSurface,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type AlertVariant = 'soft' | 'outline' | 'accent';
 

package/dist/{components → styles/matte}/Alert.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type AlertVariant = 'soft' | 'outline' | 'accent';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     tone?: Tone;

package/dist/{components → styles/matte}/Avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneSoft, type Tone } from '../tones.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 

package/dist/{components → styles/matte}/Avatar.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     src?: string;

package/dist/{components → styles/matte}/Badge.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneBorderSoft, toneFill, toneSoft, toneSolid, toneText, type Tone } from '../tones.js';
+	import {
+		toneBorderSoft,
+		toneFill,
+		toneSoft,
+		toneSolid,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
 
-	/** @deprecated use `Tone` — kept so existing `tone="brand" | "neutral"` still type-checks. */
-	export type BadgeTone = Tone;
 	export type BadgeVariant = 'soft' | 'solid' | 'outline';
 	export type BadgeSize = 'sm' | 'md';
 

package/dist/{components → styles/matte}/Badge.svelte.d.ts

@@ -1,8 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
-/** @deprecated use `Tone` — kept so existing `tone="brand" | "neutral"` still type-checks. */
-export type BadgeTone = Tone;
+import { type Tone } from '../../core/tones.js';
 export type BadgeVariant = 'soft' | 'solid' | 'outline';
 export type BadgeSize = 'sm' | 'md';
 interface Props extends HTMLAttributes<HTMLSpanElement> {

package/dist/{components → styles/matte}/Breadcrumb.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneHoverText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { toneHoverText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export interface BreadcrumbItem {
 		label: string;

package/dist/{components → styles/matte}/Breadcrumb.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export interface BreadcrumbItem {
     label: string;
     href?: string;

package/dist/{components → styles/matte}/Button.svelte

@@ -12,7 +12,7 @@
 		toneSolidHover,
 		toneText,
 		type Tone
-	} from '../tones.js';
+	} from '../../core/tones.js';
 
 	export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 	export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';

package/dist/{components → styles/matte}/Button.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 interface Props extends HTMLButtonAttributes {

package/dist/styles/matte/CTASection.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorderSoft, toneSolid, toneSurface, type Tone } from '../../core/tones.js';
+
+	export type CTAVariant = 'tinted' | 'solid' | 'outline';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		title: string;
+		description?: string;
+		tone?: Tone;
+		variant?: CTAVariant;
+		/** Side by side on wide screens instead of stacked and centred. */
+		inline?: boolean;
+		/** The buttons. */
+		actions?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		tone = 'brand',
+		variant = 'tinted',
+		inline = false,
+		actions,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const variants = $derived({
+		tinted: `${toneSurface[tone]} border ${toneBorderSoft[tone]}`,
+		solid: toneSolid[tone],
+		outline: `bg-bg border ${toneBorderSoft[tone]}`
+	});
+
+	const onSolid = $derived(variant === 'solid');
+</script>
+
+<section class="w-full px-6 py-16 {className}" {...rest}>
+	<div
+		class="mx-auto flex w-full max-w-6xl gap-8 p-10 sm:p-14 {variants[variant]}
+			{inline
+			? 'flex-col lg:flex-row lg:items-center lg:justify-between'
+			: 'flex-col items-center text-center'}"
+	>
+		<div class="flex min-w-0 flex-col gap-3 {inline ? '' : 'items-center'}">
+			<h2
+				class="max-w-2xl font-heading text-3xl font-medium tracking-tight text-balance {onSolid
+					? 'text-text-inverse'
+					: 'text-text'}"
+			>
+				{title}
+			</h2>
+			{#if description}
+				<p
+					class="max-w-xl font-sans leading-relaxed text-pretty {onSolid
+						? 'text-text-inverse/80'
+						: 'text-text-secondary'}"
+				>
+					{description}
+				</p>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		{#if actions}
+			<div class="flex shrink-0 flex-wrap items-center gap-3 {inline ? '' : 'justify-center'}">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</section>

package/dist/styles/matte/CTASection.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type CTAVariant = 'tinted' | 'solid' | 'outline';
+interface Props extends HTMLAttributes<HTMLElement> {
+    title: string;
+    description?: string;
+    tone?: Tone;
+    variant?: CTAVariant;
+    /** Side by side on wide screens instead of stacked and centred. */
+    inline?: boolean;
+    /** The buttons. */
+    actions?: Snippet;
+    children?: Snippet;
+}
+declare const CTASection: import("svelte").Component<Props, {}, "">;
+type CTASection = ReturnType<typeof CTASection>;
+export default CTASection;

package/dist/{components → styles/matte}/Calendar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import {
-		addDays,
 		addMonths,
 		fromISO,
 		isOutOfRange,
@@ -10,9 +9,10 @@
 		toISO,
 		today,
 		weekdayNames
-	} from '../date.js';
-	import { useLocale } from '../locale.svelte.js';
-	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../tones.js';
+	} from '../../core/date.js';
+	import { calendarKeyMove } from '../../core/calendar.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		/** Bindable `YYYY-MM-DD`, or `''` for nothing selected. */
@@ -91,20 +91,10 @@
 	}
 
 	function onKeydown(event: KeyboardEvent) {
-		const moves: Record<string, () => Date> = {
-			ArrowLeft: () => addDays(focused, -1),
-			ArrowRight: () => addDays(focused, 1),
-			ArrowUp: () => addDays(focused, -7),
-			ArrowDown: () => addDays(focused, 7),
-			Home: () => addDays(focused, -((focused.getDay() - weekStart + 7) % 7)),
-			End: () => addDays(focused, 6 - ((focused.getDay() - weekStart + 7) % 7)),
-			PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
-			PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
-		};
-		const move = moves[event.key];
-		if (move) {
+		const next = calendarKeyMove(event.key, focused, weekStart, event.shiftKey);
+		if (next) {
 			event.preventDefault();
-			moveFocus(move());
+			moveFocus(next);
 			return;
 		}
 		if (event.key === 'Enter' || event.key === ' ') {

package/dist/{components → styles/matte}/Calendar.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     /** Bindable `YYYY-MM-DD`, or `''` for nothing selected. */
     value?: string;

package/dist/{components → styles/matte}/Card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../tones.js';
+	import { toneBorderLeft, toneHoverBorder, toneSurface, type Tone } from '../../core/tones.js';
 
 	export type CardVariant = 'outline' | 'filled' | 'tinted';
 

package/dist/{components → styles/matte}/Card.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type CardVariant = 'outline' | 'filled' | 'tinted';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     variant?: CardVariant;

package/dist/{components → styles/matte}/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { peerFocusRing, tonePeerChecked, tonePeerFocus, type Tone } from '../tones.js';
+	import { peerFocusRing, tonePeerChecked, tonePeerFocus, type Tone } from '../../core/tones.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
 		checked?: boolean;

package/dist/{components → styles/matte}/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLInputAttributes, 'type' | 'size'> {
     checked?: boolean;
     /** Renders the dash state — visual only, `checked` stays false. */

package/dist/{components → styles/matte}/CheckboxGroup.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLFieldsetAttributes } from 'svelte/elements';
 	import Checkbox from './Checkbox.svelte';
-	import type { Tone } from '../tones.js';
+	import type { Tone } from '../../core/tones.js';
 
 	export interface CheckboxOption {
 		value: string;

package/dist/{components → styles/matte}/CheckboxGroup.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLFieldsetAttributes } from 'svelte/elements';
-import type { Tone } from '../tones.js';
+import type { Tone } from '../../core/tones.js';
 export interface CheckboxOption {
     value: string;
     label: string;

package/dist/{components → styles/matte}/Combobox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { anchored } from '../actions/anchor.js';
-	import { clickOutside, portal } from '../actions/dismissable.js';
-	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { anchored } from '../../core/actions/anchor.js';
+	import { clickOutside, portal } from '../../core/actions/dismissable.js';
+	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
+	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export interface ComboboxOption {
 		value: string;
@@ -50,45 +51,35 @@
 
 	let open = $state(false);
 	let query = $state('');
-	let active = $state(0);
 	let wrapper: HTMLElement | null = $state(null);
 	let inputEl: HTMLInputElement | null = $state(null);
 	let listEl: HTMLElement | null = $state(null);
 
 	const selected = $derived(options.find((option) => option.value === value));
 
-	const matches = $derived.by(() => {
-		const needle = query.trim().toLowerCase();
-		if (!needle) return options;
-		return options.filter(
-			(option) =>
-				option.label.toLowerCase().includes(needle) ||
-				option.description?.toLowerCase().includes(needle)
-		);
-	});
+	const matches = $derived(
+		matchQuery(options, query, (option) => `${option.label} ${option.description ?? ''}`)
+	);
 
 	/** Options in render order, grouped when any option declares a `group`. */
-	const groups = $derived.by(() => {
-		const out: [string, ComboboxOption[]][] = [];
-		for (const option of matches) {
-			const key = option.group ?? '';
-			const bucket = out.find(([name]) => name === key);
-			if (bucket) bucket[1].push(option);
-			else out.push([key, [option]]);
-		}
-		return out;
-	});
-
+	const groups = $derived(groupItems(matches));
 	const flat = $derived(groups.flatMap(([, items]) => items));
 
+	const cursor = new ListCursor(() => flat);
+	const active = $derived(cursor.index);
+
+	/**
+	 * Set while we hand focus back to the field after a choice. Focusing fires
+	 * `focus` synchronously, and this field opens on focus — without the guard,
+	 * picking an option would immediately reopen the list it just closed.
+	 */
+	let restoring = false;
+
 	function openList() {
-		if (disabled || open) return;
+		if (disabled || open || restoring) return;
 		open = true;
 		query = '';
-		active = Math.max(
-			0,
-			flat.findIndex((option) => option.value === value)
-		);
+		cursor.reset((option) => option.value === value);
 	}
 
 	function choose(option: ComboboxOption) {
@@ -97,7 +88,9 @@
 		onchange?.(option.value);
 		open = false;
 		query = '';
+		restoring = true;
 		inputEl?.focus();
+		restoring = false;
 	}
 
 	function clear(event: MouseEvent) {
@@ -105,18 +98,14 @@
 		value = '';
 		query = '';
 		onchange?.('');
+		restoring = true;
 		inputEl?.focus();
+		restoring = false;
 	}
 
 	function move(step: number) {
-		if (flat.length === 0) return;
-		let next = active;
-		for (let i = 0; i < flat.length; i++) {
-			next = (next + step + flat.length) % flat.length;
-			if (!flat[next].disabled) break;
-		}
-		active = next;
-		listEl?.querySelector(`[data-index="${next}"]`)?.scrollIntoView({ block: 'nearest' });
+		cursor.move(step);
+		revealIndex(listEl, cursor.index);
 	}
 
 	function onKeydown(event: KeyboardEvent) {
@@ -131,9 +120,9 @@
 				if (open) move(-1);
 				break;
 			case 'Enter':
-				if (open && flat[active]) {
+				if (open && cursor.current) {
 					event.preventDefault();
-					choose(flat[active]);
+					choose(cursor.current);
 				}
 				break;
 			case 'Escape':
@@ -173,7 +162,7 @@
 		oninput={(event) => {
 			query = event.currentTarget.value;
 			open = true;
-			active = 0;
+			cursor.index = 0;
 		}}
 		onfocus={openList}
 		onkeydown={onKeydown}
@@ -239,7 +228,7 @@
 						aria-selected={option.value === value}
 						aria-disabled={option.disabled}
 						onclick={() => choose(option)}
-						onpointermove={() => (active = index)}
+						onpointermove={() => (cursor.index = index)}
 						class="flex cursor-pointer flex-col gap-0.5 px-3 py-2 text-[14px] transition-colors duration-100
 							{option.disabled ? 'pointer-events-none opacity-40' : ''}
 							{index === active ? toneSoft[tone] : 'text-text-secondary'}"

package/dist/{components → styles/matte}/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export interface ComboboxOption {
     value: string;
     label: string;