{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-alert-dialog",
  "title": "SF AlertDialog",
  "description": "Focus-trapped confirmation dialog with loading state on confirm action",
  "registryDependencies": [
    "alert-dialog"
  ],
  "files": [
    {
      "path": "components/sf/sf-alert-dialog.tsx",
      "content": "\"use client\";\n\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"@/components/ui/alert-dialog\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Confirmation dialog -- FRAME layer destructive action guard.\n * Blocks interaction with focus-trapped overlay. Use SFAlertDialogAction\n * loading prop for async confirm.\n *\n * Radix AlertDialog root wrapped with SF contract. Compose with\n * SFAlertDialogTrigger, SFAlertDialogContent, SFAlertDialogHeader,\n * SFAlertDialogTitle, SFAlertDialogDescription, SFAlertDialogFooter,\n * SFAlertDialogAction, and SFAlertDialogCancel.\n *\n * @example\n * <SFAlertDialog>\n *   <SFAlertDialogTrigger asChild><SFButton>Delete</SFButton></SFAlertDialogTrigger>\n *   <SFAlertDialogContent>\n *     <SFAlertDialogHeader><SFAlertDialogTitle>Confirm</SFAlertDialogTitle></SFAlertDialogHeader>\n *     <SFAlertDialogFooter>\n *       <SFAlertDialogCancel>Cancel</SFAlertDialogCancel>\n *       <SFAlertDialogAction loading={isDeleting}>Delete</SFAlertDialogAction>\n *     </SFAlertDialogFooter>\n *   </SFAlertDialogContent>\n * </SFAlertDialog>\n */\nfunction SFAlertDialog(props: React.ComponentProps<typeof AlertDialog>) {\n  return <AlertDialog {...props} />;\n}\n\n/** Sub-component of SFAlertDialog -- trigger element that opens the dialog on interaction. */\nfunction SFAlertDialogTrigger(\n  props: React.ComponentProps<typeof AlertDialogTrigger>\n) {\n  return <AlertDialogTrigger {...props} />;\n}\n\n/** Sub-component of SFAlertDialog -- modal content panel with sharp corners, 2px border, and no shadow. */\nfunction SFAlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogContent>) {\n  return (\n    <AlertDialogContent\n      className={cn(\"rounded-none border-2 shadow-none\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFAlertDialog -- header region. */\nfunction SFAlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogHeader>) {\n  return <AlertDialogHeader className={cn(className)} {...props} />;\n}\n\n/** Sub-component of SFAlertDialog -- footer region with sharp corners overriding base rounded-b-xl. */\nfunction SFAlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogFooter>) {\n  return (\n    <AlertDialogFooter className={cn(\"rounded-none\", className)} {...props} />\n  );\n}\n\n/** Sub-component of SFAlertDialog -- title in monospace uppercase with wider tracking. */\nfunction SFAlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogTitle>) {\n  return (\n    <AlertDialogTitle\n      className={cn(\"font-mono uppercase tracking-wider\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFAlertDialog -- supporting description text. */\nfunction SFAlertDialogDescription(\n  props: React.ComponentProps<typeof AlertDialogDescription>\n) {\n  return <AlertDialogDescription {...props} />;\n}\n\n/** Sub-component of SFAlertDialog -- confirm action button with optional loading state. */\ninterface SFAlertDialogActionProps\n  extends React.ComponentProps<typeof AlertDialogAction> {\n  loading?: boolean;\n}\n\nfunction SFAlertDialogAction({\n  loading,\n  disabled,\n  className,\n  children,\n  ...props\n}: SFAlertDialogActionProps) {\n  return (\n    <AlertDialogAction\n      disabled={disabled || loading}\n      className={cn(\"rounded-none\", className)}\n      {...props}\n    >\n      {loading && <Loader2 className=\"mr-2 size-4 animate-spin\" />}\n      {children}\n    </AlertDialogAction>\n  );\n}\n\n/** Sub-component of SFAlertDialog -- cancel button with sharp corners. */\nfunction SFAlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogCancel>) {\n  return (\n    <AlertDialogCancel className={cn(\"rounded-none\", className)} {...props} />\n  );\n}\n\nexport {\n  SFAlertDialog,\n  SFAlertDialogTrigger,\n  SFAlertDialogContent,\n  SFAlertDialogHeader,\n  SFAlertDialogFooter,\n  SFAlertDialogTitle,\n  SFAlertDialogDescription,\n  SFAlertDialogAction,\n  SFAlertDialogCancel,\n};\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "frame",
    "pattern": "A"
  },
  "type": "registry:ui"
}