@kayord/ui 2.1.14 → 3.0.0

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

@@ -5,13 +5,17 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         secondary: string;
         destructive: string;
         outline: string;
+        ghost: string;
+        link: string;
     };
-}, undefined, "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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
     variant: {
         default: string;
         secondary: string;
         destructive: string;
         outline: string;
+        ghost: string;
+        link: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -19,8 +23,10 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         secondary: string;
         destructive: string;
         outline: string;
+        ghost: string;
+        link: string;
     };
-}, undefined, "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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", unknown, unknown, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
 	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),
@@ -15,9 +15,9 @@
 	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
-	class={cn("flex size-9 items-center justify-center", className)}
+	class={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
 	{...restProps}
 >
-	<EllipsisIcon class="size-4" />
+	<MoreHorizontalIcon />
 	<span class="sr-only">More</span>
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -5,11 +5,6 @@
 	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li
-	bind:this={ref}
-	data-slot="breadcrumb-item"
-	class={cn("inline-flex items-center gap-1.5", className)}
-	{...restProps}
->
+<li bind:this={ref} data-slot="breadcrumb-item" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
 	{@render children?.()}
 </li>

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -8,7 +8,7 @@
 <ol
 	bind:this={ref}
 	data-slot="breadcrumb-list"
-	class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
+	class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 
 	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>

package/dist/components/ui/breadcrumb/breadcrumb.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +11,12 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<nav bind:this={ref} data-slot="breadcrumb" class={className} aria-label="breadcrumb" {...restProps}>
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	aria-label="breadcrumb"
+	class={cn("cn-breadcrumb", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </nav>

package/dist/components/ui/button/button.svelte

@@ -4,25 +4,30 @@
 	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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		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 active:translate-y-px aria-invalid:ring-3 [&_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-xs",
-				destructive:
-					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 				outline:
-					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+					"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-secondary/80 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-3 has-data-[icon=inline-start]:pl-3",
+				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/dist/components/ui/button/button.svelte.d.ts

@@ -4,55 +4,61 @@ import { type VariantProps } from "tailwind-variants";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
-        destructive: string;
         outline: string;
         secondary: string;
         ghost: string;
+        destructive: string;
         link: string;
     };
     size: {
         default: string;
+        xs: string;
         sm: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
         "icon-sm": string;
         "icon-lg": string;
     };
-}, undefined, "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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+}, undefined, "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 active:translate-y-px aria-invalid:ring-3 [&_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", {
     variant: {
         default: string;
-        destructive: string;
         outline: string;
         secondary: string;
         ghost: string;
+        destructive: string;
         link: string;
     };
     size: {
         default: string;
+        xs: string;
         sm: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
         "icon-sm": string;
         "icon-lg": string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
-        destructive: string;
         outline: string;
         secondary: string;
         ghost: string;
+        destructive: string;
         link: string;
     };
     size: {
         default: string;
+        xs: string;
         sm: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
         "icon-sm": string;
         "icon-lg": string;
     };
-}, undefined, "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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+}, undefined, "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 active:translate-y-px aria-invalid:ring-3 [&_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", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/components/ui/button-group/button-group-separator.svelte

@@ -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-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+		className
+	)}
 	{...restProps}
 />

package/dist/components/ui/button-group/button-group-text.svelte

@@ -15,9 +15,10 @@
 	const mergedProps = $derived({
 		...restProps,
 		class: cn(
-			"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+			"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/dist/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 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! [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
 				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 [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
 			},
 		},
 		defaultVariants: {

package/dist/components/ui/button-group/button-group.svelte.d.ts

@@ -4,7 +4,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
         horizontal: string;
         vertical: string;
     };
-}, undefined, "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", {
+}, undefined, "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     orientation: {
         horizontal: string;
         vertical: string;
@@ -14,7 +14,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
         horizontal: string;
         vertical: string;
     };
-}, undefined, "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", unknown, unknown, undefined>>;
+}, undefined, "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
 export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";

package/dist/components/ui/button-group/index.d.ts

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

package/dist/components/ui/button-group/index.js

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

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

@@ -8,7 +8,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"relative size-(--cell-size) 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/dist/components/ui/calendar/calendar-day.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 
@@ -9,18 +8,17 @@
 <CalendarPrimitive.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",
+		"[&: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",
 		// 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",
 		// inner spans

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

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

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

@@ -20,7 +20,7 @@
 >
 	<CalendarPrimitive.MonthSelect
 		bind:ref
-		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		class="bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
 		{...restProps}
 	>
 		{#snippet child({ props, monthItems, selectedMonthItem })}
@@ -35,7 +35,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/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/dist/components/ui/calendar/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}
+</CalendarPrimitive.NextButton>

package/dist/components/ui/calendar/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}
+</CalendarPrimitive.PrevButton>

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

@@ -34,7 +34,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/calendar/calendar.svelte

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

package/dist/components/ui/card/card-action.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	class={cn("cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+	class={cn("bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+		"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
 		className
 	)}
 	{...restProps}

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

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-title" class={cn("leading-none font-semibold", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card.svelte

@@ -6,14 +6,19 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
-	class={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}
+	data-size={size}
+	class={cn(
+		"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,5 +1,8 @@
 import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
-declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    size?: "default" | "sm";
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
 	import type { WithoutChildren } from "bits-ui";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "../../../utils.js";
 	import { Button, type Props } from "../button/index.js";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		variant = "outline",
-		size = "icon",
+		size = "icon-sm",
 		...restProps
 	}: WithoutChildren<Props> = $props();
 
@@ -21,8 +21,9 @@
 	{variant}
 	{size}
 	aria-disabled={!emblaCtx.canScrollNext}
+	disabled={!emblaCtx.canScrollNext}
 	class={cn(
-		"absolute size-8 rounded-full",
+		"absolute touch-manipulation rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "-end-12 top-1/2 -translate-y-1/2"
 			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
@@ -33,6 +34,6 @@
 	bind:ref
 	{...restProps}
 >
-	<ArrowRightIcon class="size-4" />
+	<ChevronRightIcon />
 	<span class="sr-only">Next slide</span>
 </Button>

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
 	import type { WithoutChildren } from "bits-ui";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "../../../utils.js";
 	import { Button, type Props } from "../button/index.js";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		variant = "outline",
-		size = "icon",
+		size = "icon-sm",
 		...restProps
 	}: WithoutChildren<Props> = $props();
 
@@ -21,8 +21,9 @@
 	{variant}
 	{size}
 	aria-disabled={!emblaCtx.canScrollPrev}
+	disabled={!emblaCtx.canScrollPrev}
 	class={cn(
-		"absolute size-8 rounded-full",
+		"absolute touch-manipulation rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "-start-12 top-1/2 -translate-y-1/2"
 			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
@@ -33,6 +34,6 @@
 	{...restProps}
 	bind:ref
 >
-	<ArrowLeftIcon class="size-4" />
+	<ChevronLeftIcon />
 	<span class="sr-only">Previous slide</span>
 </Button>

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

@@ -13,6 +13,7 @@
 		...restProps
 	}: WithElementRef<CarouselProps> = $props();
 
+	// svelte-ignore state_referenced_locally
 	let carouselState = $state<EmblaContext>({
 		api: undefined,
 		scrollPrev,