@kayord/ui 2.1.13 → 3.0.0

package/dist/components/ui/navigation-menu/navigation-menu.svelte

@@ -18,11 +18,10 @@
 	bind:ref
 	data-slot="navigation-menu"
 	data-viewport={viewport}
-	class={cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className)}
+	class={cn("group/navigation-menu relative flex max-w-max max-w-max flex-1 items-center justify-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
-
 	{#if viewport}
 		<NavigationMenuViewport />
 	{/if}

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

@@ -7,8 +7,8 @@ import NextButton from "./pagination-next-button.svelte";
 import Ellipsis from "./pagination-ellipsis.svelte";
 import Previous from "./pagination-previous.svelte";
 import Next from "./pagination-next.svelte";
-export { Root, Content, Item, Link, PrevButton, //old
-NextButton, //old
-Ellipsis, Previous, Next, Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, //old
-NextButton as PaginationNextButton, //old
+export { Root, Content, Item, Link, PrevButton, // old
+NextButton, // old
+Ellipsis, Previous, Next, Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, // old
+NextButton as PaginationNextButton, // old
 Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext, };

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

@@ -7,10 +7,10 @@ import NextButton from "./pagination-next-button.svelte";
 import Ellipsis from "./pagination-ellipsis.svelte";
 import Previous from "./pagination-previous.svelte";
 import Next from "./pagination-next.svelte";
-export { Root, Content, Item, Link, PrevButton, //old
-NextButton, //old
+export { Root, Content, Item, Link, PrevButton, // old
+NextButton, // old
 Ellipsis, Previous, Next, 
 //
-Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, //old
-NextButton as PaginationNextButton, //old
+Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, // old
+NextButton as PaginationNextButton, // old
 Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext, };

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

@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
 </script>
 
-<ul
-	bind:this={ref}
-	data-slot="pagination-content"
-	class={cn("flex flex-row items-center gap-1", className)}
-	{...restProps}
->
+<ul bind:this={ref} data-slot="pagination-content" class={cn("flex items-center gap-0.5", className)} {...restProps}>
 	{@render children?.()}
 </ul>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import MoreHorizontalIcon from "@lucide/svelte/icons/more-horizontal";
 
 	let {
 		ref = $bindable(null),
@@ -14,9 +14,12 @@
 	bind:this={ref}
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
-	class={cn("flex size-9 items-center justify-center", className)}
+	class={cn(
+		"flex size-8 items-center items-center justify-center justify-center [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
 	{...restProps}
 >
-	<EllipsisIcon class="size-4" />
+	<MoreHorizontalIcon />
 	<span class="sr-only">More pages</span>
 </span>

package/dist/components/ui/pagination/pagination-ellipsis.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const PaginationEllipsis: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
 type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;
 export default PaginationEllipsis;

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
-	import { type Props, buttonVariants } from "../button/index.js";
-
+	import { buttonVariants, type ButtonSize } from "../button/index.js";
 	let {
 		ref = $bindable(null),
 		class: className,
@@ -11,10 +10,10 @@
 		page,
 		children,
 		...restProps
-	}: PaginationPrimitive.PageProps &
-		Props & {
-			isActive: boolean;
-		} = $props();
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
@@ -27,13 +26,13 @@
 	aria-current={isActive ? "page" : undefined}
 	data-slot="pagination-link"
 	data-active={isActive}
-	class={cn(
-		buttonVariants({
-			variant: isActive ? "outline" : "ghost",
-			size,
-		}),
-		className
-	)}
-	children={children || Fallback}
+	data-size={size}
+	class={cn(buttonVariants({ size, variant: isActive ? "outline" : "ghost" }), "cn-pagination-link", className)}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>

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

@@ -1,6 +1,7 @@
 import { Pagination as PaginationPrimitive } from "bits-ui";
-import { type Props } from "../button/index.js";
-type $$ComponentProps = PaginationPrimitive.PageProps & Props & {
+import { type ButtonSize } from "../button/index.js";
+type $$ComponentProps = PaginationPrimitive.PageProps & {
+    size?: ButtonSize;
     isActive: boolean;
 };
 declare const PaginationLink: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/components/ui/pagination/pagination-next-button.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
+	import { buttonVariants } from "../button/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -20,14 +20,12 @@
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"
-	class={cn(
-		buttonVariants({
-			size: "default",
-			variant: "ghost",
-			class: "gap-1 px-2.5 sm:pe-2.5",
-		}),
-		className
-	)}
-	children={children || Fallback}
+	class={cn(buttonVariants({ variant: "ghost" }), "pr-1.5!", className)}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>

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

@@ -1,25 +1,15 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "../button/index.js";
+	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
+	import { PaginationLink } from "./index.js";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+
+	type PaginationNextProps = ComponentProps<typeof PaginationLink>;
 
-	let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.NextButtonProps = $props();
+	let { class: className, ...restProps }: PaginationNextProps = $props();
 </script>
 
-<PaginationPrimitive.NextButton
-	bind:ref
-	aria-label="Go to next page"
-	class={cn(
-		buttonVariants({
-			size: "default",
-			variant: "ghost",
-			class: "gap-1 px-2.5 sm:pe-2.5",
-		}),
-		className
-	)}
-	{...restProps}
->
-	<span class="hidden sm:block">Next</span>
-	<ChevronRightIcon /></PaginationPrimitive.NextButton
->
+<PaginationLink aria-label="Go to next page" size="default" class={cn("pr-1.5!", className)} {...restProps}>
+	<span class="cn-pagination-next-text hidden sm:block">Next</span>
+	<ChevronRightIcon data-icon="inline-end" />
+</PaginationLink>

package/dist/components/ui/pagination/pagination-next.svelte.d.ts

@@ -1,4 +1,15 @@
-import { Pagination as PaginationPrimitive } from "bits-ui";
-declare const PaginationNext: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+declare const PaginationNext: import("svelte").Component<Omit<{
+    page: import("bits-ui").Page;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveButtonAttributes, import("bits-ui").PaginationPagePropsWithoutHTML> & {
+    size?: import("../button/button.svelte.js").ButtonSize;
+    isActive: boolean;
+}, {}, "">;
 type PaginationNext = ReturnType<typeof PaginationNext>;
 export default PaginationNext;

package/dist/components/ui/pagination/pagination-prev-button.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
+	import { buttonVariants } from "../button/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -20,14 +20,12 @@
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(
-		buttonVariants({
-			size: "default",
-			variant: "ghost",
-			class: "gap-1 px-2.5 sm:ps-2.5",
-		}),
-		className
-	)}
-	children={children || Fallback}
+	class={cn(buttonVariants({ variant: "ghost" }), "pl-1.5!", className)}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>

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

@@ -1,25 +1,15 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "../button/index.js";
+	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
+	import { PaginationLink } from "./index.js";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+
+	type PaginationPreviousProps = ComponentProps<typeof PaginationLink>;
 
-	let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.PrevButtonProps = $props();
+	let { class: className, ...restProps }: PaginationPreviousProps = $props();
 </script>
 
-<PaginationPrimitive.PrevButton
-	bind:ref
-	aria-label="Go to previous page"
-	class={cn(
-		buttonVariants({
-			size: "default",
-			variant: "ghost",
-			class: "gap-1 px-2.5 sm:ps-2.5",
-		}),
-		className
-	)}
-	{...restProps}
->
-	<ChevronLeftIcon />
-	<span class="hidden sm:block">Previous</span></PaginationPrimitive.PrevButton
->
+<PaginationLink aria-label="Go to previous page" size="default" class={cn("pl-1.5!", className)} {...restProps}>
+	<ChevronLeftIcon data-icon="inline-start" />
+	<span class="cn-pagination-previous-text hidden sm:block">Previous</span>
+</PaginationLink>

package/dist/components/ui/pagination/pagination-previous.svelte.d.ts

@@ -1,4 +1,15 @@
-import { Pagination as PaginationPrimitive } from "bits-ui";
-declare const PaginationPrevious: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+declare const PaginationPrevious: import("svelte").Component<Omit<{
+    page: import("bits-ui").Page;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveButtonAttributes, import("bits-ui").PaginationPagePropsWithoutHTML> & {
+    size?: import("../button/button.svelte.js").ButtonSize;
+    isActive: boolean;
+}, {}, "">;
 type PaginationPrevious = ReturnType<typeof PaginationPrevious>;
 export default PaginationPrevious;

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

@@ -20,9 +20,9 @@
 	role="navigation"
 	aria-label="pagination"
 	data-slot="pagination"
-	class={cn("mx-auto flex w-full justify-center", className)}
 	{count}
 	{perPage}
 	{siblingCount}
+	class={cn("cn-pagination mx-auto flex w-full justify-center", className)}
 	{...restProps}
 />

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

@@ -1,6 +1,9 @@
 import Root from "./popover.svelte";
 import Close from "./popover-close.svelte";
 import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
 import Trigger from "./popover-trigger.svelte";
 import Portal from "./popover-portal.svelte";
-export { Root, Content, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };

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

@@ -1,8 +1,11 @@
 import Root from "./popover.svelte";
 import Close from "./popover-close.svelte";
 import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
 import Trigger from "./popover-trigger.svelte";
 import Portal from "./popover-portal.svelte";
-export { Root, Content, Trigger, Close, Portal, 
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, 
 //
-Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };
+Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };

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

@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/popover/popover-description.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-description" class={cn("text-muted-foreground", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/popover/popover-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+declare const PopoverDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverDescription = ReturnType<typeof PopoverDescription>;
+export default PopoverDescription;

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

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

package/dist/components/ui/popover/popover-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+declare const PopoverHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverHeader = ReturnType<typeof PopoverHeader>;
+export default PopoverHeader;

package/dist/components/ui/popover/popover-title.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-title" class={cn("font-medium", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/popover/popover-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+declare const PopoverTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverTitle = ReturnType<typeof PopoverTitle>;
+export default PopoverTitle;

package/dist/components/ui/progress/progress.svelte

@@ -14,14 +14,14 @@
 <ProgressPrimitive.Root
 	bind:ref
 	data-slot="progress"
-	class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+	class={cn("bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full", className)}
 	{value}
 	{max}
 	{...restProps}
 >
 	<div
 		data-slot="progress-indicator"
-		class="bg-primary h-full w-full flex-1 transition-all"
+		class="bg-primary size-full flex-1 transition-all"
 		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>

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

@@ -14,15 +14,17 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		"border-input text-primary 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:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
 			{#if checked}
-				<CircleIcon class="fill-primary absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+				<CircleIcon
+					class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+				/>
 			{/if}
 		</div>
 	{/snippet}

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

@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn("grid gap-3", className)}
+	class={cn("grid w-full gap-2", className)}
 	{...restProps}
 />

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

@@ -8,7 +8,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"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-e-md [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:has([data-range-end])]:rounded-e-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-md last:[&:has([data-range-middle])]:rounded-e-md [&:has([data-range-start])]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-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-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) [&:has([data-range-start])]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
 	{...restProps}

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let { ref = $bindable(null), class: className, ...restProps }: RangeCalendarPrimitive.DayProps = $props();
@@ -9,13 +8,13 @@
 <RangeCalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-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",
+		"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-[range-middle]:rounded-none",
 		// range Start
-		"data-[range-start]:bg-primary dark:data-[range-start]:hover:bg-accent data-[range-start]:text-primary-foreground",
+		"data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground",
 		// range End
-		"data-[range-end]:bg-primary dark:data-[range-end]:hover:bg-accent data-[range-end]:text-primary-foreground",
+		"data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]: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
@@ -23,8 +22,6 @@
 		// Unavailable
 		"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

package/dist/components/ui/range-calendar/range-calendar-month-select.svelte

@@ -31,7 +31,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -26,6 +26,11 @@
 		"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}
+</RangeCalendarPrimitive.NextButton>

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -26,6 +26,11 @@
 		"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}
+</RangeCalendarPrimitive.PrevButton>

package/dist/components/ui/range-calendar/range-calendar-year-select.svelte

@@ -30,7 +30,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}

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

@@ -46,7 +46,7 @@
 	{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",
+		"bg-background group/calendar p-2 p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
 		className
 	)}
 	{locale}

package/dist/components/ui/resizable/resizable-handle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import GripVerticalIcon from "@lucide/svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
@@ -17,14 +16,12 @@
 	bind:ref
 	data-slot="resizable-handle"
 	class={cn(
-		"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:start-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
+		"cn-resizable-handle bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-			<GripVerticalIcon class="size-2.5" />
-		</div>
+		<div class="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg"></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>