first

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

@@ -0,0 +1,9 @@
+<script>
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { buttonVariants } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

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

@@ -0,0 +1,13 @@
+<script>
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { buttonVariants } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+  bind:ref
+  class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+  {...restProps}
+/>

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

@@ -0,0 +1,19 @@
+<script>
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<AlertDialogPrimitive.Portal>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    bind:ref
+    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 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+      className,
+    )}
+    {...restProps}
+  />
+</AlertDialogPrimitive.Portal>

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

@@ -0,0 +1,12 @@
+<script>
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+  bind:ref
+  class={cn("text-sm text-muted-foreground", className)}
+  {...restProps}
+/>

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

@@ -0,0 +1,13 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,15 @@
+<script>
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+  bind:ref
+  class={cn(
+    "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",
+    className,
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,13 @@
+<script>
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, level = 3, ...restProps } = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+  bind:ref
+  class={cn("text-lg font-semibold", className)}
+  {level}
+  {...restProps}
+/>

src/lib/components/ui/alert-dialog/index.js

@@ -0,0 +1,39 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.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 Overlay from "./alert-dialog-overlay.svelte";
+import Title from "./alert-dialog-title.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+  Action,
+  //
+  Root as AlertDialog,
+  Action as AlertDialogAction,
+  Cancel as AlertDialogCancel,
+  Content as AlertDialogContent,
+  Description as AlertDialogDescription,
+  Footer as AlertDialogFooter,
+  Header as AlertDialogHeader,
+  Overlay as AlertDialogOverlay,
+  Portal as AlertDialogPortal,
+  Title as AlertDialogTitle,
+  Trigger as AlertDialogTrigger,
+  Cancel,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger,
+};