Aurora AI Confirmation

1"use client"
2 
3/**
4 * Aurora Confirmation — operator approve/cancel gate for a risky action.
5 *
6 * Visual layer is ported 1:1 from the Claude Design source (icon badge, intent
7 * tint, sunken detail list, right-aligned action row). Architecture stays
8 * shadcn/Aurora: `forwardRef`, `displayName`, `React.memo`, full
9 * `React.HTMLAttributes` spread, and the Radix/cva `Button` for actions.
10 *
11 * This file deliberately re-implements `Confirmation` (rather than re-exporting
12 * the legacy `core` version) so it can carry CD's `intent` + `details` API while
13 * keeping every architectural guarantee. Token-only colors (`--aurora-*`); no
14 * hardcoded hex; no `violet`.
15 */
16 
17import * as React from "react"
18import { ChevronRight, CircleAlert, TriangleAlert } from "lucide-react"
19import { Button } from "@/registry/aurora/ui/button"
20 
21export type ConfirmationIntent = "default" | "danger"
22 
23export interface ConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {
24  title: string
25  description?: string
26  /** Optional list of statements/lines previewing exactly what will run. */
27  details?: React.ReactNode[]
28  /** `danger` swaps the icon to a triangle-alert and uses destructive action styling. */
29  intent?: ConfirmationIntent
30  confirmLabel?: string
31  cancelLabel?: string
32  onConfirm?: React.MouseEventHandler<HTMLButtonElement>
33  onCancel?: React.MouseEventHandler<HTMLButtonElement>
34}
35 
36// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
37 
38const Confirmation = (
39    { ref,
40      title,
41      description,
42      details,
43      intent = "default",
44      confirmLabel = "Approve",
45      cancelLabel = "Cancel",
46      onConfirm,
47      onCancel,
48      className,
49      ...props
50    }: ConfirmationProps & { ref?: React.Ref<HTMLDivElement> }
51  ) => {
52    const reactId = React.useId()
53    const titleId = `${reactId}-title`
54    const descriptionId = description ? `${reactId}-description` : undefined
55    const Icon = intent === "danger" ? TriangleAlert : CircleAlert
56    const cls = [
57      "aurora-confirm",
58      intent === "danger" && "aurora-confirm--danger",
59      className,
60    ]
61      .filter(Boolean)
62      .join(" ")
63 
64    return (
65      <div
66        ref={ref}
67        className={cls}
68        role="alertdialog"
69        aria-labelledby={titleId}
70        aria-describedby={descriptionId}
71        {...props}
72      >
73        <div className="aurora-confirm__head">
74          <span className="aurora-confirm__badge" aria-hidden>
75// … truncated