@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/calendar/CalendarBlock31.svelte

@@ -0,0 +1,161 @@
+<!--
+  CalendarBlock31.svelte
+  Bottom-sheet / drawer calendar — dark overlay behind a white card that slides up
+  from the bottom, with a drag handle and a single-month range picker.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    open = false,
+    startDate = null,
+    endDate = null,
+    title = 'Select Dates',
+    onclose = () => {}
+  }: {
+    class?: string;
+    open?: boolean;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    title?: string;
+    onclose?: () => void;
+  } = $props();
+
+  const today = new Date();
+  let viewYear = $state(today.getFullYear());
+  let viewMonth = $state(today.getMonth());
+
+  const DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+  const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+
+  function getDim(y: number, m: number) { return new Date(y, m + 1, 0).getDate(); }
+  function getCalDays(y: number, m: number) {
+    const dim = getDim(y, m), fd = new Date(y, m, 1).getDay(), prev = getDim(y, m - 1);
+    const days: Array<{ day: number; cur: boolean }> = [];
+    for (let i = fd - 1; i >= 0; i--) days.push({ day: prev - i, cur: false });
+    for (let i = 1; i <= dim; i++) days.push({ day: i, cur: true });
+    while (days.length < 42) days.push({ day: days.length - dim - fd + 2, cur: false });
+    return days;
+  }
+
+  function inRange(d: number) {
+    const n = new Date(viewYear, viewMonth, d).getTime();
+    const s = startDate?.getTime(), e = endDate?.getTime();
+    if (!s || !e) return false;
+    const [lo, hi] = s <= e ? [s, e] : [e, s];
+    return n >= lo && n <= hi;
+  }
+  function isEdge(d: number) {
+    const n = new Date(viewYear, viewMonth, d).getTime();
+    return n === startDate?.getTime() || n === endDate?.getTime();
+  }
+
+  function handleClick(day: number) {
+    const clicked = new Date(viewYear, viewMonth, day);
+    if (!startDate || endDate) { startDate = clicked; endDate = null; }
+    else endDate = clicked;
+  }
+
+  function formatRange() {
+    if (!startDate && !endDate) return 'No dates selected';
+    const fmt = (d: Date) => d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    if (startDate && !endDate) return fmt(startDate);
+    const [a, b] = (startDate! <= endDate!) ? [startDate!, endDate!] : [endDate!, startDate!];
+    return `${fmt(a)} – ${fmt(b)}`;
+  }
+
+  function prev() { if (viewMonth === 0) { viewMonth = 11; viewYear--; } else viewMonth--; }
+  function next() { if (viewMonth === 11) { viewMonth = 0; viewYear++; } else viewMonth++; }
+  let calDays = $derived(getCalDays(viewYear, viewMonth));
+</script>
+
+<!-- This component renders as a bottom-sheet overlay -->
+<div class={cn('relative', className)}>
+  <!-- Trigger button (preview) -->
+  <button
+    type="button"
+    onclick={() => (open = true)}
+    class="flex w-full items-center justify-between rounded-md border px-4 py-3 text-sm hover:bg-muted"
+  >
+    <div class="flex items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><rect width="18" height="18" x="3" y="4" rx="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
+      <span class={startDate ? '' : 'text-muted-foreground'}>{formatRange()}</span>
+    </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="text-muted-foreground"><path d="m18 15-6-6-6 6"/></svg>
+  </button>
+
+  <!-- Bottom sheet overlay -->
+  {#if open}
+    <!-- Dark backdrop -->
+    <div
+      class="fixed inset-0 z-40 bg-black/50"
+      onclick={() => { open = false; onclose(); }}
+      role="presentation"
+    ></div>
+
+    <!-- Sheet -->
+    <div class="fixed bottom-0 left-0 right-0 z-50 flex flex-col rounded-t-2xl bg-background shadow-xl">
+      <!-- Drag handle -->
+      <div class="flex justify-center pt-3 pb-1">
+        <div class="h-1 w-10 rounded-full bg-muted-foreground/30"></div>
+      </div>
+
+      <div class="p-5">
+        <!-- Header -->
+        <div class="mb-4 flex items-center justify-between">
+          <h2 class="text-base font-semibold">{title}</h2>
+          <button
+            type="button"
+            onclick={() => { open = false; onclose(); }}
+            class="flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted"
+          >
+            <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        </div>
+
+        <!-- Month nav -->
+        <div class="mb-3 flex items-center justify-between">
+          <button type="button" onclick={prev} class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-muted">
+            <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="m15 18-6-6 6-6"/></svg>
+          </button>
+          <span class="text-sm font-medium">{MONTHS[viewMonth]} {viewYear}</span>
+          <button type="button" onclick={next} class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-muted">
+            <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="m9 18 6-6-6-6"/></svg>
+          </button>
+        </div>
+
+        <!-- Calendar grid -->
+        <div class="grid grid-cols-7">
+          {#each DAYS as d}
+            <div class="flex h-10 items-center justify-center text-xs font-medium text-muted-foreground">{d}</div>
+          {/each}
+          {#each calDays as { day, cur }}
+            <button
+              type="button"
+              class={cn(
+                'flex h-10 items-center justify-center text-sm transition-colors',
+                !cur && 'text-muted-foreground/40 pointer-events-none',
+                cur && inRange(day) && !isEdge(day) && 'bg-muted',
+                cur && isEdge(day) && 'rounded-full bg-primary text-primary-foreground',
+                cur && !inRange(day) && 'rounded-full hover:bg-muted'
+              )}
+              onclick={() => cur && handleClick(day)}
+              disabled={!cur}
+            >{day}</button>
+          {/each}
+        </div>
+
+        <!-- Range summary + actions -->
+        <div class="mt-4 flex items-center justify-between border-t pt-4">
+          <span class="text-sm text-muted-foreground">{formatRange()}</span>
+          <button
+            type="button"
+            onclick={() => { open = false; onclose(); }}
+            class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+          >Apply</button>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

package/src/registry/blocks/calendar/CalendarBlock32.svelte

@@ -0,0 +1,154 @@
+<!--
+  CalendarBlock32.svelte
+  Side-by-side appointment booking — single month calendar on the left,
+  scrollable 15-min time slot list on the right, with a booking confirmation
+  summary and a Continue button at the bottom.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    selectedDate = null,
+    selectedSlot = null as string | null,
+    title = 'Book a time',
+    subtitle = 'Select a date and time slot',
+    slots = generateSlots(),
+    oncontinue = (_date: Date | null, _slot: string | null) => {}
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+    selectedSlot?: string | null;
+    title?: string;
+    subtitle?: string;
+    slots?: string[];
+    oncontinue?: (date: Date | null, slot: string | null) => void;
+  } = $props();
+
+  function generateSlots(): string[] {
+    const result: string[] = [];
+    for (let h = 9; h < 18; h++) {
+      for (let m = 0; m < 60; m += 15) {
+        result.push(`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`);
+      }
+    }
+    return result;
+  }
+
+  const today = new Date();
+  let month = $state(selectedDate?.getMonth() ?? today.getMonth());
+  let year = $state(selectedDate?.getFullYear() ?? today.getFullYear());
+
+  const DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+  const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+
+  function getDim(y: number, m: number) { return new Date(y, m + 1, 0).getDate(); }
+  function getCalDays(y: number, m: number) {
+    const dim = getDim(y, m), fd = new Date(y, m, 1).getDay(), prev = getDim(y, m - 1);
+    const days: Array<{ day: number; cur: boolean }> = [];
+    for (let i = fd - 1; i >= 0; i--) days.push({ day: prev - i, cur: false });
+    for (let i = 1; i <= dim; i++) days.push({ day: i, cur: true });
+    while (days.length < 42) days.push({ day: days.length - dim - fd + 2, cur: false });
+    return days;
+  }
+
+  function isSelected(d: number) { return selectedDate?.getFullYear() === year && selectedDate?.getMonth() === month && selectedDate?.getDate() === d; }
+  function isToday(d: number) { return today.getFullYear() === year && today.getMonth() === month && today.getDate() === d; }
+  function isPast(d: number) {
+    const t = new Date(year, month, d);
+    t.setHours(23,59,59,999);
+    return t < today;
+  }
+
+  function formatBooking() {
+    if (!selectedDate || !selectedSlot) return null;
+    return `${selectedDate.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })} at ${selectedSlot}`;
+  }
+
+  function prev() { if (month === 0) { month = 11; year--; } else month--; }
+  function next() { if (month === 11) { month = 0; year++; } else month++; }
+  let calDays = $derived(getCalDays(year, month));
+  let booking = $derived(formatBooking());
+</script>
+
+<div class={cn('flex flex-col gap-4 rounded-xl border bg-background p-5', className)}>
+  <!-- Header -->
+  <div>
+    <h2 class="text-base font-semibold">{title}</h2>
+    <p class="text-sm text-muted-foreground">{subtitle}</p>
+  </div>
+
+  <!-- Calendar + time slots side by side -->
+  <div class="flex gap-4">
+    <!-- Calendar -->
+    <div class="flex flex-col">
+      <div class="mb-3 flex items-center justify-between">
+        <button type="button" onclick={prev} class="flex h-7 w-7 items-center justify-center rounded hover:bg-muted">
+          <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="m15 18-6-6 6-6"/></svg>
+        </button>
+        <span class="text-xs font-medium">{MONTHS[month]} {year}</span>
+        <button type="button" onclick={next} class="flex h-7 w-7 items-center justify-center rounded hover:bg-muted">
+          <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="m9 18 6-6-6-6"/></svg>
+        </button>
+      </div>
+
+      <div class="grid grid-cols-7">
+        {#each DAYS as d}
+          <div class="flex h-7 w-7 items-center justify-center text-[10px] font-medium text-muted-foreground">{d}</div>
+        {/each}
+        {#each calDays as { day, cur }}
+          <button
+            type="button"
+            class={cn(
+              'flex h-7 w-7 items-center justify-center rounded-full text-xs transition-colors',
+              (!cur || isPast(day)) && 'text-muted-foreground/40 pointer-events-none',
+              cur && !isPast(day) && 'hover:bg-muted',
+              cur && !isPast(day) && isToday(day) && !isSelected(day) && 'border border-primary text-primary',
+              cur && !isPast(day) && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+            )}
+            onclick={() => { if (cur && !isPast(day)) { selectedDate = new Date(year, month, day); selectedSlot = null; } }}
+            disabled={!cur || isPast(day)}
+          >{day}</button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Time slots -->
+    <div class="flex flex-col gap-1 overflow-y-auto" style="max-height: 260px; min-width: 90px;">
+      <p class="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+        {selectedDate ? selectedDate.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) : 'Select a date'}
+      </p>
+      {#if selectedDate}
+        {#each slots as slot}
+          <button
+            type="button"
+            onclick={() => (selectedSlot = slot)}
+            class={cn(
+              'rounded-md border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-muted',
+              selectedSlot === slot && 'border-primary bg-primary text-primary-foreground hover:bg-primary'
+            )}
+          >{slot}</button>
+        {/each}
+      {:else}
+        <p class="text-xs text-muted-foreground">Pick a date first</p>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Booking summary + CTA -->
+  <div class="flex items-center justify-between border-t pt-4">
+    <div class="text-sm">
+      {#if booking}
+        <p class="font-medium">{booking}</p>
+        <p class="text-xs text-muted-foreground">Tap Continue to confirm</p>
+      {:else}
+        <p class="text-muted-foreground">No time selected yet</p>
+      {/if}
+    </div>
+    <Button
+      onclick={() => oncontinue(selectedDate, selectedSlot)}
+      disabled={!selectedDate || !selectedSlot}
+    >Continue</Button>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+export { default as CalendarBlock01 } from './CalendarBlock01.svelte';
+export { default as CalendarBlock02 } from './CalendarBlock02.svelte';
+export { default as CalendarBlock03 } from './CalendarBlock03.svelte';
+export { default as CalendarBlock04 } from './CalendarBlock04.svelte';
+export { default as CalendarBlock05 } from './CalendarBlock05.svelte';
+export { default as CalendarBlock06 } from './CalendarBlock06.svelte';
+export { default as CalendarBlock07 } from './CalendarBlock07.svelte';
+export { default as CalendarBlock08 } from './CalendarBlock08.svelte';
+export { default as CalendarBlock09 } from './CalendarBlock09.svelte';
+export { default as CalendarBlock10 } from './CalendarBlock10.svelte';
+export { default as CalendarBlock11 } from './CalendarBlock11.svelte';
+export { default as CalendarBlock12 } from './CalendarBlock12.svelte';
+export { default as CalendarBlock13 } from './CalendarBlock13.svelte';
+export { default as CalendarBlock14 } from './CalendarBlock14.svelte';
+export { default as CalendarBlock15 } from './CalendarBlock15.svelte';
+export { default as CalendarBlock16 } from './CalendarBlock16.svelte';
+export { default as CalendarBlock17 } from './CalendarBlock17.svelte';
+export { default as CalendarBlock18 } from './CalendarBlock18.svelte';
+export { default as CalendarBlock19 } from './CalendarBlock19.svelte';
+export { default as CalendarBlock20 } from './CalendarBlock20.svelte';
+export { default as CalendarBlock21 } from './CalendarBlock21.svelte';
+export { default as CalendarBlock22 } from './CalendarBlock22.svelte';
+export { default as CalendarBlock23 } from './CalendarBlock23.svelte';
+export { default as CalendarBlock24 } from './CalendarBlock24.svelte';
+export { default as CalendarBlock25 } from './CalendarBlock25.svelte';
+export { default as CalendarBlock26 } from './CalendarBlock26.svelte';
+export { default as CalendarBlock27 } from './CalendarBlock27.svelte';
+export { default as CalendarBlock28 } from './CalendarBlock28.svelte';
+export { default as CalendarBlock29 } from './CalendarBlock29.svelte';
+export { default as CalendarBlock30 } from './CalendarBlock30.svelte';
+export { default as CalendarBlock31 } from './CalendarBlock31.svelte';
+export { default as CalendarBlock32 } from './CalendarBlock32.svelte';

package/src/registry/blocks/card/Card01.svelte

@@ -0,0 +1,69 @@
+<!--
+  Card01.svelte
+  Person card: avatar (circle) + name + badge + description + Email/Call action buttons.
+  Desktop: horizontal layout. Mobile: stacked.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    name = 'Title Text',
+    badge = 'Admin',
+    description = 'This is a card description.',
+    avatar = '',
+    onemail = () => {},
+    oncall = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    badge?: string;
+    description?: string;
+    avatar?: string;
+    onemail?: () => void;
+    oncall?: () => void;
+  } = $props();
+
+  function initials(n: string) {
+    return n.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background p-4', className)}>
+  <!-- Header row -->
+  <div class="flex items-start gap-3">
+    <div class="relative h-10 w-10 shrink-0 overflow-hidden rounded-full">
+      {#if avatar}
+        <img src={avatar} alt={name} class="h-full w-full object-cover" />
+      {:else}
+        <div class="flex h-full w-full items-center justify-center bg-muted text-xs font-semibold">
+          {initials(name)}
+        </div>
+      {/if}
+    </div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        <p class="font-semibold truncate">{name}</p>
+        {#if badge}
+          <span class="shrink-0 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-semibold text-background">{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="mt-4 flex items-center gap-0 divide-x rounded-md border">
+    <Button variant="ghost" size="sm" onclick={onemail} class="flex-1 gap-1.5 rounded-r-none">
+      <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"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+      Email
+    </Button>
+    <Button variant="ghost" size="sm" onclick={oncall} class="flex-1 gap-1.5 rounded-l-none">
+      <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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+      Call
+    </Button>
+  </div>
+</div>

package/src/registry/blocks/card/Card02.svelte

@@ -0,0 +1,50 @@
+<!--
+  Card02.svelte
+  Person card: avatar + name + badge + description. No action buttons.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    name = 'Title Text',
+    badge = 'Admin',
+    description = 'This is a card description.',
+    avatar = ''
+  }: {
+    class?: string;
+    name?: string;
+    badge?: string;
+    description?: string;
+    avatar?: string;
+  } = $props();
+
+  function initials(n: string) {
+    return n.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background p-4', className)}>
+  <div class="flex items-start gap-3">
+    <div class="relative h-10 w-10 shrink-0 overflow-hidden rounded-full">
+      {#if avatar}
+        <img src={avatar} alt={name} class="h-full w-full object-cover" />
+      {:else}
+        <div class="flex h-full w-full items-center justify-center bg-muted text-xs font-semibold">
+          {initials(name)}
+        </div>
+      {/if}
+    </div>
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        <p class="font-semibold truncate">{name}</p>
+        {#if badge}
+          <span class="shrink-0 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-semibold text-background">{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+  </div>
+</div>

package/src/registry/blocks/card/Card03.svelte

@@ -0,0 +1,60 @@
+<!--
+  Card03.svelte
+  Person card: centered layout — large rounded-xl avatar at top, name + description centered,
+  Email/Call buttons at bottom.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    name = 'Title Text',
+    description = 'This is a card description.',
+    avatar = '',
+    onemail = () => {},
+    oncall = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    description?: string;
+    avatar?: string;
+    onemail?: () => void;
+    oncall?: () => void;
+  } = $props();
+
+  function initials(n: string) {
+    return n.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background p-6', className)}>
+  <!-- Centered avatar + info -->
+  <div class="flex flex-col items-center text-center">
+    <div class="mb-3 h-16 w-16 overflow-hidden rounded-xl">
+      {#if avatar}
+        <img src={avatar} alt={name} class="h-full w-full object-cover" />
+      {:else}
+        <div class="flex h-full w-full items-center justify-center bg-muted text-sm font-semibold">
+          {initials(name)}
+        </div>
+      {/if}
+    </div>
+    <p class="font-bold">{name}</p>
+    {#if description}
+      <p class="mt-1 text-sm text-muted-foreground">{description}</p>
+    {/if}
+  </div>
+
+  <!-- Actions -->
+  <div class="mt-4 flex items-center gap-0 divide-x rounded-md border">
+    <Button variant="ghost" size="sm" onclick={onemail} class="flex-1 gap-1.5 rounded-r-none">
+      <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"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+      Email
+    </Button>
+    <Button variant="ghost" size="sm" onclick={oncall} class="flex-1 gap-1.5 rounded-l-none">
+      <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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+      Call
+    </Button>
+  </div>
+</div>

package/src/registry/blocks/card/Card04.svelte

@@ -0,0 +1,89 @@
+<!--
+  Card04.svelte
+  Project card: status badge + title + avatar stack top-right + metadata row
+  (category, location, assignee) + status/stage footer + updated timestamp.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Assignee { name: string; avatar?: string; }
+
+  let {
+    class: className = '',
+    status = 'In progress',
+    title = 'Summer Camp',
+    category = 'Camp',
+    location = 'London, Great Britain',
+    assignee = 'Alex Johnson',
+    stage = 'Pre-Production (2/4)',
+    updatedAt = 'Updated 4h ago',
+    assignees = [] as Assignee[]
+  }: {
+    class?: string;
+    status?: string;
+    title?: string;
+    category?: string;
+    location?: string;
+    assignee?: string;
+    stage?: string;
+    updatedAt?: string;
+    assignees?: Assignee[];
+  } = $props();
+
+  function initials(n: string) {
+    return n.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background p-4', className)}>
+  <!-- Top row: status + avatar stack -->
+  <div class="flex items-start justify-between gap-2">
+    <span class="inline-flex items-center rounded-full bg-foreground px-2.5 py-0.5 text-xs font-medium text-background">{status}</span>
+    <!-- Avatar stack -->
+    {#if assignees.length}
+      <div class="flex -space-x-2">
+        {#each assignees.slice(0, 5) as a}
+          <div class="h-6 w-6 overflow-hidden rounded-full border-2 border-background">
+            {#if a.avatar}
+              <img src={a.avatar} alt={a.name} class="h-full w-full object-cover" />
+            {:else}
+              <div class="flex h-full w-full items-center justify-center bg-muted text-[8px] font-semibold">{initials(a.name)}</div>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+
+  <!-- Title -->
+  <p class="mt-2 font-bold">{title}</p>
+
+  <!-- Metadata row -->
+  <div class="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+    {#if category}
+      <span class="flex items-center gap-1">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z"/></svg>
+        {category}
+      </span>
+    {/if}
+    {#if location}
+      <span class="flex items-center gap-1">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
+        {location}
+      </span>
+    {/if}
+    {#if assignee}
+      <span class="flex items-center gap-1">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        {assignee}
+      </span>
+    {/if}
+  </div>
+
+  <!-- Footer -->
+  <div class="mt-3 flex items-center gap-2 border-t pt-3 text-xs text-muted-foreground">
+    {#if stage}<span class="font-medium text-foreground">{stage}</span>{/if}
+    {#if stage && updatedAt}<span>|</span>{/if}
+    {#if updatedAt}<span>{updatedAt}</span>{/if}
+  </div>
+</div>