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

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,28 +1,28 @@
 <script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		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 inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_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 shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				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 has-[>svg]:px-3",
-				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-				"icon-sm": "size-8",
-				"icon-lg": "size-10",
+				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: {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
 	import { cn } from "$lib/components/utils.js";
 	import type { ComponentProps } from "svelte";
-	import { Separator } from "$lib/components/ui/separator/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,6 +15,9 @@
 	bind:ref
 	data-slot="button-group-separator"
 	{orientation}
-	class={cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className)}
+	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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,8 @@
 
 	const mergedProps = $derived({
 		...restProps,
-		class: cn(
-			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-			className
-		),
+		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>
 

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

@@ -2,13 +2,13 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const buttonGroupVariants = tv({
-		base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		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:
-					"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none",
+					"[&>[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:
-					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+					"[&>[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: {

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

@@ -1,11 +1,13 @@
-import Root from "./button-group.svelte";
-import Text from "./button-group-text.svelte";
 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,

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import type Calendar from "./calendar.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
 	import CalendarMonthSelect from "./calendar-month-select.svelte";
 	import CalendarYearSelect from "./calendar-year-select.svelte";
-	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+	import type Calendar from "./calendar.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		captionLayout,

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

@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-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
 	)}
 	{...restProps}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/components/utils.js";
 	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,20 +12,19 @@
 <CalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none",
+		"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 dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-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]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
 		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
-		// hover
-		"dark:hover:text-accent-foreground",
 		// focus
-		"focus:border-ring focus:ring-ring/50 focus:relative",
+		"focus:relative focus:border-ring focus:ring-ring/50",
 		// inner spans
 		"[&>span]:text-xs [&>span]:opacity-70",
 		className

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

@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Grid
 	bind:ref
-	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	class={cn("flex w-full border-collapse flex-col", className)}
 	{...restProps}
 />

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

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

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

@@ -12,7 +12,7 @@
 <CalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium",
+		"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-month-select.svelte

@@ -1,7 +1,7 @@
 <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";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 
 	let {
 		ref = $bindable(null),
@@ -14,11 +14,15 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		"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 opacity-0" {...restProps}>
+	<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)}
@@ -26,18 +30,18 @@
 						value={monthItem.value}
 						selected={value !== undefined
 							? monthItem.value === value
-							: monthItem.value === selectedMonthItem.value}
+							: monthItem.value === selectedMonthItem?.value}
 					>
 						{monthItem.label}
 					</option>
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				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="size-4" />
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem?.label}
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.MonthSelect>

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

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+<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,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	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";
 
@@ -16,16 +16,22 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class="size-4" />
+	<ChevronRightIcon class={cn("cn-rtl-flip size-4", className)} />
 {/snippet}
 
 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50",
+		"rtl:rotate-180",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.NextButton>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	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";
 
@@ -16,16 +16,22 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class="size-4" />
+	<ChevronLeftIcon class={cn("cn-rtl-flip size-4", className)} />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50",
+		"rtl:rotate-180",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.PrevButton>

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

@@ -1,7 +1,7 @@
 <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";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 
 	let {
 		ref = $bindable(null),
@@ -13,11 +13,15 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		"relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
 		className
 	)}
 >
-	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="absolute inset-0 opacity-0 dark:bg-popover dark:text-popover-foreground"
+		{...restProps}
+	>
 		{#snippet child({ props, yearItems, selectedYearItem })}
 			<select {...props} {value}>
 				{#each yearItems as yearItem (yearItem.value)}
@@ -25,18 +29,18 @@
 						value={yearItem.value}
 						selected={value !== undefined
 							? yearItem.value === value
-							: yearItem.value === selectedYearItem.value}
+							: yearItem.value === selectedYearItem?.value}
 					>
 						{yearItem.label}
 					</option>
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				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}
-				<ChevronDownIcon class="size-4" />
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem?.label || value}
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.YearSelect>

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

@@ -1,9 +1,22 @@
 <script lang="ts">
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js";
 	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import CalendarCaption from "./calendar-caption.svelte";
