yaxa-svelte 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yaxa Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,163 @@
+<div align="center">
+
+# Yaxa
+
+**The Intuitive Svelte UI & Solo SaaS Library**  
+_Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in SEO & SaaS Parity._
+
+[![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.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)
+
+[**Live Documentation & Playground →**](https://yaxa.vercel.app)
+
+</div>
+
+---
+
+## 🌟 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.7+** and **Svelte 5**.
+
+- 🎨 **Tailwind CSS v4 Native Tokens**: Styled with `@theme` variables; customize any color or token directly.
+- ⚡ **Pure Svelte 5 Runes**: Built using `$state`, `$derived`, `$props`, and `$bindable` — zero Virtual DOM overhead.
+- ♿ **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.
+- 🧩 **35+ Production Components**: Elements, forms, layout, overlays, and drop-in SaaS widgets (`<AuthCard>`, `<UserMenu>`, `<PricingTable>`, `<SubscriptionCard>`).
+- 🛠️ **Composable Runes**: `useAuth`, `useShortcuts`, `useClipboard`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`.
+
+---
+
+## 📦 Quickstart in 3 Steps
+
+### 1. Install Yaxa
+
+```bash
+pnpm add yaxa-svelte bits-ui tailwind-variants svelte-sonner better-auth drizzle-orm @polar-sh/sdk resend
+# or
+npm install yaxa-svelte bits-ui tailwind-variants svelte-sonner better-auth drizzle-orm @polar-sh/sdk resend
+```
+
+### 2. Define Your Site Configuration
+
+Create `src/site.config.ts` — your single source of truth for branding, metadata, and SEO:
+
+```ts
+// src/site.config.ts
+import { defineSiteConfig } from 'yaxa-svelte';
+
+export const siteConfig = defineSiteConfig({
+	name: 'My Indie SaaS',
+	title: 'My Indie SaaS — Build Fast with SvelteKit',
+	description: 'Fast, beautiful, accessible web applications.',
+	url: 'https://my-app.com',
+	theme: {
+		primaryColor: '#ff3e00',
+		defaultMode: 'dark'
+	},
+	socials: {
+		github: 'https://github.com/my-org/my-app',
+		twitter: '@my_app'
+	}
+});
+```
+
+### 3. Wrap Root Layout
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script lang="ts">
+	import { YaxaApp } from 'yaxa-svelte';
+	import { siteConfig } from '../site.config';
+
+	let { children } = $props();
+</script>
+
+<YaxaApp config={siteConfig}>
+	{@render children()}
+</YaxaApp>
+```
+
+---
+
+## 🛡️ 1-Line Server SEO & Auth Automation
+
+Handle **all 5 SEO endpoints** and **Better-Auth session parsing** in `src/hooks.server.ts`:
+
+```ts
+// src/hooks.server.ts
+import { sequence } from '@sveltejs/kit/hooks';
+import { createYaxaHook, createYaxaAuth, createYaxaAuthHook } from 'yaxa-svelte';
+import { siteConfig } from './site.config';
+
+const yaxaHook = createYaxaHook(siteConfig);
+const auth = createYaxaAuth();
+const authHook = createYaxaAuthHook({
+	auth,
+	protectedPaths: ['/dashboard', '/settings', '/billing'],
+	loginPath: '/login'
+});
+
+export const handle = sequence(yaxaHook, authHook);
+```
+
+---
+
+## 💳 Polar.sh Payments & Webhook Synchronization
+
+Create a webhook endpoint in `src/routes/api/webhooks/polar/+server.ts`:
+
+```ts
+// src/routes/api/webhooks/polar/+server.ts
+import { createPolarWebhookHandler } from 'yaxa-svelte';
+
+export const POST = createPolarWebhookHandler();
+```
+
+---
+
+## 🧩 Component Library
+
+| Category           | Components                                                                                                                                                   |
+| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **SaaS Suite**     | `AuthCard`, `UserMenu`, `PricingCard`, `PricingTable`, `SubscriptionCard`, `useAuth`                                                                         |
+| **Elements**       | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable`, `Chip`, `Meter`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`    |
+| **Forms**          | `Form`, `FormField`, `Input`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Slider`, `ColorPicker`                                              |
+| **Layout**         | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`                                                                                     |
+| **Overlays & Nav** | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Slideover`, `Popover`, `Tooltip`, `Alert`, `Accordion` |
+| **Composables**    | `useAuth`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`                                                        |
+
+---
+
+## 🎨 Interactive Live Themes
+
+Yaxa includes first-class support for instant dynamic CSS accent and neutral variables via `theme`:
+
+```ts
+import { theme } from 'yaxa-svelte';
+
+// Change theme accent dynamically at runtime:
+theme.setAccent('svelte'); // Svelte Flame (#ff3e00)
+theme.setAccent('emerald'); // Emerald Mint (#10b981)
+theme.setAccent('sky'); // Sky Cyan (#0ea5e9)
+```
+
+---
+
+## 🤝 Contributing
+
+Contributions are always welcome!
+
+1. Fork the repository: `git clone https://github.com/FuntionalFrost/yaxa.git`
+2. Install dependencies: `pnpm install`
+3. Start development server: `pnpm dev`
+4. Run type checking & linting: `pnpm check && pnpm lint`
+
+---
+
+## 📄 License
+
+[MIT License](LICENSE) © 2026 Yaxa Contributors.

package/dist/assets/favicon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <defs>
+    <linearGradient id="yaxa-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff3e00" />
+      <stop offset="100%" stop-color="#ea580c" />
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" rx="24" fill="#121212" stroke="#ff3e00" stroke-opacity="0.35" stroke-width="2" />
+  <!-- Outer Flame Track -->
+  <path d="M24 24 L76 76" stroke="url(#yaxa-grad)" stroke-width="22" stroke-linecap="round" />
+  <path d="M76 24 L56 44 M44 56 L24 76" stroke="url(#yaxa-grad)" stroke-width="22" stroke-linecap="round" />
+  <!-- Inner White Stadium Core Track -->
+  <path d="M24 24 L76 76" stroke="#ffffff" stroke-width="8" stroke-linecap="round" />
+  <path d="M76 24 L58 42 M42 58 L24 76" stroke="#ffffff" stroke-width="8" stroke-linecap="round" />
+</svg>

package/dist/components/elements/Avatar.svelte

@@ -0,0 +1,106 @@
+<script module lang="ts">
+	import { tv, 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',
+		variants: {
+			size: {
+				xs: 'h-6 w-6 text-[10px]',
+				sm: 'h-8 w-8 text-xs',
+				md: 'h-10 w-10 text-sm',
+				lg: 'h-12 w-12 text-base',
+				xl: 'h-14 w-14 text-lg',
+				'2xl': 'h-16 w-16 text-xl'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	});
+
+	export type AvatarProps = VariantProps<typeof avatarVariants> & {
+		src?: string;
+		alt?: string;
+		text?: string;
+		fallback?: string;
+		presence?: 'online' | 'busy' | 'away' | 'offline';
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		src,
+		alt = 'Avatar',
+		text,
+		fallback,
+		presence,
+		size = 'md',
+		class: className = ''
+	}: AvatarProps = $props();
+
+	let hasError = $state(false);
+
+	let initials = $derived.by(() => {
+		if (fallback) return fallback;
+		if (text) return text.slice(0, 2).toUpperCase();
+		if (alt) {
+			const parts = alt.split(' ');
+			if (parts.length > 1) {
+				return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+			}
+			return alt.slice(0, 2).toUpperCase();
+		}
+		return '?';
+	});
+
+	let presenceColor = $derived.by(() => {
+		switch (presence) {
+			case 'online':
+				return 'bg-emerald-500';
+			case 'busy':
+				return 'bg-rose-500';
+			case 'away':
+				return 'bg-amber-500';
+			case 'offline':
+			default:
+				return 'bg-neutral-400';
+		}
+	});
+
+	let presenceSize = $derived.by(() => {
+		switch (size) {
+			case 'xs':
+			case 'sm':
+				return 'h-2 w-2 ring-1';
+			case 'lg':
+			case 'xl':
+			case '2xl':
+				return 'h-3.5 w-3.5 ring-2';
+			case 'md':
+			default:
+				return 'h-2.5 w-2.5 ring-2';
+		}
+	});
+</script>
+
+<div class={avatarVariants({ size, class: className })}>
+	{#if src && !hasError}
+		<img
+			{src}
+			{alt}
+			class="h-full w-full object-cover"
+			onerror={() => {
+				hasError = true;
+			}}
+		/>
+	{:else}
+		<span>{initials}</span>
+	{/if}
+
+	{#if presence}
+		<span
+			class="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

@@ -0,0 +1,40 @@
+import { type VariantProps } from '../../utils/cn';
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-6 w-6 text-[10px]";
+        sm: "h-8 w-8 text-xs";
+        md: "h-10 w-10 text-sm";
+        lg: "h-12 w-12 text-base";
+        xl: "h-14 w-14 text-lg";
+        '2xl': "h-16 w-16 text-xl";
+    };
+}, undefined, "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", {
+    size: {
+        xs: "h-6 w-6 text-[10px]";
+        sm: "h-8 w-8 text-xs";
+        md: "h-10 w-10 text-sm";
+        lg: "h-12 w-12 text-base";
+        xl: "h-14 w-14 text-lg";
+        '2xl': "h-16 w-16 text-xl";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-6 w-6 text-[10px]";
+        sm: "h-8 w-8 text-xs";
+        md: "h-10 w-10 text-sm";
+        lg: "h-12 w-12 text-base";
+        xl: "h-14 w-14 text-lg";
+        '2xl': "h-16 w-16 text-xl";
+    };
+}, undefined>>;
+export type AvatarProps = VariantProps<typeof avatarVariants> & {
+    src?: string;
+    alt?: string;
+    text?: string;
+    fallback?: string;
+    presence?: 'online' | 'busy' | 'away' | 'offline';
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/elements/AvatarGroup.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class="inline-flex items-center -space-x-2 *:ring-2 *:ring-white dark:*:ring-neutral-900 {className}"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/elements/Badge.svelte

@@ -0,0 +1,202 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const badgeVariants = tv({
+		base: 'inline-flex items-center font-medium select-none transition-colors duration-150',
+		variants: {
+			variant: {
+				solid: 'text-white',
+				outline: 'border bg-transparent',
+				soft: '',
+				subtle: 'border'
+			},
+			color: {
+				primary: '',
+				neutral: '',
+				success: '',
+				warning: '',
+				error: '',
+				info: ''
+			},
+			size: {
+				xs: 'text-[10px] px-1.5 py-0.5 gap-1 rounded',
+				sm: 'text-xs px-2.5 py-0.5 gap-1.5 rounded-md',
+				md: 'text-xs px-2.5 py-1 gap-1.5 rounded-md',
+				lg: 'text-sm px-3 py-1.5 gap-2 rounded-lg'
+			}
+		},
+		compoundVariants: [
+			// Solid
+			{ variant: 'solid', color: 'primary', class: 'bg-primary-600' },
+			{
+				variant: 'solid',
+				color: 'neutral',
+				class: 'bg-neutral-900 text-neutral-50 dark:bg-neutral-100 dark:text-neutral-900'
+			},
+			{ variant: 'solid', color: 'success', class: 'bg-emerald-600' },
+			{ variant: 'solid', color: 'warning', class: 'bg-amber-600' },
+			{ variant: 'solid', color: 'error', class: 'bg-rose-600' },
+			{ variant: 'solid', color: 'info', class: 'bg-sky-600' },
+
+			// Outline
+			{
+				variant: 'outline',
+				color: 'primary',
+				class: 'border-primary-500 text-primary-600 dark:text-primary-400'
+			},
+			{
+				variant: 'outline',
+				color: 'neutral',
+				class: 'border-neutral-300 dark:border-neutral-700 text-neutral-800 dark:text-neutral-200'
+			},
+			{
+				variant: 'outline',
+				color: 'success',
+				class: 'border-emerald-500 text-emerald-600 dark:text-emerald-400'
+			},
+			{
+				variant: 'outline',
+				color: 'warning',
+				class: 'border-amber-500 text-amber-600 dark:text-amber-400'
+			},
+			{
+				variant: 'outline',
+				color: 'error',
+				class: 'border-rose-500 text-rose-600 dark:text-rose-400'
+			},
+			{
+				variant: 'outline',
+				color: 'info',
+				class: 'border-sky-500 text-sky-600 dark:text-sky-400'
+			},
+
+			// Soft
+			{
+				variant: 'soft',
+				color: 'primary',
+				class: 'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300'
+			},
+			{
+				variant: 'soft',
+				color: 'neutral',
+				class: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200'
+			},
+			{
+				variant: 'soft',
+				color: 'success',
+				class: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300'
+			},
+			{
+				variant: 'soft',
+				color: 'warning',
+				class: 'bg-amber-50 text-amber-700 dark:bg-amber-950/60 dark:text-amber-300'
+			},
+			{
+				variant: 'soft',
+				color: 'error',
+				class: 'bg-rose-50 text-rose-700 dark:bg-rose-950/60 dark:text-rose-300'
+			},
+			{
+				variant: 'soft',
+				color: 'info',
+				class: 'bg-sky-50 text-sky-700 dark:bg-sky-950/60 dark:text-sky-300'
+			},
+
+			// Subtle
+			{
+				variant: 'subtle',
+				color: 'primary',
+				class:
+					'border-primary-200 bg-primary-50/60 text-primary-700 dark:border-primary-800 dark:bg-primary-950/40 dark:text-primary-300'
+			},
+			{
+				variant: 'subtle',
+				color: 'neutral',
+				class:
+					'border-neutral-200 bg-neutral-50 text-neutral-800 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200'
+			},
+			{
+				variant: 'subtle',
+				color: 'success',
+				class:
+					'border-emerald-200 bg-emerald-50/60 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300'
+			},
+			{
+				variant: 'subtle',
+				color: 'warning',
+				class:
+					'border-amber-200 bg-amber-50/60 text-amber-700 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300'
+			},
+			{
+				variant: 'subtle',
+				color: 'error',
+				class:
+					'border-rose-200 bg-rose-50/60 text-rose-700 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-300'
+			},
+			{
+				variant: 'subtle',
+				color: 'info',
+				class:
+					'border-sky-200 bg-sky-50/60 text-sky-700 dark:border-sky-800 dark:bg-sky-950/40 dark:text-sky-300'
+			}
+		],
+		defaultVariants: {
+			variant: 'soft',
+			color: 'primary',
+			size: 'sm'
+		}
+	});
+
+	export type BadgeProps = VariantProps<typeof badgeVariants> & {
+		dot?: boolean;
+		icon?: string;
+		class?: string;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+
+	let {
+		variant = 'soft',
+		color = 'primary',
+		size = 'sm',
+		dot = false,
+		icon,
+		class: className = '',
+		children
+	}: BadgeProps = $props();
+
+	let classes = $derived(
+		badgeVariants({
+			variant,
+			color,
+			size,
+			class: className
+		})
+	);
+</script>
+
+<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'}"
+		></span>
+	{/if}
+
+	{#if icon}
+		<Icon name={icon} size={size === 'xs' ? 'xs' : 'sm'} />
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</span>

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

@@ -0,0 +1,75 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: "text-white";
+        outline: "border bg-transparent";
+        soft: "";
+        subtle: "border";
+    };
+    color: {
+        primary: "";
+        neutral: "";
+        success: "";
+        warning: "";
+        error: "";
+        info: "";
+    };
+    size: {
+        xs: "text-[10px] px-1.5 py-0.5 gap-1 rounded";
+        sm: "text-xs px-2.5 py-0.5 gap-1.5 rounded-md";
+        md: "text-xs px-2.5 py-1 gap-1.5 rounded-md";
+        lg: "text-sm px-3 py-1.5 gap-2 rounded-lg";
+    };
+}, undefined, "inline-flex items-center font-medium select-none transition-colors duration-150", {
+    variant: {
+        solid: "text-white";
+        outline: "border bg-transparent";
+        soft: "";
+        subtle: "border";
+    };
+    color: {
+        primary: "";
+        neutral: "";
+        success: "";
+        warning: "";
+        error: "";
+        info: "";
+    };
+    size: {
+        xs: "text-[10px] px-1.5 py-0.5 gap-1 rounded";
+        sm: "text-xs px-2.5 py-0.5 gap-1.5 rounded-md";
+        md: "text-xs px-2.5 py-1 gap-1.5 rounded-md";
+        lg: "text-sm px-3 py-1.5 gap-2 rounded-lg";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        solid: "text-white";
+        outline: "border bg-transparent";
+        soft: "";
+        subtle: "border";
+    };
+    color: {
+        primary: "";
+        neutral: "";
+        success: "";
+        warning: "";
+        error: "";
+        info: "";
+    };
+    size: {
+        xs: "text-[10px] px-1.5 py-0.5 gap-1 rounded";
+        sm: "text-xs px-2.5 py-0.5 gap-1.5 rounded-md";
+        md: "text-xs px-2.5 py-1 gap-1.5 rounded-md";
+        lg: "text-sm px-3 py-1.5 gap-2 rounded-lg";
+    };
+}, undefined>>;
+export type BadgeProps = VariantProps<typeof badgeVariants> & {
+    dot?: boolean;
+    icon?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;