@zveltio/components 1.0.0

package/common/Button/component.json

@@ -0,0 +1,16 @@
+{
+  "name": "Button",
+  "category": "common",
+  "description": "Button - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "variant": "string",
+    "size": "string",
+    "disabled": "boolean",
+    "loading": "boolean",
+    "onclick": "function"
+  }
+}

package/common/Card/Card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+let {
+    children,
+    title = '',
+    actions = null
+}: {
+    children: Snippet;
+    title?: string;
+    actions?: Snippet | null;
+} = $props();
+</script>
+
+<div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+        {#if title || actions}
+        <div class="flex justify-between items-center mb-4">
+            {#if title}<h2 class="card-title">{title}</h2>{/if}
+            {#if actions}<div class="card-actions">{@render actions()}</div>{/if}
+        </div>
+        {/if}
+        {@render children()}
+    </div>
+</div>

package/common/Card/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "Card",
+  "category": "common",
+  "description": "Card - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "title": "string",
+    "actions": "Snippet | null"
+  }
+}

package/common/DynamicDataTable/DynamicDataTable.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	/**
+	 * DynamicDataTable - Universal data table with sorting, filtering, actions
+	 */
+	interface Column {
+		key: string;
+		label: string;
+		sortable?: boolean;
+		format?: (value: any) => string;
+	}
+
+	let {
+		columns,
+		data = [],
+		onRowClick = null,
+		onSort = null,
+		loading = false,
+		emptyMessage = 'No data'
+	}: {
+		columns: Column[];
+		data?: any[];
+		onRowClick?: ((row: any) => void) | null;
+		onSort?: ((column: string, direction: 'asc' | 'desc') => void) | null;
+		loading?: boolean;
+		emptyMessage?: string;
+	} = $props();
+
+	let sortColumn = $state<string | null>(null);
+	let sortDirection = $state<'asc' | 'desc'>('asc');
+
+	function handleSort(col: Column) {
+		if (!col.sortable) return;
+		if (sortColumn === col.key) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortColumn = col.key;
+			sortDirection = 'asc';
+		}
+		onSort?.(col.key, sortDirection);
+	}
+
+	function getCellValue(row: any, col: Column) {
+		const val = row[col.key];
+		return col.format ? col.format(val) : val;
+	}
+</script>
+
+<div class="overflow-x-auto">
+	<table class="table table-zebra">
+		<thead>
+			<tr>
+				{#each columns as col}
+					<th>
+						{#if col.sortable}
+							<button class="flex items-center gap-1" onclick={() => handleSort(col)}>
+								{col.label}
+								{#if sortColumn === col.key}
+									<span>{sortDirection === 'asc' ? '↑' : '↓'}</span>
+								{/if}
+							</button>
+						{:else}
+							{col.label}
+						{/if}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#if loading}
+				<tr><td colspan={columns.length} class="text-center"><span class="loading loading-spinner"></span></td></tr>
+			{:else if data.length === 0}
+				<tr><td colspan={columns.length} class="text-center opacity-50">{emptyMessage}</td></tr>
+			{:else}
+				{#each data as row}
+					<tr class={onRowClick ? 'cursor-pointer hover:bg-base-200' : ''} onclick={() => onRowClick?.(row)}>
+						{#each columns as col}
+							<td>{getCellValue(row, col)}</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>

package/common/DynamicDataTable/component.json

@@ -0,0 +1,14 @@
+{
+  "name": "DynamicDataTable",
+  "category": "common",
+  "description": "Universal data table with sorting and row actions",
+  "dependencies": {"packages": [], "components": []},
+  "props": {
+    "columns": "Column[] - {key, label, sortable?, format?}",
+    "data": "any[]",
+    "onRowClick": "(row: any) => void",
+    "onSort": "(column: string, direction: 'asc'|'desc') => void",
+    "loading": "boolean",
+    "emptyMessage": "string"
+  }
+}

package/common/Input/Input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+let {
+    value = $bindable(''),
+    type = 'text',
+    placeholder = '',
+    label = '',
+    error = ''
+}: {
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+} = $props();
+</script>
+
+<div class="form-control w-full">
+    {#if label}<label class="label"><span class="label-text">{label}</span></label>{/if}
+    <input {type} bind:value {placeholder} class="input input-bordered {error ? 'input-error' : ''}" />
+    {#if error}<label class="label"><span class="label-text-alt text-error">{error}</span></label>{/if}
+</div>

package/common/Input/component.json

@@ -0,0 +1,16 @@
+{
+  "name": "Input",
+  "category": "common",
+  "description": "Input - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "value": "$bindable<string>",
+    "type": "string",
+    "placeholder": "string",
+    "label": "string",
+    "error": "string"
+  }
+}

package/common/Loading/Loading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+let {
+    message = 'Loading...'
+}: {
+    message?: string;
+} = $props();
+</script>
+
+<div class="flex flex-col items-center justify-center p-8">
+    <span class="loading loading-spinner loading-lg"></span>
+    {#if message}<p class="mt-4 text-sm opacity-60">{message}</p>{/if}
+</div>

package/common/Loading/component.json

@@ -0,0 +1,12 @@
+{
+  "name": "Loading",
+  "category": "common",
+  "description": "Loading - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "message": "string"
+  }
+}

package/common/Modal/Modal.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+let {
+    children,
+    open = $bindable(false),
+    title = '',
+    onClose = null
+}: {
+    children: Snippet;
+    open?: boolean;
+    title?: string;
+    onClose?: (() => void) | null;
+} = $props();
+
+function close() {
+    open = false;
+    onClose?.();
+}
+</script>
+
+{#if open}
+<dialog class="modal modal-open">
+    <div class="modal-box">
+        <h3 class="font-bold text-lg">{title}</h3>
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={close}>✕</button>
+        <div class="py-4">{@render children()}</div>
+    </div>
+    <div class="modal-backdrop" onclick={close}></div>
+</dialog>
+{/if}

package/common/Modal/component.json

@@ -0,0 +1,14 @@
+{
+  "name": "Modal",
+  "category": "common",
+  "description": "Modal - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "open": "$bindable<boolean>",
+    "title": "string",
+    "onClose": "function"
+  }
+}

package/common/Pagination/Pagination.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	let {
+		currentPage = 1,
+		totalPages = 1,
+		onPageChange
+	}: {
+		currentPage?: number;
+		totalPages?: number;
+		onPageChange: (page: number) => void;
+	} = $props();
+
+	const visiblePages = $derived(() => {
+		const pages = [];
+		const start = Math.max(1, currentPage - 2);
+		const end = Math.min(totalPages, currentPage + 2);
+		for (let i = start; i <= end; i++) pages.push(i);
+		return pages;
+	});
+</script>
+
+<div class="join">
+	<button
+		class="join-item btn btn-sm"
+		disabled={currentPage === 1}
+		onclick={() => onPageChange(currentPage - 1)}
+	>«</button>
+	
+	{#each visiblePages() as page}
+		<button
+			class="join-item btn btn-sm {page === currentPage ? 'btn-active' : ''}"
+			onclick={() => onPageChange(page)}
+		>{page}</button>
+	{/each}
+	
+	<button
+		class="join-item btn btn-sm"
+		disabled={currentPage === totalPages}
+		onclick={() => onPageChange(currentPage + 1)}
+	>»</button>
+</div>

package/common/Pagination/component.json

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

package/common/PermissionGuard/PermissionGuard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	/**
+	 * PermissionGuard - Standalone permission gatekeeper
+	 * 
+	 * Props-based design: no external dependencies
+	 * Compatible with Casbin, RBAC, or any auth system
+	 */
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		fallback,
+		canAccess = true, // Parent decides permission
+		isLoading = false,
+		showFallback = false,
+		errorMessage = 'Access Denied'
+	}: {
+		children: Snippet;
+		fallback?: Snippet;
+		canAccess?: boolean;
+		isLoading?: boolean;
+		showFallback?: boolean;
+		errorMessage?: string;
+	} = $props();
+</script>
+
+{#if isLoading}
+	<div class="flex items-center gap-2 p-4 text-sm opacity-50">
+		<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+		</svg>
+		Verifying permissions...
+	</div>
+{:else if canAccess}
+	{@render children()}
+{:else if showFallback}
+	{#if fallback}
+		{@render fallback()}
+	{:else}
+		<div class="border-base-300 bg-base-200/50 flex flex-col items-center gap-4 rounded-3xl border-2 border-dashed p-8 text-center">
+			<div class="bg-error/10 text-error rounded-full p-3 shadow-inner">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+				</svg>
+			</div>
+			<div class="max-w-xs">
+				<h3 class="text-lg font-bold">Access Restricted</h3>
+				<p class="text-xs opacity-60 mt-1">{errorMessage}</p>
+			</div>
+		</div>
+	{/if}
+{/if}

package/common/PermissionGuard/component.json

@@ -0,0 +1,21 @@
+{
+  "name": "PermissionGuard",
+  "category": "common",
+  "description": "Standalone permission gatekeeper compatible with any auth system (Casbin, RBAC, etc.)",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "canAccess": "boolean - Permission check result from parent",
+    "isLoading": "boolean - Show loading state",
+    "showFallback": "boolean - Display fallback UI on denial",
+    "errorMessage": "string - Custom error message",
+    "children": "Snippet - Protected content",
+    "fallback": "Snippet? - Custom fallback UI"
+  },
+  "examples": [
+    "basic-usage.svelte",
+    "with-casbin.svelte"
+  ]
+}

package/common/SearchableSelect/SearchableSelect.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	/**
+	 * SearchableSelect - Dropdown with server-side search
+	 * Zero dependencies, callback-based
+	 */
+	
+	let {
+		value = $bindable(),
+		options = [],
+		onSearch = null,
+		placeholder = 'Search...',
+		disabled = false,
+		label = ''
+	}: {
+		value?: any;
+		options?: Array<{value: any; label: string}>;
+		onSearch?: ((term: string) => Promise<Array<{value: any; label: string}>>) | null;
+		placeholder?: string;
+		disabled?: boolean;
+		label?: string;
+	} = $props();
+
+	let searchTerm = $state('');
+	let isOpen = $state(false);
+	let filteredOptions = $state<Array<{value: any; label: string}>>([]);
+	let loading = $state(false);
+
+	// Display label for selected value
+	const selectedLabel = $derived(
+		options.find(o => o.value === value)?.label || filteredOptions.find(o => o.value === value)?.label || ''
+	);
+
+	async function handleSearch(term: string) {
+		searchTerm = term;
+		
+		if (onSearch) {
+			// Server-side search
+			loading = true;
+			try {
+				filteredOptions = await onSearch(term);
+			} finally {
+				loading = false;
+			}
+		} else {
+			// Client-side filter
+			filteredOptions = options.filter(o => 
+				o.label.toLowerCase().includes(term.toLowerCase())
+			);
+		}
+	}
+
+	function selectOption(opt: {value: any; label: string}) {
+		value = opt.value;
+		isOpen = false;
+		searchTerm = '';
+	}
+
+	// Initialize options on mount
+	$effect(() => {
+		if (options.length > 0 && filteredOptions.length === 0) {
+			filteredOptions = options;
+		}
+	});
+</script>
+
+<div class="relative w-full">
+	{#if label}
+		<label class="label">
+			<span class="label-text font-semibold">{label}</span>
+		</label>
+	{/if}
+
+	<!-- Trigger Button -->
+	<button
+		type="button"
+		class="input input-bordered w-full flex items-center justify-between"
+		{disabled}
+		onclick={() => !disabled && (isOpen = !isOpen)}
+	>
+		<span class={selectedLabel ? '' : 'opacity-50'}>
+			{selectedLabel || placeholder}
+		</span>
+		<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	{#if isOpen}
+		<!-- Dropdown -->
+		<div class="absolute z-50 w-full mt-1 bg-base-100 border border-base-200 rounded-lg shadow-lg">
+			<!-- Search Input -->
+			<div class="p-2">
+				<input
+					type="text"
+					bind:value={searchTerm}
+					oninput={(e) => handleSearch(e.currentTarget.value)}
+					placeholder="Type to search..."
+					class="input input-sm input-bordered w-full"
+					autofocus
+				/>
+			</div>
+
+			<!-- Options List -->
+			<div class="max-h-60 overflow-auto">
+				{#if loading}
+					<div class="p-4 text-center text-sm opacity-50">Loading...</div>
+				{:else if filteredOptions.length === 0}
+					<div class="p-4 text-center text-sm opacity-50">No results</div>
+				{:else}
+					{#each filteredOptions as opt}
+						<button
+							type="button"
+							class="w-full text-left px-4 py-2 hover:bg-base-200 transition flex items-center justify-between"
+							onclick={() => selectOption(opt)}
+						>
+							<span>{opt.label}</span>
+							{#if opt.value === value}
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+								</svg>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</div>
+
+		<!-- Backdrop for closing dropdown -->
+		<button
+			type="button"
+			class="fixed inset-0 z-40"
+			onclick={() => isOpen = false}
+			tabindex="-1"
+		></button>
+	{/if}
+</div>

package/common/SearchableSelect/component.json

@@ -0,0 +1,17 @@
+{
+  "name": "SearchableSelect",
+  "category": "common",
+  "description": "Dropdown with client or server-side search",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "value": "$bindable - Selected value",
+    "options": "Array<{value, label}> - Static options",
+    "onSearch": "(term: string) => Promise<Array<{value, label}>> - Async search callback",
+    "placeholder": "string",
+    "disabled": "boolean",
+    "label": "string"
+  }
+}

package/common/StatusBadge/StatusBadge.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	let {
+		status,
+		label = ''
+	}: {
+		status: string;
+		label?: string;
+	} = $props();
+
+	const statusColors: Record<string, string> = {
+		active: 'badge-success',
+		pending: 'badge-warning',
+		inactive: 'badge-ghost',
+		error: 'badge-error',
+		draft: 'badge-neutral'
+	};
+
+	const displayLabel = $derived(label || status);
+	const colorClass = $derived(statusColors[status.toLowerCase()] || 'badge-neutral');
+</script>
+
+<span class="badge {colorClass}">{displayLabel}</span>

package/common/StatusBadge/component.json

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

package/dashboard/RecentActivity/RecentActivity.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	/**
+	 * RecentActivity - Dashboard widget showing recent system activity
+	 */
+	interface Activity {
+		id: string;
+		user: string;
+		action: string;
+		entity: string;
+		timestamp: string;
+	}
+
+	let {
+		activities = [],
+		loading = false,
+		onLoadMore = null
+	}: {
+		activities: Activity[];
+		loading?: boolean;
+		onLoadMore?: (() => void) | null;
+	} = $props();
+
+	function formatTime(timestamp: string): string {
+		const date = new Date(timestamp);
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const minutes = Math.floor(diff / 60000);
+		const hours = Math.floor(diff / 3600000);
+		const days = Math.floor(diff / 86400000);
+		
+		if (minutes < 1) return 'Just now';
+		if (minutes < 60) return `${minutes}m ago`;
+		if (hours < 24) return `${hours}h ago`;
+		return `${days}d ago`;
+	}
+</script>
+
+<div class="space-y-4">
+	<h3 class="font-semibold">Recent Activity</h3>
+	
+	<div class="space-y-2">
+		{#if loading}
+			<div class="flex justify-center py-4"><span class="loading loading-spinner"></span></div>
+		{:else if activities.length === 0}
+			<div class="text-center py-4 text-sm opacity-50">No recent activity</div>
+		{:else}
+			{#each activities as activity}
+				<div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
+					<div class="avatar placeholder">
+						<div class="w-8 rounded-full bg-neutral text-neutral-content text-xs">
+							{activity.user.substring(0, 2).toUpperCase()}
+						</div>
+					</div>
+					<div class="flex-1 min-w-0">
+						<p class="text-sm">
+							<span class="font-medium">{activity.user}</span>
+							{' '}{activity.action}{' '}
+							<span class="font-medium">{activity.entity}</span>
+						</p>
+						<p class="text-xs opacity-60">{formatTime(activity.timestamp)}</p>
+					</div>
+				</div>
+			{/each}
+			
+			{#if onLoadMore}
+				<button class="btn btn-sm btn-ghost w-full" onclick={onLoadMore}>Load More</button>
+			{/if}
+		{/if}
+	</div>
+</div>

package/dashboard/RecentActivity/component.json

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