{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "AlertDialog",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Button"
  ],
  "files": [
    {
      "path": "registry/base/ui/AlertDialog.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@@directive(\"'use client'\")\n\nmodule Variant = Button.Variant\nmodule Size = Button.Size\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@react.componentWithProps(BaseUi.AlertDialog.Root.props)\nlet make = (props: BaseUi.AlertDialog.Root.props<'payload>) =>\n  <BaseUi.AlertDialog.Root {...props} dataSlot={props.dataSlot->Option.getOr(\"alert-dialog\")} />\n\nmodule Trigger = {\n  @react.componentWithProps(BaseUi.Dialog.Trigger.props)\n  let make = (props: BaseUi.Dialog.Trigger.props<'payload>) =>\n    <BaseUi.AlertDialog.Trigger\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-trigger\")}\n    />\n}\n\nmodule Portal = {\n  @react.componentWithProps(BaseUi.Dialog.Portal.props)\n  let make = (props: BaseUi.Dialog.Portal.props) =>\n    <BaseUi.AlertDialog.Portal\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-portal\")}\n    />\n}\n\nmodule Overlay = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.AlertDialog.Backdrop\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"alert-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  module Size = {\n    @unboxed\n    type t =\n      | @as(\"default\") Default\n      | @as(\"sm\") Sm\n  }\n  type props = {\n    ...BaseUi.Types.BaseUIComponentProps.t,\n    size?: Size.t,\n  }\n\n  let toBaseUiProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({size, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let size = props.size->Option.getOr(Size.Default)\n    <Portal>\n      <Overlay />\n      <BaseUi.AlertDialog.Popup\n        {...props->toBaseUiProps}\n        dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-content\")}\n        dataSize={props.dataSize->Option.getOr((size :> string))}\n        className={cn(\n          \"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 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          props.className,\n        )}\n      />\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(\"alert-dialog-header\")}\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        props.className,\n      )}\n    />\n}\n\nmodule Footer = {\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(\"alert-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 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        props.className,\n      )}\n    />\n}\n\nmodule Media = {\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(\"alert-dialog-media\")}\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        props.className,\n      )}\n    />\n}\n\nmodule Title = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.AlertDialog.Title\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-title\")}\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 font-heading\",\n        props.className,\n      )}\n    />\n}\n\nmodule Description = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.AlertDialog.Description\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-description\")}\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        props.className,\n      )}\n    />\n}\n\nmodule Action = {\n  @react.componentWithProps(Button.props)\n  let make = (props: Button.props) => {\n    let className = props.className->Option.getOr(\"\")\n    let variant = props.variant->Option.getOr(Variant.Default)\n    let size = props.size->Option.getOr(Size.Default)\n    <Button\n      {...props}\n      className={cn(\"\", Some(className))}\n      variant\n      size\n      dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-action\")}\n    />\n  }\n}\n\nmodule Cancel = {\n  type props = {\n    ...BaseUi.Dialog.Close.props,\n    variant?: Variant.t,\n    size?: Size.t,\n  }\n\n  let toBaseUiProps: props => BaseUi.Dialog.Close.props = %raw(`({variant, size, className, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let className = props.className->Option.getOr(\"\")\n    let variant = props.variant->Option.getOr(Variant.Outline)\n    let size = props.size->Option.getOr(Size.Default)\n    let render = props.render->Option.getOr(<Button variant size className={cn(Some(className))} />)\n    <BaseUi.AlertDialog.Close\n      {...props->toBaseUiProps}\n      dataSlot={props.dataSlot->Option.getOr(\"alert-dialog-cancel\")}\n      render\n    />\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/AlertDialog.res"
    }
  ],
  "type": "registry:ui"
}