yaxa-svelte 1.0.0

package/dist/components/elements/DataTable.svelte

@@ -0,0 +1,222 @@
+<script module lang="ts">
+	export interface Column<T = any> {
+		key: keyof T | string;
+		label: string;
+		sortable?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts" generics="T extends Record<string, any>">
+	import type { Snippet } from 'svelte';
+	import Checkbox from '../forms/Checkbox.svelte';
+	import Icon from './Icon.svelte';
+	import Skeleton from './Skeleton.svelte';
+
+	interface Props {
+		data: T[];
+		columns: Column<T>[];
+		loading?: boolean;
+		selectable?: boolean;
+		selected?: T[];
+		searchQuery?: string;
+		searchKeys?: (keyof T | string)[];
+		emptyText?: string;
+		class?: string;
+		cell?: Snippet<[T, Column<T>]>;
+		empty?: Snippet;
+	}
+
+	let {
+		data = [],
+		columns = [],
+		loading = false,
+		selectable = false,
+		selected = $bindable([]),
+		searchQuery = '',
+		searchKeys = [],
+		emptyText = 'No data available',
+		class: className = '',
+		cell,
+		empty
+	}: Props = $props();
+
+	let sortKey = $state<string | null>(null);
+	let sortOrder = $state<'asc' | 'desc'>('asc');
+
+	function handleSort(key: string) {
+		if (sortKey === key) {
+			sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortOrder = 'asc';
+		}
+	}
+
+	let filteredData = $derived.by(() => {
+		let result = [...data];
+
+		// Filter by search query
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase().trim();
+			const keys = searchKeys.length > 0 ? searchKeys : columns.map((c) => c.key);
+			result = result.filter((item) =>
+				keys.some((key) => {
+					const val = item[key as keyof T];
+					return val !== undefined && val !== null && String(val).toLowerCase().includes(query);
+				})
+			);
+		}
+
+		// Sort
+		if (sortKey) {
+			result.sort((a, b) => {
+				const valA = a[sortKey as keyof T];
+				const valB = b[sortKey as keyof T];
+				if (valA === valB) return 0;
+				if (valA === undefined || valA === null) return 1;
+				if (valB === undefined || valB === null) return -1;
+				const comparison = valA > valB ? 1 : -1;
+				return sortOrder === 'asc' ? comparison : -comparison;
+			});
+		}
+
+		return result;
+	});
+
+	let allSelected = $derived(filteredData.length > 0 && selected.length === filteredData.length);
+
+	function toggleSelectAll(isChecked: boolean) {
+		if (isChecked) {
+			selected = [...filteredData];
+		} else {
+			selected = [];
+		}
+	}
+
+	function toggleSelectRow(item: T, isChecked: boolean) {
+		if (isChecked) {
+			if (!selected.includes(item)) {
+				selected = [...selected, item];
+			}
+		} else {
+			selected = selected.filter((i) => i !== item);
+		}
+	}
+</script>
+
+<div
+	class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950 {className}"
+>
+	<div class="overflow-x-auto">
+		<table class="w-full text-left text-sm text-neutral-600 dark:text-neutral-300">
+			<!-- Table Header -->
+			<thead
+				class="border-b border-neutral-200 bg-neutral-50/80 text-sm font-semibold tracking-wider text-neutral-600 uppercase dark:border-neutral-800 dark:bg-neutral-900/80 dark:text-neutral-400"
+			>
+				<tr>
+					{#if selectable}
+						<th class="w-10 px-4 py-3">
+							<Checkbox
+								checked={allSelected}
+								onchange={toggleSelectAll}
+								aria-label="Select all rows"
+							/>
+						</th>
+					{/if}
+					{#each columns as column}
+						<th class="px-4 py-3 {column.class || ''}">
+							{#if column.sortable}
+								<button
+									type="button"
+									onclick={() => handleSort(String(column.key))}
+									class="group inline-flex items-center gap-1 font-semibold tracking-wider uppercase transition hover:text-neutral-900 dark:hover:text-white"
+								>
+									<span>{column.label}</span>
+									<span
+										class="text-neutral-400 transition-colors group-hover:text-primary-500 {sortKey ===
+										String(column.key)
+											? 'text-primary-500'
+											: ''}"
+									>
+										{#if sortKey === String(column.key)}
+											<Icon name={sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'} size="xs" />
+										{:else}
+											<Icon name="chevron-down" size="xs" class="opacity-40" />
+										{/if}
+									</span>
+								</button>
+							{:else}
+								<span>{column.label}</span>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+
+			<!-- Table Body -->
+			<tbody class="divide-y divide-neutral-200/80 dark:divide-neutral-800/80">
+				{#if loading}
+					{#each Array(5)}
+						<tr>
+							{#if selectable}
+								<td class="px-4 py-3.5">
+									<Skeleton class="h-4 w-4 rounded" />
+								</td>
+							{/if}
+							{#each columns}
+								<td class="px-4 py-3.5">
+									<Skeleton class="h-4 w-24 rounded" />
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{:else if filteredData.length === 0}
+					<tr>
+						<td
+							colspan={columns.length + (selectable ? 1 : 0)}
+							class="px-4 py-12 text-center text-sm text-neutral-500 dark:text-neutral-400"
+						>
+							{#if empty}
+								{@render empty()}
+							{:else}
+								<div class="flex flex-col items-center justify-center gap-2">
+									<Icon name="search" size="md" class="text-neutral-400" />
+									<p>{emptyText}</p>
+								</div>
+							{/if}
+						</td>
+					</tr>
+				{:else}
+					{#each filteredData as item}
+						{@const isSelected = selected.includes(item)}
+						<tr
+							class="transition-colors hover:bg-neutral-50/60 dark:hover:bg-neutral-900/50 {isSelected
+								? 'bg-primary-50/40 dark:bg-primary-950/20'
+								: ''}"
+						>
+							{#if selectable}
+								<td class="w-10 px-4 py-3.5">
+									<Checkbox
+										checked={isSelected}
+										onchange={(checked) => toggleSelectRow(item, checked)}
+										aria-label="Select row"
+									/>
+								</td>
+							{/if}
+							{#each columns as column}
+								<td class="px-4 py-3.5 {column.class || ''}">
+									{#if cell}
+										{@render cell(item, column)}
+									{:else}
+										{item[column.key as keyof T] ?? '—'}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+</div>

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

@@ -0,0 +1,43 @@
+export interface Column<T = any> {
+    key: keyof T | string;
+    label: string;
+    sortable?: boolean;
+    class?: string;
+}
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, any>>(): {
+    props: {
+        data: T[];
+        columns: Column<T>[];
+        loading?: boolean;
+        selectable?: boolean;
+        selected?: T[];
+        searchQuery?: string;
+        searchKeys?: (keyof T | string)[];
+        emptyText?: string;
+        class?: string;
+        cell?: Snippet<[T, Column<T>]>;
+        empty?: Snippet;
+    };
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, any>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T extends Record<string, any>> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/components/elements/Icon.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		name?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { name, size = 'md', class: className = '', children }: Props = $props();
+
+	let sizeClass = $derived.by(() => {
+		if (typeof size === 'number') return `w-[${size}px] h-[${size}px]`;
+		switch (size) {
+			case 'xs':
+				return 'w-3.5 h-3.5';
+			case 'sm':
+				return 'w-4 h-4';
+			case 'lg':
+				return 'w-6 h-6';
+			case 'xl':
+				return 'w-8 h-8';
+			case 'md':
+			default:
+				return 'w-5 h-5';
+		}
+	});
+
+	// Common built-in SVGs for immediate zero-config use
+	const builtInIcons: Record<string, string> = {
+		check:
+			'<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		cross:
+			'<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'chevron-down':
+			'<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'chevron-up':
+			'<path d="M18 15l-6-6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'chevron-right':
+			'<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'chevron-left':
+			'<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		search:
+			'<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		sun: '<circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2" fill="none"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+		moon: '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		computer:
+			'<rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>',
+		sparkles:
+			'<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+		info: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><line x1="12" y1="16" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="8" x2="12.01" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+		alert:
+			'<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'external-link':
+			'<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		copy: '<rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
+		github:
+			'<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		twitter:
+			'<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>'
+	};
+</script>
+
+{#if children}
+	<span class="inline-flex shrink-0 items-center justify-center {sizeClass} {className}">
+		{@render children()}
+	</span>
+{:else if name && builtInIcons[name]}
+	<svg
+		class="inline-flex shrink-0 items-center justify-center {sizeClass} {className}"
+		viewBox="0 0 24 24"
+		fill="none"
+		aria-hidden="true"
+	>
+		{@html builtInIcons[name]}
+	</svg>
+{:else}
+	<svg
+		class="inline-flex shrink-0 items-center justify-center {sizeClass} {className}"
+		viewBox="0 0 24 24"
+		fill="none"
+		aria-hidden="true"
+	>
+		<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4" />
+	</svg>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    class?: string;
+    children?: Snippet;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/elements/Kbd.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const kbdVariants = tv({
+		base: 'inline-flex items-center justify-center font-mono font-medium rounded border border-neutral-300 bg-neutral-100 text-neutral-700 shadow-xs dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 select-none',
+		variants: {
+			size: {
+				xs: 'h-4 min-w-[16px] px-1 text-[10px]',
+				sm: 'h-5 min-w-[20px] px-1.5 text-xs',
+				md: 'h-6 min-w-[24px] px-2 text-xs',
+				lg: 'h-7 min-w-[28px] px-2.5 text-sm'
+			}
+		},
+		defaultVariants: {
+			size: 'sm'
+		}
+	});
+
+	export type KbdProps = VariantProps<typeof kbdVariants> & {
+		value?: string;
+		class?: string;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { value, size = 'sm', class: className = '', children }: KbdProps = $props();
+</script>
+
+<kbd class={kbdVariants({ size, class: className })}>
+	{#if value}
+		{value}
+	{:else if children}
+		{@render children()}
+	{/if}
+</kbd>

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

@@ -0,0 +1,32 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-4 min-w-[16px] px-1 text-[10px]";
+        sm: "h-5 min-w-[20px] px-1.5 text-xs";
+        md: "h-6 min-w-[24px] px-2 text-xs";
+        lg: "h-7 min-w-[28px] px-2.5 text-sm";
+    };
+}, undefined, "inline-flex items-center justify-center font-mono font-medium rounded border border-neutral-300 bg-neutral-100 text-neutral-700 shadow-xs dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 select-none", {
+    size: {
+        xs: "h-4 min-w-[16px] px-1 text-[10px]";
+        sm: "h-5 min-w-[20px] px-1.5 text-xs";
+        md: "h-6 min-w-[24px] px-2 text-xs";
+        lg: "h-7 min-w-[28px] px-2.5 text-sm";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-4 min-w-[16px] px-1 text-[10px]";
+        sm: "h-5 min-w-[20px] px-1.5 text-xs";
+        md: "h-6 min-w-[24px] px-2 text-xs";
+        lg: "h-7 min-w-[28px] px-2.5 text-sm";
+    };
+}, undefined>>;
+export type KbdProps = VariantProps<typeof kbdVariants> & {
+    value?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/elements/Link.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { page } from '$app/state';
+	import Icon from './Icon.svelte';
+
+	interface Props extends HTMLAnchorAttributes {
+		href: string;
+		activeClass?: string;
+		inactiveClass?: string;
+		exact?: boolean;
+		external?: boolean;
+		showExternalIcon?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		href,
+		activeClass = 'text-primary-600 dark:text-primary-400 font-semibold',
+		inactiveClass = 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100',
+		exact = false,
+		external,
+		showExternalIcon = false,
+		class: className = '',
+		children,
+		...restProps
+	}: Props = $props();
+
+	let isExternal = $derived(
+		external ?? (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//'))
+	);
+
+	let isActive = $derived.by(() => {
+		if (isExternal) return false;
+		try {
+			const currentPath = page.url.pathname;
+			if (exact) return currentPath === href;
+			return currentPath === href || (href !== '/' && currentPath.startsWith(href));
+		} catch {
+			return false;
+		}
+	});
+</script>
+
+<a
+	{href}
+	class="inline-flex items-center gap-1 transition-colors duration-150 {isActive
+		? activeClass
+		: inactiveClass} {className}"
+	aria-current={isActive ? 'page' : undefined}
+	target={isExternal ? '_blank' : undefined}
+	rel={isExternal ? 'noopener noreferrer' : undefined}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+
+	{#if isExternal && showExternalIcon}
+		<Icon name="external-link" size="xs" />
+	{/if}
+</a>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends HTMLAnchorAttributes {
+    href: string;
+    activeClass?: string;
+    inactiveClass?: string;
+    exact?: boolean;
+    external?: boolean;
+    showExternalIcon?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/elements/Logo.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	interface Props {
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+		showText?: boolean;
+		text?: string;
+		class?: string;
+	}
+
+	let { size = 'md', showText = false, text = 'Yaxa', class: className = '' }: Props = $props();
+
+	let sizeClasses = $derived.by(() => {
+		if (typeof size === 'number') {
+			return {
+				svg: `w-[${size}px] h-[${size}px]`,
+				text: 'text-base font-bold'
+			};
+		}
+		switch (size) {
+			case 'xs':
+				return { svg: 'h-5 w-5', text: 'text-xs font-bold' };
+			case 'sm':
+				return { svg: 'h-6 w-6', text: 'text-sm font-bold' };
+			case 'lg':
+				return { svg: 'h-9 w-9', text: 'text-xl font-extrabold' };
+			case 'xl':
+				return { svg: 'h-11 w-11', text: 'text-2xl font-extrabold' };
+			case 'md':
+			default:
+				return { svg: 'h-7 w-7', text: 'text-base font-bold' };
+		}
+	});
+</script>
+
+<div class="inline-flex items-center gap-2.5 {className}">
+	<svg
+		class="shrink-0 transition-transform hover:scale-105 {sizeClasses.svg}"
+		viewBox="0 0 100 100"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<defs>
+			<linearGradient id="yaxa-flame-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+				<stop offset="0%" stop-color="#ff3e00" />
+				<stop offset="100%" stop-color="#ea580c" />
+			</linearGradient>
+		</defs>
+
+		<!-- 1. Outer Flame Layer (Thick Orange Contour Ribbon) -->
+		<path
+			d="M24 24 L76 76"
+			stroke="url(#yaxa-flame-grad)"
+			stroke-width="22"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M76 24 L56 44 M44 56 L24 76"
+			stroke="url(#yaxa-flame-grad)"
+			stroke-width="22"
+			stroke-linecap="round"
+		/>
+
+		<!-- 2. Inner Core Layer (White Stadium Ribbon - Svelte Style) -->
+		<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>
+	{#if showText}
+		<span class="tracking-tight text-neutral-900 dark:text-white {sizeClasses.text}">
+			{text}
+		</span>
+	{/if}
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    showText?: boolean;
+    text?: string;
+    class?: string;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;