{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-9",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-9.tsx",
      "content": "import { motion, type Variants } from 'motion/react';\n\nexport function EngagementsWidget() {\n  const data = [\n    { value: 50 },\n    { value: 40 },\n    { value: 45 },\n    { value: 30 },\n    { value: 65 },\n    { value: 75 },\n    { value: 52 },\n    { value: 48 },\n    { value: 65 },\n    { value: 85 },\n    { value: 45 },\n    { value: 60 },\n  ];\n\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: { staggerChildren: 0.08 },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 8 },\n    show: {\n      opacity: 1,\n      y: 0,\n      transition: { type: 'spring', stiffness: 350, damping: 25 },\n    },\n  };\n\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"hidden\"\n      animate=\"show\"\n      className=\"bg-card ring-border/10 flex w-full max-w-lg flex-col gap-6 rounded-3xl p-4 antialiased shadow-[0_2px_8px_rgba(0,0,0,0.04),0_16px_32px_rgba(0,0,0,0.04)] ring-1 sm:flex-row\"\n    >\n      <div className=\"flex flex-1 flex-col justify-between pt-3 pl-3\">\n        <div>\n          <motion.h3\n            variants={itemVariants}\n            className=\"text-muted-foreground mb-1 text-sm font-medium text-balance\"\n          >\n            Total Engagements\n          </motion.h3>\n          <motion.div\n            variants={itemVariants}\n            className=\"mb-4 flex items-baseline gap-2\"\n          >\n            <span className=\"text-foreground text-4xl font-bold tracking-tight tabular-nums\">\n              12.8K\n            </span>\n            <span className=\"text-destructive bg-destructive/10 rounded-md px-2 py-0.5 text-sm font-medium tabular-nums\">\n              -5%\n            </span>\n          </motion.div>\n\n          <motion.div\n            variants={itemVariants}\n            className=\"mt-6 flex flex-col gap-2\"\n          >\n            <div className=\"flex items-center justify-between text-sm\">\n              <span className=\"text-muted-foreground\">Organic</span>\n              <span className=\"text-foreground font-medium tabular-nums\">\n                8.2K\n              </span>\n            </div>\n            <div className=\"flex items-center justify-between text-sm\">\n              <span className=\"text-muted-foreground\">Promoted</span>\n              <span className=\"text-foreground font-medium tabular-nums\">\n                4.6K\n              </span>\n            </div>\n          </motion.div>\n        </div>\n        <motion.div\n          variants={itemVariants}\n          className=\"text-muted-foreground mt-6 text-xs\"\n        >\n          Last 28 Days vs Previous Period\n        </motion.div>\n      </div>\n\n      <motion.div\n        variants={itemVariants}\n        className=\"bg-muted/10 ring-border/10 relative flex h-[160px] w-full items-end justify-between gap-[3px] overflow-hidden rounded-lg px-3 pt-6 pb-3 shadow-inner ring-1 ring-inset sm:w-[200px]\"\n      >\n        {data.map((item, i) => (\n          <motion.div\n            key={i}\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: `${item.value}%`, opacity: 1 }}\n            transition={{\n              delay: 0.2 + i * 0.04,\n              duration: 0.6,\n              type: 'spring',\n              stiffness: 150,\n              damping: 15,\n            }}\n            whileHover={{\n              scaleY: 1.05,\n              filter: 'brightness(1.5)',\n              transition: { duration: 0.2 },\n            }}\n            className=\"bg-foreground/20 group hover:bg-foreground/30 flex w-full origin-bottom transform-gpu cursor-pointer flex-col justify-start transition-colors active:scale-[0.96]\"\n          >\n            {/* Top Cap */}\n            <div className=\"bg-foreground/80 group-hover:bg-foreground h-[2px] w-full rounded-t-sm transition-colors\" />\n          </motion.div>\n        ))}\n      </motion.div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/widget-9.tsx"
    }
  ],
  "type": "registry:ui"
}