feat: implement account deletion button

Author: xynydev

package.json

@@ -21,6 +21,7 @@
 		"@tailwindcss/typography": "^0.5.14",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
+		"bits-ui": "^0.21.13",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
@@ -40,7 +41,6 @@
 	"dependencies": {
 		"@fontsource/hind-vadodara": "^5.1.0",
 		"@sveltejs/adapter-node": "^5.2.2",
-		"bits-ui": "^0.21.13",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.439.0",
 		"mode-watcher": "^0.4.1",

pnpm-lock.yaml

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ActionProps;
+	type $$Events = AlertDialogPrimitive.ActionEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action
+	class={cn(buttonVariants(), className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Action>

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.CancelProps;
+	type $$Events = AlertDialogPrimitive.CancelEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Cancel>

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import * as AlertDialog from './index.js';
+	import { cn, flyAndScale } from '$lib/utils.js';
+
+	type $$Props = AlertDialogPrimitive.ContentProps;
+
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialog.Portal>
+	<AlertDialog.Overlay />
+	<AlertDialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg max-sm:max-w-[calc(100vw-2rem)] sm:rounded-lg md:w-full',
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+	</AlertDialogPrimitive.Content>
+</AlertDialog.Portal>

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+	class={cn("text-muted-foreground text-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</AlertDialogPrimitive.Description>

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	type $$Props = AlertDialogPrimitive.PortalProps;
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Portal>