@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/styles/matte/PricingCard.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorder, toneFill, toneSoft, toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		name: string;
+		/** Already formatted — the component does not do currency. */
+		price: string;
+		/** `/ month`, `per seat`, whatever follows the figure. */
+		period?: string;
+		description?: string;
+		/** One line each. Rendered with a tick. */
+		features?: string[];
+		/** Pill in the top corner, e.g. "Most popular". */
+		badge?: string;
+		/** Thicker border and a tinted header — for the plan you want chosen. */
+		featured?: boolean;
+		tone?: Tone;
+		/** The button. */
+		action?: Snippet;
+		/** Extra content under the feature list. */
+		children?: Snippet;
+	}
+
+	let {
+		name,
+		price,
+		period,
+		description,
+		features = [],
+		badge,
+		featured = false,
+		tone = 'brand',
+		action,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	class="flex flex-col bg-bg {featured
+		? `border-2 ${toneBorder[tone]}`
+		: 'border border-hairline'} {className}"
+	{...rest}
+>
+	<div class="flex flex-col gap-4 p-6 {featured ? toneSoft[tone] : ''}">
+		<div class="flex items-start justify-between gap-3">
+			<h3 class="font-heading text-lg font-medium tracking-tight {featured ? '' : 'text-text'}">
+				{name}
+			</h3>
+			{#if badge}
+				<span
+					class="shrink-0 rounded-full px-2.5 py-1 font-mono text-[10px] tracking-wide {featured
+						? `${toneFill[tone]} text-text-inverse`
+						: toneSoft[tone]}"
+				>
+					{badge}
+				</span>
+			{/if}
+		</div>
+
+		<div class="flex items-baseline gap-1.5">
+			<span
+				class="font-heading text-4xl font-medium tracking-tight {featured
+					? toneText[tone]
+					: 'text-text'}"
+			>
+				{price}
+			</span>
+			{#if period}
+				<span class="font-sans text-sm text-text-muted">{period}</span>
+			{/if}
+		</div>
+
+		{#if description}
+			<p class="font-sans text-sm leading-relaxed text-text-secondary">{description}</p>
+		{/if}
+	</div>
+
+	{#if features.length}
+		<ul class="flex flex-1 flex-col gap-3 border-t border-hairline p-6">
+			{#each features as feature (feature)}
+				<li class="flex items-start gap-3 font-sans text-sm text-text-secondary">
+					<svg
+						class="mt-0.5 size-4 shrink-0 {toneText[tone]}"
+						viewBox="0 0 16 16"
+						fill="none"
+						aria-hidden="true"
+					>
+						<path d="m3 8 3.2 3.2L13 4.4" stroke="currentColor" stroke-width="1.6" />
+					</svg>
+					<span class="leading-snug">{feature}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if children}
+		<div class="px-6 pb-2">{@render children()}</div>
+	{/if}
+
+	{#if action}
+		<div class="p-6 pt-2">{@render action()}</div>
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    name: string;
+    /** Already formatted — the component does not do currency. */
+    price: string;
+    /** `/ month`, `per seat`, whatever follows the figure. */
+    period?: string;
+    description?: string;
+    /** One line each. Rendered with a tick. */
+    features?: string[];
+    /** Pill in the top corner, e.g. "Most popular". */
+    badge?: string;
+    /** Thicker border and a tinted header — for the plan you want chosen. */
+    featured?: boolean;
+    tone?: Tone;
+    /** The button. */
+    action?: Snippet;
+    /** Extra content under the feature list. */
+    children?: Snippet;
+}
+declare const PricingCard: import("svelte").Component<Props, {}, "">;
+type PricingCard = ReturnType<typeof PricingCard>;
+export default PricingCard;

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneFill, type Tone } from '../tones.js';
+	import { toneFill, type Tone } from '../../core/tones.js';
+	import { percentOf } from '../../core/number.js';
 
 	export type ProgressSize = 'sm' | 'md' | 'lg';
 
@@ -29,7 +30,7 @@
 	}: 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)));
+	const pct = $derived(percentOf(value, 0, max));
 </script>
 
 <div class="flex w-full flex-col gap-2 {className}" {...rest}>

package/dist/{components → styles/matte}/Progress.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 ProgressSize = 'sm' | 'md' | 'lg';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     value?: number;

package/dist/{components → styles/matte}/Radio.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'> {
 		/** Bind the same variable across a set of radios. */

package/dist/{components → styles/matte}/Radio.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'> {
     /** Bind the same variable across a set of radios. */
     group?: string;

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
-	import { toneFocusBorder, type Tone } from '../tones.js';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
 
 	export interface SelectOption {
 		value: string;

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

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

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

@@ -21,8 +21,8 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useLocale } from '../locale.svelte.js';
-	import { focusRing, toneRing, toneSoft, type Tone } from '../tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
 		sections: SidebarSection[];

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

@@ -16,7 +16,7 @@ export interface SidebarSection {
     items: SidebarItem[];
 }
 import type { Snippet } from 'svelte';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props {
     sections: SidebarSection[];
     /** Bindable — the `id` (or `href`) of the current item. */

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
+	import { toneText, type Tone } from '../../core/tones.js';
+	import { percentOf } from '../../core/number.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
 		value?: number;
@@ -32,7 +33,7 @@
 		...rest
 	}: Props = $props();
 
-	const pct = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)));
+	const pct = $derived(percentOf(value, min, max));
 
 	// 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.

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

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends Omit<HTMLInputAttributes, 'size' | 'type' | 'value' | 'min' | 'max'> {
     value?: number;
     min?: number;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { toneText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 

package/dist/{components → styles/matte}/Spinner.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 SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: SpinnerSize;

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;