Alert Dialog

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { JSX, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as AlertDialogPrimitive from "@kobalte/core/alert-dialog";
6
import XIcon from "lucide-solid/icons/x";
7

8
import { cn } from "~/lib/utils";
9
import { buttonVariants } from "./button";
10

11
type AlertDialogProps = AlertDialogPrimitive.AlertDialogRootProps;
12

13
const AlertDialog = (props: AlertDialogProps) => {
14
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
15
};
16

17
const AlertDialogTrigger = <T extends ValidComponent = "button">(
18
  props: PolymorphicProps<T, AlertDialogPrimitive.AlertDialogTriggerProps<T>>,
19
) => {
20
  return (
21
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
22
  );
23
};
24

25
type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
26

27
const AlertDialogPortal = (props: AlertDialogPortalProps) => {
28
  return (
29
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
30
  );
31
};
32

33
type AlertDialogOverlayProps<T extends ValidComponent = "div"> =
34
  AlertDialogPrimitive.AlertDialogOverlayProps<T> & {
35
    class?: string | undefined;
36
  };
37

38
const AlertDialogOverlay = <T extends ValidComponent = "div">(
39
  props: PolymorphicProps<T, AlertDialogOverlayProps<T>>,
40
) => {
41
  const [local, others] = splitProps(props as AlertDialogOverlayProps, [
42
    "class",
43
  ]);
44
  return (
45
    <AlertDialogPrimitive.Overlay
46
      data-slot="alert-dialog-overlay"
47
      class={cn(
48
        "fixed inset-0 z-50 bg-overlay ui-expanded:animate-in ui-expanded:fade-in-0 ui-closed:animate-out ui-closed:fade-out-0",
49
        local.class,
50
      )}
51
      {...others}
52
    />
53
  );
54
};
55

56
type AlertDialogContentProps<T extends ValidComponent = "div"> =
57
  AlertDialogPrimitive.AlertDialogContentProps<T> & {
58
    class?: string | undefined;
59
    children?: JSX.Element;
60
  };
61

62
const AlertDialogContent = <T extends ValidComponent = "div">(
63
  props: PolymorphicProps<T, AlertDialogContentProps<T>>,
64
) => {
65
  const [local, others] = splitProps(props as AlertDialogContentProps, [
66
    "class",
67
    "children",
68
  ]);
69
  return (
70
    <AlertDialogPortal>
71
      <AlertDialogOverlay />
72
      <AlertDialogPrimitive.Content
73
        data-slot="alert-dialog-content"
74
        class={cn(
75
          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-base border-2 border-border bg-background p-6 shadow-shadow duration-200 sm:max-w-lg ui-expanded:animate-in ui-expanded:fade-in-0 ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out-0 ui-closed:zoom-out-95",
76
          local.class,
77
        )}
78
        {...others}
79
      >
80
        {local.children}
81
        <AlertDialogPrimitive.CloseButton
82
          data-slot="alert-dialog-close"
83
          class={cn(
84
            buttonVariants({ variant: "neutral", size: "icon" }),
85
            "absolute top-2 right-3 size-8",
86
          )}
87
        >
88
          <XIcon class="size-4" />
89
          <span class="sr-only">Close</span>
90
        </AlertDialogPrimitive.CloseButton>
91
      </AlertDialogPrimitive.Content>
92
    </AlertDialogPortal>
93
  );
94
};
95

96
type AlertDialogTitleProps<T extends ValidComponent = "h2"> =
97
  AlertDialogPrimitive.AlertDialogTitleProps<T> & {
98
    class?: string | undefined;
99
  };
100

101
const AlertDialogTitle = <T extends ValidComponent = "h2">(
102
  props: PolymorphicProps<T, AlertDialogTitleProps<T>>,
103
) => {
104
  const [local, others] = splitProps(props as AlertDialogTitleProps, ["class"]);
105
  return (
106
    <AlertDialogPrimitive.Title
107
      data-slot="alert-dialog-title"
108
      class={cn("text-lg font-semibold", local.class)}
109
      {...others}
110
    />
111
  );
112
};
113

114
type AlertDialogDescriptionProps<T extends ValidComponent = "p"> =
115
  AlertDialogPrimitive.AlertDialogDescriptionProps<T> & {
116
    class?: string | undefined;
117
  };
118

119
const AlertDialogDescription = <T extends ValidComponent = "p">(
120
  props: PolymorphicProps<T, AlertDialogDescriptionProps<T>>,
121
) => {
122
  const [local, others] = splitProps(props as AlertDialogDescriptionProps, [
123
    "class",
124
  ]);
125
  return (
126
    <AlertDialogPrimitive.Description
127
      data-slot="alert-dialog-description"
128
      class={cn("text-sm text-muted-foreground", local.class)}
129
      {...others}
130
    />
131
  );
132
};
133

134
export {
135
  AlertDialog,
136
  AlertDialogPortal,
137
  AlertDialogOverlay,
138
  AlertDialogTrigger,
139
  AlertDialogContent,
140
  AlertDialogTitle,
141
  AlertDialogDescription,
142
};