@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/description-list/DescriptionList01.svelte

@@ -0,0 +1,75 @@
+<!--
+  DescriptionList01.svelte
+  Card with title + description + Edit button. Rows of label/value (read-only).
+  Last row can show downloadable file items.
+  Desktop: label left / value right. Mobile: stacked.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface DLFile { name: string; size?: string; }
+  interface DLRow { label: string; value?: string; files?: DLFile[]; }
+
+  let {
+    class: className = '',
+    title = 'Application information',
+    description = 'Personal details and general information',
+    rows = [
+      { label: 'Full name', value: 'Alex Thompson' },
+      { label: 'Address', value: '123 Main Street, City, Country' },
+      { label: 'Email address', value: 'alex@example.com' },
+      { label: 'Phone number', value: '+1 234 567 890' },
+      { label: 'About', value: 'A motivated professional with 5+ years of experience in software development.' },
+      { label: 'Documents', files: [{ name: 'CV.pdf', size: '2,51mb' }, { name: 'Portfolio.pdf', size: '11,24mb' }] }
+    ] as DLRow[],
+    onedit = () => {},
+    ondownload = (_: string) => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    rows?: DLRow[];
+    onedit?: () => void;
+    ondownload?: (filename: string) => void;
+  } = $props();
+</script>
+
+<div class={cn('rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class="flex items-start justify-between p-4 sm:p-6">
+    <div>
+      <h2 class="font-semibold">{title}</h2>
+      {#if description}<p class="mt-0.5 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+  </div>
+
+  <!-- Rows -->
+  <div class="border-t">
+    {#each rows as row}
+      <div class="flex flex-col gap-1 border-b px-4 py-3 last:border-0 sm:flex-row sm:gap-4 sm:px-6">
+        <dt class="w-40 shrink-0 text-sm font-medium text-muted-foreground">{row.label}</dt>
+        <dd class="flex-1 text-sm">
+          {#if row.files}
+            <div class="flex flex-col gap-2">
+              {#each row.files as file}
+                <div class="flex items-center gap-2 rounded-md border px-3 py-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+                  <span class="flex-1 font-medium">{file.name}</span>
+                  {#if file.size}<span class="text-xs text-muted-foreground">{file.size}</span>{/if}
+                  <Button variant="ghost" size="sm" onclick={() => ondownload(file.name)} class="hidden sm:inline-flex">Download</Button>
+                  <Button variant="ghost" size="icon" class="h-7 w-7 sm:hidden" onclick={() => ondownload(file.name)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                  </Button>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            {row.value ?? ''}
+          {/if}
+        </dd>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/registry/blocks/description-list/DescriptionList02.svelte

@@ -0,0 +1,50 @@
+<!--
+  DescriptionList02.svelte
+  Card with title + description. Each row has label + value + individual "Edit" button.
+  Desktop: label left / value center / edit right. Mobile: stacked with Edit below.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface DLRow { label: string; value: string; key?: string; }
+
+  let {
+    class: className = '',
+    title = 'Profile Information',
+    description = 'Personal details and general information.',
+    rows = [
+      { label: 'Full name', value: 'Alex Thompson', key: 'fullName' },
+      { label: 'Address', value: '123 Main Street, City, Country', key: 'address' },
+      { label: 'Email address', value: 'alex@example.com', key: 'email' },
+      { label: 'Phone number', value: '+1 234 567 890', key: 'phone' },
+      { label: 'About', value: 'A motivated professional with 5+ years of experience in software development.', key: 'about' }
+    ] as DLRow[],
+    onedit = (_key: string) => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    rows?: DLRow[];
+    onedit?: (key: string) => void;
+  } = $props();
+</script>
+
+<div class={cn('rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class="p-4 sm:p-6">
+    <h2 class="font-semibold">{title}</h2>
+    {#if description}<p class="mt-0.5 text-sm text-muted-foreground">{description}</p>{/if}
+  </div>
+
+  <!-- Rows -->
+  <div class="border-t">
+    {#each rows as row}
+      <div class="flex flex-col gap-1 border-b px-4 py-3 last:border-0 sm:flex-row sm:items-center sm:gap-4 sm:px-6">
+        <dt class="w-40 shrink-0 text-sm font-medium">{row.label}</dt>
+        <dd class="flex-1 text-sm text-muted-foreground">{row.value}</dd>
+        <Button variant="outline" size="sm" onclick={() => onedit(row.key ?? row.label)} class="self-start sm:self-auto">Edit</Button>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/registry/blocks/description-list/DescriptionList03.svelte

@@ -0,0 +1,74 @@
+<!--
+  DescriptionList03.svelte
+  Editable form-style description list: title + description + "Save" button.
+  Each row: label left + input/textarea right (editable).
+  Desktop: 2-column. Mobile: stacked.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface DLField {
+    label: string;
+    key: string;
+    value?: string;
+    type?: 'text' | 'textarea' | 'email' | 'tel';
+  }
+
+  let {
+    class: className = '',
+    title = 'Profile Information',
+    description = 'Personal details and general information.',
+    fields = [
+      { label: 'Full name', key: 'fullName', value: 'Alex Thompson', type: 'text' },
+      { label: 'Address', key: 'address', value: '123 Main Street, City, Country', type: 'text' },
+      { label: 'Email address', key: 'email', value: 'alex@example.com', type: 'email' },
+      { label: 'Phone number', key: 'phone', value: '+1 234 567 890', type: 'tel' },
+      { label: 'About', key: 'about', value: 'A motivated professional with 5+ years of experience in software development.', type: 'textarea' }
+    ] as DLField[],
+    onsave = (_values: Record<string, string>) => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    fields?: DLField[];
+    onsave?: (values: Record<string, string>) => void;
+  } = $props();
+
+  let values = $state(Object.fromEntries(fields.map(f => [f.key, f.value ?? ''])));
+</script>
+
+<div class={cn('rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class="flex items-start justify-between p-4 sm:p-6">
+    <div>
+      <h2 class="font-semibold">{title}</h2>
+      {#if description}<p class="mt-0.5 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <Button size="sm" onclick={() => onsave(values)}>Save</Button>
+  </div>
+
+  <!-- Editable rows -->
+  <div class="border-t">
+    {#each fields as field}
+      <div class="flex flex-col gap-1.5 border-b px-4 py-3 last:border-0 sm:flex-row sm:items-start sm:gap-4 sm:px-6">
+        <label for={field.key} class="w-40 shrink-0 pt-1.5 text-sm font-medium">{field.label}</label>
+        {#if field.type === 'textarea'}
+          <textarea
+            id={field.key}
+            rows={4}
+            bind:value={values[field.key]}
+            class="flex-1 resize-none rounded-md border bg-background px-3 py-1.5 text-sm outline-none focus:ring-2 focus:ring-ring"
+          ></textarea>
+        {:else}
+          <input
+            id={field.key}
+            type={field.type ?? 'text'}
+            bind:value={values[field.key]}
+            class="flex-1 rounded-md border bg-background px-3 py-1.5 text-sm outline-none focus:ring-2 focus:ring-ring"
+          />
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>

package/src/registry/blocks/description-list/DescriptionList04.svelte

@@ -0,0 +1,88 @@
+<!--
+  DescriptionList04.svelte
+  Application information card: title + description + Edit button.
+  Two-column layout for text rows. Full-width About row. Documents section with 2-col file cards.
+  Desktop: 2-col grid layout. Mobile: stacked.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface DLFile { name: string; size?: string; }
+  interface DLRow { label: string; value: string; }
+
+  let {
+    class: className = '',
+    title = 'Application information',
+    description = 'Personal details and general information.',
+    rows = [
+      { label: 'Full name', value: 'Alex Thompson' },
+      { label: 'Email address', value: 'alex@example.com' },
+      { label: 'Address', value: '123 Main Street, City, Country' },
+      { label: 'Phone number', value: '+1 234 567 890' }
+    ] as DLRow[],
+    about = 'A seasoned software engineer with 5+ years of experience specializing in full-stack web development.',
+    files = [
+      { name: 'Resume.pdf' },
+      { name: 'Portfolio.pdf' }
+    ] as DLFile[],
+    onedit = () => {},
+    ondownload = (_: string) => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    rows?: DLRow[];
+    about?: string;
+    files?: DLFile[];
+    onedit?: () => void;
+    ondownload?: (filename: string) => void;
+  } = $props();
+</script>
+
+<div class={cn('rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class="flex items-start justify-between p-4 sm:p-6">
+    <div>
+      <h2 class="font-semibold">{title}</h2>
+      {#if description}<p class="mt-0.5 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+  </div>
+
+  <!-- 2-column rows -->
+  <div class="grid grid-cols-1 gap-0 border-t sm:grid-cols-2">
+    {#each rows as row, i}
+      <div class={cn('flex flex-col gap-0.5 border-b px-4 py-3 sm:px-6', i % 2 === 1 && 'sm:border-l')}>
+        <dt class="text-xs font-medium text-muted-foreground">{row.label}</dt>
+        <dd class="text-sm">{row.value}</dd>
+      </div>
+    {/each}
+  </div>
+
+  <!-- About (full-width) -->
+  {#if about}
+    <div class="border-b px-4 py-3 sm:px-6">
+      <dt class="text-xs font-medium text-muted-foreground">About</dt>
+      <dd class="mt-1 text-sm leading-relaxed">{about}</dd>
+    </div>
+  {/if}
+
+  <!-- Documents (2-column) -->
+  {#if files.length}
+    <div class="px-4 py-3 sm:px-6">
+      <p class="mb-2 text-xs font-medium text-muted-foreground">Documents</p>
+      <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        {#each files as file}
+          <div class="flex items-center gap-2 rounded-md border px-3 py-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+            <span class="flex-1 text-sm font-medium truncate">{file.name}</span>
+            <Button variant="ghost" size="icon" class="h-7 w-7 shrink-0" onclick={() => ondownload(file.name)}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            </Button>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

package/src/registry/blocks/description-list/index.ts

@@ -0,0 +1,4 @@
+export { default as DescriptionList01 } from './DescriptionList01.svelte';
+export { default as DescriptionList02 } from './DescriptionList02.svelte';
+export { default as DescriptionList03 } from './DescriptionList03.svelte';
+export { default as DescriptionList04 } from './DescriptionList04.svelte';

package/src/registry/blocks/empty-lp/EmptyLP01.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'No data yet',
+		description = 'Start creating your first item to see it appear here.',
+		primaryLabel = 'Create now',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-24 px-4 text-center', className)}>
+	<div class="mx-auto flex flex-col items-center gap-6">
+		<div class="h-16 w-16 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
+			<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<path
+					d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+				/>
+			</svg>
+		</div>
+
+		<div>
+			<h2 class="text-2xl font-bold">{title}</h2>
+			<p class="mt-2 text-muted-foreground max-w-sm mx-auto">{description}</p>
+		</div>
+
+		<div class="flex gap-3">
+			<Button onclick={onPrimary}>{primaryLabel}</Button>
+			<Button variant="outline" onclick={onSecondary}>{secondaryLabel}</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/empty-lp/EmptyLP02.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		placeholder?: string;
+		ctaLabel?: string;
+		onSubmit?: (email: string) => void;
+	}
+
+	let email = $state('');
+
+	const {
+		class: className,
+		title = 'Get started today',
+		description = 'Join thousands of users and start your journey with us.',
+		placeholder = 'Enter your email',
+		ctaLabel = 'Get started',
+		onSubmit
+	}: Props = $props();
+
+	function handleSubmit() {
+		if (onSubmit && email) {
+			onSubmit(email);
+			email = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-24 px-4 text-center', className)}>
+	<div class="mx-auto max-w-lg">
+		<h2 class="text-3xl font-bold">{title}</h2>
+		<p class="mt-4 text-background/80">{description}</p>
+
+		<div class="mt-8 flex gap-2">
+			<input
+				type="email"
+				placeholder={placeholder}
+				bind:value={email}
+				class="flex-1 rounded-lg bg-background/10 px-4 py-2 text-background placeholder:text-background/40 focus:outline-none focus:ring-2 focus:ring-background/30"
+				onkeydown={(e) => e.key === 'Enter' && handleSubmit()}
+			/>
+			<Button onclick={handleSubmit} variant="secondary">{ctaLabel}</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/empty-lp/EmptyLP03.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		onNotify?: (email: string) => void;
+	}
+
+	let email = $state('');
+
+	const {
+		class: className,
+		title = 'Something amazing is coming',
+		description = 'Be the first to know when we launch.',
+		onNotify
+	}: Props = $props();
+
+	function handleNotify() {
+		if (onNotify && email) {
+			onNotify(email);
+			email = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-background py-24 px-4 text-center', className)}>
+	<div class="mx-auto max-w-lg">
+		<p class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Coming soon</p>
+		<h2 class="mt-4 text-4xl font-bold">{title}</h2>
+		<p class="mt-4 text-muted-foreground">{description}</p>
+
+		<div class="mt-12 flex justify-center gap-8">
+			<div class="flex flex-col items-center">
+				<p class="text-4xl font-bold">12</p>
+				<p class="text-sm text-muted-foreground mt-2">Days</p>
+			</div>
+			<div class="flex flex-col items-center">
+				<p class="text-4xl font-bold">04</p>
+				<p class="text-sm text-muted-foreground mt-2">Hours</p>
+			</div>
+			<div class="flex flex-col items-center">
+				<p class="text-4xl font-bold">32</p>
+				<p class="text-sm text-muted-foreground mt-2">Minutes</p>
+			</div>
+		</div>
+
+		<div class="mt-12 flex gap-2">
+			<input
+				type="email"
+				placeholder="Enter your email"
+				bind:value={email}
+				class="flex-1 rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+				onkeydown={(e) => e.key === 'Enter' && handleNotify()}
+			/>
+			<Button onclick={handleNotify}>Notify me</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/empty-lp/EmptyLP04.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		onClear?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'No results found',
+		description = 'Try adjusting your search or filters to find what you are looking for.',
+		onClear
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-24 px-4 text-center', className)}>
+	<div class="mx-auto flex flex-col items-center gap-6">
+		<div class="h-16 w-16 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
+			<svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<circle cx="11" cy="11" r="8" />
+				<line x1="21" y1="21" x2="16.65" y2="16.65" />
+				<line x1="8" y1="11" x2="14" y2="11" />
+			</svg>
+		</div>
+
+		<div>
+			<h2 class="text-2xl font-bold">{title}</h2>
+			<p class="mt-2 text-muted-foreground max-w-sm mx-auto">{description}</p>
+		</div>
+
+		<Button variant="outline" onclick={onClear}>Clear filters</Button>
+	</div>
+</section>

package/src/registry/blocks/empty-lp/index.ts

@@ -0,0 +1,4 @@
+export { default as EmptyLP01 } from './EmptyLP01.svelte';
+export { default as EmptyLP02 } from './EmptyLP02.svelte';
+export { default as EmptyLP03 } from './EmptyLP03.svelte';
+export { default as EmptyLP04 } from './EmptyLP04.svelte';

package/src/registry/blocks/empty-section/EmptySection01.svelte

@@ -0,0 +1,47 @@
+<!--
+  EmptySection01.svelte
+  Empty state: centered icon + title + description + Create new / Learn more buttons.
+  Flat and card variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    title = 'No databases added',
+    description = 'Read and write directly to databases and stores from your projects.',
+    createLabel = 'Create new',
+    learnLabel = 'Learn more',
+    oncreate = () => {},
+    onlearn = () => {}
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    description?: string;
+    createLabel?: string;
+    learnLabel?: string;
+    oncreate?: () => void;
+    onlearn?: () => void;
+  } = $props();
+</script>
+
+<div
+  class={cn(
+    'flex flex-col items-center justify-center py-12 text-center',
+    variant === 'card' && 'rounded-lg border bg-background px-4',
+    className
+  )}
+>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mb-3 text-muted-foreground"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+  <p class="font-semibold">{title}</p>
+  {#if description}
+    <p class="mt-1 max-w-xs text-sm text-muted-foreground">{description}</p>
+  {/if}
+  <div class="mt-4 flex w-full max-w-xs flex-col gap-2 sm:flex-row sm:justify-center">
+    <Button size="sm" onclick={oncreate} class="sm:flex-1">{createLabel}</Button>
+    <Button variant="outline" size="sm" onclick={onlearn} class="sm:flex-1">{learnLabel}</Button>
+  </div>
+</div>

package/src/registry/blocks/empty-section/EmptySection02.svelte

@@ -0,0 +1,93 @@
+<!--
+  EmptySection02.svelte
+  Empty state with action grid: title + description + 2x3 grid of action items
+  (icon + label + description + arrow button).
+  Desktop: 3-col grid. Mobile: single-col list. Flat and card variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface ActionItem {
+    icon?: string;
+    label: string;
+    description?: string;
+    href?: string;
+    onclick?: () => void;
+  }
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    title = 'Products',
+    description = 'Create your first project by selecting a template or starting from scratch.',
+    actions = [
+      { label: 'Create a list', description: 'Organize tasks into simple lists.' },
+      { label: 'Create a gallery', description: 'Showcase items visually and neatly.' },
+      { label: 'Create a calendar', description: 'Plan events with clear schedules.' },
+      { label: 'Create a board', description: 'Manage projects with visual boards.' },
+      { label: 'Create a team', description: 'Collaborate effectively with your team.' },
+      { label: 'Create a timeline', description: 'Track progress with chronological views.' }
+    ] as ActionItem[]
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    description?: string;
+    actions?: ActionItem[];
+  } = $props();
+
+  const iconPaths: Record<string, string> = {
+    list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
+    gallery: 'M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zM4 14a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4z',
+    calendar: 'M3 4h18v18H3V4zM16 2v4M8 2v4M3 10h18',
+    board: 'M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z',
+    team: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
+    timeline: 'M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'
+  };
+
+  function getIconPath(label: string): string {
+    const key = label.toLowerCase();
+    if (key.includes('list')) return iconPaths.list;
+    if (key.includes('gallery')) return iconPaths.gallery;
+    if (key.includes('calendar')) return iconPaths.calendar;
+    if (key.includes('board')) return iconPaths.board;
+    if (key.includes('team')) return iconPaths.team;
+    if (key.includes('timeline')) return iconPaths.timeline;
+    return 'M12 5v14M5 12h14';
+  }
+</script>
+
+<div
+  class={cn(
+    variant === 'card' && 'rounded-lg border bg-background p-4 sm:p-6',
+    className
+  )}
+>
+  <h2 class="font-semibold">{title}</h2>
+  {#if description}
+    <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+  {/if}
+
+  <div class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
+    {#each actions as action}
+      <button
+        type="button"
+        onclick={action.onclick}
+        class="flex items-center gap-3 rounded-lg border bg-background px-3 py-2.5 text-left transition-colors hover:bg-muted/50"
+      >
+        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-muted">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d={getIconPath(action.label)} />
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium">{action.label}</p>
+          {#if action.description}
+            <p class="text-xs text-muted-foreground truncate">{action.description}</p>
+          {/if}
+        </div>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="m9 18 6-6-6-6"/></svg>
+      </button>
+    {/each}
+  </div>
+</div>