yaxa-svelte 1.0.0

package/dist/components/forms/Textarea.svelte

@@ -0,0 +1,73 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	export const textareaVariants = tv({
+		base: 'w-full rounded-lg border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50',
+		variants: {
+			size: {
+				sm: 'text-sm p-2.5',
+				md: 'text-base p-3',
+				lg: 'text-base p-4'
+			},
+			status: {
+				default:
+					'border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20',
+				error:
+					'border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20',
+				success: 'border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20'
+			},
+			resize: {
+				none: 'resize-none',
+				vertical: 'resize-y',
+				horizontal: 'resize-x',
+				both: 'resize'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			status: 'default',
+			resize: 'vertical'
+		}
+	});
+
+	export type TextareaProps = Omit<HTMLTextareaAttributes, 'size'> &
+		VariantProps<typeof textareaVariants> & {
+			value?: string;
+			rows?: number;
+			maxlength?: number;
+			showCount?: boolean;
+			class?: string;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(''),
+		rows = 4,
+		maxlength,
+		showCount = false,
+		size = 'md',
+		status = 'default',
+		resize = 'vertical',
+		class: className = '',
+		...restProps
+	}: TextareaProps = $props();
+
+	let charCount = $derived(value ? value.length : 0);
+</script>
+
+<div class="relative w-full">
+	<textarea
+		bind:value
+		{rows}
+		{maxlength}
+		class={textareaVariants({ size, status, resize, class: className })}
+		{...restProps}></textarea>
+
+	{#if showCount && maxlength}
+		<div class="mt-1 flex justify-end text-sm text-neutral-500 dark:text-neutral-400">
+			{charCount} / {maxlength}
+		</div>
+	{/if}
+</div>

package/dist/components/forms/Textarea.svelte.d.ts

@@ -0,0 +1,64 @@
+import { type VariantProps } from '../../utils/cn';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+export declare const textareaVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "text-sm p-2.5";
+        md: "text-base p-3";
+        lg: "text-base p-4";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+        success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20";
+    };
+    resize: {
+        none: "resize-none";
+        vertical: "resize-y";
+        horizontal: "resize-x";
+        both: "resize";
+    };
+}, undefined, "w-full rounded-lg border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50", {
+    size: {
+        sm: "text-sm p-2.5";
+        md: "text-base p-3";
+        lg: "text-base p-4";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+        success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20";
+    };
+    resize: {
+        none: "resize-none";
+        vertical: "resize-y";
+        horizontal: "resize-x";
+        both: "resize";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "text-sm p-2.5";
+        md: "text-base p-3";
+        lg: "text-base p-4";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+        success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20";
+    };
+    resize: {
+        none: "resize-none";
+        vertical: "resize-y";
+        horizontal: "resize-x";
+        both: "resize";
+    };
+}, undefined>>;
+export type TextareaProps = Omit<HTMLTextareaAttributes, 'size'> & VariantProps<typeof textareaVariants> & {
+    value?: string;
+    rows?: number;
+    maxlength?: number;
+    showCount?: boolean;
+    class?: string;
+};
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/layout/Card.svelte

