@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/src/lib/components/ui/range-calendar/range-calendar-caption.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+	import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+	import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+	import type RangeCalendar from "./range-calendar.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
+		months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof RangeCalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof RangeCalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<RangeCalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<RangeCalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}

package/src/lib/components/ui/range-calendar/range-calendar-cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:rounded-none [&:has([data-range-middle])]:bg-accent first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-range-start])]:rounded-s-(--cell-radius) dark:[&:has([data-range-start])]:hover:bg-accent [&:has([data-selected])]:bg-accent [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/range-calendar/range-calendar-day.svelte

@@ -1,34 +1,35 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
 	}: RangeCalendarPrimitive.DayProps = $props();
-
-	export { className as class };
 </script>
 
 <RangeCalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"size-8 p-0 font-normal data-[selected]:opacity-100",
-		// Today
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
-		// Selection Start
-		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
-		// Selection End
-		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"data-[range-middle]:rounded-none [&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		// range Start
+		"data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground",
+		// range End
+		"data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:hover:text-foreground",
 		// Outside months
-		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		"data-[unavailable]:line-through",
+		"dark:data-[range-middle]:hover:bg-accent/0",
+		// focus
+		"focus:relative focus:border-ring focus:ring-ring/50",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: RangeCalendarPrimitive.GridBodyProps = $props();
+	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridBodyProps = $props();
 </script>
 
-<RangeCalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />
+<RangeCalendarPrimitive.GridBody bind:ref {...restProps} />

package/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: RangeCalendarPrimitive.GridHeadProps = $props();
+	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridHeadProps = $props();
 </script>
 
-<RangeCalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />
+<RangeCalendarPrimitive.GridHead bind:ref {...restProps} />

package/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/ui/range-calendar/range-calendar-grid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <RangeCalendarPrimitive.Grid
 	bind:ref
-	class={cn("w-full border-collapse space-y-1", className)}
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
 	{...restProps}
 />

package/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,9 @@
 
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn(
+		"w-(--cell-size) rounded-md text-[0.8rem] font-normal text-muted-foreground",
+		className
+	)}
 	{...restProps}
 />

package/src/lib/components/ui/range-calendar/range-calendar-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,9 @@
 
 <RangeCalendarPrimitive.Header
 	bind:ref
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	class={cn(
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+		className
+	)}
 	{...restProps}
 />

package/src/lib/components/ui/range-calendar/range-calendar-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <RangeCalendarPrimitive.Heading
 	bind:ref
-	class={cn("text-sm font-medium", className)}
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
 	{...restProps}
 />

package/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+		className
+	)}
+>
+	<RangeCalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem?.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem?.label}
+				<ChevronDownIcon class={cn("size-4", className)} />
+			</span>
+		{/snippet}
+	</RangeCalendarPrimitive.MonthSelect>
+</span>

package/src/lib/components/ui/range-calendar/range-calendar-month.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/range-calendar/range-calendar-months.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/range-calendar/range-calendar-nav.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+	{@render children?.()}
+</nav>

package/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,27 +1,37 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/components/utils.js";
+
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "ghost",
 		...restProps
-	}: RangeCalendarPrimitive.NextButtonProps = $props();
+	}: RangeCalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight />
+	<ChevronRightIcon class={cn("cn-rtl-flip size-4", className)} />
 {/snippet}
 
 <RangeCalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50",
+		"rtl:rotate-180",
 		className
 	)}
 	{...restProps}
-	children={children || Fallback}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</RangeCalendarPrimitive.NextButton>

package/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,27 +1,37 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/components/utils.js";
+
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "ghost",
 		...restProps
-	}: RangeCalendarPrimitive.PrevButtonProps = $props();
+	}: RangeCalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft />
+	<ChevronLeftIcon class={cn("cn-rtl-flip size-4", className)} />
 {/snippet}
 
 <RangeCalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50",
+		"rtl:rotate-180",
 		className
 	)}
 	{...restProps}
-	children={children || Fallback}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</RangeCalendarPrimitive.PrevButton>

package/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+		className
+	)}
+>
+	<RangeCalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem?.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem?.label || value}
+				<ChevronDownIcon class={cn("size-4", className)} />
+			</span>
+		{/snippet}
+	</RangeCalendarPrimitive.YearSelect>
+</span>

