{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "A modal that interrupts the user to confirm a consequential action. Native HTML opened with showModal() and role=\"alertdialog\"; not light-dismissible — the user must choose Cancel or the confirming action.", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ui/alert-dialog.tsx", "type": "registry:ui", "target": "components/ui/alert-dialog.tsx", "content": "/** @jsxImportSource hono/jsx */\nimport type { Child, PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// AlertDialog — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// shadcn source of truth: repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/\n// alert-dialog.tsx (Radix AlertDialog). We mirror its anatomy\n// (Trigger / Content / Header / Title / Description / Footer / Action /\n// Cancel) but ship a native HTML instead of a Radix portal.\n//\n// APG pattern: repos/aria-practices/content/patterns/alertdialog/\n// alertdialog-pattern.html. An alert dialog is a *modal* dialog that\n// interrupts the workflow to acquire a response, so APG requires:\n// - role=\"alertdialog\" (announced with higher urgency than dialog)\n// - aria-modal=\"true\" (set automatically by .showModal())\n// - aria-labelledby -> title (visible label)\n// - aria-describedby -> body (the alert message — REQUIRED, unlike dialog)\n// See alertdialog-pattern.html:44-61.\n//\n// Why native + showModal():\n// - Focus trap, ESC-to-close, focus restoration, the inert backdrop and\n// aria-modal all come from the platform — no JS focus management.\n// (repos/mdn/files/en-us/web/api/htmldialogelement/showmodal/.)\n//\n// HOW IT DIFFERS FROM Dialog (registry/ui/dialog.tsx):\n// - NOT light-dismissible. A modal opened with showModal() defaults to\n// closedby=\"closerequest\" (ESC + code only, NO backdrop click) per the\n// HTML Living Standard — repos/mdn/files/en-us/web/html/reference/\n// elements/dialog/index.md:33-35. We pin closedby=\"closerequest\" to make\n// that explicit and we do NOT emit the data-close-on-backdrop hook that\n// site.js uses for Dialog, so a click on the backdrop never dismisses.\n// - No X close button: APG requires an explicit Cancel / Confirm response.\n// - Reuses Dialog's open/close wiring in public/site.js\n// (data-dialog-trigger / data-dialog-close).\n//\n// Composition mirrors shadcn's React API:\n// \n// \n// \n//\n// \n// \n// Are you absolutely sure?\n// This cannot be undone.\n// \n// \n// \n// \n// \n// \n\nconst alertDialogBase =\n \"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 m-0 w-[calc(100%-2rem)] max-w-lg \" +\n \"grid gap-4 rounded-lg border bg-background p-6 text-foreground shadow-lg outline-none \" +\n // Native sits in the top layer; hide it when not open so layout\n // doesn't shift.\n \"hidden open:grid \" +\n // ::backdrop styling — same token palette as Dialog.\n \"backdrop:bg-black/60 backdrop:backdrop-blur-sm\"\n\nexport function alertDialogClasses(opts?: { class?: ClassValue }): string {\n return cn(alertDialogBase, opts?.class)\n}\n\ntype AlertDialogProps = PropsWithChildren<{\n id: string\n // Pre-open on initial render (useful for htmx swaps that return an\n // already-open alert dialog; site.js promotes to .showModal()).\n open?: boolean\n class?: ClassValue\n // APG: name the alertdialog with EITHER aria-labelledby -> a visible title OR\n // aria-label when there is no visible AlertDialogTitle (e.g. a short error\n // alert). See alertdialog-pattern.html:47-57. When ariaLabel is set we omit\n // the auto aria-labelledby fallback so the two naming mechanisms don't collide.\n ariaLabel?: string\n ariaLabelledby?: string\n ariaDescribedby?: string\n}>\n\nexport function AlertDialog(props: AlertDialogProps) {\n const {\n id,\n children,\n open,\n class: className,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n } = props\n return (\n \n {children}\n \n )\n}\n\nexport function AlertDialogHeader(\n props: PropsWithChildren<{ class?: ClassValue }>,\n) {\n return (\n \n {props.children}\n \n )\n}\n\nexport function AlertDialogTitle(\n props: PropsWithChildren<{ id?: string; class?: ClassValue }>,\n) {\n return (\n \n {props.children}\n \n )\n}\n\nexport function AlertDialogDescription(\n props: PropsWithChildren<{ id?: string; class?: ClassValue }>,\n) {\n return (\n \n {props.children}\n

\n )\n}\n\nexport function AlertDialogFooter(\n props: PropsWithChildren<{ class?: ClassValue }>,\n) {\n return (\n \n {props.children}\n \n )\n}\n\n// Cancel — the non-destructive response. Wraps any single child (a Button\n// works) and attaches data-dialog-close so site.js calls .close() on the\n// nearest . APG recommends focusing the least-destructive action;\n// authors should add `autofocus` to this button (see docs).\nexport function AlertDialogCancel(props: PropsWithChildren<{}>) {\n return (\n \n {props.children}\n \n )\n}\n\n// Action — the confirming response. Also closes the dialog after its action\n// runs (e.g. an hx-* request fires on click; data-dialog-close dismisses).\n// Wrap a destructive Button for delete-style confirmations.\nexport function AlertDialogAction(props: PropsWithChildren<{}>) {\n return (\n \n {props.children}\n \n )\n}\n\n// Trigger — clicks open the alert dialog whose id matches dialogFor. Shares\n// Dialog's site.js handler (data-dialog-trigger / data-dialog-target).\ntype AlertDialogTriggerProps = PropsWithChildren<{\n dialogFor: string\n class?: ClassValue\n // \"wrapper\" (default — wraps the child so the parent can pass a styled\n // Button) or \"button\" (render a native \n )\n }\n return (\n \n {children}\n \n )\n}\n" }, { "path": "registry/jinja2/alert-dialog.html", "type": "registry:file", "target": "templates/components/alert-dialog.html", "content": "{# AlertDialog macros — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/alert-dialog.tsx. Native + .showModal()\n (wiring in public/site.js: data-dialog-trigger / data-dialog-close).\n\n Unlike dialog.html this is an *alert* dialog (APG alertdialog pattern):\n - role=\"alertdialog\", aria-describedby is required (the message).\n - NOT light-dismissible: no data-close-on-backdrop, closedby=\"closerequest\".\n - No X button — the user must pick Cancel or the confirming action.\n\n Usage:\n {% from \"components/alert-dialog.html\" import alert_dialog, alert_dialog_trigger %}\n\n {{ alert_dialog_trigger(\"Delete\", dialog_for=\"confirm\", class_=\"…btn classes\") }}\n\n {% call alert_dialog(id=\"confirm\", title=\"Are you absolutely sure?\",\n description=\"This action cannot be undone.\") %}\n
\n \n \n
\n {% endcall %} #}\n\n{% macro alert_dialog(\n id,\n title=none,\n description=none,\n open=false,\n aria_label=none\n) %}\n{%- set base -%}\nfixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 m-0 w-[calc(100%-2rem)] max-w-lg grid gap-4 rounded-lg border bg-background p-6 text-foreground shadow-lg outline-none hidden open:grid backdrop:bg-black/60 backdrop:backdrop-blur-sm\n{%- endset -%}\n\n {%- if title or description %}\n
\n {% if title %}

