Alert Dialog

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as AlertDialogPrimitive from "@kobalte/core/alert-dialog"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const AlertDialog = AlertDialogPrimitive.Root
10const AlertDialogTrigger = AlertDialogPrimitive.Trigger
11const AlertDialogPortal = AlertDialogPrimitive.Portal
12 
13type AlertDialogOverlayProps<T extends ValidComponent = "div"> =
14  AlertDialogPrimitive.AlertDialogOverlayProps<T> & {
15    class?: string | undefined
16  }
17 
18const AlertDialogOverlay = <T extends ValidComponent = "div">(
19  props: PolymorphicProps<T, AlertDialogOverlayProps<T>>
20) => {
21  const [local, others] = splitProps(props as AlertDialogOverlayProps, ["class"])
22  return (
23    <AlertDialogPrimitive.Overlay
24      class={cn(
25        "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
26        local.class
27      )}
28      {...others}
29    />
30  )
31}
32 
33type AlertDialogContentProps<T extends ValidComponent = "div"> =
34  AlertDialogPrimitive.AlertDialogContentProps<T> & {
35    class?: string | undefined
36    children?: JSX.Element
37  }
38 
39const AlertDialogContent = <T extends ValidComponent = "div">(
40  props: PolymorphicProps<T, AlertDialogContentProps<T>>
41) => {
42  const [local, others] = splitProps(props as AlertDialogContentProps, ["class", "children"])
43  return (
44    <AlertDialogPortal>
45      <AlertDialogOverlay />
46      <AlertDialogPrimitive.Content
47        class={cn(
48          "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
49          local.class
50        )}
51        {...others}
52      >
53        {local.children}
54        <AlertDialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground">
55          <svg
56// … truncated