@xbg.solutions/create-frontend 1.1.1 → 1.2.0

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

@@ -0,0 +1,163 @@
+<!--
+  CalendarBlock26.svelte
+  "Web Analytics" card with a bar chart and a date-range picker button trigger that
+  opens a dual-month calendar popover.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    title = 'Web Analytics',
+    startDate = null,
+    endDate = null,
+    chartData = [
+      { label: 'Jan', value: 40 },
+      { label: 'Feb', value: 65 },
+      { label: 'Mar', value: 50 },
+      { label: 'Apr', value: 80 },
+      { label: 'May', value: 55 },
+      { label: 'Jun', value: 90 },
+      { label: 'Jul', value: 70 },
+      { label: 'Aug', value: 45 },
+      { label: 'Sep', value: 75 },
+      { label: 'Oct', value: 60 },
+      { label: 'Nov', value: 85 },
+      { label: 'Dec', value: 95 }
+    ]
+  }: {
+    class?: string;
+    title?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    chartData?: Array<{ label: string; value: number }>;
+  } = $props();
+
+  const today = new Date();
+  let open = $state(false);
+  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'];
+
+  const maxValue = $derived(Math.max(...chartData.map(d => d.value)));
+
+  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(y: number, m: number, d: number) {
+    const n = new Date(y, m, d).getTime(), 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(y: number, m: number, d: number) {
+    const n = new Date(y, m, d).getTime();
+    return n === startDate?.getTime() || n === endDate?.getTime();
+  }
+
+  function handleClick(y: number, m: number, d: number) {
+    const clicked = new Date(y, m, d);
+    if (!startDate || endDate) { startDate = clicked; endDate = null; }
+    else { endDate = clicked; open = false; }
+  }
+
+  function formatShort(d: Date) {
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  }
+
+  function rangeLabel() {
+    if (!startDate) return 'Select date range';
+    if (!endDate) return formatShort(startDate);
+    const [a, b] = startDate <= endDate ? [startDate, endDate] : [endDate, startDate];
+    return `${formatShort(a)} – ${formatShort(b)}`;
+  }
+
+  function prev() { if (viewMonth === 0) { viewMonth = 11; viewYear--; } else viewMonth--; }
+  function next() { if (viewMonth === 11) { viewMonth = 0; viewYear++; } else viewMonth++; }
+
+  let m2 = $derived(viewMonth === 11 ? 0 : viewMonth + 1);
+  let y2 = $derived(viewMonth === 11 ? viewYear + 1 : viewYear);
+  let leftDays = $derived(getCalDays(viewYear, viewMonth));
+  let rightDays = $derived(getCalDays(y2, m2));
+</script>
+
+<div class={cn('flex flex-col gap-4 rounded-xl border bg-background p-5 shadow-sm', className)}>
+  <!-- Card header -->
+  <div class="flex items-center justify-between">
+    <h2 class="text-base font-semibold">{title}</h2>
+    <!-- Date range button -->
+    <div class="relative">
+      <button
+        type="button"
+        onclick={() => (open = !open)}
+        class="flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-muted"
+      >
+        <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"><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>
+        {rangeLabel()}
+        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+
+      {#if open}
+        <div class="absolute right-0 top-full z-20 mt-1 rounded-md border bg-background p-4 shadow-lg">
+          <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[viewMonth]} {viewYear} – {MONTHS[m2]} {y2}</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="flex gap-6">
+            {#each [[viewYear,viewMonth,leftDays],[y2,m2,rightDays]] as [y,m,days]}
+              <div>
+                <h3 class="mb-1 text-center text-xs font-medium text-muted-foreground">{MONTHS[m as number]} {y}</h3>
+                <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 (days as Array<{day:number;cur:boolean}>) as { day, cur }}
+                    <button
+                      type="button"
+                      class={cn(
+                        'flex h-7 w-7 items-center justify-center text-xs transition-colors',
+                        !cur && 'text-muted-foreground/40 pointer-events-none',
+                        cur && inRange(y as number,m as number,day) && !isEdge(y as number,m as number,day) && 'bg-muted',
+                        cur && isEdge(y as number,m as number,day) && 'rounded-full bg-primary text-primary-foreground',
+                        cur && !inRange(y as number,m as number,day) && 'rounded-full hover:bg-muted'
+                      )}
+                      onclick={() => cur && handleClick(y as number,m as number,day)}
+                      disabled={!cur}
+                    >{day}</button>
+                  {/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Bar chart -->
+  <div class="flex items-end gap-1" style="height: 80px">
+    {#each chartData as { label, value }}
+      <div class="flex flex-1 flex-col items-center gap-1">
+        <div
+          class="w-full rounded-sm bg-primary/80 transition-all hover:bg-primary"
+          style="height: {(value / maxValue) * 64}px"
+        ></div>
+        <span class="text-[9px] text-muted-foreground">{label}</span>
+      </div>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,112 @@
+<!--
+  CalendarBlock27.svelte
+  "Subscription Date" — a date input with a calendar icon button that toggles
+  an inline single-month calendar popover.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    label = 'Subscription Date',
+    selectedDate = null,
+    placeholder = 'Pick a date'
+  }: {
+    class?: string;
+    label?: string;
+    selectedDate?: Date | null;
+    placeholder?: string;
+  } = $props();
+
+  const today = new Date();
+  let open = $state(false);
+  let viewYear = $state(selectedDate?.getFullYear() ?? today.getFullYear());
+  let viewMonth = $state(selectedDate?.getMonth() ?? 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 isSelected(d: number) { return selectedDate?.getFullYear() === viewYear && selectedDate?.getMonth() === viewMonth && selectedDate?.getDate() === d; }
+  function isToday(d: number) { return today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d; }
+
+  function formatDate(d: Date) {
+    return d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+  }
+
+  function selectDay(day: number) {
+    selectedDate = new Date(viewYear, viewMonth, day);
+    open = false;
+  }
+
+  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>
+
+<div class={cn('flex flex-col gap-1.5', className)}>
+  {#if label}
+    <label class="text-sm font-medium">{label}</label>
+  {/if}
+
+  <!-- Input row with calendar icon -->
+  <div class="relative flex items-center rounded-md border focus-within:ring-2 focus-within:ring-ring">
+    <span class="flex h-9 w-9 items-center justify-center text-muted-foreground">
+      <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"><rect width="18" height="18" x="3" y="4" rx="2" ry="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>
+    <span class={cn('flex-1 text-sm', !selectedDate && 'text-muted-foreground')}>
+      {selectedDate ? formatDate(selectedDate) : placeholder}
+    </span>
+    <button
+      type="button"
+      onclick={() => (open = !open)}
+      class="flex h-9 w-9 items-center justify-center rounded-r-md hover:bg-muted"
+      aria-label="Open calendar"
+    >
+      <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="m6 9 6 6 6-6"/></svg>
+    </button>
+  </div>
+
+  <!-- Calendar popover -->
+  {#if open}
+    <div class="z-10 rounded-md border bg-background p-4 shadow-md">
+      <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="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>
+        </button>
+        <span class="text-sm font-medium">{MONTHS[viewMonth]} {viewYear}</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="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 class="grid grid-cols-7">
+        {#each DAYS as d}
+          <div class="flex h-8 w-8 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-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+              !cur && 'text-muted-foreground/40 pointer-events-none',
+              cur && 'hover:bg-muted',
+              cur && isToday(day) && !isSelected(day) && 'border border-primary text-primary',
+              cur && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+            )}
+            onclick={() => cur && selectDay(day)}
+            disabled={!cur}
+          >{day}</button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,109 @@
+<!--
+  CalendarBlock28.svelte
+  "Schedule Date" — a relative-date input showing e.g. "In 2 Days" with
+  a text field and an inline single-month calendar.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    label = 'Schedule Date',
+    selectedDate = null,
+    relativeLabel = 'In 2 Days'
+  }: {
+    class?: string;
+    label?: string;
+    selectedDate?: Date | null;
+    relativeLabel?: string;
+  } = $props();
+
+  const today = new Date();
+  let month = $state(selectedDate?.getMonth() ?? today.getMonth());
+  let year = $state(selectedDate?.getFullYear() ?? today.getFullYear());
+  let inputValue = $state(relativeLabel);
+
+  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 selectDay(day: number) {
+    selectedDate = new Date(year, month, day);
+    // Update relative label to reflect actual date
+    const diff = Math.round((selectedDate.getTime() - today.setHours(0,0,0,0)) / 86400000);
+    if (diff === 0) inputValue = 'Today';
+    else if (diff === 1) inputValue = 'Tomorrow';
+    else if (diff > 0) inputValue = `In ${diff} Days`;
+    else inputValue = `${Math.abs(diff)} Days ago`;
+  }
+
+  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));
+</script>
+
+<div class={cn('flex flex-col gap-2 rounded-md border p-4', className)}>
+  {#if label}
+    <label class="text-sm font-medium">{label}</label>
+  {/if}
+
+  <!-- Relative date input -->
+  <div class="flex items-center gap-2 rounded-md border px-3 py-2">
+    <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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+    <input
+      type="text"
+      bind:value={inputValue}
+      class="flex-1 bg-transparent text-sm outline-none"
+      placeholder="e.g. In 2 Days"
+    />
+    {#if selectedDate}
+      <span class="text-xs text-muted-foreground">
+        {selectedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+      </span>
+    {/if}
+  </div>
+
+  <!-- Month navigator -->
+  <div class="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="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>
+    </button>
+    <span class="text-sm 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="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>
+
+  <!-- Calendar grid -->
+  <div class="grid grid-cols-7">
+    {#each DAYS as d}
+      <div class="flex h-8 w-8 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-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+          !cur && 'text-muted-foreground/40 pointer-events-none',
+          cur && 'hover:bg-muted',
+          cur && isToday(day) && !isSelected(day) && 'border border-primary text-primary',
+          cur && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+        )}
+        onclick={() => cur && selectDay(day)}
+        disabled={!cur}
+      >{day}</button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,126 @@
+<!--
+  CalendarBlock29.svelte
+  "Select your stay" — a dropdown trigger displaying the selected date range,
+  with an inline single-month range-picker calendar below.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    label = 'Select your stay',
+    startDate = null,
+    endDate = null
+  }: {
+    class?: string;
+    label?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+  } = $props();
+
+  const today = new Date();
+  let open = $state(false);
+  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; open = false; }
+  }
+
+  function formatShort(d: Date) {
+    return d.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
+  }
+
+  function rangeText() {
+    if (!startDate) return null;
+    if (!endDate) return formatShort(startDate);
+    const [a, b] = startDate <= endDate ? [startDate, endDate] : [endDate, startDate];
+    return `${formatShort(a)} – ${formatShort(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));
+  let displayText = $derived(rangeText());
+</script>
+
+<div class={cn('flex flex-col gap-1.5', className)}>
+  {#if label}
+    <label class="text-sm font-medium">{label}</label>
+  {/if}
+
+  <!-- Trigger dropdown -->
+  <button
+    type="button"
+    onclick={() => (open = !open)}
+    class="flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm hover:bg-muted"
+  >
+    <div class="flex items-center gap-2">
+      <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"><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={displayText ? '' : 'text-muted-foreground'}>{displayText ?? 'Select dates'}</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="m6 9 6 6 6-6"/></svg>
+  </button>
+
+  <!-- Inline calendar (opens below trigger) -->
+  {#if open}
+    <div class="rounded-md border bg-background p-4 shadow-sm">
+      <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="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>
+        </button>
+        <span class="text-sm font-medium">{MONTHS[viewMonth]} {viewYear}</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="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 class="grid grid-cols-7">
+        {#each DAYS as d}
+          <div class="flex h-8 w-8 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-8 w-8 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>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,122 @@
+<!--
+  CalendarBlock30.svelte
+  Single month calendar with an event agenda list below.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface CalEvent {
+    date: Date;
+    title: string;
+    time?: string;
+    color?: string;
+  }
+
+  let {
+    class: className = '',
+    selectedDate = null,
+    events = [] as CalEvent[],
+    month = new Date().getMonth(),
+    year = new Date().getFullYear()
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+    events?: CalEvent[];
+    month?: number;
+    year?: number;
+  } = $props();
+
+  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) { const t = new Date(); return t.getFullYear() === year && t.getMonth() === month && t.getDate() === d; }
+  function hasEvent(d: number) { return events.some(e => e.date.getFullYear() === year && e.date.getMonth() === month && e.date.getDate() === d); }
+
+  function visibleEvents() {
+    if (selectedDate) {
+      return events.filter(e => e.date.toDateString() === selectedDate!.toDateString());
+    }
+    return events.filter(e => e.date.getFullYear() === year && e.date.getMonth() === month)
+      .sort((a, b) => a.date.getTime() - b.date.getTime());
+  }
+
+  function formatEventDate(d: Date) {
+    return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  }
+
+  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 agenda = $derived(visibleEvents());
+</script>
+
+<div class={cn('inline-flex flex-col rounded-md border p-4', className)}>
+  <div class="mb-4 flex items-center justify-between">
+    <Button variant="ghost" size="sm" onclick={prev}>&lt;</Button>
+    <h3 class="text-sm font-medium">{MONTHS[month]} {year}</h3>
+    <Button variant="ghost" size="sm" onclick={next}>&gt;</Button>
+  </div>
+
+  <div class="grid grid-cols-7">
+    {#each DAYS as d}
+      <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground">{d}</div>
+    {/each}
+    {#each calDays as { day, cur }}
+      <button
+        type="button"
+        class={cn(
+          'relative flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+          !cur && 'text-muted-foreground/40 pointer-events-none',
+          cur && 'hover:bg-muted',
+          cur && isToday(day) && !isSelected(day) && 'border border-primary text-primary',
+          cur && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+        )}
+        onclick={() => cur && (selectedDate = selectedDate?.getDate() === day && selectedDate?.getMonth() === month ? null : new Date(year, month, day))}
+        disabled={!cur}
+      >
+        {day}
+        {#if cur && hasEvent(day)}
+          <span class={cn('absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full', isSelected(day) ? 'bg-primary-foreground' : 'bg-primary')}></span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Agenda -->
+  {#if agenda.length > 0}
+    <div class="mt-4 flex flex-col gap-2 border-t pt-4">
+      <h4 class="text-xs font-medium text-muted-foreground">
+        {selectedDate ? formatEventDate(selectedDate) : `${MONTHS[month]} ${year}`}
+      </h4>
+      {#each agenda as event}
+        <div class="flex items-start gap-3 rounded-md p-2 hover:bg-muted">
+          <div class={cn('mt-1 h-2 w-2 shrink-0 rounded-full', event.color ?? 'bg-primary')}></div>
+          <div class="flex flex-col">
+            <span class="text-sm font-medium">{event.title}</span>
+            {#if event.time}
+              <span class="text-xs text-muted-foreground">{event.time}</span>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <div class="mt-4 border-t pt-4">
+      <p class="text-center text-xs text-muted-foreground">
+        {selectedDate ? 'No events on this day' : 'No events this month'}
+      </p>
+    </div>
+  {/if}
+</div>