{{ title }}

{% endif %}\n {% if description %}

{{ description }}

{% endif %}\n
\n {%- endif %}\n {{ caller() }}\n\n{% endmacro %}\n\n{% macro alert_dialog_trigger(label, dialog_for, type=\"button\", id=none, class_=\"\") %}\n\n{% endmacro %}\n" }, { "path": "registry/go-templates/alert-dialog.tmpl", "type": "registry:file", "target": "components/alert-dialog.tmpl", "content": "{{/*\n AlertDialog template — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/alert-dialog.tsx.\n\n Native + .showModal() (wiring in public/site.js:\n data-dialog-trigger / data-dialog-close). Unlike \"dialog\" this is an\n *alert* dialog (APG alertdialog pattern):\n - role=\"alertdialog\", aria-describedby is required (the message).\n - NOT light-dismissible: no data-close-on-backdrop, closedby=\"closerequest\".\n - No X button — the user must pick Cancel or the confirming action.\n\n Usage:\n\n type AlertDialogArgs struct {\n ID, Title, Description string\n Body template.HTML // already-rendered footer HTML\n Open bool\n // APG: name the dialog via aria-label when there is no visible Title\n // (alertdialog-pattern.html:47-57). Suppresses the id-title fallback.\n AriaLabel string\n }\n\n tpl.ExecuteTemplate(w, \"alert_dialog\", map[string]any{\n \"ID\": \"confirm\", \"Title\": \"Are you absolutely sure?\",\n \"Description\": \"This action cannot be undone.\",\n \"Body\": template.HTML(`\n
\n \n \n
`),\n })\n\n Companion: \"alert_dialog_trigger\" template (below) renders the open button.\n*/}}\n\n{{define \"alert_dialog\"}}\n{{- $base := \"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 m-0 w-[calc(100%-2rem)] max-w-lg grid gap-4 rounded-lg border bg-background p-6 text-foreground shadow-lg outline-none hidden open:grid backdrop:bg-black/60 backdrop:backdrop-blur-sm\" -}}\n\n {{- if or .Title .Description}}\n
\n {{- if .Title}}\n

{{.Title}}

\n {{- end}}\n {{- if .Description}}\n

{{.Description}}

\n {{- end}}\n
\n {{- end}}\n {{.Body}}\n\n{{end}}\n\n{{define \"alert_dialog_trigger\"}}\n\n{{end}}\n" }, { "path": "registry/phoenix/alert_dialog.ex", "type": "registry:file", "target": "lib/my_app_web/components/alert_dialog.ex", "content": "defmodule ShadcnHtmx.Components.AlertDialog do\n @moduledoc \"\"\"\n AlertDialog — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n Mirrors registry/ui/alert-dialog.tsx. Renders the native element +\n the data attributes public/site.js looks for to open / close\n (data-dialog-trigger / data-dialog-close, shared with the Dialog component).\n\n Unlike `Dialog`, this is an *alert* dialog\n (repos/aria-practices/content/patterns/alertdialog/alertdialog-pattern.html):\n\n - role=\"alertdialog\", aria-describedby is required (the alert message).\n - NOT light-dismissible: no data-close-on-backdrop, closedby=\"closerequest\"\n (the native default for showModal() — see\n repos/mdn/files/en-us/web/html/reference/elements/dialog/index.md:33-35).\n - No X button — the user must choose Cancel or the confirming action.\n\n ## Examples\n\n <.alert_dialog_trigger dialog_for=\"confirm\" class=\"…btn-classes…\">\n Delete item\n \n\n <.alert_dialog id=\"confirm\" title=\"Are you absolutely sure?\"\n description=\"This action cannot be undone.\">\n
\n \n \n
\n \n \"\"\"\n\n use Phoenix.Component\n\n @alert_dialog_base \"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 m-0 w-[calc(100%-2rem)] max-w-lg \" <>\n \"grid gap-4 rounded-lg border bg-background p-6 text-foreground shadow-lg outline-none \" <>\n \"hidden open:grid \" <>\n \"backdrop:bg-black/60 backdrop:backdrop-blur-sm\"\n\n attr :id, :string, required: true\n attr :title, :string, default: nil\n attr :description, :string, default: nil\n attr :open, :boolean, default: false\n attr :class, :string, default: nil\n # APG: name the alertdialog with aria-label when there is no visible title\n # (alertdialog-pattern.html:47-57). When set, it suppresses the id-title\n # aria-labelledby fallback so the dialog isn't named twice.\n attr :aria_label, :string, default: nil\n\n slot :inner_block, required: true\n\n def alert_dialog(assigns) do\n assigns = assign(assigns, :base, @alert_dialog_base)\n\n ~H\"\"\"\n \n
\n

{@title}

\n

{@description}

\n
\n {render_slot(@inner_block)}\n \n \"\"\"\n end\n\n attr :dialog_for, :string, required: true\n attr :type, :string, default: \"button\"\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def alert_dialog_trigger(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n \n \"\"\"\n end\nend\n" }, { "path": "registry/html/alert-dialog.html", "type": "registry:file", "target": "snippets/alert-dialog.html", "content": "\n\n\n\n\n\n\n\n" } ] }