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

package/src/lib/components/ui/bubble/bubble-reactions.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const bubbleReactionsVariants = tv({
+		base: "rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm absolute z-10 flex w-fit items-center justify-center",
+		variants: {
+			side: {
+				top: "top-0 -translate-y-3/4",
+				bottom: "bottom-0 translate-y-3/4",
+			},
+			align: {
+				start: "left-3",
+				end: "right-3",
+			},
+		},
+		defaultVariants: {
+			side: "bottom",
+			align: "end",
+		},
+	});
+
+	export type BubbleReactionsSide = VariantProps<typeof bubbleReactionsVariants>["side"];
+	export type BubbleReactionsAlign = VariantProps<typeof bubbleReactionsVariants>["align"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "bottom",
+		align = "end",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: BubbleReactionsSide;
+		align?: BubbleReactionsAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble-reactions"
+	data-align={align}
+	data-side={side}
+	class={cn(bubbleReactionsVariants({ side, align }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/bubble/bubble.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const bubbleVariants = tv({
+		base: "gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end group/bubble relative flex w-fit min-w-0 flex-col",
+		variants: {
+			variant: {
+				default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+				secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+				muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+				tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+				outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+				ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
+				destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BubbleVariant = VariantProps<typeof bubbleVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		align = "start",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: BubbleVariant;
+		align?: "start" | "end";
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble"
+	data-variant={variant}
+	data-align={align}
+	class={cn(bubbleVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/bubble/index.ts

@@ -0,0 +1,25 @@
+import Content from "./bubble-content.svelte";
+import Group from "./bubble-group.svelte";
+import Reactions, {
+	bubbleReactionsVariants,
+	type BubbleReactionsAlign,
+	type BubbleReactionsSide,
+} from "./bubble-reactions.svelte";
+import Root, { bubbleVariants, type BubbleVariant } from "./bubble.svelte";
+
+export {
+	Root,
+	Group,
+	Content,
+	Reactions,
+	bubbleVariants,
+	bubbleReactionsVariants,
+	type BubbleVariant,
+	type BubbleReactionsSide,
+	type BubbleReactionsAlign,
+	//
+	Root as Bubble,
+	Group as BubbleGroup,
+	Content as BubbleContent,
+	Reactions as BubbleReactions,
+};

package/src/lib/components/ui/button/button.svelte

@@ -1,26 +1,28 @@
 <script lang="ts" module>
-	import type { WithElementRef } from "bits-ui";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 	import { type VariantProps, tv } from "tailwind-variants";
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 
 	export const buttonVariants = tv({
-		base: "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
-				outline:
-					"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+				default: "bg-primary text-primary-foreground hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-9 px-4 py-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
-				icon: "h-9 w-9",
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
 			},
 		},
 		defaultVariants: {
@@ -40,8 +42,6 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils";
-
 	let {
 		class: className,
 		variant = "default",
@@ -49,6 +49,7 @@
 		ref = $bindable(null),
 		href = undefined,
 		type = "button",
+		disabled,
 		children,
 		...restProps
 	}: ButtonProps = $props();
@@ -57,8 +58,12 @@
 {#if href}
 	<a
 		bind:this={ref}
+		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
-		{href}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
 		{...restProps}
 	>
 		{@render children?.()}
@@ -66,8 +71,10 @@
 {:else}
 	<button
 		bind:this={ref}
+		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
+		{disabled}
 		{...restProps}
 	>
 		{@render children?.()}

package/src/lib/components/ui/button-group/button-group-separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/components/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn(
+		"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/button-group/button-group-text.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn("bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className),
+		"data-slot": "button-group-text",
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/lib/components/ui/button-group/button-group.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const buttonGroupVariants = tv({
+		base: "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		variants: {
+			orientation: {
+				horizontal:
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+				vertical:
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	});
+
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+</script>
+
+<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,
+		orientation = "horizontal",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: ButtonGroupOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/button-group/index.ts

@@ -0,0 +1,15 @@
+import Separator from "./button-group-separator.svelte";
+import Text from "./button-group-text.svelte";
+import Root, { buttonGroupVariants, type ButtonGroupOrientation } from "./button-group.svelte";
+
+export {
+	Root,
+	Text,
+	Separator,
+	buttonGroupVariants,
+	type ButtonGroupOrientation,
+	//
+	Root as ButtonGroup,
+	Text as ButtonGroupText,
+	Separator as ButtonGroupSeparator,
+};

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import type Calendar from "./calendar.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["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()}
+	<CalendarMonthSelect
+		{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()}
+	<CalendarYearSelect {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/calendar/calendar-cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,10 +10,10 @@
 </script>
 
 <CalendarPrimitive.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 [&:has([data-selected])]:rounded-md",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from '../button/index';
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,21 +10,24 @@
 </script>
 
 <CalendarPrimitive.Day
+	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"size-8 p-0 font-normal",
-		// Today
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
-		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		"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",
+		"[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground",
+		// Outside months
+		"[&[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",
-		// 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-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		// focus
+		"focus:relative focus:border-ring focus:ring-ring/50",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,9 @@
 
 <CalendarPrimitive.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/calendar/calendar-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,9 @@
 
 <CalendarPrimitive.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/calendar/calendar-heading.svelte

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

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } 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<CalendarPrimitive.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
+	)}
+>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="absolute inset-0 bg-background opacity-0 dark:bg-popover dark:text-popover-foreground"
+		{...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}
+	</CalendarPrimitive.MonthSelect>
+</span>

package/src/lib/components/ui/calendar/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 w-full flex-col gap-4", className)}>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/calendar/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?.()}