{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"insight-card","type":"registry:component","title":"Insight Card","description":"A stat tile: a label, a headline value, and an optional trend pill. Pass a Number Ticker as the value to have it roll in on change.","author":"Ryan","dependencies":["clsx","lucide-react","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/insight-card.tsx","type":"registry:component","target":"@components/motion/insight-card.tsx","content":"// easeui.dev/components/motion/insight-card\nimport { ArrowDownRight, ArrowUpRight } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface InsightCardTrend {\n  /** A percentage or plain number; the sign is implied by direction, not this value. */\n  value: number;\n  direction: \"up\" | \"down\";\n}\n\nexport interface InsightCardProps {\n  label: string;\n  /** The headline number. Pass a NumberTicker for it to roll in on change. */\n  value: ReactNode;\n  trend?: InsightCardTrend;\n  icon?: ReactNode;\n  className?: string;\n}\n\n/** A stat tile: a label, a headline value, and an optional trend pill. */\nexport function InsightCard({ label, value, trend, icon, className }: InsightCardProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-3 rounded-2xl bg-card p-4 shadow-[0_0_0_1px_var(--border)]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2\">\n        <span className=\"text-xs font-medium text-muted-foreground\">{label}</span>\n        {icon ? (\n          <span aria-hidden=\"true\" className=\"flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground\">\n            {icon}\n          </span>\n        ) : null}\n      </div>\n      <div className=\"flex items-end justify-between gap-2\">\n        <span className=\"font-display text-2xl font-semibold tabular-nums text-foreground\">{value}</span>\n        {trend ? (\n          <span\n            className={cn(\n              \"mb-0.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium\",\n              trend.direction === \"up\" ? \"bg-success/15 text-success\" : \"bg-destructive/15 text-destructive\",\n            )}\n          >\n            {trend.direction === \"up\" ? (\n              <ArrowUpRight aria-hidden=\"true\" className=\"h-3 w-3\" />\n            ) : (\n              <ArrowDownRight aria-hidden=\"true\" className=\"h-3 w-3\" />\n            )}\n            {trend.value}%\n          </span>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}