@nqmcreative/ui 0.1.0 → 0.2.0

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
+	import { toneText, type Tone } from '../../core/tones.js';
 
 	export type StatTrend = 'up' | 'down' | 'flat';
 

package/dist/{components → styles/matte}/Stat.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 StatTrend = 'up' | 'down' | 'flat';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     label: string;

package/dist/styles/matte/StatsBand.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Stat from './Stat.svelte';
+	import type { StatTrend } from './Stat.svelte';
+	import type { Tone } from '../../core/tones.js';
+
+	export interface BandStat {
+		label: string;
+		value: string | number;
+		delta?: string;
+		trend?: StatTrend;
+		hint?: string;
+		tone?: Tone;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		stats: BandStat[];
+		title?: string;
+		/** Hairline grid rather than free-standing figures. */
+		bordered?: boolean;
+	}
+
+	let { stats, title, bordered = true, class: className = '', ...rest }: Props = $props();
+
+	const cols = $derived(
+		stats.length === 2
+			? 'sm:grid-cols-2'
+			: stats.length === 4
+				? 'sm:grid-cols-2 lg:grid-cols-4'
+				: 'sm:grid-cols-3'
+	);
+</script>
+
+<section class="w-full px-6 py-16 {className}" {...rest}>
+	<div class="mx-auto flex w-full max-w-6xl flex-col gap-8">
+		{#if title}
+			<h2 class="max-w-xl font-heading text-3xl font-medium tracking-tight text-balance text-text">
+				{title}
+			</h2>
+		{/if}
+
+		<div class="grid {cols} {bordered ? 'gap-px border border-hairline bg-hairline' : 'gap-10'}">
+			{#each stats as stat (stat.label)}
+				<div class={bordered ? 'bg-bg p-6' : ''}>
+					<Stat
+						label={stat.label}
+						value={stat.value}
+						delta={stat.delta}
+						trend={stat.trend}
+						hint={stat.hint}
+						tone={stat.tone}
+					/>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { StatTrend } from './Stat.svelte';
+import type { Tone } from '../../core/tones.js';
+export interface BandStat {
+    label: string;
+    value: string | number;
+    delta?: string;
+    trend?: StatTrend;
+    hint?: string;
+    tone?: Tone;
+}
+interface Props extends HTMLAttributes<HTMLElement> {
+    stats: BandStat[];
+    title?: string;
+    /** Hairline grid rather than free-standing figures. */
+    bordered?: boolean;
+}
+declare const StatsBand: import("svelte").Component<Props, {}, "">;
+type StatsBand = ReturnType<typeof StatsBand>;
+export default StatsBand;

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

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../tones.js';
+	import { focusRing, toneFill, toneRing, toneText, type Tone } from '../../core/tones.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
 		items: StepItem[];

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

@@ -6,7 +6,7 @@ export interface StepItem {
     disabled?: boolean;
 }
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onchange'> {
     items: StepItem[];
     /** Bindable, zero-based. Steps before it count as done. */

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { focusRing, toneFill, toneRing, type Tone } from '../tones.js';
+	import { focusRing, toneFill, toneRing, type Tone } from '../../core/tones.js';
 
 	export type SwitchSize = 'sm' | 'md';
 

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

@@ -1,5 +1,5 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type SwitchSize = 'sm' | 'md';
 interface Props extends Omit<HTMLButtonAttributes, 'onclick' | 'onchange'> {
     checked?: boolean;

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

@@ -8,21 +8,15 @@
 		/** Allow clicking the header to sort by this column. */
 		sortable?: boolean;
 	}
-
-	export type SortDirection = 'asc' | 'desc';
-
-	export interface TableSort {
-		key: string;
-		direction: SortDirection;
-	}
 </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 '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	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[];
@@ -85,26 +79,11 @@
 
 	const pad = $derived(compact ? 'px-4 py-2' : 'px-4 py-3');
 
-	const sorted = $derived.by(() => {
-		if (!sort || !sortLocally) return rows;
-		const { key, direction } = sort;
-		const factor = direction === 'asc' ? 1 : -1;
-		return [...rows].sort((a, b) => {
-			const x = a[key];
-			const y = b[key];
-			if (x == null) return 1;
-			if (y == null) return -1;
-			if (typeof x === 'number' && typeof y === 'number') return (x - y) * factor;
-			return String(x).localeCompare(String(y), undefined, { numeric: true }) * factor;
-		});
-	});
+	const sorted = $derived(sortLocally ? sortRows(rows, sort) : rows);
 
 	function toggleSort(column: TableColumn) {
 		if (!column.sortable) return;
-		let next: TableSort | null;
-		if (sort?.key !== column.key) next = { key: column.key, direction: 'asc' };
-		else if (sort.direction === 'asc') next = { key: column.key, direction: 'desc' };
-		else next = null;
+		const next = nextSort(sort, column.key);
 		sort = next;
 		onsort?.(next);
 	}
@@ -124,8 +103,7 @@
 	}
 
 	function toggleRow(row: T) {
-		const key = keyOf(row);
-		selected = selected.includes(key) ? selected.filter((k) => k !== key) : [...selected, key];
+		selected = toggleKey(selected, keyOf(row));
 		onselect?.(selected);
 	}
 </script>

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

@@ -7,14 +7,10 @@ export interface TableColumn {
     /** Allow clicking the header to sort by this column. */
     sortable?: boolean;
 }
-export type SortDirection = 'asc' | 'desc';
-export interface TableSort {
-    key: string;
-    direction: SortDirection;
-}
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Tone } from '../tones.js';
+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[];

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

