Dialog

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

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

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

11
const Dialog = (props: DialogPrimitive.DialogRootProps) => {
12
  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
13
};
14

15
const DialogTrigger = <T extends ValidComponent = "button">(
16
  props: PolymorphicProps<T, DialogPrimitive.DialogTriggerProps<T>>,
17
) => {
18
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
19
};
20

21
const DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {
22
  const [, rest] = splitProps(props, ["children"]);
23
  return (
24
    <DialogPrimitive.Portal data-slot="dialog-portal" {...rest}>
25
      <div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
26
        {props.children}
27
      </div>
28
    </DialogPrimitive.Portal>
29
  );
30
};
31

32
type DialogOverlayProps<T extends ValidComponent = "div"> =
33
  DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined };
34

35
const DialogOverlay = <T extends ValidComponent = "div">(
36
  props: PolymorphicProps<T, DialogOverlayProps<T>>,
37
) => {
38
  const [, rest] = splitProps(props as DialogOverlayProps, ["class"]);
39
  return (
40
    <DialogPrimitive.Overlay
41
      data-slot="dialog-overlay"
42
      class={cn(
43
        "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",
44
        props.class,
45
      )}
46
      {...rest}
47
    />
48
  );
49
};
50

51
type DialogContentProps<T extends ValidComponent = "div"> =
52
  DialogPrimitive.DialogContentProps<T> & {
53
    class?: string | undefined;
54
    children?: JSX.Element;
55
  };
56

57
const DialogContent = <T extends ValidComponent = "div">(
58
  props: PolymorphicProps<T, DialogContentProps<T>>,
59
) => {
60
  const [, rest] = splitProps(props as DialogContentProps, [
61
    "class",
62
    "children",
63
  ]);
64
  return (
65
    <DialogPortal>
66
      <DialogOverlay />
67
      <DialogPrimitive.Content
68
        data-slot="dialog-content"
69
        class={cn(
70
          "fixed top-1/2 left-1/2 z-50 grid max-h-screen w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto border-2 border-border bg-background p-6 shadow-shadow duration-200 sm:rounded-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",
71
          props.class,
72
        )}
73
        {...rest}
74
      >
75
        {props.children}
76
        <DialogPrimitive.CloseButton
77
          data-slot="dialog-close-button"
78
          class={cn(
79
            buttonVariants({
80
              variant: "neutral",
81
              size: "icon",
82
            }),
83
            "absolute top-2 right-3 size-8",
84
          )}
85
        >
86
          <XIcon class="size-4" />
87
          <span class="sr-only">Close</span>
88
        </DialogPrimitive.CloseButton>
89
      </DialogPrimitive.Content>
90
    </DialogPortal>
91
  );
92
};
93

94
const DialogHeader: Component<ComponentProps<"div">> = (props) => {
95
  const [, rest] = splitProps(props, ["class"]);
96
  return (
97
    <div
98
      data-slot="dialog-header"
99
      class={cn(
100
        "flex flex-col space-y-1.5 text-center sm:text-left",
101
        props.class,
102
      )}
103
      {...rest}
104
    />
105
  );
106
};
107

108
const DialogFooter: Component<ComponentProps<"div">> = (props) => {
109
  const [, rest] = splitProps(props, ["class"]);
110
  return (
111
    <div
112
      data-slot="dialog-footer"
113
      class={cn(
114
        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
115
        props.class,
116
      )}
117
      {...rest}
118
    />
119
  );
120
};
121

122
type DialogTitleProps<T extends ValidComponent = "h2"> =
123
  DialogPrimitive.DialogTitleProps<T> & {
124
    class?: string | undefined;
125
  };
126

127
const DialogTitle = <T extends ValidComponent = "h2">(
128
  props: PolymorphicProps<T, DialogTitleProps<T>>,
129
) => {
130
  const [, rest] = splitProps(props as DialogTitleProps, ["class"]);
131
  return (
132
    <DialogPrimitive.Title
133
      data-slot="dialog-title"
134
      class={cn(
135
        "text-lg leading-none font-semibold tracking-tight",
136
        props.class,
137
      )}
138
      {...rest}
139
    />
140
  );
141
};
142

143
type DialogDescriptionProps<T extends ValidComponent = "p"> =
144
  DialogPrimitive.DialogDescriptionProps<T> & {
145
    class?: string | undefined;
146
  };
147

148
const DialogDescription = <T extends ValidComponent = "p">(
149
  props: PolymorphicProps<T, DialogDescriptionProps<T>>,
150
) => {
151
  const [, rest] = splitProps(props as DialogDescriptionProps, ["class"]);
152
  return (
153
    <DialogPrimitive.Description
154
      data-slot="dialog-description"
155
      class={cn("text-sm text-muted-foreground", props.class)}
156
      {...rest}
157
    />
158
  );
159
};
160

161
export {
162
  Dialog,
163
  DialogTrigger,
164
  DialogContent,
165
  DialogHeader,
166
  DialogFooter,
167
  DialogTitle,
168
  DialogDescription,
169
};