@kayord/ui 0.20.1 → 1.0.1

package/dist/components/ui/calendar/calendar.svelte

@@ -2,6 +2,9 @@
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import * as Calendar from "./index.js";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ButtonVariant } from "../button/button.svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -9,8 +12,31 @@
 		placeholder = $bindable(),
 		class: className,
 		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
 		...restProps
-	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.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>
 
 <!--
@@ -22,39 +48,67 @@ get along, so we shut typescript up by casting `value` to `never`.
 	bind:ref
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Header>
-			<Calendar.PrevButton />
-			<Calendar.Heading />
-			<Calendar.NextButton />
-		</Calendar.Header>
 		<Calendar.Months>
-			{#each months as month (month)}
-				<Calendar.Grid>
-					<Calendar.GridHead>
-						<Calendar.GridRow class="flex">
-							{#each weekdays as weekday (weekday)}
-								<Calendar.HeadCell>
-									{weekday.slice(0, 2)}
-								</Calendar.HeadCell>
-							{/each}
-						</Calendar.GridRow>
-					</Calendar.GridHead>
-					<Calendar.GridBody>
-						{#each month.weeks as weekDates (weekDates)}
-							<Calendar.GridRow class="mt-2 w-full">
-								{#each weekDates as date (date)}
-									<Calendar.Cell {date} month={month.value}>
-										<Calendar.Day />
-									</Calendar.Cell>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#each weekdays as weekday (weekday)}
+									<Calendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</Calendar.HeadCell>
 								{/each}
 							</Calendar.GridRow>
-						{/each}
-					</Calendar.GridBody>
-				</Calendar.Grid>
+						</Calendar.GridHead>
+						<Calendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<Calendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<Calendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
 			{/each}
 		</Calendar.Months>
 	{/snippet}

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -1,6 +1,21 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
 import * as Calendar from "./index.js";
 import { type WithoutChildrenOrChild } from "../../../utils.js";
-declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "placeholder" | "ref">;
+import type { ButtonVariant } from "../button/button.svelte";
+import { type DateValue } from "@internationalized/date";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+    months?: CalendarPrimitive.MonthSelectProps["months"];
+    years?: CalendarPrimitive.YearSelectProps["years"];
+    monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+    yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+    day?: Snippet<[{
+        day: DateValue;
+        outsideMonth: boolean;
+    }]>;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/calendar/index.d.ts

@@ -11,4 +11,9 @@ import GridHead from "./calendar-grid-head.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
 import NextButton from "./calendar-next-button.svelte";
 import PrevButton from "./calendar-prev-button.svelte";
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as Calendar, };
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, Root as Calendar, };

package/dist/components/ui/calendar/index.js

@@ -11,6 +11,11 @@ import GridHead from "./calendar-grid-head.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
 import NextButton from "./calendar-next-button.svelte";
 import PrevButton from "./calendar-prev-button.svelte";
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, 
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, 
 //
 Root as Calendar, };

package/dist/components/ui/carousel/carousel-next.svelte

@@ -20,6 +20,7 @@
 	data-slot="carousel-next"
 	{variant}
 	{size}
+	aria-disabled={!emblaCtx.canScrollNext}
 	class={cn(
 		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
@@ -27,7 +28,6 @@
 			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
 		className
 	)}
-	disabled={!emblaCtx.canScrollNext}
 	onclick={emblaCtx.scrollNext}
 	onkeydown={emblaCtx.handleKeyDown}
 	bind:ref

package/dist/components/ui/carousel/carousel-previous.svelte

@@ -20,6 +20,7 @@
 	data-slot="carousel-previous"
 	{variant}
 	{size}
+	disabled={!emblaCtx.canScrollPrev}
 	class={cn(
 		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
@@ -27,7 +28,6 @@
 			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
 		className
 	)}
-	disabled={!emblaCtx.canScrollPrev}
 	onclick={emblaCtx.scrollPrev}
 	onkeydown={emblaCtx.handleKeyDown}
 	{...restProps}

package/dist/components/ui/carousel/carousel.svelte

@@ -34,28 +34,22 @@
 	function scrollPrev() {
 		carouselState.api?.scrollPrev();
 	}
+
 	function scrollNext() {
 		carouselState.api?.scrollNext();
 	}
+
 	function scrollTo(index: number, jump?: boolean) {
 		carouselState.api?.scrollTo(index, jump);
 	}
 
-	function onSelect(api: CarouselAPI) {
-		if (!api) return;
-		carouselState.canScrollPrev = api.canScrollPrev();
-		carouselState.canScrollNext = api.canScrollNext();
-		carouselState.selectedIndex = api.selectedScrollSnap();
+	function onSelect() {
+		if (!carouselState.api) return;
+		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
+		carouselState.canScrollNext = carouselState.api.canScrollNext();
+		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
 	}
 
-	$effect(() => {
-		if (carouselState.api) {
-			onSelect(carouselState.api);
-			carouselState.api.on("select", onSelect);
-			carouselState.api.on("reInit", onSelect);
-		}
-	});
-
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === "ArrowLeft") {
 			e.preventDefault();
@@ -66,14 +60,13 @@
 		}
 	}
 
