@xbg.solutions/create-frontend 1.1.1 → 1.2.0

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

@@ -0,0 +1,194 @@
+<!--
+  CalendarBlock03.svelte
+  Date range picker with dual month view and range highlighting.
+-->
+<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();
+
+  let viewYear = $state(startDate ? startDate.getFullYear() : new Date().getFullYear());
+  let viewMonth = $state(startDate ? startDate.getMonth() : new Date().getMonth());
+
+  /** Track whether next click sets start or end */
+  let selectingEnd = $state(false);
+
+  const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  function getDaysInMonth(y: number, m: number): number {
+    return new Date(y, m + 1, 0).getDate();
+  }
+
+  function getFirstDayOfMonth(y: number, m: number): number {
+    return new Date(y, m, 1).getDay();
+  }
+
+  function getCalendarDays(y: number, m: number): Array<{ day: number; current: boolean }> {
+    const daysInMonth = getDaysInMonth(y, m);
+    const firstDay = getFirstDayOfMonth(y, m);
+    const daysInPrevMonth = getDaysInMonth(y, m - 1);
+    const days: Array<{ day: number; current: boolean }> = [];
+
+    for (let i = firstDay - 1; i >= 0; i--) {
+      days.push({ day: daysInPrevMonth - i, current: false });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({ day: i, current: true });
+    }
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      days.push({ day: i, current: false });
+    }
+    return days;
+  }
+
+  function dateEquals(a: Date | null, y: number, m: number, d: number): boolean {
+    if (!a) return false;
+    return a.getFullYear() === y && a.getMonth() === m && a.getDate() === d;
+  }
+
+  function isInRange(y: number, m: number, d: number): boolean {
+    if (!startDate || !endDate) return false;
+    const date = new Date(y, m, d);
+    return date > startDate && date < endDate;
+  }
+
+  function isRangeStart(y: number, m: number, d: number): boolean {
+    return dateEquals(startDate, y, m, d);
+  }
+
+  function isRangeEnd(y: number, m: number, d: number): boolean {
+    return dateEquals(endDate, y, m, d);
+  }
+
+  function selectDay(y: number, m: number, d: number) {
+    const date = new Date(y, m, d);
+    if (!selectingEnd) {
+      startDate = date;
+      endDate = null;
+      selectingEnd = true;
+    } else {
+      if (date < startDate!) {
+        startDate = date;
+        endDate = null;
+      } else {
+        endDate = date;
+        selectingEnd = false;
+      }
+    }
+  }
+
+  function prevMonth() {
+    if (viewMonth === 0) { viewMonth = 11; viewYear--; }
+    else { viewMonth--; }
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) { viewMonth = 0; viewYear++; }
+    else { viewMonth++; }
+  }
+
+  let secondMonth = $derived(viewMonth === 11 ? 0 : viewMonth + 1);
+  let secondYear = $derived(viewMonth === 11 ? viewYear + 1 : viewYear);
+  let leftDays = $derived(getCalendarDays(viewYear, viewMonth));
+  let rightDays = $derived(getCalendarDays(secondYear, secondMonth));
+</script>
+
+<div class={cn('inline-flex flex-col', className)}>
+  <!-- Navigation -->
+  <div class="mb-4 flex items-center justify-between">
+    <Button variant="outline" size="sm" onclick={prevMonth}>
+      &lt;
+    </Button>
+    <span class="text-sm font-medium">
+      {MONTHS[viewMonth]} {viewYear} - {MONTHS[secondMonth]} {secondYear}
+    </span>
+    <Button variant="outline" size="sm" onclick={nextMonth}>
+      &gt;
+    </Button>
+  </div>
+
+  <!-- Range display -->
+  {#if startDate || endDate}
+    <div class="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
+      <span>{startDate ? startDate.toLocaleDateString() : '...'}</span>
+      <span>-</span>
+      <span>{endDate ? endDate.toLocaleDateString() : '...'}</span>
+    </div>
+  {/if}
+
+  <div class="flex gap-8">
+    <!-- Left Month -->
+    <div>
+      <h3 class="mb-2 text-center text-sm font-medium">{MONTHS[viewMonth]} {viewYear}</h3>
+      <div class="grid grid-cols-7 gap-0">
+        {#each DAYS as day}
+          <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground">
+            {day}
+          </div>
+        {/each}
+        {#each leftDays as { day, current }}
+          <button
+            type="button"
+            class={cn(
+              'flex h-8 w-8 items-center justify-center text-sm transition-colors',
+              !current && 'text-muted-foreground/40',
+              current && 'hover:bg-muted',
+              current && isInRange(viewYear, viewMonth, day) && 'bg-accent',
+              current && isRangeStart(viewYear, viewMonth, day) && 'rounded-l-full bg-primary text-primary-foreground hover:bg-primary',
+              current && isRangeEnd(viewYear, viewMonth, day) && 'rounded-r-full bg-primary text-primary-foreground hover:bg-primary',
+              current && !isRangeStart(viewYear, viewMonth, day) && !isRangeEnd(viewYear, viewMonth, day) && !isInRange(viewYear, viewMonth, day) && 'rounded-full'
+            )}
+            onclick={() => current && selectDay(viewYear, viewMonth, day)}
+            disabled={!current}
+          >
+            {day}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Right Month -->
+    <div>
+      <h3 class="mb-2 text-center text-sm font-medium">{MONTHS[secondMonth]} {secondYear}</h3>
+      <div class="grid grid-cols-7 gap-0">
+        {#each DAYS as day}
+          <div class="flex h-8 w-8 items-center justify-center text-xs font-medium text-muted-foreground">
+            {day}
+          </div>
+        {/each}
+        {#each rightDays as { day, current }}
+          <button
+            type="button"
+            class={cn(
+              'flex h-8 w-8 items-center justify-center text-sm transition-colors',
+              !current && 'text-muted-foreground/40',
+              current && 'hover:bg-muted',
+              current && isInRange(secondYear, secondMonth, day) && 'bg-accent',
+              current && isRangeStart(secondYear, secondMonth, day) && 'rounded-l-full bg-primary text-primary-foreground hover:bg-primary',
+              current && isRangeEnd(secondYear, secondMonth, day) && 'rounded-r-full bg-primary text-primary-foreground hover:bg-primary',
+              current && !isRangeStart(secondYear, secondMonth, day) && !isRangeEnd(secondYear, secondMonth, day) && !isInRange(secondYear, secondMonth, day) && 'rounded-full'
+            )}
+            onclick={() => current && selectDay(secondYear, secondMonth, day)}
+            disabled={!current}
+          >
+            {day}
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,96 @@
+<!--
+  CalendarBlock04.svelte
+  Single month with continuous date-range row highlight (start–end dates).
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    startDate = null,
+    endDate = null,
+    month = new Date().getMonth(),
+    year = new Date().getFullYear()
+  }: {
+    class?: string;
+    startDate?: Date | null;
+    endDate?: 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;
+  }
+
+  function toNum(d: Date | null) { return d ? d.getFullYear() * 10000 + d.getMonth() * 100 + d.getDate() : null; }
+  function dayNum(d: number) { return year * 10000 + month * 100 + d; }
+
+  function inRange(d: number): boolean {
+    const n = dayNum(d), s = toNum(startDate), e = toNum(endDate);
+    if (!s || !e) return false;
+    const [lo, hi] = s <= e ? [s, e] : [e, s];
+    return n >= lo && n <= hi;
+  }
+  function isStart(d: number): boolean {
+    const n = dayNum(d), s = toNum(startDate), e = toNum(endDate);
+    if (!s) return false;
+    return n === (s <= (e ?? s) ? s : e!);
+  }
+  function isEnd(d: number): boolean {
+    const n = dayNum(d), s = toNum(startDate), e = toNum(endDate);
+    if (!e) return false;
+    return n === (s <= e ? e : s);
+  }
+
+  function handleClick(d: number) {
+    const clicked = new Date(year, month, d);
+    if (!startDate || (startDate && endDate)) {
+      startDate = clicked; endDate = null;
+    } else {
+      endDate = clicked;
+    }
+  }
+
+  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 text-sm transition-colors',
+          !cur && 'text-muted-foreground/40 pointer-events-none',
+          cur && inRange(day) && 'bg-muted',
+          cur && (isStart(day) || isEnd(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>

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

@@ -0,0 +1,97 @@
+<!--
+  CalendarBlock05.svelte
+  Dual-month range picker with full-row range background highlight.
+-->
+<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();
+  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 toTs(d: Date | null) { return d ? d.getTime() : null; }
+  function makeDate(y: number, m: number, d: number) { return new Date(y, m, d).getTime(); }
+
+  function inRange(y: number, m: number, d: number): boolean {
+    const n = makeDate(y, m, d), s = toTs(startDate), e = toTs(endDate);
+    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): boolean {
+    const n = makeDate(y, m, d), s = toTs(startDate), e = toTs(endDate);
+    return n === s || n === e;
+  }
+
+  function handleClick(y: number, m: number, d: number) {
+    const clicked = new Date(y, m, d);
+    if (!startDate || (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>
+</div>

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

@@ -0,0 +1,98 @@
+<!--
+  CalendarBlock06.svelte
+  Single-month range picker with minimum-days validation message.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    startDate = null,
+    endDate = null,
+    minDays = 5,
+    validationMessage = `A minimum of ${5} days is required`,
+    month = new Date().getMonth(),
+    year = new Date().getFullYear()
+  }: {
+    class?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    minDays?: number;
+    validationMessage?: string;
+    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 makeTs(y: number, m: number, d: number) { return new Date(y, m, d).getTime(); }
+  function inRange(d: number) {
+    const n = makeTs(year, month, d), 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 = makeTs(year, month, d);
+    return n === startDate?.getTime() || n === endDate?.getTime();
+  }
+
+  function handleClick(d: number) {
+    const clicked = new Date(year, month, d);
+    if (!startDate || endDate) { startDate = clicked; endDate = null; }
+    else endDate = clicked;
+  }
+
+  let rangedays = $derived(() => {
+    if (!startDate || !endDate) return 0;
+    return Math.round(Math.abs(endDate.getTime() - startDate.getTime()) / 86400000) + 1;
+  });
+
+  let showError = $derived(endDate !== null && rangedays() < minDays);
+
+  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 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>
+  {#if showError}
+    <p class="mt-3 text-center text-xs text-muted-foreground">{validationMessage}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,109 @@
+<!--
+  CalendarBlock07.svelte
+  Dual-month range picker with stay-length validation message.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    startDate = null,
+    endDate = null,
+    minNights = 2,
+    maxNights = 20,
+    validationMessage = `Your stay must be between ${2} and ${20} nights`
+  }: {
+    class?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    minNights?: number;
+    maxNights?: number;
+    validationMessage?: 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;
+  }
+
+  let nights = $derived(() => {
+    if (!startDate || !endDate) return 0;
+    return Math.round(Math.abs(endDate.getTime() - startDate.getTime()) / 86400000);
+  });
+  let showError = $derived(endDate !== null && (nights() < minNights || nights() > maxNights));
+
+  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 showError}
+    <p class="mt-3 text-center text-xs text-muted-foreground">{validationMessage}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,71 @@
+<!--
+  CalendarBlock08.svelte
+  Single month with weekends disabled (Mon–Fri only selectable).
+-->
+<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 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; dow: number }> = [];
+    for (let i = fd - 1; i >= 0; i--) days.push({ day: prev - i, cur: false, dow: (fd - 1 - i + (7 - fd + 1)) % 7 });
+    for (let i = 1; i <= dim; i++) days.push({ day: i, cur: true, dow: new Date(y, m, i).getDay() });
+    while (days.length < 42) {
+      const idx = days.length;
+      days.push({ day: idx - dim - fd + 2, cur: false, dow: idx % 7 });
+    }
+    return days;
+  }
+
+  function isSelected(d: number) {
+    return selectedDate?.getFullYear() === year && selectedDate?.getMonth() === month && selectedDate?.getDate() === d;
+  }
+  function isWeekend(dow: number) { return dow === 0 || dow === 6; }
+
+  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, dow }}
+      <button
+        type="button"
+        class={cn(
+          'flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors',
+          (!cur || isWeekend(dow)) && 'text-muted-foreground/40 pointer-events-none',
+          cur && !isWeekend(dow) && 'hover:bg-muted',
+          cur && !isWeekend(dow) && isSelected(day) && 'bg-primary text-primary-foreground hover:bg-primary'
+        )}
+        onclick={() => cur && !isWeekend(dow) && (selectedDate = new Date(year, month, day))}
+        disabled={!cur || isWeekend(dow)}
+      >{day}</button>
+    {/each}
+  </div>
+</div>