better-auth-ui-svelte 0.3.6 → 0.3.8

package/README.md

@@ -480,16 +480,19 @@ Then use it everywhere:
 ```svelte
 <!-- src/routes/+layout.svelte -->
 <script lang="ts">
-  import { AuthUIProvider } from 'better-auth-ui-svelte';
-  import { authPathConfig } from '$lib/config/auth-config';
-
-  // Provider will use your custom paths
-  <AuthUIProvider
-    {authClient}
-    basePath={authPathConfig.basePath}
-    viewPaths={authPathConfig.viewPaths}
-  />
+	import { AuthUIProvider } from 'better-auth-ui-svelte';
+	import { authClient } from '$lib/auth-client';
+	import { authPathConfig } from '$lib/config/auth-config';
 </script>
+
+<!-- Provider will use your custom paths -->
+<AuthUIProvider
+	{authClient}
+	basePath={authPathConfig.basePath}
+	viewPaths={authPathConfig.viewPaths}
+>
+	<slot />
+</AuthUIProvider>
 ```
 
 ```typescript

package/dist/auth-client.d.ts

@@ -1,8 +1,32 @@
-import { createAuthClient, type InferSessionFromClient } from 'better-auth/svelte';
-import type { Atom } from 'nanostores';
+import { createAuthClient } from 'better-auth/svelte';
 /**
  * Better Auth Svelte client
  * This provides reactive stores for authentication state
  */
 export declare const authClient: ReturnType<typeof createAuthClient>;
-export declare const useSession: () => Atom<InferSessionFromClient<typeof authClient>>;
+export declare const useSession: () => import("nanostores").Atom<{
+    data: {
+        user: {
+            id: string;
+            createdAt: Date;
+            updatedAt: Date;
+            email: string;
+            emailVerified: boolean;
+            name: string;
+            image?: string | null | undefined;
+        };
+        session: {
+            id: string;
+            createdAt: Date;
+            updatedAt: Date;
+            userId: string;
+            expiresAt: Date;
+            token: string;
+            ipAddress?: string | null | undefined;
+            userAgent?: string | null | undefined;
+        };
+    } | null;
+    error: import("better-auth/svelte").BetterFetchError | null;
+    isPending: boolean;
+    isRefetching: boolean;
+}>;

package/dist/auth-client.js

@@ -10,6 +10,9 @@ export const authClient = createAuthClient({
         apiKeyClient(),
         multiSessionClient(),
         passkeyClient(),
+        // @ts-expect-error - BetterAuthClientPlugin type incompatibility between better-auth versions.
+        // The oneTapClient plugin has a slightly different type signature that doesn't match the expected
+        // BetterAuthClientPlugin interface, but it works correctly at runtime.
         oneTapClient({
             clientId: ''
         }),
@@ -19,6 +22,9 @@ export const authClient = createAuthClient({
         magicLinkClient(),
         emailOTPClient(),
         twoFactorClient(),
+        // @ts-expect-error - BetterAuthClientPlugin type incompatibility between better-auth versions.
+        // The organizationClient plugin has a slightly different type signature that doesn't match the expected
+        // BetterAuthClientPlugin interface, but it works correctly at runtime.
         organizationClient(),
         lastLoginMethodClient()
     ]

package/dist/components/account/index.d.ts

@@ -1,2 +1,4 @@
+import type { ComponentProps } from 'svelte';
+import AccountViewComponent from './account-view.svelte';
 export { default as AccountView } from './account-view.svelte';
-export type { AccountViewProps } from './account-view.svelte';
+export type AccountViewProps = ComponentProps<typeof AccountViewComponent>;

package/dist/components/account/index.js

@@ -1 +1,2 @@
+import AccountViewComponent from './account-view.svelte';
 export { default as AccountView } from './account-view.svelte';

package/dist/components/settings/account/index.d.ts

@@ -1,3 +1,9 @@
+import type { ComponentProps } from 'svelte';
+import AccountSettingsCardsComponent from './account-settings-cards.svelte';
+import AccountsCardComponent from './accounts-card.svelte';
+import DeleteAccountCardComponent from './delete-account-card.svelte';
+import UpdateAvatarCardComponent from './update-avatar-card.svelte';
+import UpdateFieldCardComponent from './update-field-card.svelte';
 export { default as AccountSettingsCards } from './account-settings-cards.svelte';
 export { default as AccountsCard } from './accounts-card.svelte';
 export { default as AccountCell } from './account-cell.svelte';
@@ -7,8 +13,8 @@ export { default as UpdateAvatarCard } from './update-avatar-card.svelte';
 export { default as UpdateFieldCard } from './update-field-card.svelte';
 export { default as UpdateNameCard } from './update-name-card.svelte';
 export { default as UpdateUsernameCard } from './update-username-card.svelte';
-export type { AccountSettingsCardsProps } from './account-settings-cards.svelte';
-export type { AccountsCardProps } from './accounts-card.svelte';
-export type { DeleteAccountCardProps } from './delete-account-card.svelte';
-export type { UpdateAvatarCardProps } from './update-avatar-card.svelte';
-export type { UpdateFieldCardProps } from './update-field-card.svelte';
+export type AccountSettingsCardsProps = ComponentProps<typeof AccountSettingsCardsComponent>;
+export type AccountsCardProps = ComponentProps<typeof AccountsCardComponent>;
+export type DeleteAccountCardProps = ComponentProps<typeof DeleteAccountCardComponent>;
+export type UpdateAvatarCardProps = ComponentProps<typeof UpdateAvatarCardComponent>;
+export type UpdateFieldCardProps = ComponentProps<typeof UpdateFieldCardComponent>;

package/dist/components/settings/account/index.js

@@ -1,3 +1,8 @@
+import AccountSettingsCardsComponent from './account-settings-cards.svelte';
+import AccountsCardComponent from './accounts-card.svelte';
+import DeleteAccountCardComponent from './delete-account-card.svelte';
+import UpdateAvatarCardComponent from './update-avatar-card.svelte';
+import UpdateFieldCardComponent from './update-field-card.svelte';
 export { default as AccountSettingsCards } from './account-settings-cards.svelte';
 export { default as AccountsCard } from './accounts-card.svelte';
 export { default as AccountCell } from './account-cell.svelte';

package/dist/components/settings/account/update-field-card.svelte

@@ -52,7 +52,6 @@
 		hooks: { useSession },
 		mutators: { updateUser },
 		localization: contextLocalization,
-		optimistic,
 		toast,
 		onSessionChange
 	} = getAuthUIConfig();
@@ -63,7 +62,7 @@
 	const isPending = $derived('isPending' in $sessionStore ? $sessionStore.isPending : true);
 
 	// Create the appropriate schema based on type (used for validation logic)
-	$derived.by(() => {
+	const fieldSchema = $derived.by(() => {
 		let schema: z.ZodType<unknown> = z.unknown();
 
 		if (type === 'number') {
@@ -158,11 +157,10 @@
 		{isPending}
 		title={label}
 		actionLabel={mergedLocalization.SAVE}
-		{optimistic}
 	>
 		<CardContent class={classNames?.content}>
 			{#if type === 'boolean'}
-				<form.Field {name}>
+				<form.Field {name} validators={{ onChange: fieldSchema.shape[name] }}>
 					{#snippet children({ state, handleChange })}
 						<div class="flex items-center gap-2">
 							<Checkbox
@@ -191,7 +189,7 @@
 			{:else if isPending}
 				<Skeleton class={cn('h-9 w-full', classNames?.skeleton)} />
 			{:else}
-				<form.Field {name}>
+				<form.Field {name} validators={{ onChange: fieldSchema.shape[name] }}>
 					{#snippet children({ state, handleBlur, handleChange })}
 						<div class="grid w-full items-center gap-1.5">
 							{#if type === 'number'}

package/dist/components/settings/api-key/index.d.ts

@@ -1,7 +1,10 @@
+import type { ComponentProps } from 'svelte';
+import ApiKeysCardComponent from './api-keys-card.svelte';
+import ApiKeyCellComponent from './api-key-cell.svelte';
 export { default as ApiKeysCard } from './api-keys-card.svelte';
 export { default as ApiKeyCell } from './api-key-cell.svelte';
 export { default as ApiKeyDisplayDialog } from './api-key-display-dialog.svelte';
 export { default as ApiKeyDeleteDialog } from './api-key-delete-dialog.svelte';
 export { default as CreateApiKeyDialog } from './create-api-key-dialog.svelte';
-export type { ApiKeysCardProps } from './api-keys-card.svelte';
-export type { ApiKeyCellProps } from './api-key-cell.svelte';
+export type ApiKeysCardProps = ComponentProps<typeof ApiKeysCardComponent>;
+export type ApiKeyCellProps = ComponentProps<typeof ApiKeyCellComponent>;

package/dist/components/settings/api-key/index.js

@@ -1,3 +1,5 @@
+import ApiKeysCardComponent from './api-keys-card.svelte';
+import ApiKeyCellComponent from './api-key-cell.svelte';
 export { default as ApiKeysCard } from './api-keys-card.svelte';
 export { default as ApiKeyCell } from './api-key-cell.svelte';
 export { default as ApiKeyDisplayDialog } from './api-key-display-dialog.svelte';

package/dist/components/settings/index.d.ts

@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'svelte';
+import SecuritySettingsCardsComponent from './security-settings-cards.svelte';
 export * from './shared/index.js';
 export * from './account/index.js';
 export * from './security/index.js';
@@ -6,4 +8,4 @@ export * from './two-factor/index.js';
 export * from './passkey/index.js';
 export * from './api-key/index.js';
 export { default as SecuritySettingsCards } from './security-settings-cards.svelte';
-export type { SecuritySettingsCardsProps } from './security-settings-cards.svelte';
+export type SecuritySettingsCardsProps = ComponentProps<typeof SecuritySettingsCardsComponent>;

package/dist/components/settings/index.js

@@ -1,3 +1,4 @@
+import SecuritySettingsCardsComponent from './security-settings-cards.svelte';
 export * from './shared/index.js';
 export * from './account/index.js';
 export * from './security/index.js';

package/dist/components/settings/passkey/index.d.ts

@@ -1,4 +1,7 @@
+import type { ComponentProps } from 'svelte';
+import PasskeyCellComponent from './passkey-cell.svelte';
+import PasskeysCardComponent from './passkeys-card.svelte';
 export { default as PasskeyCell } from './passkey-cell.svelte';
 export { default as PasskeysCard } from './passkeys-card.svelte';
-export type { PasskeyCellProps } from './passkey-cell.svelte';
-export type { PasskeysCardProps } from './passkeys-card.svelte';
+export type PasskeyCellProps = ComponentProps<typeof PasskeyCellComponent>;
+export type PasskeysCardProps = ComponentProps<typeof PasskeysCardComponent>;

package/dist/components/settings/passkey/index.js

@@ -1,2 +1,4 @@
+import PasskeyCellComponent from './passkey-cell.svelte';
+import PasskeysCardComponent from './passkeys-card.svelte';
 export { default as PasskeyCell } from './passkey-cell.svelte';
 export { default as PasskeysCard } from './passkeys-card.svelte';

package/dist/components/settings/providers/index.d.ts

@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'svelte';
+import ProvidersCardComponent from './providers-card.svelte';
 export { default as ProviderCell } from './provider-cell.svelte';
 export { default as ProvidersCard } from './providers-card.svelte';
-export type { ProvidersCardProps } from './providers-card.svelte';
+export type ProvidersCardProps = ComponentProps<typeof ProvidersCardComponent>;

package/dist/components/settings/providers/index.js

@@ -1,2 +1,3 @@
+import ProvidersCardComponent from './providers-card.svelte';
 export { default as ProviderCell } from './provider-cell.svelte';
 export { default as ProvidersCard } from './providers-card.svelte';

package/dist/components/settings/security/index.d.ts

@@ -1,8 +1,13 @@
+import type { ComponentProps } from 'svelte';
+import ChangeEmailCardComponent from './change-email-card.svelte';
+import ChangePasswordCardComponent from './change-password-card.svelte';
+import SessionCellComponent from './session-cell.svelte';
+import SessionsCardComponent from './sessions-card.svelte';
 export { default as ChangeEmailCard } from './change-email-card.svelte';
 export { default as ChangePasswordCard } from './change-password-card.svelte';
 export { default as SessionCell } from './session-cell.svelte';
 export { default as SessionsCard } from './sessions-card.svelte';
-export type { ChangeEmailCardProps } from './change-email-card.svelte';
-export type { ChangePasswordCardProps } from './change-password-card.svelte';
-export type { SessionCellProps } from './session-cell.svelte';
-export type { SessionsCardProps } from './sessions-card.svelte';
+export type ChangeEmailCardProps = ComponentProps<typeof ChangeEmailCardComponent>;
+export type ChangePasswordCardProps = ComponentProps<typeof ChangePasswordCardComponent>;
+export type SessionCellProps = ComponentProps<typeof SessionCellComponent>;
+export type SessionsCardProps = ComponentProps<typeof SessionsCardComponent>;

package/dist/components/settings/security/index.js

@@ -1,3 +1,7 @@
+import ChangeEmailCardComponent from './change-email-card.svelte';
+import ChangePasswordCardComponent from './change-password-card.svelte';
+import SessionCellComponent from './session-cell.svelte';
+import SessionsCardComponent from './sessions-card.svelte';
 export { default as ChangeEmailCard } from './change-email-card.svelte';
 export { default as ChangePasswordCard } from './change-password-card.svelte';
 export { default as SessionCell } from './session-cell.svelte';

package/dist/components/settings/shared/index.d.ts

@@ -1,7 +1,11 @@
+import type { ComponentProps } from 'svelte';
+import SettingsCardComponent from './settings-card.svelte';
+import SessionFreshnessDialogComponent from './session-freshness-dialog.svelte';
 export { default as SettingsCard } from './settings-card.svelte';
 export { default as SettingsCardHeader } from './settings-card-header.svelte';
 export { default as SettingsCardFooter } from './settings-card-footer.svelte';
 export { default as SettingsActionButton } from './settings-action-button.svelte';
 export { default as SessionFreshnessDialog } from './session-freshness-dialog.svelte';
-export type { SettingsCardClassNames, SettingsCardProps } from './settings-card.svelte';
-export type { SessionFreshnessDialogProps } from './session-freshness-dialog.svelte';
+export type SettingsCardProps = ComponentProps<typeof SettingsCardComponent>;
+export type SettingsCardClassNames = SettingsCardProps['classNames'];
+export type SessionFreshnessDialogProps = ComponentProps<typeof SessionFreshnessDialogComponent>;

package/dist/components/settings/shared/index.js

@@ -1,3 +1,5 @@
+import SettingsCardComponent from './settings-card.svelte';
+import SessionFreshnessDialogComponent from './session-freshness-dialog.svelte';
 export { default as SettingsCard } from './settings-card.svelte';
 export { default as SettingsCardHeader } from './settings-card-header.svelte';
 export { default as SettingsCardFooter } from './settings-card-footer.svelte';

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils/ui.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+	{...restProps}
+>
+	<div class={cn("pt-0 pb-4", className)}>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

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

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const AccordionContent: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "../../../utils/ui.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("border-b last:border-b-0", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "../../../utils/ui.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

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

@@ -0,0 +1,8 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils/ui.js";
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps["level"];
+};
+declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>

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

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

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

@@ -0,0 +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";
+export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -0,0 +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";
+export { Root, Content, Item, Trigger, 
+//
+Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils/ui.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed',
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
 		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/ui.js';
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils/ui.js";
 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/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils/ui.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}

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/ui.js';
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils/ui.js";
 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

@@ -1,31 +1,31 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const alertVariants = tv({
-		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 		variants: {
 			variant: {
-				default: 'bg-card text-card-foreground',
+				default: "bg-card text-card-foreground",
 				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
-			}
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '../../../utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils/ui.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'default',
+		variant = "default",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -15,9 +15,9 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
     };
 }, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
-export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
-import type { HTMLAttributes } from 'svelte/elements';
-import { type WithElementRef } from '../../../utils/ui.js';
+export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils/ui.js";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;
 };

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

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

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

@@ -1,7 +1,7 @@
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-export { alertVariants } from './alert.svelte';
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants } from "./alert.svelte";
 export { Root, Description, Title, 
 //
-Root as Alert, Description as AlertDescription, Title as AlertTitle };
+Root as Alert, Description as AlertDescription, Title as AlertTitle, };

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils/ui.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils/ui.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
+	{...restProps}
+/>