Animated Usage Card

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { ChevronDown } from "lucide-react";
5import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
6import * as React from "react";
7import { Button } from "@/components/ui/button";
8import { cn } from "@/lib/utils";
9 
10const animatedUsageCardVariants = cva(
11  "relative min-w-[280px] rounded-2xl border bg-card text-card-foreground",
12  {
13    variants: {
14      variant: {
15        default: "border-border",
16        elevated: "border-border shadow-lg",
17      },
18    },
19    defaultVariants: {
20      variant: "default",
21    },
22  },
23);
24 
25interface AnimatedUsageCardProps
26  extends VariantProps<typeof animatedUsageCardVariants> {
27  className?: string;
28  children?: React.ReactNode;
29}
30 
31const AnimatedUsageCard = React.forwardRef<
32  HTMLDivElement,
33  AnimatedUsageCardProps
34>(({ className, variant, children }, ref) => (
35  <motion.div
36    ref={ref}
37    initial={{ opacity: 0, y: 20, scale: 0.95 }}
38    animate={{ opacity: 1, y: 0, scale: 1 }}
39    transition={{
40      type: "spring",
41      bounce: 0.3,
42      duration: 0.6,
43    }}
44    className={cn(animatedUsageCardVariants({ variant, className }))}
45  >
46    {children}
47  </motion.div>
48));
49AnimatedUsageCard.displayName = "AnimatedUsageCard";
50 
51interface AnimatedUsageCardHeaderProps
52  extends React.HTMLAttributes<HTMLDivElement> {}
53 
54const AnimatedUsageCardHeader = React.forwardRef<
55  HTMLDivElement,
56  AnimatedUsageCardHeaderProps
57>(({ className, ...props }, ref) => (
58  <div
59    ref={ref}
60    className={cn(
61      "flex items-center justify-between gap-4 p-4 pb-0",
62      className,
63    )}
64    {...props}
65  />
66));
67AnimatedUsageCardHeader.displayName = "AnimatedUsageCardHeader";
68 
69interface AnimatedUsageCardPeriodProps
70  extends React.HTMLAttributes<HTMLSpanElement> {
71  daysRemaining?: number;
72}
73 
74const AnimatedUsageCardPeriod = React.forwardRef<
75  HTMLSpanElement,
76  AnimatedUsageCardPeriodProps
77>(({ className, daysRemaining, children, ...props }, ref) => (
78  <span
79    ref={ref}
80    className={cn("text-sm font-medium text-foreground", className)}
81    {...props}
82  >
83    {children ??
84      (daysRemaining !== undefined &&
85        `${daysRemaining} days remaining in cycle`)}
86  </span>
87));
88AnimatedUsageCardPeriod.displayName = "AnimatedUsageCardPeriod";
89 
90interface AnimatedUsageCardActionProps
91  extends React.ComponentPropsWithoutRef<typeof Button> {}
92 
93const AnimatedUsageCardAction = React.forwardRef<
94  HTMLButtonElement,
95// … truncated