@zveltio/components 1.0.0

package/forms/FormField/FormField.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+let {
+    key,
+    label,
+    type = 'text',
+    value = $bindable(),
+    options = [],
+    error = '',
+    onLookupSearch = null
+}: {
+    key: string;
+    label: string;
+    type?: string;
+    value?: any;
+    options?: Array<{value: any; label: string}>;
+    error?: string;
+    onLookupSearch?: ((query: string) => Promise<any[]>) | null;
+} = $props();
+</script>
+
+<div class="form-control">
+    <label class="label"><span class="label-text">{label}</span></label>
+    
+    {#if type === 'text' || type === 'email' || type === 'number'}
+        <input {type} bind:value class="input input-bordered {error ? 'input-error' : ''}" />
+    {:else if type === 'textarea'}
+        <textarea bind:value class="textarea textarea-bordered {error ? 'input-error' : ''}"></textarea>
+    {:else if type === 'select'}
+        <select bind:value class="select select-bordered {error ? 'input-error' : ''}">
+            {#each options as opt}
+                <option value={opt.value}>{opt.label}</option>
+            {/each}
+        </select>
+    {:else if type === 'boolean'}
+        <input type="checkbox" bind:checked={value} class="checkbox" />
+    {/if}
+    
+    {#if error}<label class="label"><span class="label-text-alt text-error">{error}</span></label>{/if}
+</div>

package/forms/FormField/component.json

@@ -0,0 +1,17 @@
+{
+  "name": "FormField",
+  "category": "forms",
+  "description": "FormField - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "key": "string",
+    "label": "string",
+    "type": "string",
+    "value": "$bindable<any>",
+    "options": "Array",
+    "error": "string"
+  }
+}

package/navigation/NavGroup/NavGroup.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		label,
+		icon = null,
+		collapsed = $bindable(false)
+	}: {
+		children: Snippet;
+		label: string;
+		icon?: Snippet | null;
+		collapsed?: boolean;
+	} = $props();
+</script>
+
+<div class="nav-group">
+	<button
+		class="flex items-center gap-2 w-full px-3 py-2 text-sm font-semibold opacity-70 hover:opacity-100"
+		onclick={() => collapsed = !collapsed}
+	>
+		{#if icon}{@render icon()}{/if}
+		<span class="flex-1 text-left">{label}</span>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-4 w-4 transition-transform {collapsed ? '' : 'rotate-90'}"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+		</svg>
+	</button>
+	
+	{#if !collapsed}
+		<div class="ml-4 space-y-1">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/navigation/NavGroup/component.json

@@ -0,0 +1 @@
+{"name":"NavGroup","category":"navigation","dependencies":{"packages":[],"components":[]},"props":{}}

package/navigation/NavLink/NavLink.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+let {
+    href,
+    label,
+    icon = null,
+    active = false
+}: {
+    href: string;
+    label: string;
+    icon?: any;
+    active?: boolean;
+} = $props();
+</script>
+
+<a {href} class="btn btn-ghost {active ? 'btn-active' : ''}">
+    {#if icon}<svelte:component this={icon} size={16} />{/if}
+    <span>{label}</span>
+</a>

package/navigation/NavLink/component.json

@@ -0,0 +1,15 @@
+{
+  "name": "NavLink",
+  "category": "navigation",
+  "description": "NavLink - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "href": "string",
+    "label": "string",
+    "icon": "Component",
+    "active": "boolean"
+  }
+}

package/navigation/SmartNavbar/SmartNavbar.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	/**
+	 * SmartNavbar - Intelligent navbar with dynamic positioning
+	 * Positions: top, bottom, left, right
+	 * Includes: user menu, theme switcher, logo, nav items
+	 */
+	import type { Snippet } from 'svelte';
+
+	interface NavItem {
+		label: string;
+		href: string;
+		icon?: Snippet;
+	}
+
+	interface User {
+		name?: string;
+		email?: string;
+		avatar?: string;
+	}
+
+	let {
+		position = 'top',
+		user = null,
+		navItems = [],
+		logo = null,
+		currentTheme = 'light',
+		onThemeToggle,
+		onLogout = null,
+		onPositionChange = null,
+		isDraggable = false
+	}: {
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		user?: User | null;
+		navItems?: NavItem[];
+		logo?: Snippet | null;
+		currentTheme?: string;
+		onThemeToggle: (theme: string) => void;
+		onLogout?: (() => void) | null;
+		onPositionChange?: ((position: string) => Promise<void>) | null;
+		isDraggable?: boolean;
+	} = $props();
+
+	let dragging = $state(false);
+	let showPositionMenu = $state(false);
+
+	const isHorizontal = $derived(position === 'top' || position === 'bottom');
+	const isVertical = $derived(position === 'left' || position === 'right');
+
+	const positionClasses = {
+		top: 'top-0 left-0 right-0 flex-row border-b',
+		bottom: 'bottom-0 left-0 right-0 flex-row border-t',
+		left: 'top-0 bottom-0 left-0 flex-col border-r w-64',
+		right: 'top-0 bottom-0 right-0 flex-col border-l w-64'
+	};
+
+	async function changePosition(newPos: 'top' | 'bottom' | 'left' | 'right') {
+		if (onPositionChange) {
+			await onPositionChange(newPos);
+		}
+		showPositionMenu = false;
+	}
+
+	function handleThemeToggle() {
+		const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+		onThemeToggle(newTheme);
+	}
+</script>
+
+<nav
+	class="navbar bg-base-100 border-base-200 fixed z-50 {positionClasses[position]} {dragging ? 'opacity-50' : ''}"
+	class:draggable={isDraggable}
+>
+	<!-- Logo/Brand -->
+	<div class="flex-none {isVertical ? 'px-4 py-3 border-b border-base-200 w-full' : ''}">
+		{#if logo}
+			{@render logo()}
+		{:else}
+			<a href="/" class="btn btn-ghost text-xl font-bold">App</a>
+		{/if}
+	</div>
+
+	<!-- Nav Items -->
+	{#if navItems.length > 0}
+		<div class="flex-1 {isVertical ? 'flex-col p-2 space-y-1' : 'px-4'}">
+			{#each navItems as item}
+				<a
+					href={item.href}
+					class="btn btn-ghost {isVertical ? 'w-full justify-start' : 'btn-sm'}"
+				>
+					{#if item.icon}
+						<span class="w-5 h-5">{@render item.icon()}</span>
+					{/if}
+					{item.label}
+				</a>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Actions (Theme, Position, User) -->
+	<div class="flex-none {isVertical ? 'p-2 border-t border-base-200 space-y-2 w-full' : 'gap-2'}">
+		<!-- Theme Toggle -->
+		<button
+			class="btn btn-ghost btn-circle btn-sm"
+			onclick={handleThemeToggle}
+			title="Toggle theme"
+		>
+			{#if currentTheme === 'light'}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+				</svg>
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+				</svg>
+			{/if}
+		</button>
+
+		<!-- Position Menu (if draggable) -->
+		{#if isDraggable && onPositionChange}
+			<div class="dropdown {isVertical ? 'dropdown-right' : 'dropdown-end'}">
+				<button
+					tabindex="0"
+					class="btn btn-ghost btn-circle btn-sm"
+					title="Change position"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+					</svg>
+				</button>
+				<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+					<li><button onclick={() => changePosition('top')}>Top</button></li>
+					<li><button onclick={() => changePosition('bottom')}>Bottom</button></li>
+					<li><button onclick={() => changePosition('left')}>Left</button></li>
+					<li><button onclick={() => changePosition('right')}>Right</button></li>
+				</ul>
+			</div>
+		{/if}
+
+		<!-- User Menu -->
+		{#if user}
+			<div class="dropdown {isVertical ? 'dropdown-right' : 'dropdown-end'}">
+				<button tabindex="0" class="btn btn-ghost btn-circle avatar placeholder">
+					{#if user.avatar}
+						<div class="w-10 rounded-full">
+							<img src={user.avatar} alt={user.name} />
+						</div>
+					{:else}
+						<div class="w-10 rounded-full bg-neutral text-neutral-content">
+							<span class="text-sm">{user.name?.substring(0, 2).toUpperCase() || 'U'}</span>
+						</div>
+					{/if}
+				</button>
+				<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+					<li class="menu-title">
+						<span>{user.name || user.email}</span>
+					</li>
+					<li><a href="/private/profile">Profile</a></li>
+					<li><a href="/private/settings">Settings</a></li>
+					<li class="divider"></li>
+					{#if onLogout}
+						<li><button onclick={onLogout}>Logout</button></li>
+					{/if}
+				</ul>
+			</div>
+		{/if}
+	</div>
+</nav>
+
+<!-- Spacer to prevent content overlap -->
+{#if position === 'top'}
+	<div class="h-16"></div>
+{:else if position === 'bottom'}
+	<div class="h-16"></div>
+{:else if position === 'left'}
+	<div class="w-64 flex-shrink-0"></div>
+{:else if position === 'right'}
+	<div class="w-64 flex-shrink-0"></div>
+{/if}
+
+<style>
+	.draggable {
+		cursor: move;
+	}
+</style>

package/navigation/SmartNavbar/component.json

@@ -0,0 +1,20 @@
+{
+  "name": "SmartNavbar",
+  "category": "navigation",
+  "description": "Intelligent navbar with dynamic positioning (top/bottom/left/right), user menu, and theme switcher",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "position": "'top'|'bottom'|'left'|'right' - Navbar position",
+    "user": "{name?, email?, avatar?} - Current user",
+    "navItems": "Array<{label, href, icon?}> - Navigation items",
+    "logo": "Snippet - Custom logo",
+    "currentTheme": "string - Current theme",
+    "onThemeToggle": "(theme: string) => void - Theme change callback",
+    "onLogout": "(() => void) | null - Logout callback",
+    "onPositionChange": "((position: string) => Promise<void>) | null - Position change callback",
+    "isDraggable": "boolean - Enable position menu"
+  }
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@zveltio/components",
+  "version": "1.0.0",
+  "description": "Official Zveltio UI component library — Svelte 5 + DaisyUI/Tailwind",
+  "type": "module",
+  "svelte": "./src/lib/index.ts",
+  "types": "./src/lib/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "types": "./src/lib/index.ts",
+      "import": "./src/lib/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "admin",
+    "ai",
+    "attachments",
+    "charts",
+    "common",
+    "dashboard",
+    "forms",
+    "navigation",
+    "pages",
+    "views"
+  ],
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.4.0"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "zveltio",
+    "components",
+    "ui",
+    "daisy",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liviumarianiordache/zveltio-components.git"
+  }
+}

package/pages/Settings/Settings.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	/**
+	 * SettingsPage - User preferences management
+	 * Handles: theme, navbar position, display preferences
+	 */
+	interface Preferences {
+		theme?: string;
+		navbar_position?: 'top' | 'bottom' | 'left' | 'right';
+		nav_collapsed?: boolean;
+	}
+
+	let {
+		preferences = $bindable<Preferences>({}),
+		onSave,
+		saving = false
+	}: {
+		preferences?: Preferences;
+		onSave: (prefs: Preferences) => Promise<void>;
+		saving?: boolean;
+	} = $props();
+
+	let localPrefs = $state<Preferences>({ ...preferences });
+	let hasChanges = $derived(
+		JSON.stringify(localPrefs) !== JSON.stringify(preferences)
+	);
+
+	async function handleSave() {
+		await onSave(localPrefs);
+	}
+
+	function handleReset() {
+		localPrefs = { ...preferences };
+	}
+</script>
+
+<div class="max-w-4xl mx-auto space-y-6">
+	<div>
+		<h1 class="text-3xl font-bold">Settings</h1>
+		<p class="text-sm opacity-60 mt-1">Manage your account preferences</p>
+	</div>
+
+	<!-- Appearance Section -->
+	<div class="card bg-base-100 border border-base-200">
+		<div class="card-body">
+			<h2 class="card-title">Appearance</h2>
+
+			<div class="form-control">
+				<label class="label">
+					<span class="label-text">Theme</span>
+				</label>
+				<select bind:value={localPrefs.theme} class="select select-bordered">
+					<option value="light">Light</option>
+					<option value="dark">Dark</option>
+					<option value="auto">Auto (System)</option>
+				</select>
+			</div>
+
+			<div class="form-control mt-4">
+				<label class="label">
+					<span class="label-text">Navbar Position</span>
+				</label>
+				<div class="grid grid-cols-2 gap-3">
+					{#each ['top', 'bottom', 'left', 'right'] as pos}
+						<label class="cursor-pointer">
+							<input
+								type="radio"
+								bind:group={localPrefs.navbar_position}
+								value={pos}
+								class="radio radio-primary"
+							/>
+							<span class="ml-2 capitalize">{pos}</span>
+						</label>
+					{/each}
+				</div>
+				<label class="label">
+					<span class="label-text-alt">Changes apply immediately after saving</span>
+				</label>
+			</div>
+		</div>
+	</div>
+
+	<!-- Navigation Section -->
+	<div class="card bg-base-100 border border-base-200">
+		<div class="card-body">
+			<h2 class="card-title">Navigation</h2>
+
+			<div class="form-control">
+				<label class="label cursor-pointer justify-start gap-3">
+					<input
+						type="checkbox"
+						bind:checked={localPrefs.nav_collapsed}
+						class="toggle toggle-primary"
+					/>
+					<span class="label-text">Collapse sidebar by default</span>
+				</label>
+			</div>
+		</div>
+	</div>
+
+	<!-- Preview Section -->
+	<div class="card bg-base-100 border border-base-200">
+		<div class="card-body">
+			<h2 class="card-title">Preview</h2>
+			<div class="relative h-40 bg-base-200 rounded-lg overflow-hidden">
+				<!-- Navbar Preview -->
+				{#if localPrefs.navbar_position === 'top'}
+					<div class="absolute top-0 left-0 right-0 h-12 bg-primary flex items-center justify-center text-primary-content text-xs">
+						Navbar (Top)
+					</div>
+				{:else if localPrefs.navbar_position === 'bottom'}
+					<div class="absolute bottom-0 left-0 right-0 h-12 bg-primary flex items-center justify-center text-primary-content text-xs">
+						Navbar (Bottom)
+					</div>
+				{:else if localPrefs.navbar_position === 'left'}
+					<div class="absolute top-0 bottom-0 left-0 w-16 bg-primary flex items-center justify-center text-primary-content text-xs writing-vertical">
+						<span class="rotate-90">Navbar</span>
+					</div>
+				{:else if localPrefs.navbar_position === 'right'}
+					<div class="absolute top-0 bottom-0 right-0 w-16 bg-primary flex items-center justify-center text-primary-content text-xs">
+						<span class="rotate-90">Navbar</span>
+					</div>
+				{/if}
+
+				<!-- Content Area -->
+				<div class="absolute inset-0 flex items-center justify-center text-xs opacity-50">
+					Content Area
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Actions -->
+	<div class="flex justify-end gap-3 sticky bottom-4 bg-base-100 p-4 rounded-lg shadow-lg border border-base-200">
+		<button
+			class="btn btn-ghost"
+			onclick={handleReset}
+			disabled={!hasChanges || saving}
+		>
+			Reset
+		</button>
+		<button
+			class="btn btn-primary"
+			onclick={handleSave}
+			disabled={!hasChanges || saving}
+		>
+			{#if saving}
+				<span class="loading loading-spinner loading-sm"></span>
+				Saving...
+			{:else}
+				Save Changes
+			{/if}
+		</button>
+	</div>
+</div>

package/pages/Settings/component.json

@@ -0,0 +1,11 @@
+{
+  "name": "Settings",
+  "category": "pages",
+  "description": "User preferences management page (theme, navbar position, navigation)",
+  "dependencies": {"packages": [], "components": []},
+  "props": {
+    "preferences": "$bindable<{theme?, navbar_position?, nav_collapsed?}>",
+    "onSave": "(prefs: Preferences) => Promise<void>",
+    "saving": "boolean"
+  }
+}

package/src/lib/index.ts

@@ -0,0 +1,53 @@
+// @zveltio/components — Official Zveltio UI component library
+// Svelte 5 + DaisyUI/Tailwind
+
+// ── Admin ─────────────────────────────────────────────────────────────────
+export { default as ColumnList }         from '../../admin/ColumnList/ColumnList.svelte';
+export { default as MetadataSettings }   from '../../admin/MetadataSettings/MetadataSettings.svelte';
+export { default as RelationshipManager } from '../../admin/RelationshipManager/RelationshipManager.svelte';
+export { default as RoleManager }        from '../../admin/RoleManager/RoleManager.svelte';
+export { default as TableDesigner }      from '../../admin/TableDesigner/TableDesigner.svelte';
+
+// ── AI ────────────────────────────────────────────────────────────────────
+export { default as AIFeedback }         from '../../ai/AIFeedback/AIFeedback.svelte';
+export { default as AIInsightWidget }    from '../../ai/AIInsightWidget/AIInsightWidget.svelte';
+export { default as AIQueryBuilder }     from '../../ai/AIQueryBuilder/AIQueryBuilder.svelte';
+export { default as Omnisearch }         from '../../ai/Omnisearch/Omnisearch.svelte';
+export { default as VoiceSearch }        from '../../ai/VoiceSearch/VoiceSearch.svelte';
+
+// ── Attachments ───────────────────────────────────────────────────────────
+export { default as AttachmentManager } from '../../attachments/AttachmentManager/AttachmentManager.svelte';
+
+// ── Charts ────────────────────────────────────────────────────────────────
+export { default as SimpleBarChart }    from '../../charts/SimpleBarChart/SimpleBarChart.svelte';
+
+// ── Common ────────────────────────────────────────────────────────────────
+export { default as AddressInput }      from '../../common/AddressInput/AddressInput.svelte';
+export { default as Alert }             from '../../common/Alert/Alert.svelte';
+export { default as Button }            from '../../common/Button/Button.svelte';
+export { default as Card }              from '../../common/Card/Card.svelte';
+export { default as DynamicDataTable }  from '../../common/DynamicDataTable/DynamicDataTable.svelte';
+export { default as Input }             from '../../common/Input/Input.svelte';
+export { default as Loading }           from '../../common/Loading/Loading.svelte';
+export { default as Modal }             from '../../common/Modal/Modal.svelte';
+export { default as Pagination }        from '../../common/Pagination/Pagination.svelte';
+export { default as PermissionGuard }   from '../../common/PermissionGuard/PermissionGuard.svelte';
+export { default as SearchableSelect }  from '../../common/SearchableSelect/SearchableSelect.svelte';
+export { default as StatusBadge }       from '../../common/StatusBadge/StatusBadge.svelte';
+
+// ── Dashboard ─────────────────────────────────────────────────────────────
+export { default as RecentActivity }    from '../../dashboard/RecentActivity/RecentActivity.svelte';
+
+// ── Forms ─────────────────────────────────────────────────────────────────
+export { default as FormField }         from '../../forms/FormField/FormField.svelte';
+
+// ── Navigation ────────────────────────────────────────────────────────────
+export { default as NavGroup }          from '../../navigation/NavGroup/NavGroup.svelte';
+export { default as NavLink }           from '../../navigation/NavLink/NavLink.svelte';
+export { default as SmartNavbar }       from '../../navigation/SmartNavbar/SmartNavbar.svelte';
+
+// ── Pages ─────────────────────────────────────────────────────────────────
+export { default as Settings }          from '../../pages/Settings/Settings.svelte';
+
+// ── Views ─────────────────────────────────────────────────────────────────
+export { default as ListView }          from '../../views/ListView/ListView.svelte';

package/views/ListView/ListView.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+let {
+    items = [],
+    onRowClick = null
+}: {
+    items: any[];
+    onRowClick?: ((item: any) => void) | null;
+} = $props();
+</script>
+
+<div class="space-y-2">
+    {#each items as item}
+        <div class="card bg-base-100 shadow cursor-pointer hover:shadow-lg transition" onclick={() => onRowClick?.(item)}>
+            <div class="card-body p-4">
+                <pre class="text-xs">{JSON.stringify(item, null, 2)}</pre>
+            </div>
+        </div>
+    {/each}
+</div>

package/views/ListView/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "ListView",
+  "category": "views",
+  "description": "ListView - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "items": "Array",
+    "onRowClick": "function"
+  }
+}