{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "alert-dialog",
"title": "Alert Dialog",
"description": "A modal dialog that interrupts the user with important content and expects a response, built on Base UI.",
"dependencies": [
"@base-ui/react"
],
"registryDependencies": [
"utils",
"https://ui.persian-labs.ir/r/button.json"
],
"files": [
{
"path": "registry/base/ui/alert-dialog.tsx",
"content": "\"use client\"\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * AlertDialogPopup renders through a Portal, so it doesn't inherit `dir`\n * from a nearby wrapper (only from document.documentElement). It also relies\n * on `rtl:translate-x-1/2` to correct the classic RTL centering bug (using\n * `start-1/2` anchors the element's logical-start edge at 50%, so shifting\n * by `-translate-x-1/2` — the LTR-correct half-width offset — doubles the\n * offset error in RTL instead of centering it). Both only work if `dir` is\n * set explicitly on the popup, so AlertDialogTrigger measures the ambient\n * direction where it's actually rendered and pushes it here.\n */\nconst AlertDialogDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n return (\n \n \n \n )\n}\n\nfunction AlertDialogTrigger({\n className,\n ...props\n}: AlertDialogPrimitive.Trigger.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(AlertDialogDirContext)\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 \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n const { dir } = React.useContext(AlertDialogDirContext)\n\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: AlertDialogPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: AlertDialogPrimitive.Description.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}