{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Dialog",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Button",
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Dialog.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@@directive(\"'use client'\")\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@react.componentWithProps(BaseUi.Dialog.Root.props)\nlet make = (props: BaseUi.Dialog.Root.props<'payload>) =>\n  <BaseUi.Dialog.Root {...props} dataSlot={props.dataSlot->Option.getOr(\"dialog\")} />\n\nmodule WithPayload = {\n  @react.componentWithProps(BaseUi.Dialog.Root.WithPayload.props)\n  let make = (props: BaseUi.Dialog.Root.WithPayload.props<'payload>) =>\n    <BaseUi.Dialog.Root.WithPayload {...props} dataSlot={props.dataSlot->Option.getOr(\"dialog\")} />\n}\n\nmodule Trigger = {\n  @react.componentWithProps(BaseUi.Dialog.Trigger.props)\n  let make = (props: BaseUi.Dialog.Trigger.props<'payload>) =>\n    <BaseUi.Dialog.Trigger {...props} dataSlot={props.dataSlot->Option.getOr(\"dialog-trigger\")} />\n}\n\nmodule Portal = {\n  @react.componentWithProps(BaseUi.Dialog.Portal.props)\n  let make = (props: BaseUi.Dialog.Portal.props) =>\n    <BaseUi.Dialog.Portal {...props} dataSlot={props.dataSlot->Option.getOr(\"dialog-portal\")} />\n}\n\nmodule Close = {\n  @react.componentWithProps(BaseUi.Dialog.Close.props)\n  let make = (props: BaseUi.Dialog.Close.props) =>\n    <BaseUi.Dialog.Close {...props} dataSlot={props.dataSlot->Option.getOr(\"dialog-close\")} />\n}\n\nmodule Overlay = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Dialog.Backdrop\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dialog-overlay\")}\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\",\n        props.className,\n      )}\n    />\n}\n\nmodule Content = {\n  type props = {\n    ...BaseUi.Types.BaseUIComponentProps.t,\n    showCloseButton?: bool,\n  }\n  let toBaseUIComponentProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({showCloseButton, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"dialog-content\")\n    <Portal>\n      <Overlay />\n      <BaseUi.Dialog.Popup\n        {...props->toBaseUIComponentProps}\n        dataSlot\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          props.className,\n        )}\n      >\n        {props.children->Option.getOr(React.null)}\n        {switch props.showCloseButton {\n        | Some(false) => React.null\n        | None | Some(true) =>\n          <BaseUi.Dialog.Close\n            dataSlot=\"dialog-close\"\n            render={<Button\n              variant=Ghost size=IconSm className=\"absolute top-2 right-2\" dataSlot=\"dialog-close\"\n            />}\n          >\n            <Icons.X />\n            <span className=\"sr-only\"> {\"Close\"->React.string} </span>\n          </BaseUi.Dialog.Close>\n        }}\n      </BaseUi.Dialog.Popup>\n    </Portal>\n  }\n}\n\nmodule Header = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dialog-header\")}\n      className={cn(\"gap-2 flex flex-col\", props.className)}\n    />\n}\n\nmodule Footer = {\n  type props = {\n    ...BaseUi.Types.DomProps.t,\n    showCloseButton?: bool,\n  }\n  let toDomProps: props => BaseUi.Types.DomProps.t = %raw(`({showCloseButton, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <div\n      {...props->toDomProps}\n      dataSlot={props.dataSlot->Option.getOr(\"dialog-footer\")}\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.null)}\n      {switch props.showCloseButton {\n      | Some(true) =>\n        <BaseUi.Dialog.Close render={<Button variant=Outline />}>\n          {\"Close\"->React.string}\n        </BaseUi.Dialog.Close>\n      | Some(false) | None => React.null\n      }}\n    </div>\n}\n\nmodule Title = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Dialog.Title\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dialog-title\")}\n      className={cn(\"text-base leading-none font-medium font-heading\", props.className)}\n    />\n}\n\nmodule Description = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Dialog.Description\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dialog-description\")}\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        props.className,\n      )}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Dialog.res"
    }
  ],
  "type": "registry:ui"
}