+	import CalendarCell from "./calendar-cell.svelte";
+	import CalendarDay from "./calendar-day.svelte";
+	import CalendarGridBody from "./calendar-grid-body.svelte";
+	import CalendarGridHead from "./calendar-grid-head.svelte";
+	import CalendarGridRow from "./calendar-grid-row.svelte";
+	import CalendarGrid from "./calendar-grid.svelte";
+	import CalendarHeadCell from "./calendar-head-cell.svelte";
+	import CalendarHeader from "./calendar-header.svelte";
+	import CalendarMonth from "./calendar-month.svelte";
+	import CalendarMonths from "./calendar-months.svelte";
+	import CalendarNav from "./calendar-nav.svelte";
+	import CalendarNextButton from "./calendar-next-button.svelte";
+	import CalendarPrevButton from "./calendar-prev-button.svelte";
 	import type { ButtonVariant } from "../button/button.svelte";
-	import { isEqualMonth, type DateValue } from "@internationalized/date";
 	import type { Snippet } from "svelte";
 
 	let {
@@ -50,7 +63,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekdayFormat}
 	{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",
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
 		className
 	)}
 	{locale}
@@ -59,15 +72,15 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Months>
-			<Calendar.Nav>
-				<Calendar.PrevButton variant={buttonVariant} />
-				<Calendar.NextButton variant={buttonVariant} />
-			</Calendar.Nav>
+		<CalendarMonths>
+			<CalendarNav>
+				<CalendarPrevButton variant={buttonVariant} />
+				<CalendarNextButton variant={buttonVariant} />
+			</CalendarNav>
 			{#each months as month, monthIndex (month)}
-				<Calendar.Month>
-					<Calendar.Header>
-						<Calendar.Caption
+				<CalendarMonth>
+					<CalendarHeader>
+						<CalendarCaption
 							{captionLayout}
 							months={monthsProp}
 							{monthFormat}
@@ -78,38 +91,38 @@ get along, so we shut typescript up by casting `value` to `never`.
 							{locale}
 							{monthIndex}
 						/>
-					</Calendar.Header>
-					<Calendar.Grid>
-						<Calendar.GridHead>
-							<Calendar.GridRow class="select-none">
-								{#each weekdays as weekday (weekday)}
-									<Calendar.HeadCell>
+					</CalendarHeader>
+					<CalendarGrid>
+						<CalendarGridHead>
+							<CalendarGridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<CalendarHeadCell>
 										{weekday.slice(0, 2)}
-									</Calendar.HeadCell>
+									</CalendarHeadCell>
 								{/each}
-							</Calendar.GridRow>
-						</Calendar.GridHead>
-						<Calendar.GridBody>
+							</CalendarGridRow>
+						</CalendarGridHead>
+						<CalendarGridBody>
 							{#each month.weeks as weekDates (weekDates)}
-								<Calendar.GridRow class="mt-2 w-full">
+								<CalendarGridRow class="mt-2 w-full">
 									{#each weekDates as date (date)}
-										<Calendar.Cell {date} month={month.value}>
+										<CalendarCell {date} month={month.value}>
 											{#if day}
 												{@render day({
 													day: date,
 													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
-												<Calendar.Day />
+												<CalendarDay />
 											{/if}
-										</Calendar.Cell>
+										</CalendarCell>
 									{/each}
-								</Calendar.GridRow>
+								</CalendarGridRow>
 							{/each}
-						</Calendar.GridBody>
-					</Calendar.Grid>
-				</Calendar.Month>
+						</CalendarGridBody>
+					</CalendarGrid>
+				</CalendarMonth>
 			{/each}
-		</Calendar.Months>
+		</CalendarMonths>
 	{/snippet}
 </CalendarPrimitive.Root>

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

@@ -1,21 +1,21 @@
-import Root from "./calendar.svelte";
+import Caption from "./calendar-caption.svelte";
 import Cell from "./calendar-cell.svelte";
 import Day from "./calendar-day.svelte";
-import Grid from "./calendar-grid.svelte";
-import Header from "./calendar-header.svelte";
-import Months from "./calendar-months.svelte";
-import GridRow from "./calendar-grid-row.svelte";
-import Heading from "./calendar-heading.svelte";
 import GridBody from "./calendar-grid-body.svelte";
 import GridHead from "./calendar-grid-head.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Grid from "./calendar-grid.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
-import NextButton from "./calendar-next-button.svelte";
-import PrevButton from "./calendar-prev-button.svelte";
+import Header from "./calendar-header.svelte";
+import Heading from "./calendar-heading.svelte";
 import MonthSelect from "./calendar-month-select.svelte";
-import YearSelect from "./calendar-year-select.svelte";
 import Month from "./calendar-month.svelte";
+import Months from "./calendar-months.svelte";
 import Nav from "./calendar-nav.svelte";
-import Caption from "./calendar-caption.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Root from "./calendar.svelte";
 
 export {
 	Day,