yaxa-svelte 1.0.1 → 1.2.0

package/README.md

@@ -35,14 +35,14 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in
 
 ### 1. Install Dependencies
 
-Install `yaxa-svelte` along with Tailwind CSS v4 and icon tooling:
+Install `yaxa-svelte` along with Tailwind CSS v4 and `@lucide/svelte`:
 
 ```bash
-# Core package
-pnpm add yaxa-svelte
+# Core package & icons
+pnpm add yaxa-svelte @lucide/svelte
 
-# Tailwind CSS v4 & Icon tooling (Dev Dependencies)
-pnpm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography unplugin-icons @iconify/json
+# Tailwind CSS v4 (Dev Dependencies)
+pnpm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography
 ```
 
 _(Optional full-stack SaaS features: `pnpm add better-auth drizzle-orm @polar-sh/sdk resend`)_
@@ -51,17 +51,16 @@ _(Optional full-stack SaaS features: `pnpm add better-auth drizzle-orm @polar-sh
 
 ### 2. Configure `vite.config.ts`
 
-Add Tailwind CSS and Unplugin Icons to your Vite plugins:
+Add Tailwind CSS to your Vite plugins:
 
 ```ts
 // vite.config.ts
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
-import Icons from 'unplugin-icons/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), Icons({ compiler: 'svelte', autoInstall: false }), sveltekit()]
+	plugins: [tailwindcss(), sveltekit()]
 });
 ```
 

package/dist/components/elements/Badge.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from '../../utils/cn';
 	import type { Snippet } from 'svelte';
+	import type { IconSource } from './Icon.svelte';
 
 	export const badgeVariants = tv({
 		base: 'inline-flex items-center font-medium select-none transition-colors duration-150',
@@ -150,7 +151,7 @@
 
 	export type BadgeProps = VariantProps<typeof badgeVariants> & {
 		dot?: boolean;
-		icon?: string;
+		icon?: IconSource;
 		class?: string;
 		children?: Snippet;
 	};

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

@@ -1,5 +1,6 @@
 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<{
     variant: {
         solid: "text-white";
@@ -66,7 +67,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
 }, undefined>>;
 export type BadgeProps = VariantProps<typeof badgeVariants> & {
     dot?: boolean;
-    icon?: string;
+    icon?: IconSource;
     class?: string;
     children?: Snippet;
 };

package/dist/components/elements/Button.svelte

@@ -2,6 +2,7 @@
 	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';
 
 	export const buttonVariants = tv({
 		base: 'inline-flex items-center justify-center font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 select-none active:scale-[0.98]',
@@ -195,8 +196,8 @@
 		href?: string;
 		loading?: boolean;
 		disabled?: boolean;
-		icon?: string;
-		trailingIcon?: string;
+		icon?: IconSource;
+		trailingIcon?: IconSource;
 		type?: 'button' | 'submit' | 'reset';
 		class?: string;
 		leading?: Snippet;

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

@@ -1,5 +1,6 @@
 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<{
     variant: {
         solid: "shadow-xs text-white";
@@ -92,8 +93,8 @@ export type ButtonProps = VariantProps<typeof buttonVariants> & {
     href?: string;
     loading?: boolean;
     disabled?: boolean;
-    icon?: string;
-    trailingIcon?: string;
+    icon?: IconSource;
+    trailingIcon?: IconSource;
     type?: 'button' | 'submit' | 'reset';
     class?: string;
     leading?: Snippet;

package/dist/components/elements/Icon.svelte

@@ -1,14 +1,28 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
+<script module lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	export type IconSource =
+		string | Component<{ class?: string; size?: string | number; [key: string]: any }>;
 
-	interface Props {
-		name?: string;
+	export interface IconProps {
+		name?: IconSource;
+		icon?: IconSource;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 		class?: string;
 		children?: Snippet;
+		[key: string]: unknown;
 	}
+</script>
 
-	let { name, size = 'md', class: className = '', children }: Props = $props();
+<script lang="ts">
+	let {
+		name,
+		icon,
+		size = 'md',
+		class: className = '',
+		children,
+		...restProps
+	}: IconProps = $props();
 
 	let sizeClass = $derived.by(() => {
 		if (typeof size === 'number') return `w-[${size}px] h-[${size}px]`;
@@ -27,6 +41,18 @@
 		}
 	});
 
+	let IconComponent = $derived.by(() => {
+		if (icon && typeof icon !== 'string') return icon;
+		if (name && typeof name !== 'string') return name;
+		return null;
+	});
+
+	let stringIconName = $derived.by(() => {
+		if (typeof icon === 'string') return icon;
+		if (typeof name === 'string') return name;
+		return null;
+	});
+
 	// Common built-in SVGs for immediate zero-config use
 	const builtInIcons: Record<string, string> = {
 		check:
@@ -66,14 +92,21 @@
 	<span class="inline-flex shrink-0 items-center justify-center {sizeClass} {className}">
 		{@render children()}
 	</span>
-{:else if name && builtInIcons[name]}
+{:else if IconComponent}
+	{@const RenderIcon = IconComponent}
+	<RenderIcon
+		class="inline-flex shrink-0 items-center justify-center {sizeClass} {className}"
+		{...restProps}
+	/>
+{:else if stringIconName && builtInIcons[stringIconName]}
 	<svg
 		class="inline-flex shrink-0 items-center justify-center {sizeClass} {className}"
 		viewBox="0 0 24 24"
 		fill="none"
 		aria-hidden="true"
+		{...restProps}
 	>
-		{@html builtInIcons[name]}
+		{@html builtInIcons[stringIconName]}
 	</svg>
 {:else}
 	<svg
@@ -81,6 +114,7 @@
 		viewBox="0 0 24 24"
 		fill="none"
 		aria-hidden="true"
+		{...restProps}
 	>
 		<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4" />
 	</svg>

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

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

package/dist/components/forms/Input.svelte

@@ -2,6 +2,7 @@
 	import { tv, type VariantProps } from '../../utils/cn';
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { IconSource } from '../elements/Icon.svelte';
 
 	export const inputVariants = 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 disabled:bg-neutral-50 dark:disabled:bg-neutral-950',
@@ -30,8 +31,8 @@
 	export type InputProps = Omit<HTMLInputAttributes, 'size'> &
 		VariantProps<typeof inputVariants> & {
 			value?: string | number;
-			icon?: string;
-			trailingIcon?: string;
+			icon?: IconSource;
+			trailingIcon?: IconSource;
 			loading?: boolean;
 			clearable?: boolean;
 			prefix?: string;

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

@@ -1,6 +1,7 @@
 import { type VariantProps } from '../../utils/cn';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { IconSource } from '../elements/Icon.svelte';
 export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     size: {
         xs: "text-xs py-1 px-2";
@@ -43,8 +44,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
 }, undefined>>;
 export type InputProps = Omit<HTMLInputAttributes, 'size'> & VariantProps<typeof inputVariants> & {
     value?: string | number;
-    icon?: string;
-    trailingIcon?: string;
+    icon?: IconSource;
+    trailingIcon?: IconSource;
     loading?: boolean;
     clearable?: boolean;
     prefix?: string;

package/dist/components/forms/Select.svelte

@@ -1,10 +1,11 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from '../../utils/cn';
+	import type { IconSource } from '../elements/Icon.svelte';
 
 	export interface SelectOption {
 		value: string;
 		label: string;
-		icon?: string;
+		icon?: IconSource;
 		disabled?: boolean;
 	}
 
@@ -33,7 +34,7 @@
 		value?: string;
 		options?: SelectOption[];
 		placeholder?: string;
-		icon?: string;
+		icon?: IconSource;
 		disabled?: boolean;
 		name?: string;
 		class?: string;

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

@@ -1,8 +1,9 @@
 import { type VariantProps } from '../../utils/cn';
+import type { IconSource } from '../elements/Icon.svelte';
 export interface SelectOption {
     value: string;
     label: string;
-    icon?: string;
+    icon?: IconSource;
     disabled?: boolean;
 }
 export declare const selectVariants: import("tailwind-variants").TVReturnType<{
@@ -40,7 +41,7 @@ export type SelectProps = VariantProps<typeof selectVariants> & {
     value?: string;
     options?: SelectOption[];
     placeholder?: string;
-    icon?: string;
+    icon?: IconSource;
     disabled?: boolean;
     name?: string;
     class?: string;

package/dist/components/layout/Divider.svelte

@@ -1,14 +1,18 @@
-<script lang="ts">
+<script module lang="ts">
 	import type { Snippet } from 'svelte';
-	import Icon from '../elements/Icon.svelte';
+	import type { IconSource } from '../elements/Icon.svelte';
 
-	interface Props {
+	export interface DividerProps {
 		label?: string;
-		icon?: string;
+		icon?: IconSource;
 		orientation?: 'horizontal' | 'vertical';
 		class?: string;
 		children?: Snippet;
 	}
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
 
 	let {
 		label,
@@ -16,7 +20,7 @@
 		orientation = 'horizontal',
 		class: className = '',
 		children
-	}: Props = $props();
+	}: DividerProps = $props();
 </script>
 
 {#if orientation === 'vertical'}

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

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

package/dist/components/layout/Footer.svelte

@@ -16,21 +16,37 @@
 
 	let currentConfig = $derived(config || getSiteConfig());
 	let currentYear = new Date().getFullYear();
+
+	let company = $derived(currentConfig.company);
+	let legal = $derived(currentConfig.legal);
+	let legalLinks = $derived(legal?.links);
+	let entityName = $derived(company?.legalName || currentConfig.name);
+
+	let hasLegalLinks = $derived(
+		Boolean(
+			legalLinks?.privacy || legalLinks?.terms || legalLinks?.refunds || legalLinks?.impressum
+		)
+	);
 </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">
+		<div class="grid grid-cols-1 gap-8 md:grid-cols-4 lg:grid-cols-5">
 			<!-- Brand Info -->
-			<div class="space-y-4 md:col-span-2">
+			<div class="space-y-4 md:col-span-2 lg: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>
+				{#if legal?.morNotice}
+					<p class="text-xs text-neutral-500 dark:text-neutral-500">
+						{legal.morNotice}
+					</p>
+				{/if}
 			</div>
 
 			<!-- Quick Links -->
@@ -50,6 +66,57 @@
 				</ul>
 			</div>
 
+			<!-- Legal Links -->
+			{#if hasLegalLinks}
+				<div>
+					<h3 class="text-base font-semibold text-neutral-900 dark:text-white">
+						Legal & Compliance
+					</h3>
+					<ul class="mt-4 space-y-2.5 text-sm text-neutral-600 dark:text-neutral-400">
+						{#if legalLinks?.privacy}
+							<li>
+								<a
+									href={legalLinks.privacy}
+									class="transition-colors hover:text-primary-600 dark:hover:text-primary-400"
+								>
+									Privacy Policy
+								</a>
+							</li>
+						{/if}
+						{#if legalLinks?.terms}
+							<li>
+								<a
+									href={legalLinks.terms}
+									class="transition-colors hover:text-primary-600 dark:hover:text-primary-400"
+								>
+									Terms of Service
+								</a>
+							</li>
+						{/if}
+						{#if legalLinks?.refunds}
+							<li>
+								<a
+									href={legalLinks.refunds}
+									class="transition-colors hover:text-primary-600 dark:hover:text-primary-400"
+								>
+									Cancellation & Refunds
+								</a>
+							</li>
+						{/if}
+						{#if legalLinks?.impressum}
+							<li>
+								<a
+									href={legalLinks.impressum}
+									class="transition-colors hover:text-primary-600 dark:hover:text-primary-400"
+								>
+									Impressum
+								</a>
+							</li>
+						{/if}
+					</ul>
+				</div>
+			{/if}
+
 			<!-- Socials & Newsletter -->
 			<div>
 				<h3 class="text-base font-semibold text-neutral-900 dark:text-white">Community</h3>
@@ -86,11 +153,37 @@
 			</div>
 		</div>
 
+		<!-- Footer Bottom Identification Bar -->
 		<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"
+			class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-neutral-200 pt-8 text-xs 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 class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 sm:justify-start">
+				<span>© {currentYear} {entityName}.</span>
+				{#if company?.address}
+					<span>· {company.address}</span>
+				{/if}
+				{#if company?.vatNumber}
+					<span>· VAT: {company.vatNumber}</span>
+				{/if}
+				{#if company?.registrationCourt}
+					<span>· {company.registrationCourt}</span>
+				{/if}
+			</div>
+
+			<div class="flex flex-wrap items-center justify-center gap-4">
+				{#if legalLinks?.privacy}
+					<a href={legalLinks.privacy} class="hover:underline">Privacy</a>
+				{/if}
+				{#if legalLinks?.terms}
+					<a href={legalLinks.terms} class="hover:underline">Terms</a>
+				{/if}
+				{#if legalLinks?.refunds}
+					<a href={legalLinks.refunds} class="hover:underline">Refunds</a>
+				{/if}
+				{#if legalLinks?.impressum}
+					<a href={legalLinks.impressum} class="hover:underline">Impressum</a>
+				{/if}
+			</div>
 		</div>
 	</Container>
 </footer>