Dialog

1import { Dialog as KobalteDialog } from "@kobalte/core/dialog";
2import { X } from "lucide-solid";
3import type { Component, ComponentProps, JSX } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const Dialog = KobalteDialog;
8const DialogTrigger = KobalteDialog.Trigger;
9const DialogPortal = KobalteDialog.Portal;
10const DialogClose = KobalteDialog.CloseButton;
11 
12const DialogOverlay: Component<ComponentProps<typeof KobalteDialog.Overlay>> = (props) => {
13  const [local, rest] = splitProps(props, ["class"]);
14  return (
15    <KobalteDialog.Overlay
16      class={cn(
17        "fixed inset-0 z-50 bg-black/80",
18        "data-[expanded]:animate-in data-[closed]:animate-out",
19        "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
20        local.class,
21      )}
22      {...rest}
23    />
24  );
25};
26 
27const DialogContent: Component<ComponentProps<typeof KobalteDialog.Content>> = (props) => {
28  const [local, rest] = splitProps(props, ["class", "children"]);
29  return (
30    <KobalteDialog.Portal>
31      <DialogOverlay />
32      <KobalteDialog.Content
33        class={cn(
34          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
35          "gap-4 border bg-background p-6 shadow-lg duration-200",
36          "data-[expanded]:animate-in data-[closed]:animate-out",
37          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
38          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
39          "data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%]",
40          "data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%]",
41          "sm:rounded-lg",
42          local.class,
43        )}
44        {...rest}
45      >
46        {local.children}
47        <KobalteDialog.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">
48          <X class="h-4 w-4" />
49          <span class="sr-only">Close</span>
50        </KobalteDialog.CloseButton>
51      </KobalteDialog.Content>
52    </KobalteDialog.Portal>
53  );
54};
55 
56const DialogHeader: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
57  const [local, rest] = splitProps(props, ["class"]);
58  return (
59    <div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", local.class)} {...rest} />
60// … truncated