@@ -1,6 +1,13 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { focusRing, toneBorder, toneRing, toneSoft, toneText, type Tone } from '../tones.js';
+	import {
+		focusRing,
+		toneBorder,
+		toneRing,
+		toneSoft,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
 
 	export interface TabItem {
 		value: string;

package/dist/{components → styles/matte}/Tabs.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 TabItem {
     value: string;
     label: string;

package/dist/styles/matte/Testimonial.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Avatar from './Avatar.svelte';
+	import { toneBorderLeft, toneSurface, toneText, 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: 'border border-hairline bg-bg p-6',
+		accent: `${toneSurface[tone]} border-l-2 ${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'
+			: ''}"
+	>
+		<span class="{toneText[tone]} select-none" aria-hidden="true">“</span>{quote}<span
+			class="{toneText[tone]} select-none"
+			aria-hidden="true">”</span
+		>
+	</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-medium text-text">{author}</span>
+			{#if role}
+				<span class="font-sans text-xs text-text-muted">{role}</span>
+			{/if}
+		</div>
+	</figcaption>
+</figure>

package/dist/styles/matte/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/{components → styles/matte}/Textarea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	import { toneFocusBorder, type Tone } from '../tones.js';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLTextareaAttributes {
 		value?: string;

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

@@ -1,5 +1,5 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLTextareaAttributes {
     value?: string;
     tone?: Tone;

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

@@ -1,26 +1,16 @@
-<script module lang="ts">
-	export type Theme = 'light' | 'dark' | 'system';
-
-	const STORAGE_KEY = 'nqm-theme';
-
-	/** Writes the theme classes `theme.css` reads. Safe to call before mount. */
-	export function applyTheme(theme: Theme) {
-		const root = document.documentElement;
-		root.classList.toggle('dark', theme === 'dark');
-		root.classList.toggle('light', theme === 'light');
-	}
-
-	/** The stored choice, or `'system'` when the visitor has never picked one. */
-	export function storedTheme(): Theme {
-		if (typeof localStorage === 'undefined') return 'system';
-		const saved = localStorage.getItem(STORAGE_KEY);
-		return saved === 'light' || saved === 'dark' ? saved : 'system';
-	}
-</script>
-
 <script lang="ts">
-	import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	// 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, toneSoft, 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. */
@@ -47,10 +37,7 @@
 
 	$effect(() => {
 		applyTheme(theme);
-		if (persist && typeof localStorage !== 'undefined') {
-			if (theme === 'system') localStorage.removeItem(STORAGE_KEY);
-			else localStorage.setItem(STORAGE_KEY, theme);
-		}
+		if (persist) persistTheme(theme);
 	});
 
 	function set(next: Theme) {
@@ -59,7 +46,7 @@
 	}
 
 	function cycle() {
-		set(theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light');
+		set(nextTheme(theme));
 	}
 
 	const options = $derived([

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

@@ -1,9 +1,5 @@
-export type Theme = 'light' | 'dark' | 'system';
-/** Writes the theme classes `theme.css` reads. Safe to call before mount. */
-export declare function applyTheme(theme: Theme): void;
-/** The stored choice, or `'system'` when the visitor has never picked one. */
-export declare function storedTheme(): Theme;
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
+import { type Theme } from '../../core/theme.svelte.js';
 interface Props {
     /** Bindable. `'system'` follows the OS until the visitor chooses. */
     theme?: Theme;

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
-	import { portal } from '../actions/dismissable.js';
-	import { toast } from '../toast.svelte.js';
-	import { toneBorderSoft, toneSurface, toneText } from '../tones.js';
+	import { portal } from '../../core/actions/dismissable.js';
+	import { toast } from '../../core/toast.svelte.js';
+	import { toneBorderSoft, toneSurface, toneText } from '../../core/tones.js';
 	import Spinner from './Spinner.svelte';
-	import { useLocale } from '../locale.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type ToasterPosition =
 		'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';

package/dist/{fonts.css → styles/matte/fonts.css}

@@ -1,7 +1,8 @@
 /*
- * Optional: the exact Google Fonts used by nqmcreative.com — Sora (headings),
- * Work Sans (body), JetBrains Mono (labels and code). Import this only if your
- * project doesn't already self-host or load these fonts another way.
+ * Optional: the three typefaces this system is designed around — Sora
+ * (headings), Work Sans (body), JetBrains Mono (labels and code). Import this
+ * only if your project doesn't already self-host or load these fonts another
+ * way.
  *
  * These are plain `@font-face` rules rather than an `@import` of the Google
  * stylesheet on purpose: `@import` is only valid before every other rule, so a

package/dist/styles/matte/index.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Matte — Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { default as Button } from './Button.svelte';
+export type { ButtonVariant, ButtonSize } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Input } from './Input.svelte';
+export type { InputSize } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export type { SelectOption } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export type { SwitchSize } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export type { RadioOption } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export type { CheckboxOption } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export type { ComboboxOption } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export type { MultiSelectOption } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+export { default as Badge } from './Badge.svelte';
+export type { BadgeTone, BadgeVariant, BadgeSize } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarSize } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export type { CardVariant } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export type { StatTrend } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export type { TableColumn } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Alert } from './Alert.svelte';
+export type { AlertVariant } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export type { ProgressSize } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export type { SpinnerSize } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export type { SkeletonVariant } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export type { ToasterPosition } from './Toaster.svelte';
+export { default as Divider } from './Divider.svelte';
+export type { DividerOrientation } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { TabItem, TabsVariant } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+export type { StepItem } from './Steps.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export type { NavItem } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+export type { FooterLink, FooterColumn } from './Footer.svelte';
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export type { FeatureColumns } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export type { TestimonialVariant } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { Logo } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export type { CTAVariant } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+export type { BandStat } from './StatsBand.svelte';
+export { default as Modal } from './Modal.svelte';
+export type { ModalSize } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerSide, DrawerSize } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export type { CommandItem } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipPlacement } from './Tooltip.svelte';

package/dist/styles/matte/index.js

@@ -0,0 +1,83 @@
+/**
+ * Matte — Flat and sharp-cornered — no radius, no shadow, no gloss. Hairline rules and mono micro-labels do the work borders usually do.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+/* --- shared behaviour --- */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+/* --- locale --- */
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+/* --- actions --- */
+export { default as Button } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+/* --- forms --- */
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+/* --- data display --- */
+export { default as Badge } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+/* --- feedback --- */
+export { default as Alert } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+/* --- layout & navigation --- */
+export { default as Divider } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+/* --- app shell --- */
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+/* --- marketing --- */
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+/* --- overlay --- */
+export { default as Modal } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/{theme.css → styles/matte/theme.css}

@@ -1,6 +1,5 @@
 /*
  * @nqmcreative/ui design tokens
- * Mirrors the visual language of https://nqmcreative.com
  * Flat, no shadows, no border-radius (except pills). Import this after
  * `@import "tailwindcss";` in your app's CSS entry point. Ships light and dark
  * palettes — see the bottom of this file.