dialog

1import * as DialogPrimitive from "@kobalte/core/dialog";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconX from "~icons/lucide/x";
6import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
7 
8import { Show, splitProps } from "solid-js";
9import { buttonVariants } from "./button.tsx";
10 
11const Dialog = DialogPrimitive.Root;
12const DialogPortal = DialogPrimitive.Portal;
13 
14type DialogTriggerProps<T extends ValidComponent = "button"> =
15  & DialogPrimitive.DialogTriggerProps<T>
16  & { class?: string | undefined };
17 
18const DialogTrigger = <T extends ValidComponent = "button">(
19  props: PolymorphicProps<T, DialogTriggerProps<T>>,
20) => {
21  return (
22    <DialogPrimitive.Trigger
23      data-slot="dialog-trigger"
24      {...(props as DialogTriggerProps)}
25    />
26  );
27};
28 
29type DialogCloseProps<T extends ValidComponent = "button"> =
30  & DialogPrimitive.DialogCloseButtonProps<T>
31  & { class?: string | undefined };
32 
33const DialogClose = <T extends ValidComponent = "button">(
34  props: PolymorphicProps<T, DialogCloseProps<T>>,
35) => {
36  return (
37    <DialogPrimitive.CloseButton
38      data-slot="dialog-close"
39      {...(props as DialogCloseProps)}
40    />
41  );
42};
43 
44type DialogOverlayProps<T extends ValidComponent = "div"> =
45  & DialogPrimitive.DialogOverlayProps<T>
46  & { class?: string | undefined };
47 
48const DialogOverlay = <T extends ValidComponent = "div">(
49  props: PolymorphicProps<T, DialogOverlayProps<T>>,
50) => {
51  const [local, rest] = splitProps(props as DialogOverlayProps, ["class"]);
52  return (
53    <DialogPrimitive.Overlay
54      data-slot="dialog-overlay"
55      class={cn(
56        "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 isolate z-50",
57        local.class,
58      )}
59      {...rest}
60    />
61  );
62};
63 
64type DialogContentProps<T extends ValidComponent = "div"> =
65  & DialogPrimitive.DialogContentProps<T>
66  & {
67    class?: string | undefined;
68    children?: JSX.Element;
69    showCloseButton?: boolean;
70  };
71 
72const DialogContent = <T extends ValidComponent = "div">(
73  props: PolymorphicProps<T, DialogContentProps<T>>,
74) => {
75  const [local, rest] = splitProps(props as DialogContentProps, [
76    "class",
77    "children",
78    "showCloseButton",
79  ]);
80  return (
81    <DialogPortal>
82      <DialogOverlay />
83      <DialogPrimitive.Content
84        data-slot="dialog-content"
85// … truncated