-	$effect(() => {
-		setApi(carouselState.api);
-	});
-
 	function onInit(event: CustomEvent<CarouselAPI>) {
 		carouselState.api = event.detail;
+		setApi(carouselState.api);
 
 		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+		carouselState.api.on("select", onSelect);
+		onSelect();
 	}
 
 	$effect(() => {

package/dist/components/ui/carousel/context.d.ts

@@ -1,6 +1,5 @@
 import type { WithElementRef } from "../../../utils.js";
-import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
-import type emblaCarouselSvelte from "embla-carousel-svelte";
+import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from "embla-carousel-svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
 type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;

package/dist/components/ui/chart/chart-container.svelte

@@ -42,12 +42,9 @@
 		// by default, layerchart shows a line intersecting the point when hovering, this hides that
 		"[&_.lc-highlight-line]:stroke-0",
 
-		// prevent text from being cut off
-		"[&_.lc-text-svg]:overflow-visible",
-
 		// by default, when you hover a point on a stacked series chart, it will drop the opacity
 		// of the other series, this overrides that
-		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs",
+		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",
 
 		// We don't want the little tick lines between the axis labels and the chart, so we remove
 		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every

package/dist/components/ui/collapsible/collapsible.svelte

@@ -4,4 +4,4 @@
 	let { ref = $bindable(null), open = $bindable(false), ...restProps }: CollapsiblePrimitive.RootProps = $props();
 </script>
 
-<CollapsiblePrimitive.Root bind:ref data-slot="collapsible" {...restProps} />
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

package/dist/components/ui/collapsible/index.d.ts

@@ -1,16 +1,4 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const Root: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
-declare const Trigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
-declare const Content: import("svelte").Component<Omit<{
-    forceMount?: boolean;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[import("bits-ui").CollapsibleContentSnippetProps & {
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CollapsibleContentPropsWithoutHTML> & {
-    forceMount?: boolean;
-}, {}, "ref">;
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
 export { Root, Content, Trigger, Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/components/ui/collapsible/index.js

@@ -1,7 +1,6 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-const Root = CollapsiblePrimitive.Root;
-const Trigger = CollapsiblePrimitive.Trigger;
-const Content = CollapsiblePrimitive.Content;
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
 export { Root, Content, Trigger, 
 //
 Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/components/ui/dialog/dialog-content.svelte

@@ -10,10 +10,12 @@
 		class: className,
 		portalProps,
 		children,
+		showCloseButton = true,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: DialogPrimitive.PortalProps;
 		children: Snippet;
+		showCloseButton?: boolean;
 	} = $props();
 </script>
 
@@ -29,11 +31,13 @@
 		{...restProps}
 	>
 		{@render children?.()}
-		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-		>
-			<XIcon />
-			<span class="sr-only">Close</span>
-		</DialogPrimitive.Close>
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
 	</DialogPrimitive.Content>
 </Dialog.Portal>

package/dist/components/ui/dialog/dialog-content.svelte.d.ts

@@ -4,6 +4,7 @@ import { type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
+    showCloseButton?: boolean;
 };
 declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogContent = ReturnType<typeof DialogContent>;

package/dist/components/ui/drawer/drawer-content.svelte

@@ -20,7 +20,7 @@
 		bind:ref
 		data-slot="drawer-content"
 		class={cn(
-			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col gap-4 p-4",
+			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
 			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
 			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
 			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",

package/dist/components/ui/drawer/drawer-footer.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2", className)} {...restProps}>
+<div bind:this={ref} data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/drawer/drawer-header.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="drawer-header" class={cn("flex flex-col gap-1.5", className)} {...restProps}>
+<div bind:this={ref} data-slot="drawer-header" class={cn("flex flex-col gap-1.5 p-4", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/input/input.svelte

@@ -23,7 +23,7 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className

package/dist/components/ui/pagination/pagination-link.svelte

@@ -7,7 +7,7 @@
 		ref = $bindable(null),
 		class: className,
 		size = "icon",
-		isActive = false,
+		isActive,
 		page,
 		children,
 		...restProps

package/dist/components/ui/radio-group/radio-group-item.svelte

@@ -22,7 +22,7 @@
 	{#snippet children({ checked })}
 		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
 			{#if checked}
-				<CircleIcon class="fill-primary text-primary-foreground size-2.5" />
+				<CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
 			{/if}
 		</div>
 	{/snippet}

package/dist/components/ui/range-calendar/index.d.ts

@@ -10,6 +10,11 @@ import Heading from "./range-calendar-heading.svelte";
 import HeadCell from "./range-calendar-head-cell.svelte";
 import NextButton from "./range-calendar-next-button.svelte";
 import PrevButton from "./range-calendar-prev-button.svelte";
+import MonthSelect from "./range-calendar-month-select.svelte";
+import YearSelect from "./range-calendar-year-select.svelte";
+import Caption from "./range-calendar-caption.svelte";
+import Nav from "./range-calendar-nav.svelte";
+import Month from "./range-calendar-month.svelte";
 declare const GridHead: import("svelte").Component<RangeCalendarPrimitive.GridHeadProps, {}, "ref">;
 declare const GridBody: import("svelte").Component<RangeCalendarPrimitive.GridBodyProps, {}, "ref">;
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as RangeCalendar, };
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, MonthSelect, YearSelect, Caption, Nav, Month, Root as RangeCalendar, };

package/dist/components/ui/range-calendar/index.js

@@ -10,8 +10,13 @@ import Heading from "./range-calendar-heading.svelte";
 import HeadCell from "./range-calendar-head-cell.svelte";
 import NextButton from "./range-calendar-next-button.svelte";
 import PrevButton from "./range-calendar-prev-button.svelte";
+import MonthSelect from "./range-calendar-month-select.svelte";
+import YearSelect from "./range-calendar-year-select.svelte";
+import Caption from "./range-calendar-caption.svelte";
+import Nav from "./range-calendar-nav.svelte";
+import Month from "./range-calendar-month.svelte";
 const GridHead = RangeCalendarPrimitive.GridHead;
 const GridBody = RangeCalendarPrimitive.GridBody;
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, 
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, MonthSelect, YearSelect, Caption, Nav, Month, 
 //
 Root as RangeCalendar, };

package/dist/components/ui/range-calendar/range-calendar-caption.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type RangeCalendar from "./range-calendar.svelte";
+	import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+	import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	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/dist/components/ui/range-calendar/range-calendar-caption.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "svelte";
+import type RangeCalendar from "./range-calendar.svelte";
+import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+import { type DateValue } from "@internationalized/date";
+type $$ComponentProps = {
+    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;
+};
+declare const RangeCalendarCaption: import("svelte").Component<$$ComponentProps, {}, "placeholder">;
+type RangeCalendarCaption = ReturnType<typeof RangeCalendarCaption>;
+export default RangeCalendarCaption;

package/dist/components/ui/range-calendar/range-calendar-cell.svelte

@@ -8,7 +8,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 data-highlighted:rounded-r-md 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",
+		"dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/range-calendar/range-calendar-day.svelte

@@ -10,18 +10,25 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-8 p-0 font-normal select-none data-[selected]:opacity-100",
-		"[&[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 dark:data-[selection-start]:hover:bg-primary dark:data-[selection-start]:focus:bg-primary",
-		// 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 dark:data-[selection-end]:hover:bg-primary dark:data-[selection-end]:focus:bg-primary",
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground data-[range-middle]:rounded-none",
+		// range Start
+		"data-[range-start]:bg-primary dark:data-[range-start]:hover:bg-accent data-[range-start]:text-primary-foreground",
+		// range End
+		"data-[range-end]:bg-primary dark:data-[range-end]:hover:bg-accent data-[range-end]:text-primary-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]:text-muted-foreground data-[disabled]:pointer-events-none 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",
+		// hover
+		"dark:hover:text-accent-foreground",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/range-calendar/range-calendar-grid.svelte

@@ -5,4 +5,8 @@
 	let { ref = $bindable(null), class: className, ...restProps }: RangeCalendarPrimitive.GridProps = $props();
 </script>
 
-<RangeCalendarPrimitive.Grid bind:ref class={cn("w-full border-collapse space-y-1", className)} {...restProps} />
+<RangeCalendarPrimitive.Grid
+	bind:ref
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	{...restProps}
+/>

package/dist/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -7,6 +7,6 @@
 
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn("text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal", className)}
 	{...restProps}
 />