alert-dialog

1import * as AlertDialogPrimitive from "@kobalte/core/alert-dialog";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { VariantProps } from "class-variance-authority";
6import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
7 
8import { splitProps } from "solid-js";
9import { buttonVariants } from "./button.tsx";
10 
11const AlertDialog = AlertDialogPrimitive.Root;
12const AlertDialogPortal = AlertDialogPrimitive.Portal;
13 
14type AlertDialogTriggerProps<T extends ValidComponent = "button"> =
15  & AlertDialogPrimitive.AlertDialogTriggerProps<T>
16  & { class?: string | undefined };
17 
18const AlertDialogTrigger = <T extends ValidComponent = "button">(
19  props: PolymorphicProps<T, AlertDialogTriggerProps<T>>,
20) => {
21  return (
22    <AlertDialogPrimitive.Trigger
23      data-slot="alert-dialog-trigger"
24      {...(props as AlertDialogTriggerProps)}
25    />
26  );
27};
28 
29type AlertDialogOverlayProps<T extends ValidComponent = "div"> =
30  & AlertDialogPrimitive.AlertDialogOverlayProps<T>
31  & { class?: string | undefined };
32 
33const AlertDialogOverlay = <T extends ValidComponent = "div">(
34  props: PolymorphicProps<T, AlertDialogOverlayProps<T>>,
35) => {
36  const [local, others] = splitProps(props as AlertDialogOverlayProps, [
37    "class",
38  ]);
39  return (
40    <AlertDialogPrimitive.Overlay
41      data-slot="alert-dialog-overlay"
42      class={cn(
43        "data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
44        local.class,
45      )}
46      {...others}
47    />
48  );
49};
50 
51type AlertDialogContentProps<T extends ValidComponent = "div"> =
52  & AlertDialogPrimitive.AlertDialogContentProps<T>
53  & {
54    class?: string | undefined;
55    children?: JSX.Element;
56    size?: "default" | "sm";
57  };
58 
59const AlertDialogContent = <T extends ValidComponent = "div">(
60  props: PolymorphicProps<T, AlertDialogContentProps<T>>,
61) => {
62  const [local, others] = splitProps(props as AlertDialogContentProps, [
63    "class",
64    "children",
65    "size",
66  ]);
67  return (
68    <AlertDialogPortal>
69      <AlertDialogOverlay />
70      <AlertDialogPrimitive.Content
71        data-slot="alert-dialog-content"
72        data-size={local.size ?? "default"}
73        class={cn(
74// … truncated