yaxa-svelte 1.14.2 → 1.15.0

package/README.md

@@ -3,12 +3,12 @@
 # Yaxa
 
 **The Intuitive Svelte UI & Solo SaaS Library**  
-_Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2 & 3 and Svelte 5 with Built-in SEO & SaaS Parity._
+_Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in SEO & SaaS Parity._
 
 [![npm version](https://img.shields.io/npm/v/yaxa-svelte.svg?color=CB3837&logo=npm)](https://www.npmjs.com/package/yaxa-svelte)
 [![npm downloads](https://img.shields.io/npm/dm/yaxa-svelte.svg?color=blue)](https://www.npmjs.com/package/yaxa-svelte)
 [![Svelte 5](https://img.shields.io/badge/Svelte-5.0+-FF3E00?style=flat&logo=svelte&logoColor=white)](https://svelte.dev)
-[![SvelteKit](https://img.shields.io/badge/SvelteKit-2%20%26%203-FF3E00?style=flat&logo=svelte&logoColor=white)](https://kit.svelte.dev)
+[![SvelteKit](https://img.shields.io/badge/SvelteKit-2.7+-FF3E00?style=flat&logo=svelte&logoColor=white)](https://kit.svelte.dev)
 [![Tailwind CSS v4](https://img.shields.io/badge/Tailwind_CSS-v4.0-38B2AC?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com)
 [![Bits UI](https://img.shields.io/badge/Bits_UI-v2.0-18181b?style=flat)](https://bits-ui.com)
 [![License: MIT](https://img.shields.io/badge/License-MIT-emerald.svg)](LICENSE)
@@ -21,9 +21,9 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2 & 3 and Svelte 5 with Built
 
 ## 🌟 Overview
 
-**Yaxa** brings the full developer experience, visual elegance, and full-stack toolkit of **Nuxt UI** and the **Nuxt SEO + SaaS ecosystem** to **SvelteKit 2 & 3** and **Svelte 5**.
+**Yaxa** brings the full developer experience, visual elegance, and full-stack toolkit of **Nuxt UI** and the **Nuxt SEO + SaaS ecosystem** to **SvelteKit 2.7+** and **Svelte 5**.
 
-- 🎨 **Tailwind CSS v4 Native Tokens**: Styled with `@theme` variables; harmonic radius scale (`--radius-xs` to `--radius-4xl`), chart palette tokens (`--color-chart-1` to `--color-chart-5`), and auto-adaptive scrollbars.
+- 🎨 **Tailwind CSS v4 Native Tokens**: Styled with `@theme` variables; harmonic radius scale (`--radius-xs` to `--radius-4xl`), chart palette tokens (`--color-chart-1` to `--color-chart-5`), atmospheric utilities (`yaxa-grain` & `yaxa-mesh-glow`), and auto-adaptive scrollbars.
 - 🎛️ **Visual Web Theme Studio**: Interactive runtime palette designer (`/theme` and `<ThemeStudio />`) with live sandbox preview and 1-click token export.
 - 🤖 **AI-Native Primitives**: Drop-in `<AiChat>`, `<PromptBar>`, `<AiThought>`, and `<AiToolCall>` for conversational interfaces and agentic workflows.
 - 📊 **Zero-Dependency SVG Charts**: Pure Svelte 5 `<LineChart>`, `<BarChart>`, and `<DonutChart>` with responsive tooltips, curved splines, and theme-palette synchronisation.
@@ -31,7 +31,7 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2 & 3 and Svelte 5 with Built
 - ♿ **Accessible by Default**: Headless primitives powered by **Bits UI**.
 - 🚀 **100% DRY SEO Parity**: Automate dynamic Open Graph cards (`/api/og`), environment-aware `robots.txt`, XML sitemaps with human-readable `sitemap.xsl` stylesheets, PWA manifests, and Schema.org JSON-LD from a single `src/site.config.ts`.
 - 🔐 **Batteries-Included SaaS Suite**: Pre-integrated **Better-Auth**, multi-dialect **Drizzle ORM** (Neon PostgreSQL & Turso LibSQL/SQLite), **Polar.sh** payments & webhook sync, and **Resend** transactional emails.
-- 🧩 **50+ Production Components**: Elements, AI primitives, charts, advanced forms (`<RichTextEditor>`, `<PhoneInput>`, `<CreditCardInput>`), layout, overlays, native `<Toast>` / `<Toaster>`, and drop-in SaaS widgets (`<AuthCard>`, `<UserMenu>`, `<PricingTable>`, `<SubscriptionCard>`).
+- 🧩 **50+ Production Components**: Elements, compound `<Skeleton recipe="...">` layouts, AI primitives, charts, advanced forms (`<RichTextEditor>`, `<PhoneInput>`, `<CreditCardInput>`), layout, overlays, sliding segmented `<Tabs>`, native `<Toast>` / `<Toaster>`, and drop-in SaaS widgets (`<AuthCard>`, `<UserMenu>`, `<PricingTable>`, `<SubscriptionCard>`).
 - 🛠️ **Composable Runes**: `useAuth`, `useShortcuts`, `useClipboard`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`, `useIdle`, `useGate`.
 
 ---
@@ -107,6 +107,7 @@ export const siteConfig = defineSiteConfig({
 
 ### 4. Import CSS & Wrap Root Layout
 
+**Option A: Turnkey Zero-Config** (Default)
 Import `yaxa-svelte/yaxa.css` and wrap your app in `<YaxaApp>`:
 
 ```svelte
@@ -124,6 +125,17 @@ Import `yaxa-svelte/yaxa.css` and wrap your app in `<YaxaApp>`:
 </YaxaApp>
 ```
 
+**Option B: Optimized Tailwind CSS v4 Pipeline** (Maximum build performance & deduplication)
+If your project already imports Tailwind in `src/app.css`, import the standalone theme tokens and tell Tailwind to scan Yaxa:
+
+```css
+/* src/app.css */
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@import 'yaxa-svelte/theme.css';
+@source '../node_modules/yaxa-svelte/dist/**/*.{js,svelte}';
+```
+
 ---
 
 ## 🛡️ 1-Line Server SEO & Auth Automation

package/dist/actions/infiniteScroll.js

@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 /**
  * Headless Svelte Action to trigger loading callbacks when scrolling near the edges.
  *

package/dist/admin/handler.d.ts

@@ -39,8 +39,8 @@ export declare class DrizzleAdminService {
  * Example:
  * ```ts
  * // src/routes/admin/+page.server.ts
- * import { db } from '../server/db/index.js';
- * import * as schema from '../server/db/schema-pg.js';
+ * import { db } from '../server/db';
+ * import * as schema from '../server/db/schema-pg';
  * import { createDrizzleAdmin } from 'yaxa-svelte/admin';
  *
  * export const { load, actions } = createDrizzleAdmin({ db, schema });

package/dist/admin/handler.js

@@ -232,8 +232,8 @@ export class DrizzleAdminService {
  * Example:
  * ```ts
  * // src/routes/admin/+page.server.ts
- * import { db } from '../server/db/index.js';
- * import * as schema from '../server/db/schema-pg.js';
+ * import { db } from '../server/db';
+ * import * as schema from '../server/db/schema-pg';
  * import { createDrizzleAdmin } from 'yaxa-svelte/admin';
  *
  * export const { load, actions } = createDrizzleAdmin({ db, schema });

package/dist/admin/hook.d.ts

@@ -1,4 +1,4 @@
-import type { Handle } from '@sveltejs/kit/hooks';
+import type { Handle } from '@sveltejs/kit';
 import type { YaxaAdminHookOptions } from './types';
 /**
  * Creates a SvelteKit Handle hook for zero-file route interception and automatic Drizzle admin dashboard.
@@ -8,8 +8,8 @@ import type { YaxaAdminHookOptions } from './types';
  * // src/hooks.server.ts
  * import { sequence } from '@sveltejs/kit/hooks';
  * import { createYaxaAdminHook } from 'yaxa-svelte/admin';
- * import { db } from '../server/db/index.js';
- * import * as schema from '../server/db/schema-pg.js';
+ * import { db } from '../server/db';
+ * import * as schema from '../server/db/schema-pg';
  *
  * export const handle = sequence(
  *   createYaxaAdminHook({ db, schema, path: '/admin' })

package/dist/admin/hook.js

@@ -9,8 +9,8 @@ import { createPresignedUploadUrl } from '../server/storage/index';
  * // src/hooks.server.ts
  * import { sequence } from '@sveltejs/kit/hooks';
  * import { createYaxaAdminHook } from 'yaxa-svelte/admin';
- * import { db } from '../server/db/index.js';
- * import * as schema from '../server/db/schema-pg.js';
+ * import { db } from '../server/db';
+ * import * as schema from '../server/db/schema-pg';
  *
  * export const handle = sequence(
  *   createYaxaAdminHook({ db, schema, path: '/admin' })
@@ -172,8 +172,8 @@ function renderAdminHtml(data, title, adminPath) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${title}</title>
-  <${'script'} src="https://cdn.tailwindcss.com"></${'script'}>
-  <${'script'}>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
     tailwind.config = {
       darkMode: 'class',
       theme: {
@@ -188,8 +188,8 @@ function renderAdminHtml(data, title, adminPath) {
           }
         }
       }
-    };
-  </${'script'}>
+    }
+  </script>
 </head>
 <body class="bg-neutral-950 text-neutral-100 antialiased min-h-screen font-sans">
   <div class="flex h-14 items-center justify-between border-b border-neutral-800 bg-neutral-900/90 px-6 backdrop-blur">

package/dist/components/ai/AiChat.svelte

@@ -49,7 +49,8 @@
 	import PromptBar from './PromptBar.svelte';
 	import AiThought from './AiThought.svelte';
 	import AiToolCall from './AiToolCall.svelte';
-	import { useToast } from '../../composables/useToast.svelte.js';
+	import { useToast } from '../../composables/useToast.svelte';
+	import { cn } from '../../utils/cn';
 
 	let {
 		messages = [],
@@ -73,17 +74,16 @@
 	const toast = useToast();
 
 	function scrollToBottom(smooth = true) {
-		if (scrollContainer && autoScroll) {
-			scrollContainer.scrollTo({
-				top: scrollContainer.scrollHeight,
-				behavior: smooth ? 'smooth' : 'auto'
-			});
-		}
+		if (!scrollContainer) return;
+		scrollContainer.scrollTo({
+			top: scrollContainer.scrollHeight,
+			behavior: smooth ? 'smooth' : 'auto'
+		});
 	}
 
 	$effect(() => {
-		if (messages.length > 0) {
-			setTimeout(() => scrollToBottom(true), 50);
+		if (autoScroll && messages.length > 0) {
+			scrollToBottom(true);
 		}
 	});
 
@@ -96,7 +96,10 @@
 </script>
 
 <div
-	class="flex h-full min-h-[500px] w-full flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-md dark:border-neutral-800 dark:bg-neutral-950 {className}"
+	class={cn(
+		'flex h-full min-h-[500px] w-full flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-md dark:border-neutral-800 dark:bg-neutral-950',
+		className
+	)}
 >
 	<!-- Chat Header Bar -->
 	<div
@@ -117,9 +120,10 @@
 					</div>
 					<div class="flex items-center gap-1.5 text-[11px] text-neutral-500">
 						<span
-							class="h-1.5 w-1.5 rounded-full {loading
-								? 'animate-ping bg-amber-500'
-								: 'bg-emerald-500'}"
+							class={cn(
+								'h-1.5 w-1.5 rounded-full',
+								loading ? 'animate-ping bg-amber-500' : 'bg-emerald-500'
+							)}
 						></span>
 						<span>{loading ? 'Generating response...' : 'Online & Ready'}</span>
 					</div>
@@ -131,7 +135,7 @@
 	<!-- Scrollable Messages Container -->
 	<div
 		bind:this={scrollContainer}
-		class="yaxa-scrollbar flex-1 space-y-6 overflow-y-auto p-4 sm:p-6"
+		class="flex-1 yaxa-scrollbar space-y-6 overflow-y-auto p-4 sm:p-6"
 	>
 		{#if messages.length === 0}
 			<div class="flex h-full min-h-[300px] flex-col items-center justify-center text-center">
@@ -152,7 +156,7 @@
 				{#if messageSlot}
 					{@render messageSlot(msg)}
 				{:else}
-					<div class="flex gap-3.5 {msg.role === 'user' ? 'justify-end' : 'justify-start'}">
+					<div class={cn('flex gap-3.5', msg.role === 'user' ? 'justify-end' : 'justify-start')}>
 						{#if msg.role === 'assistant'}
 							<Avatar
 								src={assistantAvatar}
@@ -163,9 +167,10 @@
 						{/if}
 
 						<div
-							class="flex max-w-[85%] flex-col gap-1 sm:max-w-[75%] {msg.role === 'user'
-								? 'items-end'
-								: 'items-start'}"
+							class={cn(
+								'flex max-w-[85%] flex-col gap-1 sm:max-w-[75%]',
+								msg.role === 'user' ? 'items-end' : 'items-start'
+							)}
 						>
 							<!-- Agent Reasoning / Thoughts -->
 							{#if msg.thought}
@@ -184,7 +189,7 @@
 							<!-- Agent Tool Invocations -->
 							{#if msg.tools && msg.tools.length > 0}
 								<div class="w-full space-y-2">
-									{#each msg.tools as tool}
+									{#each msg.tools as tool, tIdx (tool.name + tIdx)}
 										<AiToolCall
 											name={tool.name}
 											status={tool.status}
@@ -197,10 +202,12 @@
 
 							<!-- Message Bubble -->
 							<div
-								class="relative rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-xs {msg.role ===
-								'user'
-									? 'bg-primary-500 text-white dark:bg-primary-600'
-									: 'border border-neutral-200/80 bg-neutral-50 text-neutral-900 dark:border-neutral-800/80 dark:bg-neutral-900 dark:text-neutral-100'}"
+								class={cn(
+									'relative rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-xs',
+									msg.role === 'user'
+										? 'bg-primary-500 text-white dark:bg-primary-600'
+										: 'border border-neutral-200/80 bg-neutral-50 text-neutral-900 dark:border-neutral-800/80 dark:bg-neutral-900 dark:text-neutral-100'
+								)}
 							>
 								<div class="whitespace-pre-wrap">{msg.content}</div>
 

package/dist/components/ai/AiThought.svelte

@@ -12,6 +12,7 @@
 
 <script lang="ts">
 	import Icon from '../elements/Icon.svelte';
+	import { cn } from '../../utils/cn';
 
 	let {
 		duration,
@@ -29,7 +30,10 @@
 </script>
 
 <div
-	class="my-2 overflow-hidden rounded-xl border border-neutral-200/80 bg-neutral-50/60 transition-all dark:border-neutral-800/80 dark:bg-neutral-900/40 {className}"
+	class={cn(
+		'my-2 overflow-hidden rounded-xl border border-neutral-200/80 bg-neutral-50/60 transition-all dark:border-neutral-800/80 dark:bg-neutral-900/40',
+		className
+	)}
 >
 	<!-- Header Bar -->
 	<button

package/dist/components/ai/AiToolCall.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
 	import Icon from '../elements/Icon.svelte';
 	import CodeBlock from '../elements/CodeBlock.svelte';
+	import { cn } from '../../utils/cn';
 
 	let {
 		name,
@@ -40,7 +41,10 @@
 </script>
 
 <div
-	class="my-2.5 overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs transition-all dark:border-neutral-800 dark:bg-neutral-900 {className}"
+	class={cn(
+		'my-2.5 overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs transition-all dark:border-neutral-800 dark:bg-neutral-900',
+		className
+	)}
 >
 	<!-- Header Bar -->
 	<button

package/dist/components/ai/PromptBar.svelte

@@ -22,9 +22,10 @@
 </script>
 
 <script lang="ts">
-	import { autosize } from '../../actions/index.js';
+	import { autosize } from '../../actions';
 	import Button from '../elements/Button.svelte';
 	import Icon from '../elements/Icon.svelte';
+	import { cn } from '../../utils/cn';
 
 	let {
 		value = $bindable(''),
@@ -60,26 +61,12 @@
 	});
 
 	let showCommands = $derived(
-		value.startsWith('/') && filteredCommands.length > 0 && dismissedQuery !== value
+		value.startsWith('/') &&
+			filteredCommands.length > 0 &&
+			dismissedQuery !== value &&
+			!value.includes(' ')
 	);
 
-	function handleSubmit() {
-		if (loading) {
-			if (onstop) onstop();
-			return;
-		}
-
-		if ((!value.trim() && attachments.length === 0) || disabled) return;
-
-		if (onsubmit) {
-			onsubmit(value.trim(), [...attachments]);
-		}
-
-		value = '';
-		attachments = [];
-		dismissedQuery = '';
-	}
-
 	function handleKeydown(e: KeyboardEvent) {
 		if (showCommands) {
 			if (e.key === 'ArrowDown') {
@@ -95,11 +82,7 @@
 			}
 			if (e.key === 'Enter' || e.key === 'Tab') {
 				e.preventDefault();
-				const cmd = filteredCommands[selectedCommandIdx];
-				if (cmd) {
-					value = `${cmd.name} `;
-					dismissedQuery = '';
-				}
+				selectCommand(filteredCommands[selectedCommandIdx]);
 				return;
 			}
 			if (e.key === 'Escape') {
@@ -114,14 +97,32 @@
 		}
 	}
 
+	function handleSubmit() {
+		if (loading) {
+			if (onstop) onstop();
+			return;
+		}
+
+		if ((!value.trim() && attachments.length === 0) || disabled) return;
+
+		if (onsubmit) {
+			onsubmit(value.trim(), attachments);
+		}
+
+		value = '';
+		attachments = [];
+		dismissedQuery = '';
+	}
+
 	function triggerFileUpload() {
 		fileInputEl?.click();
 	}
 
 	function handleFileChange(e: Event) {
 		const target = e.target as HTMLInputElement;
-		if (target.files && target.files.length > 0) {
+		if (target.files) {
 			attachments = [...attachments, ...Array.from(target.files)];
+			target.value = '';
 		}
 	}
 
@@ -135,7 +136,7 @@
 	}
 </script>
 
-<div class="relative w-full {className}">
+<div class={cn('relative w-full', className)}>
 	<!-- Slash Command Autocomplete Menu -->
 	{#if showCommands}
 		<div
@@ -144,14 +145,16 @@
 			<div class="px-2.5 py-1 text-[11px] font-semibold text-neutral-400 uppercase">
 				Quick Commands
 			</div>
-			{#each filteredCommands as cmd, i}
+			{#each filteredCommands as cmd, i (cmd.name)}
 				<button
 					type="button"
 					onclick={() => selectCommand(cmd)}
-					class="flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors {i ===
-					selectedCommandIdx
-						? 'bg-primary-50 text-primary-900 dark:bg-primary-950/60 dark:text-primary-100'
-						: 'text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/60'}"
+					class={cn(
+						'flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors',
+						i === selectedCommandIdx
+							? 'bg-primary-50 text-primary-900 dark:bg-primary-950/60 dark:text-primary-100'
+							: 'text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/60'
+					)}
 				>
 					<div class="flex items-center gap-2">
 						<span class="font-mono font-medium">{cmd.name}</span>
@@ -180,7 +183,7 @@
 		<!-- Attached Files List -->
 		{#if attachments.length > 0}
 			<div class="mb-2 flex flex-wrap gap-1.5 px-1.5 pt-1">
-				{#each attachments as file, idx}
+				{#each attachments as file, idx (file.name + idx)}
 					<div
 						class="flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1 text-xs text-neutral-700 dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-200"
 					>
@@ -235,9 +238,12 @@
 						audioRecording = !audioRecording;
 						if (ontoggleAudio) ontoggleAudio();
 					}}
-					class="h-8 w-8 rounded-lg p-0 {audioRecording
-						? 'text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/40'
-						: 'text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white'}"
+					class={cn(
+						'h-8 w-8 rounded-lg p-0',
+						audioRecording
+							? 'text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/40'
+							: 'text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white'
+					)}
 					aria-label={audioRecording ? 'Stop voice recording' : 'Voice prompt'}
 					title={audioRecording ? 'Stop voice recording' : 'Voice prompt'}
 				>

package/dist/components/blocks/FAQ.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, type VariantProps } from '../../utils/cn';
 
 	export interface FAQItem {
 		id: string | number;

package/dist/components/blocks/FAQ.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 export interface FAQItem {
     id: string | number;
     question: string;

package/dist/components/blocks/FeatureGrid.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, type VariantProps } from '../../utils/cn';
 	import type { IconSource } from '../elements/Icon.svelte';
 
 	export interface FeatureItem {

package/dist/components/blocks/FeatureGrid.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 import type { IconSource } from '../elements/Icon.svelte';
 export interface FeatureItem {
     id: string | number;

package/dist/components/blocks/Testimonials.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, type VariantProps } from '../../utils/cn';
 
 	export interface TestimonialItem {
 		id: string | number;

package/dist/components/blocks/Testimonials.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 export interface TestimonialItem {
     id: string | number;
     quote: string;

package/dist/components/elements/Avatar.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, cn, type VariantProps } from '../../utils/cn';
 
 	export const avatarVariants = tv({
 		base: 'relative inline-flex shrink-0 items-center justify-center font-medium select-none overflow-hidden rounded-full bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
@@ -100,7 +100,11 @@
 
 	{#if presence}
 		<span
-			class="absolute right-0 bottom-0 rounded-full ring-white dark:ring-neutral-900 {presenceColor} {presenceSize}"
+			class={cn(
+				'absolute right-0 bottom-0 rounded-full ring-white dark:ring-neutral-900',
+				presenceColor,
+				presenceSize
+			)}
 		></span>
 	{/if}
 </div>

package/dist/components/elements/Avatar.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
     size: {
         xs: "h-6 w-6 text-[10px]";

package/dist/components/elements/AvatarGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn';
 
 	interface Props {
 		class?: string;
@@ -10,7 +11,10 @@
 </script>
 
 <div
-	class="inline-flex items-center -space-x-2 *:ring-2 *:ring-white dark:*:ring-neutral-900 {className}"
+	class={cn(
+		'inline-flex items-center -space-x-2 *:ring-2 *:ring-white dark:*:ring-neutral-900',
+		className
+	)}
 >
 	{#if children}
 		{@render children()}

package/dist/components/elements/Badge.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, cn, type VariantProps } from '../../utils/cn';
 	import type { Snippet } from 'svelte';
 	import type { IconSource } from './Icon.svelte';
 
@@ -183,13 +183,16 @@
 <span class={classes}>
 	{#if dot}
 		<span
-			class="h-1.5 w-1.5 rounded-full {color === 'success'
-				? 'bg-emerald-500'
-				: color === 'warning'
-					? 'bg-amber-500'
-					: color === 'error'
-						? 'bg-rose-500'
-						: 'bg-primary-500'}"
+			class={cn(
+				'h-1.5 w-1.5 rounded-full',
+				color === 'success'
+					? 'bg-emerald-500'
+					: color === 'warning'
+						? 'bg-amber-500'
+						: color === 'error'
+							? 'bg-rose-500'
+							: 'bg-primary-500'
+			)}
 		></span>
 	{/if}
 

package/dist/components/elements/Badge.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/elements/Button.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, type VariantProps } from '../../utils/cn';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 	import type { IconSource } from './Icon.svelte';

package/dist/components/elements/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/elements/Carousel.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn.js';
+	import { tv, type VariantProps } from '../../utils/cn';
 	import type { Snippet } from 'svelte';
 
 	export const carouselVariants = tv({

package/dist/components/elements/Carousel.svelte.d.ts

@@ -1,10 +1,10 @@
-import { type VariantProps } from '../../utils/cn.js';
+import { type VariantProps } from '../../utils/cn';
 import type { Snippet } from 'svelte';
 export declare const carouselVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            viewport?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
             slide?: import("tailwind-variants").ClassValue;
             controls?: import("tailwind-variants").ClassValue;
             arrowBtn?: import("tailwind-variants").ClassValue;
@@ -15,8 +15,8 @@ export declare const carouselVariants: import("tailwind-variants").TVReturnType<
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            viewport?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
             slide?: import("tailwind-variants").ClassValue;
             controls?: import("tailwind-variants").ClassValue;
             arrowBtn?: import("tailwind-variants").ClassValue;
@@ -35,8 +35,8 @@ export declare const carouselVariants: import("tailwind-variants").TVReturnType<
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            viewport?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
             slide?: import("tailwind-variants").ClassValue;
             controls?: import("tailwind-variants").ClassValue;
             arrowBtn?: import("tailwind-variants").ClassValue;

package/dist/components/elements/CodeBlock.svelte

@@ -243,7 +243,7 @@
 <script lang="ts">
 	import Button from './Button.svelte';
 	import Icon from './Icon.svelte';
-	import { useToast } from '../../composables/useToast.svelte.js';
+	import { useToast } from '../../composables/useToast.svelte';
 
 	let {
 		code,