@kayord/ui 3.0.11 → 4.0.0

package/dist/components/custom/progress-loading/ProgressLoading.svelte

@@ -5,10 +5,13 @@
 	interface Props {
 		class?: ProgressRootProps["class"];
 		innerClass?: ProgressRootProps["class"];
-		[key: string]: any;
 	}
 
-	let { class: className = undefined, innerClass = undefined, ...rest }: Props = $props();
+	let {
+		class: className = undefined,
+		innerClass = undefined,
+		...rest
+	}: Props & Omit<ProgressRootProps, "class"> = $props();
 </script>
 
 <Progress.Root class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)} {...rest}>

package/dist/components/custom/progress-loading/ProgressLoading.svelte.d.ts

@@ -2,8 +2,8 @@ import { type ProgressRootProps } from "bits-ui";
 interface Props {
     class?: ProgressRootProps["class"];
     innerClass?: ProgressRootProps["class"];
-    [key: string]: any;
 }
-declare const ProgressLoading: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Omit<ProgressRootProps, "class">;
+declare const ProgressLoading: import("svelte").Component<$$ComponentProps, {}, "">;
 type ProgressLoading = ReturnType<typeof ProgressLoading>;
 export default ProgressLoading;

package/dist/components/custom/theme-selector/ThemeSelector.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger class={buttonVariants({ variant, size: "icon" })}>
+	<DropdownMenu.Trigger class={`${buttonVariants({ variant, size: "icon" })} relative`}>
 		<SunIcon class="scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90" />
 		<MoonIcon class="absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0" />
 		<span class="sr-only">Toggle theme</span>

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

@@ -13,12 +13,12 @@
 <AccordionPrimitive.Content
 	bind:ref
 	data-slot="accordion-content"
-	class="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+	class="text-sm data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden"
 	{...restProps}
 >
 	<div
 		class={cn(
-			"[&_a]:hover:text-foreground pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+			"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
 			className
 		)}
 	>

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