package/src/lib/components/ui/range-calendar/range-calendar.svelte

@@ -1,16 +1,55 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import * as RangeCalendar from "./index.js";
-	import { cn } from "../../../utils";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import type { ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import RangeCalendarCaption from "./range-calendar-caption.svelte";
+	import RangeCalendarCell from "./range-calendar-cell.svelte";
+	import RangeCalendarDay from "./range-calendar-day.svelte";
+	import RangeCalendarGridBody from "./range-calendar-grid-body.svelte";
+	import RangeCalendarGridHead from "./range-calendar-grid-head.svelte";
+	import RangeCalendarGridRow from "./range-calendar-grid-row.svelte";
+	import RangeCalendarGrid from "./range-calendar-grid.svelte";
+	import RangeCalendarHeadCell from "./range-calendar-head-cell.svelte";
+	import RangeCalendarHeader from "./range-calendar-header.svelte";
+	import RangeCalendarMonth from "./range-calendar-month.svelte";
+	import RangeCalendarMonths from "./range-calendar-months.svelte";
+	import RangeCalendarNav from "./range-calendar-nav.svelte";
+	import RangeCalendarNextButton from "./range-calendar-next-button.svelte";
+	import RangeCalendarPrevButton from "./range-calendar-prev-button.svelte";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		placeholder = $bindable(),
-		class: className,
 		weekdayFormat = "short",
+		class: className,
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
 		...restProps
-	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: RangeCalendarPrimitive.MonthSelectProps["months"];
+		years?: RangeCalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: RangeCalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: RangeCalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
 </script>
 
 <RangeCalendarPrimitive.Root
@@ -18,40 +57,69 @@
 	bind:value
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<RangeCalendar.Header>
-			<RangeCalendar.PrevButton />
-			<RangeCalendar.Heading />
-			<RangeCalendar.NextButton />
-		</RangeCalendar.Header>
-		<RangeCalendar.Months>
-			{#each months as month (month)}
-				<RangeCalendar.Grid>
-					<RangeCalendar.GridHead>
-						<RangeCalendar.GridRow class="flex">
-							{#each weekdays as weekday (weekday)}
-								<RangeCalendar.HeadCell>
-									{weekday.slice(0, 2)}
-								</RangeCalendar.HeadCell>
-							{/each}
-						</RangeCalendar.GridRow>
-					</RangeCalendar.GridHead>
-					<RangeCalendar.GridBody>
-						{#each month.weeks as weekDates (weekDates)}
-							<RangeCalendar.GridRow class="mt-2 w-full">
-								{#each weekDates as date (date)}
-									<RangeCalendar.Cell {date} month={month.value}>
-										<RangeCalendar.Day />
-									</RangeCalendar.Cell>
+		<RangeCalendarMonths>
+			<RangeCalendarNav>
+				<RangeCalendarPrevButton variant={buttonVariant} />
+				<RangeCalendarNextButton variant={buttonVariant} />
+			</RangeCalendarNav>
+			{#each months as month, monthIndex (month)}
+				<RangeCalendarMonth>
+					<RangeCalendarHeader>
+						<RangeCalendarCaption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</RangeCalendarHeader>
+
+					<RangeCalendarGrid>
+						<RangeCalendarGridHead>
+							<RangeCalendarGridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<RangeCalendarHeadCell>
+										{weekday.slice(0, 2)}
+									</RangeCalendarHeadCell>
 								{/each}
-							</RangeCalendar.GridRow>
-						{/each}
-					</RangeCalendar.GridBody>
-				</RangeCalendar.Grid>
+							</RangeCalendarGridRow>
+						</RangeCalendarGridHead>
+						<RangeCalendarGridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<RangeCalendarGridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<RangeCalendarCell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<RangeCalendarDay />
+											{/if}
+										</RangeCalendarCell>
+									{/each}
+								</RangeCalendarGridRow>
+							{/each}
+						</RangeCalendarGridBody>
+					</RangeCalendarGrid>
+				</RangeCalendarMonth>
 			{/each}
-		</RangeCalendar.Months>
+		</RangeCalendarMonths>
 	{/snippet}
 </RangeCalendarPrimitive.Root>