@xbg.solutions/create-frontend 1.1.2 → 1.2.0

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

@@ -0,0 +1,99 @@
+<!--
+  CalendarBlock09.svelte
+  Dual-month range picker — only past/present dates are selectable (future disabled).
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    startDate = null,
+    endDate = null
+  }: {
+    class?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+  } = $props();
+
+  const today = new Date();
+  const todayTs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+
+  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 isFuture(y: number, m: number, d: number) { return new Date(y, m, d).getTime() > todayTs; }
+  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) {
+    if (isFuture(y, m, d)) return;
+    const clicked = new Date(y, m, d);
+    if (!startDate || endDate) { startDate = clicked; endDate = null; }
+    else endDate = clicked;
+  }
+
+  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 left = $derived(getCalDays(viewYear, viewMonth));
+  let right = $derived(getCalDays(y2, m2));
+</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>
+    <span class="text-sm font-medium">{MONTHS[viewMonth]} {viewYear} – {MONTHS[m2]} {y2}</span>
+    <Button variant="ghost" size="sm" onclick={next}>&gt;</Button>
+  </div>
+  <div class="flex gap-8">
+    {#each [[viewYear,viewMonth,left],[y2,m2,right]] as [y,m,days]}
+      <div>
+        <h3 class="mb-2 text-center text-sm font-medium">{MONTHS[m as number]} {y}</h3>
+        <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 (days as Array<{day:number;cur:boolean}>) as { day, cur }}
+            {@const future = cur && isFuture(y as number, m as number, day)}
+            <button
+              type="button"
+              class={cn(
+                'flex h-8 w-8 items-center justify-center text-sm transition-colors',
+                (!cur || future) && 'text-muted-foreground/40 pointer-events-none',
+                cur && !future && inRange(y as number,m as number,day) && !isEdge(y as number,m as number,day) && 'bg-muted',
+                cur && !future && isEdge(y as number,m as number,day) && 'rounded-full bg-primary text-primary-foreground',
+                cur && !future && !inRange(y as number,m as number,day) && 'rounded-full hover:bg-muted'
+              )}
+              onclick={() => handleClick(y as number, m as number, day)}
+              disabled={!cur || future}
+            >{day}</button>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,88 @@
+<!--
+  CalendarBlock10.svelte
+  Appointment picker: title/subtitle header + "Today" button + single month calendar.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Appointment',
+    subtitle = 'Find a date',
+    selectedDate = null,
+    month = new Date().getMonth(),
+    year = new Date().getFullYear()
+  }: {
+    class?: string;
+    title?: string;
+    subtitle?: string;
+    selectedDate?: Date | null;
+    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;
+  }
+
+  const today = new Date();
+  function isToday(d: number) { return today.getFullYear() === year && today.getMonth() === month && today.getDate() === d; }
+  function isSelected(d: number) { return selectedDate?.getFullYear() === year && selectedDate?.getMonth() === month && selectedDate?.getDate() === d; }
+
+  function goToday() { const t = new Date(); month = t.getMonth(); year = t.getFullYear(); selectedDate = new Date(); }
+  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('inline-flex flex-col rounded-md border p-4', className)}>
+  <!-- Title row -->
+  <div class="mb-4 flex items-start justify-between">
+    <div>
+      <h3 class="font-semibold">{title}</h3>
+      <p class="text-sm text-muted-foreground">{subtitle}</p>
+    </div>
+    <Button variant="outline" size="sm" onclick={goToday}>Today</Button>
+  </div>
+
+  <!-- Month nav -->
+  <div class="mb-3 flex items-center justify-between">
+    <button type="button" onclick={prev} class="rounded p-1 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[month]} {year}</span>
+    <button type="button" onclick={next} class="rounded p-1 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>
+
+  <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 && (selectedDate = new Date(year, month, day))}
+        disabled={!cur}
+      >{day}</button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,99 @@
+<!--
+  CalendarBlock11.svelte
+  Dual-month range picker with custom availability/restriction message below.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    startDate = null,
+    endDate = null,
+    availabilityMessage = 'We are open in June and July only.'
+  }: {
+    class?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    availabilityMessage?: string;
+  } = $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(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;
+  }
+
+  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 left = $derived(getCalDays(viewYear, viewMonth));
+  let right = $derived(getCalDays(y2, m2));
+</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>
+    <span class="text-sm font-medium">{MONTHS[viewMonth]} {viewYear} – {MONTHS[m2]} {y2}</span>
+    <Button variant="ghost" size="sm" onclick={next}>&gt;</Button>
+  </div>
+  <div class="flex gap-8">
+    {#each [[viewYear,viewMonth,left],[y2,m2,right]] as [y,m,days]}
+      <div>
+        <h3 class="mb-2 text-center text-sm font-medium">{MONTHS[m as number]} {y}</h3>
+        <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 (days as Array<{day:number;cur:boolean}>) 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(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>
+  {#if availabilityMessage}
+    <p class="mt-3 text-center text-xs text-muted-foreground">{availabilityMessage}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,121 @@
+<!--
+  CalendarBlock12.svelte
+  "Book an appointment" card — title, subtitle, language dropdown, dual-month range picker.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Book an appointment',
+    subtitle = 'Select the dates for your appointment',
+    language = 'English',
+    startDate = null,
+    endDate = null
+  }: {
+    class?: string;
+    title?: string;
+    subtitle?: string;
+    language?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+  } = $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(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;
+  }
+
+  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 left = $derived(getCalDays(viewYear, viewMonth));
+  let right = $derived(getCalDays(y2, m2));
+</script>
+
+<div class={cn('rounded-xl border bg-background p-6 shadow-sm', className)}>
+  <!-- Card header -->
+  <div class="mb-6 flex items-start justify-between">
+    <div>
+      <h2 class="text-lg font-semibold">{title}</h2>
+      <p class="text-sm text-muted-foreground">{subtitle}</p>
+    </div>
+    <!-- Language selector -->
+    <button type="button" class="flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm 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"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+      {language}
+      <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="m6 9 6 6 6-6"/></svg>
+    </button>
+  </div>
+
+  <!-- Calendar nav -->
+  <div class="mb-4 flex items-center justify-between">
+    <button type="button" onclick={prev} class="flex h-8 w-8 items-center justify-center rounded-full border 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} – {MONTHS[m2]} {y2}</span>
+    <button type="button" onclick={next} class="flex h-8 w-8 items-center justify-center rounded-full border 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>
+
+  <!-- Dual month grid -->
+  <div class="flex gap-8">
+    {#each [[viewYear,viewMonth,left],[y2,m2,right]] as [y,m,days]}
+      <div class="flex-1">
+        <h3 class="mb-3 text-center text-sm font-medium">{MONTHS[m as number]} {y}</h3>
+        <div class="grid grid-cols-7">
+          {#each DAYS as d}
+            <div class="flex h-9 items-center justify-center text-xs 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-9 items-center justify-center text-sm 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 font-medium 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>

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

@@ -0,0 +1,92 @@
+<!--
+  CalendarBlock13.svelte
+  Single month with dropdown selectors for Month and Year navigation.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    selectedDate = null
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+  } = $props();
+
+  const today = new Date();
+  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'];
+  const YEARS = Array.from({ length: 20 }, (_, i) => today.getFullYear() - 10 + i);
+
+  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 isToday(d: number) { return today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d; }
+  function isSelected(d: number) { return selectedDate?.getFullYear() === viewYear && selectedDate?.getMonth() === viewMonth && selectedDate?.getDate() === d; }
+
+  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('inline-flex flex-col rounded-md border p-4', className)}>
+  <div class="mb-4 flex items-center justify-between gap-2">
+    <button type="button" onclick={prev} class="rounded p-1 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>
+
+    <!-- Month dropdown -->
+    <select
+      bind:value={viewMonth}
+      class="rounded border bg-background px-2 py-1 text-sm font-medium hover:bg-muted"
+    >
+      {#each MONTHS as m, i}
+        <option value={i}>{m}</option>
+      {/each}
+    </select>
+
+    <!-- Year dropdown -->
+    <select
+      bind:value={viewYear}
+      class="rounded border bg-background px-2 py-1 text-sm font-medium hover:bg-muted"
+    >
+      {#each YEARS as y}
+        <option value={y}>{y}</option>
+      {/each}
+    </select>
+
+    <button type="button" onclick={next} class="rounded p-1 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>
+
+  <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) && 'bg-muted font-semibold',
+          cur && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+        )}
+        onclick={() => cur && (selectedDate = new Date(viewYear, viewMonth, day))}
+        disabled={!cur}
+      >{day}</button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,71 @@
+<!--
+  CalendarBlock14.svelte
+  Single month with certain unavailable dates shown with strikethrough styling.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    selectedDate = null,
+    unavailableDates = [],
+    month = new Date().getMonth(),
+    year = new Date().getFullYear()
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+    unavailableDates?: number[];
+    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 isUnavailable(d: number) { return unavailableDates.includes(d); }
+  function isToday(d: number) { const t = new Date(); return t.getFullYear() === year && t.getMonth() === month && t.getDate() === d; }
+
+  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('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(
+          'flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+          !cur && 'text-muted-foreground/40 pointer-events-none',
+          cur && isUnavailable(day) && 'text-muted-foreground/50 line-through pointer-events-none',
+          cur && !isUnavailable(day) && 'hover:bg-muted',
+          cur && !isUnavailable(day) && isToday(day) && 'font-semibold',
+          cur && !isUnavailable(day) && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+        )}
+        onclick={() => cur && !isUnavailable(day) && (selectedDate = new Date(year, month, day))}
+        disabled={!cur || isUnavailable(day)}
+      >{day}</button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,96 @@
+<!--
+  CalendarBlock15.svelte
+  Single month with ISO week numbers shown in a left column.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    selectedDate = null,
+    month = new Date().getMonth(),
+    year = new Date().getFullYear()
+  }: {
+    class?: string;
+    selectedDate?: Date | null;
+    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 getWeekNumber(d: Date): number {
+    const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    date.setUTCDate(date.getUTCDate() + 4 - (date.getUTCDay() || 7));
+    const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+    return Math.ceil(((date.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+  }
+
+  function getDim(y: number, m: number) { return new Date(y, m + 1, 0).getDate(); }
+  function getCalRows(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; date: Date }> = [];
+    for (let i = fd - 1; i >= 0; i--) {
+      const d = new Date(y, m - 1, prev - i);
+      days.push({ day: prev - i, cur: false, date: d });
+    }
+    for (let i = 1; i <= dim; i++) days.push({ day: i, cur: true, date: new Date(y, m, i) });
+    while (days.length < 42) {
+      const extra = days.length - dim - fd + 1;
+      days.push({ day: extra, cur: false, date: new Date(y, m + 1, extra) });
+    }
+    // Split into weeks
+    const rows: typeof days[] = [];
+    for (let i = 0; i < days.length; i += 7) rows.push(days.slice(i, i + 7));
+    return rows;
+  }
+
+  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 prev() { if (month === 0) { month = 11; year--; } else month--; }
+  function next() { if (month === 11) { month = 0; year++; } else month++; }
+  let rows = $derived(getCalRows(year, month));
+</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>
+
+  <!-- Header row: week# + days -->
+  <div class="grid grid-cols-8">
+    <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground/50"></div>
+    {#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}
+  </div>
+
+  <!-- Week rows -->
+  {#each rows as week}
+    <div class="grid grid-cols-8">
+      <!-- Week number -->
+      <div class="flex h-8 w-8 items-center justify-center text-xs text-muted-foreground/50">
+        {getWeekNumber(week[0].date)}
+      </div>
+      {#each week 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 && (selectedDate = new Date(year, month, day))}
+          disabled={!cur}
+        >{day}</button>
+      {/each}
+    </div>
+  {/each}
+</div>