Dialog

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as DialogPrimitive from "@kobalte/core/dialog"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const Dialog = DialogPrimitive.Root
10const DialogTrigger = DialogPrimitive.Trigger
11 
12const DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {
13  const [, rest] = splitProps(props, ["children"])
14  return (
15    <DialogPrimitive.Portal {...rest}>
16      <div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
17        {props.children}
18      </div>
19    </DialogPrimitive.Portal>
20  )
21}
22 
23type DialogOverlayProps<T extends ValidComponent = "div"> =
24  DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined }
25 
26const DialogOverlay = <T extends ValidComponent = "div">(
27  props: PolymorphicProps<T, DialogOverlayProps<T>>
28) => {
29  const [, rest] = splitProps(props as DialogOverlayProps, ["class"])
30  return (
31    <DialogPrimitive.Overlay
32      class={cn(
33        "fixed inset-0 z-50 bg-background/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
34        props.class
35      )}
36      {...rest}
37    />
38  )
39}
40 
41type DialogContentProps<T extends ValidComponent = "div"> =
42  DialogPrimitive.DialogContentProps<T> & {
43    class?: string | undefined
44    children?: JSX.Element
45  }
46 
47const DialogContent = <T extends ValidComponent = "div">(
48  props: PolymorphicProps<T, DialogContentProps<T>>
49) => {
50  const [, rest] = splitProps(props as DialogContentProps, ["class", "children"])
51  return (
52    <DialogPortal>
53      <DialogOverlay />
54      <DialogPrimitive.Content
55        class={cn(
56          "fixed left-1/2 top-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 bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg",
57          props.class
58        )}
59        {...rest}
60      >
61        {props.children}
62// … truncated