import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { AlertCircle, AlertTriangle, CheckCircle, Info } from "lucide-react" import { cn } from "@/lib/utils" /** * Callout * * Semantic container for highlighting contextual information within content. It is not an alert, it is more like a card. It does not popup or dismiss or anything. It is static * * Responsibilities: * - Visually distinguish important messages (info, success, warning, error) * - Provide consistent iconography and styling across variants * - Render arbitrary child content (text, lists, inline elements) * * Usage: * ```tsx * * This action cannot be undone. * * ``` * * Notes: * - Intended for emphasis and guidance, not alerts or dialogs * - Styling is opinionated and theme-aware (light / dark) * - Does not manage visibility, dismissal, or state */ const calloutVariants = cva( "w-full rounded-lg border p-4 flex items-start gap-4", { variants: { variant: { info: "border-blue-500/25 bg-blue-500/10 text-blue-900 dark:border-blue-900/50 dark:bg-blue-950/50 dark:text-blue-200", success: "border-green-500/25 bg-green-500/10 text-green-900 dark:border-green-900/50 dark:bg-green-950/50 dark:text-green-200", warning: "border-yellow-500/25 bg-yellow-500/10 text-yellow-900 dark:border-yellow-900/50 dark:bg-yellow-950/50 dark:text-yellow-200", error: "border-red-500/25 bg-red-500/10 text-red-900 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-200", }, }, defaultVariants: { variant: "info", }, } ) const icons = { info: Info, success: CheckCircle, warning: AlertTriangle, error: AlertCircle, } export interface CalloutProps extends React.HTMLAttributes, VariantProps { title?: string } export function Callout({ className, variant = "info", title, children, ...props }: CalloutProps) { const Icon = icons[variant || "info"] return (

{title &&

{title}

}

{children}

) }