{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "description": "A modal window layered over the page for focused tasks or confirmations, built on Base UI.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.persian-labs.ir/r/button.json",
    "https://ui.persian-labs.ir/r/scroll-area.json"
  ],
  "files": [
    {
      "path": "registry/base/ui/dialog.tsx",
      "content": "\"use client\"\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { XIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * DialogPopup renders through a Portal, so it doesn't inherit `dir` from a\n * nearby wrapper (only from document.documentElement). DialogTrigger\n * measures the ambient direction where it's actually rendered and pushes it\n * here so DialogViewport can apply it explicitly to the portaled content —\n * otherwise Persian text and logical spacing inside the dialog would render\n * as if LTR whenever the dialog is opened from an RTL-only section of an\n * otherwise-LTR page.\n */\nconst DialogDirContext = React.createContext<{\n  dir: \"ltr\" | \"rtl\"\n  setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n  const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n  return (\n    <DialogDirContext.Provider value={contextValue}>\n      <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n    </DialogDirContext.Provider>\n  )\n}\n\nconst DialogPortal = DialogPrimitive.Portal\n\nfunction DialogTrigger({ className, ...props }: DialogPrimitive.Trigger.Props) {\n  const ref = React.useRef<HTMLButtonElement>(null)\n  const { setDir } = React.useContext(DialogDirContext)\n\n  React.useEffect(() => {\n    function update() {\n      if (!ref.current) return\n      setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n    }\n\n    update()\n\n    const observer = new MutationObserver(update)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"dir\"],\n      subtree: true,\n    })\n\n    return () => observer.disconnect()\n  }, [setDir])\n\n  return (\n    <DialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"dialog-trigger\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-backdrop\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/45 backdrop-blur-md duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props) {\n  const { dir } = React.useContext(DialogDirContext)\n\n  return (\n    <DialogPrimitive.Viewport\n      dir={dir}\n      data-slot=\"dialog-viewport\"\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogBackdrop />\n      <DialogViewport>\n        <DialogPrimitive.Popup\n          data-slot=\"dialog-popup\"\n          className={cn(\n            \"relative row-start-2 flex max-h-[calc(100dvh-2rem)] min-h-0 w-full max-w-lg min-w-0 flex-col rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg duration-150 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3\",\n      className\n    ),\n    \"data-slot\": \"dialog-header\",\n  }\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  })\n}\n\nfunction DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\"\n}) {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t border-border bg-muted/50 py-4\",\n      variant === \"bare\" &&\n        \"pt-4 pb-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3\",\n      className\n    ),\n    \"data-slot\": \"dialog-footer\",\n  }\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  })\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-xl leading-none font-semibold\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const defaultProps = {\n    className: cn(\n      \"px-6 pb-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1\",\n      className\n    ),\n    \"data-slot\": \"dialog-panel\",\n  }\n\n  return (\n    <ScrollArea className=\"flex-1\">\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  )\n}\n\nexport {\n  Dialog,\n  DialogBackdrop,\n  DialogBackdrop as DialogOverlay,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogPopup as DialogContent,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n  DialogViewport,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}