{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-card",
  "title": "Usage Card",
  "description": "An animated system monitor card that displays a title, percentage, and neon-lit pill indicators driven by Motion.",
  "dependencies": [
    "react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/gammaui/usage-card.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { animate, motion, useMotionValue, useTransform } from \"motion/react\"\n\ninterface UsageCardProps {\n  title: string\n  percentage: number\n  pillCount?: number\n  accentColor?: string\n  icon?: React.ReactNode\n}\n\nfunction useAnimatedCounter(target: number, duration = 1.2) {\n  const count = useMotionValue(0)\n  const rounded = useTransform(count, (v) => Math.round(v))\n  const [display, setDisplay] = useState(0)\n\n  useEffect(() => {\n    const controls = animate(count, target, {\n      duration,\n      ease: [0.16, 1, 0.3, 1],\n    })\n    const unsub = rounded.on(\"change\", setDisplay)\n    return () => {\n      controls.stop()\n      unsub()\n    }\n  }, [target])\n\n  return display\n}\n\nfunction Pill({\n  active,\n  index,\n  accent,\n}: {\n  active: boolean\n  index: number\n  accent: string\n}) {\n  return (\n    <motion.div\n      initial={{ scaleY: 0.3, opacity: 0 }}\n      animate={{ scaleY: 1, opacity: 1 }}\n      transition={{\n        delay: index * 0.04,\n        duration: 0.45,\n        ease: [0.16, 1, 0.3, 1],\n      }}\n      style={{ originY: 1, flex: 1 }}\n      className=\"relative h-full overflow-hidden rounded-xs\"\n    >\n      {/* Track */}\n      <div className=\"absolute inset-0 rounded-xs bg-black/5 dark:bg-white/5\" />\n\n      {/* Fill */}\n      <motion.div\n        className=\"absolute inset-0 rounded-xs\"\n        initial={{ scaleX: 0 }}\n        animate={{ scaleX: active ? 1 : 0 }}\n        transition={{\n          delay: index * 0.055 + 0.25,\n          duration: 0.4,\n          ease: [0.16, 1, 0.3, 1],\n        }}\n        style={{\n          originX: 0,\n          background: active\n            ? `linear-gradient(90deg, ${accent}bb, ${accent})`\n            : \"transparent\",\n          boxShadow: active\n            ? `0 0 6px ${accent}99, 0 0 12px ${accent}44`\n            : \"none\",\n        }}\n      />\n\n      {/* Shimmer */}\n      {active && (\n        <motion.div\n          className=\"absolute inset-0 rounded-xs\"\n          style={{\n            background: `linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%)`,\n            backgroundSize: \"200% 100%\",\n          }}\n          animate={{ backgroundPositionX: [\"0%\", \"200%\"] }}\n          transition={{\n            repeat: Infinity,\n            duration: 2,\n            ease: \"linear\",\n            delay: index * 0.08,\n          }}\n        />\n      )}\n    </motion.div>\n  )\n}\n\nexport default function UsageCard({\n  title,\n  percentage,\n  pillCount = 10,\n  accentColor = \"#00f5ff\",\n  icon,\n}: UsageCardProps) {\n  const display = useAnimatedCounter(percentage)\n  const activePills = Math.round((percentage / 100) * pillCount)\n  const accent = percentage >= 75 ? \"#ff2d55\" : accentColor\n\n  return (\n    <div\n      className=\"relative w-64 select-none\"\n      style={{ fontFamily: \"'IBM Plex Mono', 'Courier New', monospace\" }}\n    >\n      {/* Outer glow */}\n      <div\n        className=\"pointer-events-none absolute -inset-px rounded-2xl opacity-20 blur-sm dark:opacity-30\"\n        style={{\n          background: `linear-gradient(135deg, ${accent}66, transparent 60%)`,\n        }}\n      />\n\n      {/* Card */}\n      <div className=\"relative overflow-hidden rounded-[8px] border border-zinc-200 bg-white dark:border-white/7 dark:bg-zinc-950\">\n        <div className=\"flex flex-col gap-4 p-4\">\n          {/* Top row */}\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-1.5 text-black dark:text-white/40\">\n              {icon}\n              <span className=\"text-[11px] tracking-widest uppercase\">\n                {title}\n              </span>\n            </div>\n\n            <div className=\"flex items-baseline gap-[3px]\">\n              <motion.span\n                className=\"text-xl leading-none font-semibold\"\n                style={{ color: accent, textShadow: `0 0 12px ${accent}88` }}\n              >\n                {display}\n              </motion.span>\n              <span className=\"text-[10px] text-black dark:text-white/25\">\n                %\n              </span>\n            </div>\n          </div>\n\n          {/* Pills */}\n          <div className=\"flex gap-[4px]\" style={{ height: 32 }}>\n            {Array.from({ length: pillCount }).map((_, i) => (\n              <Pill\n                key={i}\n                index={i}\n                active={i < activePills}\n                accent={accent}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}