@@ -0,0 +1,89 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const cardVariants = tv({
+		base: 'rounded-xl transition-all duration-200 overflow-hidden',
+		variants: {
+			variant: {
+				outline:
+					'border border-neutral-200 bg-white/80 backdrop-blur-xs shadow-xs dark:border-neutral-800 dark:bg-neutral-900/80',
+				solid: 'bg-white shadow-md dark:bg-neutral-900',
+				soft: 'bg-neutral-50 dark:bg-neutral-900/50',
+				subtle:
+					'border border-neutral-200/60 bg-neutral-50/50 dark:border-neutral-800/60 dark:bg-neutral-900/40'
+			},
+			hover: {
+				true: 'hover:shadow-md hover:border-neutral-300 dark:hover:border-neutral-700 hover:-translate-y-0.5'
+			},
+			padding: {
+				none: '',
+				sm: 'p-4',
+				md: 'p-6',
+				lg: 'p-8'
+			}
+		},
+		defaultVariants: {
+			variant: 'outline',
+			hover: false,
+			padding: 'md'
+		}
+	});
+
+	export type CardProps = VariantProps<typeof cardVariants> & {
+		id?: string;
+		class?: string;
+		headerClass?: string;
+		bodyClass?: string;
+		footerClass?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		id,
+		variant = 'outline',
+		hover = false,
+		padding = 'md',
+		class: className = '',
+		headerClass = '',
+		bodyClass = '',
+		footerClass = '',
+		header,
+		footer,
+		children
+	}: CardProps = $props();
+</script>
+
+<div {id} class={cardVariants({ variant, hover, class: className })}>
+	{#if header}
+		<div class="border-b border-neutral-200 px-6 py-4 dark:border-neutral-800 {headerClass}">
+			{@render header()}
+		</div>
+	{/if}
+
+	{#if children}
+		<div
+			class="{padding === 'none'
+				? ''
+				: padding === 'sm'
+					? 'p-4'
+					: padding === 'lg'
+						? 'p-8'
+						: 'p-6'} {bodyClass}"
+		>
+			{@render children()}
+		</div>
+	{/if}
+
+	{#if footer}
+		<div
+			class="border-t border-neutral-200 bg-neutral-50/50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-900/50 {footerClass}"
+		>
+			{@render footer()}
+		</div>
+	{/if}
+</div>

package/dist/components/layout/Card.svelte.d.ts

@@ -0,0 +1,64 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: "border border-neutral-200 bg-white/80 backdrop-blur-xs shadow-xs dark:border-neutral-800 dark:bg-neutral-900/80";
+        solid: "bg-white shadow-md dark:bg-neutral-900";
+        soft: "bg-neutral-50 dark:bg-neutral-900/50";
+        subtle: "border border-neutral-200/60 bg-neutral-50/50 dark:border-neutral-800/60 dark:bg-neutral-900/40";
+    };
+    hover: {
+        true: "hover:shadow-md hover:border-neutral-300 dark:hover:border-neutral-700 hover:-translate-y-0.5";
+    };
+    padding: {
+        none: "";
+        sm: "p-4";
+        md: "p-6";
+        lg: "p-8";
+    };
+}, undefined, "rounded-xl transition-all duration-200 overflow-hidden", {
+    variant: {
+        outline: "border border-neutral-200 bg-white/80 backdrop-blur-xs shadow-xs dark:border-neutral-800 dark:bg-neutral-900/80";
+        solid: "bg-white shadow-md dark:bg-neutral-900";
+        soft: "bg-neutral-50 dark:bg-neutral-900/50";
+        subtle: "border border-neutral-200/60 bg-neutral-50/50 dark:border-neutral-800/60 dark:bg-neutral-900/40";
+    };
+    hover: {
+        true: "hover:shadow-md hover:border-neutral-300 dark:hover:border-neutral-700 hover:-translate-y-0.5";
+    };
+    padding: {
+        none: "";
+        sm: "p-4";
+        md: "p-6";
+        lg: "p-8";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        outline: "border border-neutral-200 bg-white/80 backdrop-blur-xs shadow-xs dark:border-neutral-800 dark:bg-neutral-900/80";
+        solid: "bg-white shadow-md dark:bg-neutral-900";
+        soft: "bg-neutral-50 dark:bg-neutral-900/50";
+        subtle: "border border-neutral-200/60 bg-neutral-50/50 dark:border-neutral-800/60 dark:bg-neutral-900/40";
+    };
+    hover: {
+        true: "hover:shadow-md hover:border-neutral-300 dark:hover:border-neutral-700 hover:-translate-y-0.5";
+    };
+    padding: {
+        none: "";
+        sm: "p-4";
+        md: "p-6";
+        lg: "p-8";
+    };
+}, undefined>>;
+export type CardProps = VariantProps<typeof cardVariants> & {
+    id?: string;
+    class?: string;
+    headerClass?: string;
+    bodyClass?: string;
+    footerClass?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+};
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/layout/Container.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const containerVariants = tv({
+		base: 'mx-auto px-4 sm:px-6 lg:px-8 w-full',
+		variants: {
+			size: {
+				sm: 'max-w-3xl',
+				md: 'max-w-5xl',
+				lg: 'max-w-7xl',
+				xl: 'max-w-(--breakpoint-xl)',
+				'2xl': 'max-w-(--breakpoint-2xl)',
+				full: 'max-w-full'
+			}
+		},
+		defaultVariants: {
+			size: 'lg'
+		}
+	});
+
+	export type ContainerProps = VariantProps<typeof containerVariants> & {
+		class?: string;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { size = 'lg', class: className = '', children }: ContainerProps = $props();
+</script>
+
+<div class={containerVariants({ size, class: className })}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/components/layout/Container.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const containerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "max-w-3xl";
+        md: "max-w-5xl";
+        lg: "max-w-7xl";
+        xl: "max-w-(--breakpoint-xl)";
+        '2xl': "max-w-(--breakpoint-2xl)";
+        full: "max-w-full";
+    };
+}, undefined, "mx-auto px-4 sm:px-6 lg:px-8 w-full", {
+    size: {
+        sm: "max-w-3xl";
+        md: "max-w-5xl";
+        lg: "max-w-7xl";
+        xl: "max-w-(--breakpoint-xl)";
+        '2xl': "max-w-(--breakpoint-2xl)";
+        full: "max-w-full";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "max-w-3xl";
+        md: "max-w-5xl";
+        lg: "max-w-7xl";
+        xl: "max-w-(--breakpoint-xl)";
+        '2xl': "max-w-(--breakpoint-2xl)";
+        full: "max-w-full";
+    };
+}, undefined>>;
+export type ContainerProps = VariantProps<typeof containerVariants> & {
+    class?: string;
+    children?: Snippet;
+};
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/layout/Divider.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		label?: string;
+		icon?: string;
+		orientation?: 'horizontal' | 'vertical';
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		label,
+		icon,
+		orientation = 'horizontal',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+{#if orientation === 'vertical'}
+	<div
+		class="inline-block h-full min-h-[1.5em] w-px self-stretch bg-neutral-200 dark:bg-neutral-800 {className}"
+		role="separator"
+		aria-orientation="vertical"
+	></div>
+{:else if label || icon || children}
+	<div class="relative my-4 flex items-center {className}" role="separator">
+		<div class="grow border-t border-neutral-200 dark:border-neutral-800"></div>
+		<span class="mx-3 shrink-0 text-sm font-medium text-neutral-500 dark:text-neutral-400">
+			{#if icon}
+				<Icon name={icon} size="xs" class="mr-1 inline-block" />
+			{/if}
+			{#if label}
+				{label}
+			{:else if children}
+				{@render children()}
+			{/if}
+		</span>
+		<div class="grow border-t border-neutral-200 dark:border-neutral-800"></div>
+	</div>
+{:else}
+	<hr class="my-4 border-t border-neutral-200 dark:border-neutral-800 {className}" />
+{/if}

package/dist/components/layout/Divider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label?: string;
+    icon?: string;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: Snippet;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/layout/Footer.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SiteConfig } from '../../site/config';
+	import Container from './Container.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import Logo from '../elements/Logo.svelte';
+	import { getSiteConfig } from '../../site/context';
+
+	interface Props {
+		config?: SiteConfig;
+		newsletter?: Snippet;
+		class?: string;
+	}
+
+	let { config, newsletter, class: className = '' }: Props = $props();
+
+	let currentConfig = $derived(config || getSiteConfig());
+	let currentYear = new Date().getFullYear();
+</script>
+
+<footer
+	class="border-t border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950 {className}"
+>
+	<Container size="lg" class="py-12 md:py-16">
+		<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
+			<!-- Brand Info -->
+			<div class="space-y-4 md:col-span-2">
+				<a href="/" class="inline-flex items-center gap-2.5 font-bold tracking-tight">
+					<Logo size="sm" showText text={currentConfig.name} />
+				</a>
+				<p class="max-w-sm text-base text-neutral-600 dark:text-neutral-400">
+					{currentConfig.description}
+				</p>
+			</div>
+
+			<!-- Quick Links -->
+			<div>
+				<h3 class="text-base font-semibold text-neutral-900 dark:text-white">Navigation</h3>
+				<ul class="mt-4 space-y-2.5 text-sm text-neutral-600 dark:text-neutral-400">
+					{#each currentConfig.nav || [] as item}
+						<li>
+							<a
+								href={item.href}
+								class="transition-colors hover:text-primary-600 dark:hover:text-primary-400"
+							>
+								{item.label}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<!-- Socials & Newsletter -->
+			<div>
+				<h3 class="text-base font-semibold text-neutral-900 dark:text-white">Community</h3>
+				<div class="mt-4 flex items-center gap-3">
+					{#if currentConfig.socials?.github}
+						<a
+							href={currentConfig.socials.github}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+							aria-label="GitHub"
+						>
+							<Icon name="github" size="sm" />
+						</a>
+					{/if}
+					{#if currentConfig.socials?.twitter}
+						<a
+							href={currentConfig.socials.twitter}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+							aria-label="Twitter"
+						>
+							<Icon name="twitter" size="sm" />
+						</a>
+					{/if}
+				</div>
+
+				{#if newsletter}
+					<div class="mt-4">
+						{@render newsletter()}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<div
+			class="mt-12 flex flex-col items-center justify-between border-t border-neutral-200 pt-8 text-sm text-neutral-500 sm:flex-row dark:border-neutral-800 dark:text-neutral-400"
+		>
+			<p>© {currentYear} {currentConfig.name}. Built for SvelteKit 2.7 & Svelte 5.</p>
+			<p class="mt-2 sm:mt-0">Designed for solo developers · 100% DRY.</p>
+		</div>
+	</Container>
+</footer>

package/dist/components/layout/Footer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { SiteConfig } from '../../site/config';
+interface Props {
+    config?: SiteConfig;
+    newsletter?: Snippet;
+    class?: string;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;