yaxa-svelte 1.0.0 → 1.1.0

package/README.md

@@ -31,17 +31,42 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in
 
 ---
 
-## 📦 Quickstart in 3 Steps
+## 📦 Quickstart
 
-### 1. Install Yaxa
+### 1. Install Dependencies
+
+Install `yaxa-svelte` along with Tailwind CSS v4 and `@lucide/svelte`:
 
 ```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
+# Core package & icons
+pnpm add yaxa-svelte @lucide/svelte
+
+# Tailwind CSS v4 (Dev Dependencies)
+pnpm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography
 ```
 
-### 2. Define Your Site Configuration
+_(Optional full-stack SaaS features: `pnpm add better-auth drizzle-orm @polar-sh/sdk resend`)_
+
+---
+
+### 2. Configure `vite.config.ts`
+
+Add Tailwind CSS to your Vite plugins:
+
+```ts
+// vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});
+```
+
+---
+
+### 3. Define Your Site Configuration
 
 Create `src/site.config.ts` — your single source of truth for branding, metadata, and SEO:
 
@@ -55,7 +80,8 @@ export const siteConfig = defineSiteConfig({
 	description: 'Fast, beautiful, accessible web applications.',
 	url: 'https://my-app.com',
 	theme: {
-		primaryColor: '#ff3e00',
+		accent: 'svelte', // 'svelte' | 'emerald' | 'amber' | 'sky' | 'violet' | 'rose' | 'indigo'
+		neutral: 'zinc', // 'zinc' | 'slate' | 'stone' | 'neutral'
 		defaultMode: 'dark'
 	},
 	socials: {
@@ -65,11 +91,16 @@ export const siteConfig = defineSiteConfig({
 });
 ```
 
-### 3. Wrap Root Layout
+---
+
+### 4. Import CSS & Wrap Root Layout
+
+Import `yaxa-svelte/yaxa.css` and wrap your app in `<YaxaApp>`:
 
 ```svelte
 <!-- src/routes/+layout.svelte -->
 <script lang="ts">
+	import 'yaxa-svelte/yaxa.css';
 	import { YaxaApp } from 'yaxa-svelte';
 	import { siteConfig } from '../site.config';
 

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/navigation/Breadcrumb.svelte

@@ -1,8 +1,10 @@
 <script module lang="ts">
+	import type { IconSource } from '../elements/Icon.svelte';
+
 	export interface BreadcrumbItem {
 		label: string;
 		href?: string;
-		icon?: string;
+		icon?: IconSource;
 	}
 </script>
 
@@ -11,7 +13,7 @@
 
 	interface Props {
 		items: BreadcrumbItem[];
-		separator?: string;
+		separator?: IconSource;
 		class?: string;
 	}
 

package/dist/components/navigation/Breadcrumb.svelte.d.ts

@@ -1,11 +1,12 @@
+import type { IconSource } from '../elements/Icon.svelte';
 export interface BreadcrumbItem {
     label: string;
     href?: string;
-    icon?: string;
+    icon?: IconSource;
 }
 interface Props {
     items: BreadcrumbItem[];
-    separator?: string;
+    separator?: IconSource;
     class?: string;
 }
 declare const Breadcrumb: import("svelte").Component<Props, {}, "">;

package/dist/components/navigation/CommandPalette.svelte

@@ -1,9 +1,11 @@
 <script module lang="ts">
+	import type { IconSource } from '../elements/Icon.svelte';
+
 	export interface CommandItem {
 		id: string;
 		label: string;
 		description?: string;
-		icon?: string;
+		icon?: IconSource;
 		group?: string;
 		shortcut?: string;
 		onSelect?: () => void;

package/dist/components/navigation/CommandPalette.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { IconSource } from '../elements/Icon.svelte';
 export interface CommandItem {
     id: string;
     label: string;
     description?: string;
-    icon?: string;
+    icon?: IconSource;
     group?: string;
     shortcut?: string;
     onSelect?: () => void;

package/dist/components/navigation/DropdownMenu.svelte

@@ -1,8 +1,10 @@
 <script module lang="ts">
+	import type { IconSource } from '../elements/Icon.svelte';
+
 	export interface MenuItem {
 		id: string;
 		label: string;
-		icon?: string;
+		icon?: IconSource;
 		shortcut?: string;
 		disabled?: boolean;
 		separator?: boolean;

package/dist/components/navigation/DropdownMenu.svelte.d.ts

@@ -1,7 +1,8 @@
+import type { IconSource } from '../elements/Icon.svelte';
 export interface MenuItem {
     id: string;
     label: string;
-    icon?: string;
+    icon?: IconSource;
     shortcut?: string;
     disabled?: boolean;
     separator?: boolean;

package/dist/components/navigation/Pagination.svelte

@@ -1,22 +1,30 @@
-<script lang="ts">
-	import Button from '../elements/Button.svelte';
-	import Icon from '../elements/Icon.svelte';
+<script module lang="ts">
+	import type { IconSource } from '../elements/Icon.svelte';
 
-	interface Props {
+	export interface PaginationProps {
 		page?: number;
 		total: number;
 		pageSize?: number;
 		siblingCount?: number;
+		prevIcon?: IconSource;
+		nextIcon?: IconSource;
 		class?: string;
 	}
+</script>
+
+<script lang="ts">
+	import Button from '../elements/Button.svelte';
+	import Icon from '../elements/Icon.svelte';
 
 	let {
 		page = $bindable(1),
 		total,
 		pageSize = 10,
 		siblingCount = 1,
+		prevIcon = 'chevron-left',
+		nextIcon = 'chevron-right',
 		class: className = ''
-	}: Props = $props();
+	}: PaginationProps = $props();
 
 	let totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)));
 
@@ -69,7 +77,7 @@
 		onclick={() => (page = Math.max(1, page - 1))}
 		aria-label="Previous page"
 	>
-		<Icon name="chevron-left" size="xs" />
+		<Icon name={prevIcon} size="xs" />
 	</Button>
 
 	<!-- Page Numbers -->
@@ -101,6 +109,6 @@
 		onclick={() => (page = Math.min(totalPages, page + 1))}
 		aria-label="Next page"
 	>
-		<Icon name="chevron-right" size="xs" />
+		<Icon name={nextIcon} size="xs" />
 	</Button>
 </nav>

package/dist/components/navigation/Pagination.svelte.d.ts

@@ -1,10 +1,13 @@
-interface Props {
+import type { IconSource } from '../elements/Icon.svelte';
+export interface PaginationProps {
     page?: number;
     total: number;
     pageSize?: number;
     siblingCount?: number;
+    prevIcon?: IconSource;
+    nextIcon?: IconSource;
     class?: string;
 }
-declare const Pagination: import("svelte").Component<Props, {}, "page">;
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "page">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/dist/components/navigation/Tabs.svelte

@@ -1,8 +1,10 @@
 <script module lang="ts">
+	import type { IconSource } from '../elements/Icon.svelte';
+
 	export interface TabItem {
 		value: string;
 		label: string;
-		icon?: string;
+		icon?: IconSource;
 		disabled?: boolean;
 		badge?: string;
 	}

package/dist/components/navigation/Tabs.svelte.d.ts

@@ -1,7 +1,8 @@
+import type { IconSource } from '../elements/Icon.svelte';
 export interface TabItem {
     value: string;
     label: string;
-    icon?: string;
+    icon?: IconSource;
     disabled?: boolean;
     badge?: string;
 }

package/dist/components/overlays/Accordion.svelte

@@ -1,24 +1,26 @@
 <script module lang="ts">
+	import type { IconSource } from '../elements/Icon.svelte';
+
 	export interface AccordionItem {
 		value: string;
 		title: string;
 		content?: string;
-		icon?: string;
+		icon?: IconSource;
 		disabled?: boolean;
 	}
-</script>
-
-<script lang="ts">
-	import { Accordion } from 'bits-ui';
-	import Icon from '../elements/Icon.svelte';
 
-	interface Props {
+	export interface AccordionProps {
 		items: AccordionItem[];
 		type?: 'single' | 'multiple';
 		class?: string;
 	}
+</script>
+
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import Icon from '../elements/Icon.svelte';
 
-	let { items, type = 'single', class: className = '' }: Props = $props();
+	let { items, type = 'single', class: className = '' }: AccordionProps = $props();
 </script>
 
 <Accordion.Root

package/dist/components/overlays/Accordion.svelte.d.ts

@@ -1,16 +1,17 @@
+import type { IconSource } from '../elements/Icon.svelte';
 export interface AccordionItem {
     value: string;
     title: string;
     content?: string;
-    icon?: string;
+    icon?: IconSource;
     disabled?: boolean;
 }
-import { Accordion } from 'bits-ui';
-interface Props {
+export interface AccordionProps {
     items: AccordionItem[];
     type?: 'single' | 'multiple';
     class?: string;
 }
-declare const Accordion: import("svelte").Component<Props, {}, "">;
+import { Accordion } from 'bits-ui';
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/components/overlays/Alert.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 '../elements/Icon.svelte';
 
 	export const alertVariants = tv({
 		base: 'relative w-full rounded-xl border p-4 transition-all duration-150',
@@ -23,7 +24,7 @@
 	export type AlertProps = VariantProps<typeof alertVariants> & {
 		title?: string;
 		description?: string;
-		icon?: string;
+		icon?: IconSource;
 		closable?: boolean;
 		onclose?: () => void;
 		actions?: Snippet;

package/dist/components/overlays/Alert.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from '../../utils/cn';
 import type { Snippet } from 'svelte';
+import type { IconSource } from '../elements/Icon.svelte';
 export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     color: {
         info: "border-sky-200 bg-sky-50/70 text-sky-900 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200";
@@ -25,7 +26,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
 export type AlertProps = VariantProps<typeof alertVariants> & {
     title?: string;
     description?: string;
-    icon?: string;
+    icon?: IconSource;
     closable?: boolean;
     onclose?: () => void;
     actions?: Snippet;

package/dist/components/overlays/ContextMenu.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { ContextMenu } from 'bits-ui';
-	import Icon from '../elements/Icon.svelte';
+	import Icon, { type IconSource } from '../elements/Icon.svelte';
 	import Kbd from '../elements/Kbd.svelte';
 
 	export interface ContextMenuItem {
 		id: string;
 		label: string;
-		icon?: string;
+		icon?: IconSource;
 		shortcut?: string;
 		disabled?: boolean;
 		destructive?: boolean;

package/dist/components/overlays/ContextMenu.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
 import { ContextMenu } from 'bits-ui';
+import { type IconSource } from '../elements/Icon.svelte';
 export interface ContextMenuItem {
     id: string;
     label: string;
-    icon?: string;
+    icon?: IconSource;
     shortcut?: string;
     disabled?: boolean;
     destructive?: boolean;

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 export { default as Button } from './components/elements/Button.svelte';
+export type { ButtonProps } from './components/elements/Button.svelte';
 export { default as ButtonGroup } from './components/elements/ButtonGroup.svelte';
 export { default as Badge } from './components/elements/Badge.svelte';
+export type { BadgeProps } from './components/elements/Badge.svelte';
 export { default as Avatar } from './components/elements/Avatar.svelte';
 export { default as AvatarGroup } from './components/elements/AvatarGroup.svelte';
 export { default as Kbd } from './components/elements/Kbd.svelte';
 export { default as Icon } from './components/elements/Icon.svelte';
+export type { IconProps, IconSource } from './components/elements/Icon.svelte';
 export { default as Spinner } from './components/elements/Spinner.svelte';
 export { default as Progress } from './components/elements/Progress.svelte';
 export { default as Skeleton } from './components/elements/Skeleton.svelte';
@@ -17,10 +20,12 @@ export { default as Meter } from './components/elements/Meter.svelte';
 export { default as Form } from './components/forms/Form.svelte';
 export { default as FormField } from './components/forms/FormField.svelte';
 export { default as Input } from './components/forms/Input.svelte';
+export type { InputProps } from './components/forms/Input.svelte';
 export { default as Textarea } from './components/forms/Textarea.svelte';
 export { default as Checkbox } from './components/forms/Checkbox.svelte';
 export { default as Switch } from './components/forms/Switch.svelte';
 export { default as Select } from './components/forms/Select.svelte';
+export type { SelectProps, SelectOption } from './components/forms/Select.svelte';
 export { default as RadioGroup } from './components/forms/RadioGroup.svelte';
 export { default as Slider } from './components/forms/Slider.svelte';
 export { default as ColorPicker } from './components/forms/ColorPicker.svelte';
@@ -30,18 +35,27 @@ export { default as Footer } from './components/layout/Footer.svelte';
 export { default as Section } from './components/layout/Section.svelte';
 export { default as Card } from './components/layout/Card.svelte';
 export { default as Divider } from './components/layout/Divider.svelte';
+export type { DividerProps } from './components/layout/Divider.svelte';
 export { default as YaxaApp } from './components/layout/YaxaApp.svelte';
 export { default as Tabs } from './components/navigation/Tabs.svelte';
+export type { TabItem } from './components/navigation/Tabs.svelte';
 export { default as Breadcrumb } from './components/navigation/Breadcrumb.svelte';
+export type { BreadcrumbItem as NavBreadcrumbItem } from './components/navigation/Breadcrumb.svelte';
 export { default as Pagination } from './components/navigation/Pagination.svelte';
+export type { PaginationProps } from './components/navigation/Pagination.svelte';
 export { default as CommandPalette } from './components/navigation/CommandPalette.svelte';
+export type { CommandItem } from './components/navigation/CommandPalette.svelte';
 export { default as DropdownMenu } from './components/navigation/DropdownMenu.svelte';
+export type { MenuItem } from './components/navigation/DropdownMenu.svelte';
 export { default as Modal } from './components/overlays/Modal.svelte';
+export type { ModalProps } from './components/overlays/Modal.svelte';
 export { default as Slideover } from './components/overlays/Slideover.svelte';
 export { default as Popover } from './components/overlays/Popover.svelte';
 export { default as Tooltip } from './components/overlays/Tooltip.svelte';
 export { default as Alert } from './components/overlays/Alert.svelte';
+export type { AlertProps } from './components/overlays/Alert.svelte';
 export { default as Accordion } from './components/overlays/Accordion.svelte';
+export type { AccordionProps, AccordionItem } from './components/overlays/Accordion.svelte';
 export { default as ContextMenu } from './components/overlays/ContextMenu.svelte';
 export type { ContextMenuItem } from './components/overlays/ContextMenu.svelte';
 export { useClipboard } from './composables/useClipboard.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaxa-svelte",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The Intuitive Svelte UI Library — Nuxt UI v4 equivalent for SvelteKit 2.7+ & Svelte 5 with automated SEO, dynamic OpenGraph cards, sitemaps, robots.txt, and Tailwind CSS v4.",
   "license": "MIT",
   "homepage": "https://yaxa.vercel.app",
@@ -50,6 +50,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@iconify/json": "^2.2.525",
+    "@lucide/svelte": "^1.45.0",
     "@sveltejs/adapter-vercel": "^6.3.3",
     "@sveltejs/kit": "^2.63.0",
     "@sveltejs/package": "^2.5.8",
@@ -92,9 +93,15 @@
     "zod": "^4.5.4"
   },
   "peerDependencies": {
+    "@lucide/svelte": "^1.0.0",
     "@sveltejs/kit": "^2.0.0",
     "svelte": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "@lucide/svelte": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",