Animated Badge

1"use client";
2// beui.dev/components/motion/animated-badge
3 
4import {
5  AlertTriangle,
6  Check,
7  Circle,
8  Info,
9  LoaderCircle,
10  X,
11  type LucideIcon,
12} from "lucide-react";
13import {
14  AnimatePresence,
15  motion,
16  useReducedMotion,
17  type HTMLMotionProps,
18  type Variants,
19} from "motion/react";
20import type { ReactNode } from "react";
21import { EASE_OUT } from "@/lib/ease";
22import { cn } from "@/lib/utils";
23 
24export type AnimatedBadgeStatus =
25  | "neutral"
26  | "info"
27  | "success"
28  | "warning"
29  | "danger"
30  | "loading";
31 
32export type AnimatedBadgeSize = "sm" | "md";
33 
34export interface AnimatedBadgeProps extends Omit<
35  HTMLMotionProps<"span">,
36  "children"
37> {
38  status?: AnimatedBadgeStatus;
39  size?: AnimatedBadgeSize;
40  children?: ReactNode;
41  icon?: ReactNode;
42  showIcon?: boolean;
43  pulse?: boolean;
44  contentKey?: string | number;
45}
46 
47const STATUS_CLASS: Record<AnimatedBadgeStatus, string> = {
48  neutral: "border-border bg-card text-muted-foreground",
49  info: "border-primary/30 bg-primary/10 text-primary",
50  success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
51  warning: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400",
52  danger: "border-destructive/30 bg-destructive/10 text-destructive",
53  loading: "border-primary/30 bg-primary/10 text-primary",
54};
55 
56const SIZE_CLASS: Record<AnimatedBadgeSize, string> = {
57  sm: "h-6 gap-1.5 px-2 text-[11px]",
58  md: "h-8 gap-2 px-3 text-xs",
59};
60 
61const ICON_CLASS: Record<AnimatedBadgeSize, string> = {
62  sm: "h-3 w-3",
63  md: "h-3.5 w-3.5",
64};
65 
66const ICONS: Record<AnimatedBadgeStatus, LucideIcon> = {
67  neutral: Circle,
68  info: Info,
69  success: Check,
70  warning: AlertTriangle,
71  danger: X,
72  loading: LoaderCircle,
73};
74 
75const ICON_ROLL_VARIANTS: Variants = {
76  initial: {
77    opacity: 0.72,
78    y: "80%",
79    scale: 0.92,
80    rotate: -8,
81    filter: "blur(6px)",
82  },
83  animate: {
84    opacity: 1,
85    y: "0%",
86    scale: 1,
87    rotate: 0,
88    filter: "blur(0px)",
89    transition: {
90      y: { type: "spring", stiffness: 210, damping: 24, mass: 0.85 },
91      scale: { type: "spring", stiffness: 250, damping: 24, mass: 0.75 },
92      rotate: { duration: 0.28, ease: EASE_OUT },
93      opacity: { duration: 0.28, ease: EASE_OUT },
94      filter: { duration: 0.42, ease: EASE_OUT },
95    },
96  },
97  exit: {
98    opacity: 0.5,
99    y: "-80%",
100    scale: 0.96,
101    rotate: 8,
102    filter: "blur(6px)",
103    transition: { duration: 0.22, ease: EASE_OUT },
104  },
105};
106 
107// … truncated