{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:ui",
  "title": "Dialog",
  "description": "A dialog component",
  "dependencies": [
    "solid-js",
    "@kobalte/core"
  ],
  "files": [
    {
      "path": "src/registry/ui/dialog.tsx",
      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DialogPrimitive from \"@kobalte/core/dialog\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {\n  const [, rest] = splitProps(props, [\"children\"])\n  return (\n    <DialogPrimitive.Portal {...rest}>\n      <div class=\"fixed inset-0 z-50 flex items-start justify-center sm:items-center\">\n        {props.children}\n      </div>\n    </DialogPrimitive.Portal>\n  )\n}\n\ntype DialogOverlayProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined }\n\nconst DialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogOverlayProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogOverlayProps, [\"class\"])\n  return (\n    <DialogPrimitive.Overlay\n      class={cn(\n        \"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\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\ntype DialogContentProps<T extends ValidComponent = \"div\"> =\n  DialogPrimitive.DialogContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst DialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, DialogContentProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogContentProps, [\"class\", \"children\"])\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        class={cn(\n          \"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\",\n          props.class\n        )}\n        {...rest}\n      >\n        {props.children}\n        <DialogPrimitive.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\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M18 6l-12 12\" />\n            <path d=\"M6 6l12 12\" />\n          </svg>\n          <span class=\"sr-only\">Close</span>\n        </DialogPrimitive.CloseButton>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <div class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", props.class)} {...rest} />\n  )\n}\n\nconst DialogFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DialogTitleProps<T extends ValidComponent = \"h2\"> = DialogPrimitive.DialogTitleProps<T> & {\n  class?: string | undefined\n}\n\nconst DialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, DialogTitleProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogTitleProps, [\"class\"])\n  return (\n    <DialogPrimitive.Title\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n      {...rest}\n    />\n  )\n}\n\ntype DialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  DialogPrimitive.DialogDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst DialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, DialogDescriptionProps<T>>\n) => {\n  const [, rest] = splitProps(props as DialogDescriptionProps, [\"class\"])\n  return (\n    <DialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription\n}\n",
      "type": "registry:ui"
    }
  ]
}