@@ -2,7 +2,11 @@
 	import { Accordion as AccordionPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: AccordionPrimitive.ItemProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
 <AccordionPrimitive.Item

package/dist/components/ui/accordion/accordion-trigger.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 	import { cn, type WithoutChild } from "../../../utils.js";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
 
 	let {
 		ref = $bindable(null),
@@ -20,19 +20,13 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+			"rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDownIcon
-			data-slot="accordion-trigger-icon"
-			class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-		/>
-		<ChevronUpIcon
-			data-slot="accordion-trigger-icon"
-			class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-		/>
+		<ChevronDownIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+		<ChevronUpIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

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

@@ -1,5 +1,5 @@
-import Root from "./accordion.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
+import Root from "./accordion.svelte";
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,7 +1,7 @@
-import Root from "./accordion.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
+import Root from "./accordion.svelte";
 export { Root, Content, Item, Trigger, 
 //
 Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="alert-action" class={cn("absolute top-2 right-2", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn("absolute top-2 right-2", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/alert/alert-action.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+		"text-sm text-balance text-muted-foreground md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
 		className
 	)}
 	{...restProps}

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-title"
 	class={cn(
-		"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
 		className
 	)}
 	{...restProps}

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

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

package/dist/components/ui/alert/alert.svelte

@@ -6,8 +6,7 @@
 		variants: {
 			variant: {
 				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+				destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -19,8 +18,8 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -33,6 +32,12 @@
 	} = $props();
 </script>
 
-<div bind:this={ref} data-slot="alert" role="alert" class={cn(alertVariants({ variant }), className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -1,23 +1,23 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
     };
 }, undefined, "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full", {
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
+        default: "bg-card text-card-foreground";
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
     };
-}, undefined, "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full", unknown, unknown, undefined>>;
+}, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;
 };

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

@@ -1,6 +1,6 @@
-import Root from "./alert.svelte";
+import Action from "./alert-action.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
-import Action from "./alert-action.svelte";
+import Root from "./alert.svelte";
 export { alertVariants, type AlertVariant } from "./alert.svelte";
 export { Root, Description, Title, Action, Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

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

@@ -1,7 +1,7 @@
-import Root from "./alert.svelte";
+import Action from "./alert-action.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
-import Action from "./alert-action.svelte";
+import Root from "./alert.svelte";
 export { alertVariants } from "./alert.svelte";
 export { Root, Description, Title, Action, 
 //

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

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants, type ButtonVariant, type ButtonSize } from "../button/index.js";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

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

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants, type ButtonVariant, type ButtonSize } from "../button/index.js";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import AlertDialogPortal from "./alert-dialog-portal.svelte";
-	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
 	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
 	import type { ComponentProps } from "svelte";
 
 	let {
@@ -24,7 +24,7 @@
 		data-slot="alert-dialog-content"
 		data-size={size}
 		class={cn(
-			"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 bg-popover text-popover-foreground ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm",
+			"gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}

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

@@ -1,6 +1,6 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import AlertDialogPortal from "./alert-dialog-portal.svelte";
 import { type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
+import AlertDialogPortal from "./alert-dialog-portal.svelte";
 import type { ComponentProps } from "svelte";
 type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
     size?: "default" | "sm";

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

@@ -2,15 +2,16 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.DescriptionProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
 </script>
 
 <AlertDialogPrimitive.Description
 	bind:ref
 	data-slot="alert-dialog-description"
-	class={cn(
-		"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
-		className
-	)}
+	class={cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className)}
 	{...restProps}
 />

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
 	class={cn(
-		"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		"-mx-4 -mb-4 rounded-b-xl border-t bg-muted/50 p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
 		className
 	)}
 	{...restProps}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn(
-		"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-		className
-	)}
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 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-media.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-media"
-	class={cn(
-		"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
-		className
-	)}
+	class={cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

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

@@ -2,15 +2,16 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.OverlayProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
 </script>
 
 <AlertDialogPrimitive.Overlay
 	bind:ref
 	data-slot="alert-dialog-overlay"
-	class={cn(
-		"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
-		className
-	)}
+	class={cn("bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50", className)}
 	{...restProps}
 />

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

@@ -2,15 +2,16 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.TitleProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
 </script>
 
 <AlertDialogPrimitive.Title
 	bind:ref
 	data-slot="alert-dialog-title"
-	class={cn(
-		"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-		className
-	)}
+	class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
 	{...restProps}
 />

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

@@ -1,13 +1,13 @@
-import Root from "./alert-dialog.svelte";
-import Portal from "./alert-dialog-portal.svelte";
-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";
-import Footer from "./alert-dialog-footer.svelte";
-import Header from "./alert-dialog-header.svelte";
-import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
 import Media from "./alert-dialog-media.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Root from "./alert-dialog.svelte";
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, 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, Media as AlertDialogMedia, };

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

@@ -1,15 +1,15 @@
-import Root from "./alert-dialog.svelte";
-import Portal from "./alert-dialog-portal.svelte";
-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";
-import Footer from "./alert-dialog-footer.svelte";
-import Header from "./alert-dialog-header.svelte";
-import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
 import Media from "./alert-dialog-media.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Root from "./alert-dialog.svelte";
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, 
 //
 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, Media as AlertDialogMedia, };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

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

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

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

@@ -2,14 +2,18 @@
 	import { Avatar as AvatarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.FallbackProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
 </script>
 
 <AvatarPrimitive.Fallback
 	bind:ref
 	data-slot="avatar-fallback"
 	class={cn(
-		"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+		"rounded-full bg-muted text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/avatar/avatar-group-count.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="avatar-group-count"
 	class={cn(
-		"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+		"size-8 rounded-full bg-muted text-sm text-muted-foreground group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 relative flex shrink-0 items-center justify-center ring-2 ring-background",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/avatar/avatar-group-count.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="avatar-group"
 	class={cn(
-		"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+		"cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
 		className
 	)}
 	{...restProps}

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

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