@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/rich-text/RichText02.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Section {
+		heading: string;
+		content: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		sections?: Section[];
+	}
+
+	const {
+		class: className,
+		title = 'Documentation',
+		sections = [
+			{
+				heading: 'Introduction',
+				content:
+					'Welcome to our comprehensive guide. This document covers everything you need to get started.'
+			},
+			{
+				heading: 'Features',
+				content:
+					'Discover the powerful features that set our platform apart. Learn what you can achieve with our tools.'
+			},
+			{
+				heading: 'Getting Started',
+				content:
+					'Follow our step-by-step guide to set up your account and start using our platform immediately.'
+			}
+		]
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-6xl">
+		<h1 class="text-3xl font-bold">{title}</h1>
+		<div class="mt-12 grid grid-cols-1 gap-12 sm:grid-cols-[200px_1fr]">
+			<nav class="flex flex-col gap-0">
+				<ul class="space-y-2 text-sm">
+					{#each sections as section}
+						<li>
+							<a
+								href="#{section.heading.toLowerCase().replace(/\s+/g, '-')}"
+								class="text-muted-foreground hover:text-foreground transition-colors"
+							>
+								{section.heading}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</nav>
+
+			<div class="space-y-8">
+				{#each sections as section}
+					<div>
+						<h2
+							id={section.heading.toLowerCase().replace(/\s+/g, '-')}
+							class="text-2xl font-bold mb-4"
+						>
+							{section.heading}
+						</h2>
+						<p class="text-muted-foreground leading-7">{section.content}</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/rich-text/RichText03.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		date?: string;
+		readTime?: string;
+		imageUrl?: string;
+		paragraphs?: string[];
+	}
+
+	const {
+		class: className,
+		title = 'Article Title',
+		date = 'Mar 15, 2024',
+		readTime = '5 min read',
+		imageUrl,
+		paragraphs = [
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+			'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+			'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
+		]
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-2xl">
+		<div class="aspect-[16/6] w-full rounded-xl bg-muted flex items-center justify-center overflow-hidden">
+			{#if imageUrl}
+				<img src={imageUrl} alt={title} class="w-full h-full object-cover" />
+			{:else}
+				<div class="text-muted-foreground">Image placeholder</div>
+			{/if}
+		</div>
+
+		<div class="mt-8">
+			<h1 class="text-3xl font-bold tracking-tight">{title}</h1>
+			<div class="mt-4 flex items-center gap-4 text-sm text-muted-foreground">
+				<span>{date}</span>
+				<span>·</span>
+				<span>{readTime}</span>
+			</div>
+
+			<div class="mt-8 space-y-4 text-base leading-7 text-muted-foreground">
+				{#each paragraphs as paragraph}
+					<p>{paragraph}</p>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/rich-text/RichText04.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		body?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'Stay Updated',
+		body = 'Get the latest insights and updates delivered to your inbox.',
+		ctaLabel = 'Learn more',
+		onCta
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-24 px-4', className)}>
+	<div class="mx-auto max-w-xl text-center">
+		<div class="mb-8 flex justify-center">
+			<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
+				<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+					<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+					<polyline points="13 2 13 9 20 9" />
+				</svg>
+			</div>
+		</div>
+
+		<h2 class="text-2xl font-bold">{title}</h2>
+		<p class="mt-4 text-muted-foreground">{body}</p>
+
+		<div class="mt-8">
+			<Button onclick={onCta}>{ctaLabel}</Button>
+		</div>
+
+		<p class="mt-8 text-xs text-muted-foreground">
+			We respect your privacy. Unsubscribe at any time.
+		</p>
+	</div>
+</section>

package/src/registry/blocks/rich-text/RichText05.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		breadcrumbs?: string[];
+		prevLabel?: string;
+		nextLabel?: string;
+		onPrev?: () => void;
+		onNext?: () => void;
+	}
+
+	const {
+		class: className,
+		title = 'Getting Started',
+		breadcrumbs = ['Home', 'Docs', 'Getting Started'],
+		prevLabel = 'Previous',
+		nextLabel = 'Next',
+		onPrev,
+		onNext
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-2xl">
+		<nav class="flex text-sm text-muted-foreground gap-2 items-center">
+			{#each breadcrumbs as crumb, i}
+				<span>{crumb}</span>
+				{#if i < breadcrumbs.length - 1}
+					<span>/</span>
+				{/if}
+			{/each}
+		</nav>
+
+		<h1 class="mt-8 text-3xl font-bold tracking-tight">{title}</h1>
+		<p class="mt-4 text-muted-foreground">This is the main content area. Add your documentation content here.</p>
+
+		<div class="mt-8 space-y-4 text-base leading-7 text-muted-foreground">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua.
+			</p>
+			<p>
+				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat.
+			</p>
+		</div>
+
+		<div class="mt-12 flex justify-between border-t pt-6">
+			<Button variant="outline" onclick={onPrev}>← {prevLabel}</Button>
+			<Button variant="outline" onclick={onNext}>{nextLabel} →</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/rich-text/index.ts

@@ -0,0 +1,5 @@
+export { default as RichText01 } from './RichText01.svelte';
+export { default as RichText02 } from './RichText02.svelte';
+export { default as RichText03 } from './RichText03.svelte';
+export { default as RichText04 } from './RichText04.svelte';
+export { default as RichText05 } from './RichText05.svelte';

package/src/registry/blocks/section/Section01.svelte

@@ -0,0 +1,38 @@
+<!--
+  Section01.svelte
+  Layout wrapper: N stacked content slots. Supports flat (no border) and card (white bg + border) variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    slots = 3,
+    children
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    slots?: number;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div
+  class={cn(
+    'flex flex-col gap-4',
+    variant === 'card' && 'rounded-lg border bg-background p-4',
+    className
+  )}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each Array(slots) as _}
+      <div class="flex min-h-16 items-center justify-center rounded-lg border border-dashed bg-muted/30 text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/each}
+  {/if}
+</div>

package/src/registry/blocks/section/Section02.svelte

@@ -0,0 +1,90 @@
+<!--
+  Section02.svelte
+  Full section: SectionHeader02 (title + badge + description + search + actions) +
+  one content slot + SectionFooter02 (info text + View/Edit/Save).
+  Supports flat and card variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    title = 'Storage',
+    badge = 'Status',
+    description = 'Read and write directly to databases and stores from your projects.',
+    searchPlaceholder = 'Search',
+    footerText = 'This feature is available in the Pro Plan for additional $10 per month.',
+    onview = () => {},
+    onedit = () => {},
+    oncreate = () => {},
+    onsave = () => {},
+    children
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    badge?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    footerText?: string;
+    onview?: () => void;
+    onedit?: () => void;
+    oncreate?: () => void;
+    onsave?: () => void;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn(variant === 'card' && 'rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class={cn('flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between', variant === 'card' ? 'p-4' : 'py-4')}>
+    <div>
+      <div class="flex items-center gap-2">
+        <h2 class="text-lg font-semibold">{title}</h2>
+        {#if badge}
+          <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium">{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <div class="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
+      <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+        <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="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input type="text" placeholder={searchPlaceholder} class="w-32 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline" size="sm" onclick={onview}>View</Button>
+        <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+        <Button size="sm" onclick={oncreate}>Create new</Button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Content slot -->
+  <div class={cn(variant === 'card' ? 'border-t px-4 py-4' : 'py-4')}>
+    {#if children}
+      {@render children()}
+    {:else}
+      <div class="flex min-h-20 items-center justify-center rounded-lg border border-dashed bg-muted/30 text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+
+  <!-- Footer -->
+  <div class={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', variant === 'card' ? 'border-t px-4 py-3' : 'py-3')}>
+    {#if footerText}
+      <p class="text-sm text-muted-foreground">{footerText}</p>
+    {/if}
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={onsave}>Save</Button>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/section/Section03.svelte

@@ -0,0 +1,95 @@
+<!--
+  Section03.svelte
+  Full section with empty-state content area: SectionHeader02 + empty state
+  (icon + title + description + Create new / Learn more) + SectionFooter02.
+  Supports 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 = 'Storage',
+    badge = 'Status',
+    description = 'Read and write directly to databases and stores from your projects.',
+    searchPlaceholder = 'Search',
+    emptyTitle = 'No databases added',
+    emptyDescription = 'Read and write directly to databases and stores from your projects.',
+    footerText = 'This feature is available in the Pro Plan for additional $10 per month.',
+    onview = () => {},
+    onedit = () => {},
+    oncreate = () => {},
+    onlearnmore = () => {},
+    onsave = () => {}
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    badge?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    footerText?: string;
+    onview?: () => void;
+    onedit?: () => void;
+    oncreate?: () => void;
+    onlearnmore?: () => void;
+    onsave?: () => void;
+  } = $props();
+</script>
+
+<div class={cn(variant === 'card' && 'rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class={cn('flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between', variant === 'card' ? 'p-4' : 'py-4')}>
+    <div>
+      <div class="flex items-center gap-2">
+        <h2 class="text-lg font-semibold">{title}</h2>
+        {#if badge}
+          <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium">{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <div class="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
+      <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+        <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="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input type="text" placeholder={searchPlaceholder} class="w-32 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline" size="sm" onclick={onview}>View</Button>
+        <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+        <Button size="sm" onclick={oncreate}>Create new</Button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Empty state content -->
+  <div class={cn('flex flex-col items-center justify-center py-12 text-center', variant === 'card' ? 'border-t px-4' : '')}>
+    <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">{emptyTitle}</p>
+    {#if emptyDescription}
+      <p class="mt-1 max-w-xs text-sm text-muted-foreground">{emptyDescription}</p>
+    {/if}
+    <div class="mt-4 flex items-center gap-2">
+      <Button size="sm" onclick={oncreate}>Create new</Button>
+      <Button variant="outline" size="sm" onclick={onlearnmore}>Learn more</Button>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <div class={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', variant === 'card' ? 'border-t px-4 py-3' : 'py-3')}>
+    {#if footerText}
+      <p class="text-sm text-muted-foreground">{footerText}</p>
+    {/if}
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={onsave}>Save</Button>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/section/Section04.svelte

@@ -0,0 +1,117 @@
+<!--
+  Section04.svelte
+  Full section with table: SectionHeader (title + description + search + Filters/New) +
+  table with head + rows + SectionFooter (Previous / count / Next pagination).
+  Supports flat and card variants.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface Column { key: string; label: string; }
+  interface Row { [key: string]: string; }
+
+  let {
+    class: className = '',
+    variant = 'flat' as 'flat' | 'card',
+    title = 'Table name',
+    description = 'Read and write directly to databases and stores from your projects.',
+    searchPlaceholder = 'Search',
+    columns = [
+      { key: 'col1', label: 'Head Text' },
+      { key: 'col2', label: 'Head Text' },
+      { key: 'col3', label: 'Head Text' },
+      { key: 'col4', label: 'Head Text' },
+      { key: 'col5', label: 'Head Text' }
+    ] as Column[],
+    rows = Array(5).fill(null).map(() =>
+      Object.fromEntries([['col1','Table Cell Text'],['col2','Table Cell Text'],['col3','Table Cell Text'],['col4','Table Cell Text'],['col5','Table Cell Text']])
+    ) as Row[],
+    page = 1,
+    pageSize = 7,
+    total = 120,
+    onfilter = () => {},
+    onnew = () => {},
+    onprev = () => {},
+    onnext = () => {}
+  }: {
+    class?: string;
+    variant?: 'flat' | 'card';
+    title?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    columns?: Column[];
+    rows?: Row[];
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onfilter?: () => void;
+    onnew?: () => void;
+    onprev?: () => void;
+    onnext?: () => void;
+  } = $props();
+
+  const start = $derived((page - 1) * pageSize + 1);
+  const end = $derived(Math.min(page * pageSize, total));
+</script>
+
+<div class={cn(variant === 'card' && 'rounded-lg border bg-background', className)}>
+  <!-- Header -->
+  <div class={cn('flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between', variant === 'card' ? 'p-4' : 'py-4')}>
+    <div>
+      <h2 class="text-lg font-semibold">{title}</h2>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+        <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="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input type="text" placeholder={searchPlaceholder} class="w-32 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+      </div>
+      <Button variant="outline" size="sm" onclick={onfilter} class="gap-1.5">
+        <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"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
+        Filters
+      </Button>
+      <Button size="sm" onclick={onnew} class="gap-1.5">
+        <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"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        New
+      </Button>
+    </div>
+  </div>
+
+  <!-- Table -->
+  <div class={cn('overflow-x-auto', variant === 'card' ? 'border-t' : '')}>
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-b bg-muted/30">
+          {#each columns as col}
+            <th class="px-4 py-2.5 text-left font-medium text-muted-foreground">{col.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row, i}
+          <tr class={cn('border-b last:border-0', i % 2 === 0 ? '' : 'bg-muted/20')}>
+            {#each columns as col}
+              <td class="px-4 py-2.5">{row[col.key] ?? ''}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Pagination footer -->
+  <div class={cn('flex items-center justify-between gap-4', variant === 'card' ? 'border-t px-4 py-3' : 'py-3')}>
+    <Button variant="outline" size="sm" onclick={onprev} class="gap-1">
+      <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="m15 18-6-6 6-6"/></svg>
+      <span class="hidden sm:inline">Previous</span>
+    </Button>
+    <span class="text-sm text-muted-foreground">{start}–{end} of {total}</span>
+    <Button variant="outline" size="sm" onclick={onnext} class="gap-1">
+      <span class="hidden sm:inline">Next</span>
+      <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="m9 18 6-6-6-6"/></svg>
+    </Button>
+  </div>
+</div>

package/src/registry/blocks/section/index.ts

@@ -0,0 +1,4 @@
+export { default as Section01 } from './Section01.svelte';
+export { default as Section02 } from './Section02.svelte';
+export { default as Section03 } from './Section03.svelte';
+export { default as Section04 } from './Section04.svelte';

package/src/registry/blocks/section-footer/SectionFooter01.svelte

@@ -0,0 +1,39 @@
+<!--
+  SectionFooter01.svelte
+  Minimal two-slot horizontal layout: wide left slot + narrow right slot.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    left,
+    right
+  }: {
+    class?: string;
+    left?: Snippet;
+    right?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('flex items-center gap-4 py-4', className)}>
+  <div class="flex-1">
+    {#if left}
+      {@render left()}
+    {:else}
+      <div class="flex min-h-10 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+  <div class="w-44 shrink-0">
+    {#if right}
+      {@render right()}
+    {:else}
+      <div class="flex min-h-10 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+</div>

package/src/registry/blocks/section-footer/SectionFooter02.svelte

@@ -0,0 +1,33 @@
+<!--
+  SectionFooter02.svelte
+  Description/info text left. View/Edit/Save action buttons right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    description = 'This feature is available in the Pro Plan for additional $10 per month.',
+    onview = () => {},
+    onedit = () => {},
+    onsave = () => {}
+  }: {
+    class?: string;
+    description?: string;
+    onview?: () => void;
+    onedit?: () => void;
+    onsave?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between', className)}>
+  {#if description}
+    <p class="text-sm text-muted-foreground">{description}</p>
+  {/if}
+  <div class="flex shrink-0 items-center gap-2">
+    <Button variant="outline" size="sm" onclick={onview}>View</Button>
+    <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+    <Button size="sm" onclick={onsave}>Save</Button>
+  </div>
+</div>