feat(MonthCalendar ): add MonthCalendar component

docs/src/routes/(docs)/sink/+page.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
-	import Combobox from "./combobox.svelte";
-
-	let myValue = $state("");
-	const testItems = [
-		{ value: "mango", label: "Mango" },
-		{ value: "watermelon", label: "Watermelon" },
-		{ value: "apple", label: "Apple" },
-	];
+	import Calendar from "./calendar.svelte";
+	import MonthCal from "./month-cal.svelte";
+	import RangeCal from "./range-cal.svelte";
+	import RangeMonthCal from "./range-month-cal.svelte";
 </script>
 
 <div class="mt-4">
-	<button onclick={() => (myValue = "apple")}> Select Apple </button>
-	<Combobox items={testItems} type="single" bind:value={myValue} />
+	<div class="flex flex-col gap-4">
+		<div class="flex">
+			<Calendar></Calendar>
+		</div>
+		<div class="flex">
+			<RangeCal></RangeCal>
+		</div>
+		<div class="flex">
+			<MonthCal></MonthCal>
+		</div>
+		<div class="flex">
+			<RangeMonthCal></RangeMonthCal>
+		</div>
+	</div>
 </div>

docs/src/routes/(docs)/sink/calendar.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { Calendar } from "bits-ui";
+	import CaretLeft from "phosphor-svelte/lib/CaretLeft";
+	import CaretRight from "phosphor-svelte/lib/CaretRight";
+	import { getLocalTimeZone, today } from "@internationalized/date";
+
+	let value = $state([today(getLocalTimeZone())]);
+</script>
+
+<Calendar.Root
+	class="border-dark-10 bg-background-alt shadow-card mt-6 rounded-[15px] border p-[22px]"
+	weekdayFormat="short"
+	fixedWeeks={true}
+	type="multiple"
+	bind:value
+	maxDays={3}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header class="flex items-center justify-between">
+			<Calendar.PrevButton
+				class="rounded-9px bg-background-alt hover:bg-muted inline-flex size-10 items-center justify-center active:scale-[0.98] active:transition-all"
+			>
+				<CaretLeft class="size-6" />
+			</Calendar.PrevButton>
+			<Calendar.Heading class="text-[15px] font-medium" />
+			<Calendar.NextButton
+				class="rounded-9px bg-background-alt hover:bg-muted inline-flex size-10 items-center justify-center active:scale-[0.98] active:transition-all"
+			>
+				<CaretRight class="size-6" />
+			</Calendar.NextButton>
+		</Calendar.Header>
+		<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+			{#each months as month, i (i)}
+				<Calendar.Grid class="w-full border-collapse select-none space-y-1">
+					<Calendar.GridHead>
+						<Calendar.GridRow class="mb-1 flex w-full justify-between">
+							{#each weekdays as day, i (i)}
+								<Calendar.HeadCell
+									class="text-muted-foreground font-normal! w-10 rounded-md text-xs"
+								>
+									<div>{day.slice(0, 2)}</div>
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates, i (i)}
+							<Calendar.GridRow class="flex w-full">
+								{#each weekDates as date, i (i)}
+									<Calendar.Cell
+										{date}
+										month={month.value}
+										class="p-0! relative size-10 text-center text-sm"
+									>
+										<Calendar.Day
+											class="rounded-9px text-foreground hover:border-foreground data-selected:bg-foreground data-disabled:text-foreground/30 data-selected:text-background data-unavailable:text-muted-foreground data-disabled:pointer-events-none data-outside-month:pointer-events-none data-selected:font-medium data-unavailable:line-through group relative inline-flex size-10 items-center justify-center whitespace-nowrap border border-transparent bg-transparent p-0 text-sm font-normal"
+										>
+											<div
+												class="bg-foreground group-data-selected:bg-background group-data-today:block absolute top-[5px] hidden size-1 rounded-full"
+											></div>
+											{date.day}
+										</Calendar.Day>
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</div>
+	{/snippet}
+</Calendar.Root>

docs/src/routes/(docs)/sink/month-cal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { MonthCalendar } from "bits-ui";
+	import CaretLeft from "phosphor-svelte/lib/CaretLeft";
+	import CaretRight from "phosphor-svelte/lib/CaretRight";
+	import { getLocalTimeZone, today } from "@internationalized/date";
+
+	let value = $state(today(getLocalTimeZone()));
+</script>
+
+<MonthCalendar.Root
+	class="border-dark-10 bg-background-alt shadow-card mt-6 rounded-[15px] border p-[22px]"
+	monthFormat="short"
+	type="single"
+	bind:value
+>
+	{#snippet children({ years })}
+		<MonthCalendar.Header class="flex items-center justify-between">
+			<MonthCalendar.PrevButton
+				class="rounded-9px bg-background-alt hover:bg-muted inline-flex size-10 items-center justify-center active:scale-[0.98] active:transition-all"
+			>
+				<CaretLeft class="size-6" />
+			</MonthCalendar.PrevButton>
+			<MonthCalendar.Heading class="text-[15px] font-medium" />
+			<MonthCalendar.NextButton
+				class="rounded-9px bg-background-alt hover:bg-muted inline-flex size-10 items-center justify-center active:scale-[0.98] active:transition-all"
+			>
+				<CaretRight class="size-6" />
+			</MonthCalendar.NextButton>
+		</MonthCalendar.Header>
+		<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+			{#each years as year, i (i)}
+				<MonthCalendar.Grid class="w-full border-collapse select-none space-y-1">
+					<MonthCalendar.GridBody>
+						{#each year.months as months, i (i)}
+							<MonthCalendar.GridRow class="flex w-full">
+								{#each months as { value, label }, i (i)}
+									<MonthCalendar.Cell
+										month={value}
+										year={year.value}
+										class="p-0! relative size-10 text-center text-sm"
+									>
+										<MonthCalendar.Day
+											class="rounded-9px text-foreground hover:border-foreground data-selected:bg-foreground data-disabled:text-foreground/30 data-selected:text-background data-unavailable:text-muted-foreground data-disabled:pointer-events-none data-outside-month:pointer-events-none data-selected:font-medium data-unavailable:line-through group relative inline-flex size-10 items-center justify-center whitespace-nowrap border border-transparent bg-transparent p-0 text-sm font-normal"
+										>
+											<div
+												class="bg-foreground group-data-selected:bg-background group-data-today:block absolute top-[5px] hidden size-1 rounded-full"
+											></div>
+											{label}
+										</MonthCalendar.Day>
+									</MonthCalendar.Cell>
+								{/each}
+							</MonthCalendar.GridRow>
+						{/each}
+					</MonthCalendar.GridBody>
+				</MonthCalendar.Grid>
+			{/each}
+		</div>
+	{/snippet}
+</MonthCalendar.Root>

docs/src/routes/(docs)/sink/range-cal.svelte

@@ -58,7 +58,7 @@
 											)}
 										>
 											<div
-												class="bg-foreground group-data-selected:bg-background group-data-today:block absolute top-[5px] hidden size-1 rounded-full"
+												class="bg-foreground group-data-selected:bg-background group-data-is-this-month:block absolute top-[5px] hidden size-1 rounded-full"
 											></div>
 											{date.day}
 										</RangeCalendar.Day>

docs/src/routes/(docs)/sink/range-month-cal.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { RangeMonthCalendar } from "bits-ui";
+
+	function cn(str: string) {
+		return str;
+	}
+
+	let { value = $bindable() } = $props();
+</script>
+
+<RangeMonthCalendar.Root
+	bind:value
+	class="rounded-15px border-dark-10 bg-background-alt shadow-card mt-6 border p-[22px]"
+	monthFormat="short"
+	numberOfYears={2}
+	minMonths={3}
+	maxMonths={10}
+>
+	{#snippet children({ years })}
+		<RangeMonthCalendar.Header class="flex items-center justify-between">
+			<RangeMonthCalendar.PrevButton
+				class="rounded-9px bg-background-alt hover:bg-muted inline-flex size-10 items-center justify-center active:scale-[0.98]"
+			>
+				←
+			</RangeMonthCalendar.PrevButton>
+			<RangeMonthCalendar.Heading class="text-[15px] font-medium" />
+			<RangeMonthCalendar.NextButton
+				class="rounded-9px bg-background-alt hover:bg-muted inline-flex size-10 items-center justify-center active:scale-[0.98]"
+			>
+				→
+			</RangeMonthCalendar.NextButton>
+		</RangeMonthCalendar.Header>
+		<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+			{#each years as year (year.value.year)}
+				<RangeMonthCalendar.Grid class="w-full border-collapse select-none space-y-1">
+					<RangeMonthCalendar.GridBody>
+						{#each year.months as months, i (i)}
+							<RangeMonthCalendar.GridRow class="flex w-full">
+								{#each months as { value, label }, d (d)}
+									<RangeMonthCalendar.Cell
+										month={value}
+										year={year.value}
+										class="p-0! relative m-0 size-10 text-center text-sm focus-within:z-20"
+									>
+										<RangeMonthCalendar.Day
+											class={cn(
+												"rounded-9px text-foreground hover:border-foreground focus-visible:ring-foreground! data-selection-end:rounded-9px data-selection-start:rounded-9px data-highlighted:bg-muted data-selected:bg-muted data-selection-end:bg-foreground data-selection-start:bg-foreground data-disabled:text-foreground/30 data-selected:text-foreground data-selection-end:text-background data-selection-start:text-background data-unavailable:text-muted-foreground data-selected:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:border-foreground data-disabled:pointer-events-none data-highlighted:rounded-none data-outside-month:pointer-events-none data-selected:font-medium data-selection-end:font-medium data-selection-start:font-medium data-selection-start:focus-visible:ring-2 data-selection-start:focus-visible:ring-offset-2! data-unavailable:line-through data-selected:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-selected:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:ring-0! data-selected:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:ring-offset-0! group relative inline-flex size-10 items-center justify-center overflow-visible whitespace-nowrap border border-transparent bg-transparent p-0 text-sm font-normal"
+											)}
+										>
+											<div
+												class="bg-foreground group-data-selected:bg-background group-data-is-this-month:block absolute top-[5px] hidden size-1 rounded-full"
+											></div>
+											{label}
+										</RangeMonthCalendar.Day>
+									</RangeMonthCalendar.Cell>
+								{/each}
+							</RangeMonthCalendar.GridRow>
+						{/each}
+					</RangeMonthCalendar.GridBody>
+				</RangeMonthCalendar.Grid>
+			{/each}
+		</div>
+	{/snippet}
+</RangeMonthCalendar.Root>