Refactor TurnstileCaptcha to use Callout

src/components/auth/TurnstileCaptcha.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Turnstile } from '@marsidev/react-turnstile';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Callout, CalloutDescription } from '@/components/ui/callout';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
@@ -79,12 +79,12 @@ export function TurnstileCaptcha({
 
   if (!siteKey || siteKey === "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z") {
     return (
-      <Alert className="border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950">
+      <Callout variant="warning">
-        <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+        <AlertCircle className="h-4 w-4" />
-        <AlertDescription className="text-yellow-800 dark:text-yellow-200">
+        <CalloutDescription>
           CAPTCHA is using test keys. Configure VITE_TURNSTILE_SITE_KEY for production.
-        </AlertDescription>
+        </CalloutDescription>
-      </Alert>
+      </Callout>
     );
   }
 
@@ -117,9 +117,9 @@ export function TurnstileCaptcha({
       </div>
 
       {error && (
-        <Alert variant="destructive">
+        <Callout variant="destructive">
           <AlertCircle className="h-4 w-4" />
-          <AlertDescription className="flex items-center justify-between">
+          <CalloutDescription className="flex items-center justify-between">
             <span>{error}</span>
             <Button
               variant="outline"
@@ -130,8 +130,8 @@ export function TurnstileCaptcha({
               <RefreshCw className="w-3 h-3 mr-1" />
               Retry
             </Button>
-          </AlertDescription>
+          </CalloutDescription>
-        </Alert>
+        </Callout>
       )}
     </div>
   );

src/components/ui/callout.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const calloutVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground border-border",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/5",
+        warning: "border-yellow-500/50 text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950/50 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        info: "border-blue-500/50 text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/50 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Callout = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof calloutVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} className={cn(calloutVariants({ variant }), className)} {...props} />
+));
+Callout.displayName = "Callout";
+
+const CalloutTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  )
+);
+CalloutTitle.displayName = "CalloutTitle";
+
+const CalloutDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  )
+);
+CalloutDescription.displayName = "CalloutDescription";
+
+export { Callout, CalloutTitle, CalloutDescription };