@kayord/ui 0.18.5 → 0.19.2

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.DescriptionProps = $props();
 </script>
 
-<AlertDialogPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const AlertDialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertDialogFooter = ReturnType<typeof AlertDialogFooter>;

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte.d.ts

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

package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -7,8 +7,9 @@
 
 <AlertDialogPrimitive.Overlay
 	bind:ref
+	data-slot="alert-dialog-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -2,7 +2,12 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, level = 3, ...restProps }: AlertDialogPrimitive.TitleProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.TitleProps = $props();
 </script>
 
-<AlertDialogPrimitive.Title bind:ref class={cn("text-lg font-semibold", className)} {level} {...restProps} />
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogTrigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+type AlertDialogTrigger = ReturnType<typeof AlertDialogTrigger>;
+export default AlertDialogTrigger;

package/dist/components/ui/alert-dialog/index.d.ts

@@ -1,4 +1,4 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
@@ -8,6 +8,5 @@ import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
 declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
 declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, };

package/dist/components/ui/alert-dialog/index.js

@@ -1,4 +1,5 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
@@ -8,7 +9,6 @@ import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
 const Root = AlertDialogPrimitive.Root;
-const Trigger = AlertDialogPrimitive.Trigger;
 const Portal = AlertDialogPrimitive.Portal;
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, 
 //

package/dist/components/ui/aspect-ratio/aspect-ratio.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
+</script>
+
+<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />

package/dist/components/ui/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+declare const AspectRatio: import("svelte").Component<AspectRatioPrimitive.RootProps, {}, "ref">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/components/ui/aspect-ratio/index.d.ts

@@ -1,3 +1,2 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-declare const Root: import("svelte").Component<AspectRatioPrimitive.RootProps, {}, "ref">;
+import Root from "./aspect-ratio.svelte";
 export { Root, Root as AspectRatio };

package/dist/components/ui/aspect-ratio/index.js

@@ -1,3 +1,2 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-const Root = AspectRatioPrimitive.Root;
+import Root from "./aspect-ratio.svelte";
 export { Root, Root as AspectRatio };

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -7,6 +7,7 @@
 
 <AvatarPrimitive.Fallback
 	bind:ref
-	class={cn("bg-muted flex size-full items-center justify-center", className)}
+	data-slot="avatar-fallback"
+	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
 	{...restProps}
 />

package/dist/components/ui/avatar/avatar-image.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.ImageProps = $props();
 </script>
 
-<AvatarPrimitive.Image bind:ref class={cn("aspect-square size-full", className)} {...restProps} />
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("aspect-square size-full", className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar.svelte

@@ -7,6 +7,7 @@
 
 <AvatarPrimitive.Root
 	bind:ref
-	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	data-slot="avatar"
+	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
 	{...restProps}
 />

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

@@ -2,13 +2,14 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+		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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-				outline: "text-foreground",
+				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 			},
 		},
 		defaultVariants: {
@@ -20,9 +21,8 @@
 </script>
 
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -39,6 +39,7 @@
 <svelte:element
 	this={href ? "a" : "span"}
 	bind:this={ref}
+	data-slot="badge"
 	{href}
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}

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

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", {
+}, 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 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
     variant: {
         default: string;
         secondary: string;
@@ -20,10 +20,10 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", 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 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAnchorAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariant;
 };

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import Ellipsis from "@lucide/svelte/icons/ellipsis";
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,11 +12,12 @@
 
 <span
 	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
 	class={cn("flex size-9 items-center justify-center", className)}
 	{...restProps}
 >
-	<Ellipsis class="size-4" />
+	<EllipsisIcon class="size-4" />
 	<span class="sr-only">More</span>
 </span>

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

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

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

@@ -1,11 +1,15 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li bind:this={ref} 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.5", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </li>

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

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

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +15,7 @@
 	} = $props();
 
 	const attrs = $derived({
+		"data-slot": "breadcrumb-link",
 		class: cn("hover:text-foreground transition-colors", className),
 		href,
 		...restProps,

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

@@ -1,6 +1,6 @@
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     child?: Snippet<[{
         props: HTMLAnchorAttributes;

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLOlAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLOlAttributes> = $props();
 </script>
 
 <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)}
 	{...restProps}
 >

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

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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +12,7 @@
 
 <span
 	bind:this={ref}
+	data-slot="breadcrumb-page"
 	role="link"
 	aria-disabled="true"
 	aria-current="page"

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte.d.ts

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

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

@@ -1,16 +1,22 @@
 <script lang="ts">
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import type { WithElementRef } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li role="presentation" aria-hidden="true" class={cn("[&>svg]:size-3.5", className)} bind:this={ref} {...restProps}>
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	{...restProps}
+>
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRight />
+		<ChevronRightIcon />
 	{/if}
 </li>

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLLiAttributes } from "svelte/elements";
 declare const BreadcrumbSeparator: import("svelte").Component<WithElementRef<HTMLLiAttributes>, {}, "ref">;
 type BreadcrumbSeparator = ReturnType<typeof BreadcrumbSeparator>;

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

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

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import type { WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const Breadcrumb: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;

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

@@ -1,24 +1,26 @@
 <script lang="ts" module>
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "ring-offset-background 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-hidden focus-visible:ring-2 focus-visible:ring-offset-2 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 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",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+				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",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
+				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",
 			},
 		},
 		defaultVariants: {
@@ -38,8 +40,6 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
-
 	let {
 		class: className,
 		variant = "default",
@@ -47,17 +47,34 @@
 		ref = $bindable(null),
 		href = undefined,
 		type = "button",
+		disabled,
 		children,
 		...restProps
 	}: ButtonProps = $props();
 </script>
 
 {#if href}
-	<a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
 		{@render children?.()}
 	</a>
 {:else}
-	<button bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {type} {...restProps}>
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
 		{@render children?.()}
 	</button>
 {/if}

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
@@ -16,7 +16,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "ring-offset-background 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-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+}, 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 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", {
     variant: {
         default: string;
         destructive: string;
@@ -46,7 +46,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "ring-offset-background 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-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 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 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", 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/calendar/calendar-cell.svelte

@@ -8,7 +8,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
 		className
 	)}
 	{...restProps}

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

@@ -10,14 +10,14 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-9 p-0 font-normal",
+		"size-8 p-0 font-normal select-none",
 		"[&[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",
+		"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 dark:data-selected:hover:bg-primary dark:data-selected:focus:bg-primary data-selected:opacity-100",
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		"data-disabled:text-muted-foreground data-disabled:opacity-50",
 		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		"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",
 		className

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

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