Alert

<div className="rounded-lg border p-4 text-sm bg-primary text-primary-foreground bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Primary</h5><div className="text-sm opacity-90">This is a primary alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertPrimaryProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertPrimary({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertPrimaryProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertPrimary() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-muted text-muted-foreground bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Secondary</h5><div className="text-sm opacity-90">This is a secondary alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertSecondaryProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertSecondary({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertSecondaryProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertSecondary() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-red-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Destructive</h5><div className="text-sm opacity-90">This is a destructive alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertDestructiveProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertDestructive({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertDestructiveProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertDestructive() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-green-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Success</h5><div className="text-sm opacity-90">This is a success alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertSuccessProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertSuccess({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertSuccessProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertSuccess() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-yellow-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Warning</h5><div className="text-sm opacity-90">This is a warning alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertWarningProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertWarning({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertWarningProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertWarning() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-blue-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Info</h5><div className="text-sm opacity-90">This is a info alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertInfoProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertInfo({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertInfoProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertInfo() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-purple-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Purple</h5><div className="text-sm opacity-90">This is a purple alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertPurpleProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertPurple({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertPurpleProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertPurple() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-orange-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Orange</h5><div className="text-sm opacity-90">This is a orange alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertOrangeProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertOrange({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertOrangeProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertOrange() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-pink-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Pink</h5><div className="text-sm opacity-90">This is a pink alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertPinkProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertPink({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertPinkProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertPink() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

<div className="rounded-lg border p-4 text-sm bg-teal-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Teal</h5><div className="text-sm opacity-90">This is a teal alert message.</div></div>

"use client";

import React, { useState } from "react";

interface AlertTealProps {
  title?: string;
  message?: string;
  dismissible?: boolean;
}

export default function AlertTeal({
  title = "Important Notification",
  message = "Your account configuration changes have been successfully applied.",
  dismissible = true,
}: AlertTealProps) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="w-full max-w-md p-4 rounded-xl border border-border bg-card text-card-foreground shadow-xs flex items-start justify-between gap-3 animate-in fade-in duration-200">
      <div className="space-y-1">
        <h4 className="text-xs font-bold text-foreground">{title}</h4>
        <p className="text-xs text-muted-foreground leading-relaxed">{message}</p>
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setVisible(false)}
          className="text-muted-foreground hover:text-foreground p-1 rounded-md hover:bg-muted transition-colors"
          aria-label="Dismiss alert"
        >
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      )}
    </div>
  );
}

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Sparkles } from "lucide-react";

export default function AnimatedAlertTeal() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -10, scale: 0.95 }}
          transition={{ duration: 0.2 }}
          className="w-full max-w-md p-4 rounded-xl border border-primary/30 bg-primary/5 text-foreground flex items-start justify-between gap-3 shadow-xs"
        >
          <div className="flex items-start gap-2.5">
            <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
            <div className="space-y-1">
              <h4 className="text-xs font-bold text-foreground">Animated Notification</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Click the close button to watch the smooth exit animation.
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsVisible(false)}
            className="text-muted-foreground hover:text-foreground p-1 rounded-md transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}