@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/store-navbar/StoreNavbar04.svelte

@@ -0,0 +1,110 @@
+<!--
+  StoreNavbar04.svelte
+  Navbar with mega menu: standard nav with hover states. Women category shows
+  mega menu dropdown panel below nav with 3 cols (New Arrivals / Clothing / Accessories)
+  and featured image placeholder on right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+    cartCount?: number;
+  }
+
+  let { class: className = '', cartCount = 4 }: Props = $props();
+
+  let activeMegaMenu = $state<string | null>(null);
+</script>
+
+<nav class={cn('w-full border-b bg-white', className)}>
+  <!-- Main navbar -->
+  <div class="flex h-14 items-center gap-8 px-6">
+    <!-- Logo -->
+    <div class="flex items-center">
+      <div class="text-lg font-bold">Store</div>
+    </div>
+
+    <!-- Nav links -->
+    <div class="flex items-center gap-6">
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Men</a>
+
+      <div class="relative">
+        <button
+          type="button"
+          onmouseenter={() => (activeMegaMenu = 'women')}
+          onmouseleave={() => (activeMegaMenu = null)}
+          class="text-sm font-medium text-gray-700 hover:text-gray-900"
+        >
+          Women
+        </button>
+      </div>
+
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Kids</a>
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">New</a>
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Sale</a>
+    </div>
+
+    <!-- Icons right -->
+    <div class="ml-auto flex items-center gap-4">
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+
+      <button type="button" class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+        {#if cartCount > 0}
+          <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-0.5 text-[10px] font-bold text-white">{cartCount}</span>
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  <!-- Mega menu panel -->
+  {#if activeMegaMenu === 'women'}
+    <div
+      onmouseenter={() => (activeMegaMenu = 'women')}
+      onmouseleave={() => (activeMegaMenu = null)}
+      class="border-t bg-white px-6 py-8"
+    >
+      <div class="grid grid-cols-4 gap-8">
+        <!-- Column 1: New Arrivals -->
+        <div>
+          <h3 class="mb-4 text-sm font-semibold text-gray-900">New Arrivals</h3>
+          <div class="space-y-2">
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Latest Styles</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Trending Now</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Just In</a>
+          </div>
+        </div>
+
+        <!-- Column 2: Clothing -->
+        <div>
+          <h3 class="mb-4 text-sm font-semibold text-gray-900">Clothing</h3>
+          <div class="space-y-2">
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Dresses</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Tops</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Bottoms</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Outerwear</a>
+          </div>
+        </div>
+
+        <!-- Column 3: Accessories -->
+        <div>
+          <h3 class="mb-4 text-sm font-semibold text-gray-900">Accessories</h3>
+          <div class="space-y-2">
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Bags</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Shoes</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Jewelry</a>
+            <a href="#" class="block text-sm text-gray-700 hover:text-gray-900">Scarves</a>
+          </div>
+        </div>
+
+        <!-- Column 4: Featured image -->
+        <div class="flex items-center justify-center bg-gray-100 rounded-lg h-48">
+          <div class="text-center text-gray-500 text-sm">Featured Image</div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</nav>

package/src/registry/blocks/store-navbar/StoreNavbar05.svelte

@@ -0,0 +1,80 @@
+<!--
+  StoreNavbar05.svelte
+  Mobile-first collapsible store navbar: compact nav with logo + hamburger.
+  When open: full-width mobile menu with search, nav links, user/cart links.
+  Smooth transform animation.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+    cartCount?: number;
+  }
+
+  let { class: className = '', cartCount = 2 }: Props = $props();
+
+  let isOpen = $state(false);
+  let searchQuery = $state('');
+</script>
+
+<nav class={cn('w-full border-b bg-white', className)}>
+  <!-- Header -->
+  <div class="flex h-14 items-center justify-between px-4">
+    <button type="button" onclick={() => (isOpen = !isOpen)} class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100">
+      {#if isOpen}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+      {/if}
+    </button>
+
+    <div class="text-base font-bold">Store</div>
+
+    <div class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+      {#if cartCount > 0}
+        <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-0.5 text-[10px] font-bold text-white">{cartCount}</span>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Collapsible menu -->
+  {#if isOpen}
+    <div class="origin-top animate-in fade-in slide-in-from-top-2 border-t bg-white px-4 py-4 duration-300">
+      <!-- Search -->
+      <div class="mb-4 flex items-center rounded-lg border border-gray-300 bg-gray-50 px-3 py-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input
+          type="text"
+          bind:value={searchQuery}
+          placeholder="Search..."
+          class="ml-2 flex-1 border-none bg-transparent text-sm outline-none placeholder:text-gray-500"
+        />
+      </div>
+
+      <!-- Nav links -->
+      <div class="space-y-1 mb-4">
+        <a href="#" class="block rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">Men</a>
+        <a href="#" class="block rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">Women</a>
+        <a href="#" class="block rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">Kids</a>
+        <a href="#" class="block rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">New Arrivals</a>
+        <a href="#" class="block rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">Sale</a>
+      </div>
+
+      <hr class="my-3" />
+
+      <!-- User and cart links -->
+      <div class="space-y-1">
+        <button type="button" class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+          Account
+        </button>
+        <button type="button" class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+          Wishlist
+        </button>
+      </div>
+    </div>
+  {/if}
+</nav>

package/src/registry/blocks/store-navbar/index.ts

@@ -0,0 +1,5 @@
+export { default as StoreNavbar01 } from './StoreNavbar01.svelte';
+export { default as StoreNavbar02 } from './StoreNavbar02.svelte';
+export { default as StoreNavbar03 } from './StoreNavbar03.svelte';
+export { default as StoreNavbar04 } from './StoreNavbar04.svelte';
+export { default as StoreNavbar05 } from './StoreNavbar05.svelte';

package/src/registry/blocks/table-header/TableHeader01.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		searchPlaceholder?: string;
+		newLabel?: string;
+		onNew?: () => void;
+		onFilter?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'Table name',
+		description = 'Read and write directly to databases and stores from your projects.',
+		searchPlaceholder = 'Search...',
+		newLabel = 'New',
+		onNew,
+		onFilter
+	}: Props = $props();
+
+	let searchQuery = $state('');
+
+	// SVG Icons
+	const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>`;
+
+	const FilterIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M7 12h10M11 18h2"></path></svg>`;
+
+	const PlusIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`;
+</script>
+
+<div class={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}>
+	<!-- Left: Title and Description -->
+	<div class="flex-1">
+		<h2 class="font-semibold">{title}</h2>
+		<p class="text-sm text-muted-foreground">{description}</p>
+	</div>
+
+	<!-- Right: Search, Filter, New (Desktop) -->
+	<div class="hidden sm:flex items-center gap-2">
+		<!-- Search Input -->
+		<div class="relative">
+			<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+				{@html SearchIcon}
+			</div>
+			<input
+				type="text"
+				placeholder={searchPlaceholder}
+				bind:value={searchQuery}
+				class="pl-8 pr-3 py-2 border rounded-md bg-background text-sm w-64"
+			/>
+		</div>
+
+		<!-- Filter Button -->
+		<Button variant="outline" size="sm" onclick={onFilter}>
+			<span class="mr-1">{@html FilterIcon}</span>
+			Filters
+		</Button>
+
+		<!-- New Button -->
+		<Button onclick={onNew}>
+			<span class="mr-1">{@html PlusIcon}</span>
+			{newLabel}
+		</Button>
+	</div>
+
+	<!-- Mobile Layout -->
+	<div class="sm:hidden space-y-2 w-full">
+		<!-- New and Filter buttons row -->
+		<div class="flex gap-2">
+			<Button onclick={onNew} class="flex-1">
+				<span class="mr-1">{@html PlusIcon}</span>
+				{newLabel}
+			</Button>
+			<Button variant="outline" onclick={onFilter}>
+				<span>{@html FilterIcon}</span>
+			</Button>
+		</div>
+
+		<!-- Search Input -->
+		<div class="relative w-full">
+			<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+				{@html SearchIcon}
+			</div>
+			<input
+				type="text"
+				placeholder={searchPlaceholder}
+				bind:value={searchQuery}
+				class="w-full pl-8 pr-3 py-2 border rounded-md bg-background text-sm"
+			/>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/table-header/TableHeader02.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		dateRange?: string;
+		newLabel?: string;
+		onNew?: () => void;
+		onFilter?: () => void;
+		onDateRangeClick?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'Table name',
+		description = 'Read and write directly to databases and stores from your projects.',
+		dateRange = 'Jan 20, 2022 – Feb 09, 2022',
+		newLabel = 'New',
+		onNew,
+		onFilter,
+		onDateRangeClick
+	}: Props = $props();
+
+	// SVG Icons
+	const CalendarIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
+
+	const FilterIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M7 12h10M11 18h2"></path></svg>`;
+
+	const PlusIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`;
+</script>
+
+<div class={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}>
+	<!-- Left: Title and Description -->
+	<div class="flex-1">
+		<h2 class="font-semibold">{title}</h2>
+		<p class="text-sm text-muted-foreground">{description}</p>
+	</div>
+
+	<!-- Right: Date Range, Filter, New (Desktop) -->
+	<div class="hidden sm:flex items-center gap-2">
+		<!-- Date Range Button -->
+		<Button variant="outline" size="sm" onclick={onDateRangeClick} class="flex items-center gap-2">
+			<span>{@html CalendarIcon}</span>
+			{dateRange}
+		</Button>
+
+		<!-- Filter Button -->
+		<Button variant="outline" size="sm" onclick={onFilter}>
+			<span class="mr-1">{@html FilterIcon}</span>
+			Filters
+		</Button>
+
+		<!-- New Button -->
+		<Button onclick={onNew}>
+			<span class="mr-1">{@html PlusIcon}</span>
+			{newLabel}
+		</Button>
+	</div>
+
+	<!-- Mobile Layout -->
+	<div class="sm:hidden space-y-2 w-full">
+		<!-- New and Filters buttons row -->
+		<div class="flex gap-2">
+			<Button onclick={onNew} class="flex-1">
+				<span class="mr-1">{@html PlusIcon}</span>
+				{newLabel}
+			</Button>
+			<Button variant="outline" onclick={onFilter}>
+				<span>{@html FilterIcon}</span>
+			</Button>
+		</div>
+
+		<!-- Date Range Button -->
+		<Button
+			variant="outline"
+			onclick={onDateRangeClick}
+			class="w-full flex items-center justify-center gap-2"
+		>
+			<span>{@html CalendarIcon}</span>
+			{dateRange}
+		</Button>
+	</div>
+</div>

package/src/registry/blocks/table-header/TableHeader03.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		searchPlaceholder?: string;
+		newLabel?: string;
+		exportLabel?: string;
+		onNew?: () => void;
+		onExport?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'Table name',
+		description = 'Read and write directly to databases and stores from your projects.',
+		searchPlaceholder = 'Search...',
+		newLabel = 'New',
+		exportLabel = 'Export',
+		onNew,
+		onExport
+	}: Props = $props();
+
+	let searchQuery = $state('');
+
+	// SVG Icons
+	const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>`;
+
+	const ExportIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
+
+	const PlusIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`;
+</script>
+
+<div class={cn('flex flex-col gap-4', className)}>
+	<!-- Row 1: Title + Description LEFT, Export + New RIGHT -->
+	<div class="flex items-start justify-between">
+		<div class="flex-1">
+			<h2 class="font-semibold">{title}</h2>
+			<p class="text-sm text-muted-foreground">{description}</p>
+		</div>
+
+		<!-- Desktop: Right side buttons -->
+		<div class="hidden sm:flex items-center gap-2">
+			<Button variant="outline" size="sm" onclick={onExport}>
+				<span class="mr-1">{@html ExportIcon}</span>
+				{exportLabel}
+			</Button>
+			<Button onclick={onNew}>
+				<span class="mr-1">{@html PlusIcon}</span>
+				{newLabel}
+			</Button>
+		</div>
+	</div>
+
+	<!-- Row 2: Search LEFT (Desktop) -->
+	<div class="hidden sm:flex items-center gap-2">
+		<div class="relative w-64">
+			<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+				{@html SearchIcon}
+			</div>
+			<input
+				type="text"
+				placeholder={searchPlaceholder}
+				bind:value={searchQuery}
+				class="w-full pl-8 pr-3 py-2 border rounded-md bg-background text-sm"
+			/>
+		</div>
+	</div>
+
+	<!-- Mobile Layout -->
+	<div class="sm:hidden space-y-2 w-full">
+		<!-- New + Export buttons -->
+		<div class="flex gap-2">
+			<Button onclick={onNew} class="flex-1">
+				<span class="mr-1">{@html PlusIcon}</span>
+				{newLabel}
+			</Button>
+			<Button variant="outline" onclick={onExport}>
+				<span>{@html ExportIcon}</span>
+			</Button>
+		</div>
+
+		<!-- Search Input -->
+		<div class="relative w-full">
+			<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+				{@html SearchIcon}
+			</div>
+			<input
+				type="text"
+				placeholder={searchPlaceholder}
+				bind:value={searchQuery}
+				class="w-full pl-8 pr-3 py-2 border rounded-md bg-background text-sm"
+			/>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/table-header/TableHeader04.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		tabs?: string[];
+		onTabChange?: (tab: string) => void;
+		onExport?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'Table name',
+		description = 'Read and write directly to databases and stores from your projects.',
+		tabs = ['All', 'Sent', 'Paid', 'Unpaid'],
+		onTabChange,
+		onExport
+	}: Props = $props();
+
+	let activeTab = $state(tabs[0]);
+	let searchQuery = $state('');
+
+	function handleTabChange(tab: string) {
+		activeTab = tab;
+		onTabChange?.(tab);
+	}
+
+	// SVG Icons
+	const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>`;
+
+	const ExportIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
+</script>
+
+<div class={cn('flex flex-col gap-4', className)}>
+	<!-- Row 1: Title + Description -->
+	<div>
+		<h2 class="font-semibold">{title}</h2>
+		<p class="text-sm text-muted-foreground">{description}</p>
+	</div>
+
+	<!-- Row 2: Tab filters LEFT, Search + Export RIGHT (Desktop) -->
+	<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+		<!-- Tabs -->
+		<div class="flex gap-1 overflow-x-auto pb-2 sm:pb-0">
+			{#each tabs as tab}
+				<button
+					class={cn(
+						'px-3 py-1 rounded-full text-sm whitespace-nowrap transition-colors',
+						activeTab === tab
+							? 'bg-foreground text-background'
+							: 'text-muted-foreground hover:text-foreground'
+					)}
+					onclick={() => handleTabChange(tab)}
+				>
+					{tab}
+				</button>
+			{/each}
+		</div>
+
+		<!-- Desktop: Search + Export -->
+		<div class="hidden sm:flex items-center gap-2">
+			<!-- Search Input -->
+			<div class="relative w-56">
+				<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+					{@html SearchIcon}
+				</div>
+				<input
+					type="text"
+					placeholder="Search..."
+					bind:value={searchQuery}
+					class="w-full pl-8 pr-3 py-2 border rounded-md bg-background text-sm"
+				/>
+			</div>
+
+			<!-- Export Button -->
+			<Button variant="outline" size="sm" onclick={onExport}>
+				<span class="mr-1">{@html ExportIcon}</span>
+				Export
+			</Button>
+		</div>
+	</div>
+
+	<!-- Mobile: Search + Export below tabs -->
+	<div class="sm:hidden flex flex-col gap-2">
+		<!-- Search Input -->
+		<div class="relative w-full">
+			<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+				{@html SearchIcon}
+			</div>
+			<input
+				type="text"
+				placeholder="Search..."
+				bind:value={searchQuery}
+				class="w-full pl-8 pr-3 py-2 border rounded-md bg-background text-sm"
+			/>
+		</div>
+
+		<!-- Export Button -->
+		<Button variant="outline" size="sm" onclick={onExport} class="w-full justify-center">
+			<span class="mr-1">{@html ExportIcon}</span>
+			Export
+		</Button>
+	</div>
+</div>

package/src/registry/blocks/table-header/index.ts

@@ -0,0 +1,4 @@
+export { default as TableHeader01 } from './TableHeader01.svelte';
+export { default as TableHeader02 } from './TableHeader02.svelte';
+export { default as TableHeader03 } from './TableHeader03.svelte';
+export { default as TableHeader04 } from './TableHeader04.svelte';