import { Dialog as Kobalte } from "@kobalte/core/dialog" import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js" import "./dialog-v2.css" export interface DialogProps extends ParentProps { title?: JSXElement description?: JSXElement action?: JSXElement size?: "normal" | "large" | "x-large" class?: ComponentProps<"div">["class"] classList?: ComponentProps<"div">["classList"] fit?: boolean } export function DialogFooter(props: ParentProps) { return

{props.children}

} export function Dialog(props: DialogProps) { const [local] = splitProps(props, ["title", "description", "action", "size", "class", "classList", "fit", "children"]) const title = children(() => local.title) const description = children(() => local.description) const action = children(() => local.action) const hasHeader = () => title() || action() return (

{ const target = e.currentTarget as HTMLElement | null const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null if (autofocusEl) { e.preventDefault() autofocusEl.focus() } }} >

{(t) => {t()}} {(d) => {d()}}

{(a) => a()}

{local.children}

) }