{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "insight-cards",
  "title": "Insight Cards",
  "description": "Metric cards with spark bars, trend deltas, and an AI note.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/ai-assistants/insight-cards.tsx",
      "content": "'use client';\n\nimport { Sparkles, TrendingDown, TrendingUp } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst KEYFRAMES = `\n@keyframes su-grow { from { opacity: 0.4; transform: scaleY(0.2) } to { opacity: 1; transform: none } }\n`;\n\nexport interface Insight {\n  id: string;\n  label: string;\n  value: string;\n  change?: number;\n  spark?: number[];\n  note?: string;\n}\n\nexport type InsightCardsVariant = 'Grid' | 'Row';\n\nexport interface InsightCardsProps {\n  insights: Insight[];\n  variant?: InsightCardsVariant;\n  className?: string;\n}\n\nexport function InsightCards({ insights, variant = 'Grid', className }: InsightCardsProps) {\n  return (\n    <div\n      className={cn(\n        'w-full max-w-[520px] gap-2.5',\n        variant === 'Grid' ? 'grid sm:grid-cols-2' : 'flex flex-col',\n        className,\n      )}\n    >\n      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />\n      {insights.map((insight) => {\n        const positive = (insight.change ?? 0) >= 0;\n        return (\n          <div\n            key={insight.id}\n            className=\"rounded-xl border border-black/[0.07] bg-white p-3.5 transition-[border-color] duration-150 hover:border-black/[0.14] dark:border-white/[0.08] dark:bg-[#0B0B0D] dark:hover:border-white/[0.16]\"\n          >\n            <div className=\"flex items-start justify-between gap-3\">\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-[11.5px] font-medium text-neutral-500 dark:text-neutral-400\">\n                  {insight.label}\n                </p>\n                <p className=\"mt-1 font-mono text-[20px] font-medium tabular-nums tracking-[-0.5px] text-neutral-900 dark:text-neutral-50\">\n                  {insight.value}\n                </p>\n              </div>\n              {insight.spark && insight.spark.length > 0 && (\n                <span aria-hidden className=\"flex h-8 items-end gap-[2px]\">\n                  {insight.spark.map((point, index) => (\n                    <span\n                      key={index}\n                      className={cn(\n                        'w-[3px] origin-bottom rounded-sm transition-[height] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] motion-safe:animate-[su-grow_400ms_cubic-bezier(0.23,1,0.32,1)_both]',\n                        index === insight.spark!.length - 1\n                          ? 'bg-neutral-900 dark:bg-neutral-100'\n                          : 'bg-black/[0.12] dark:bg-white/[0.16]',\n                      )}\n                      style={{\n                        height: `${Math.max(12, Math.min(100, point))}%`,\n                        animationDelay: `${index * 30}ms`,\n                      }}\n                    />\n                  ))}\n                </span>\n              )}\n            </div>\n\n            {insight.change !== undefined && (\n              <p\n                className={cn(\n                  'mt-1.5 flex items-center gap-1 font-mono text-[10.5px] tabular-nums',\n                  positive\n                    ? 'text-emerald-600 dark:text-emerald-400'\n                    : 'text-red-600/90 dark:text-red-400/90',\n                )}\n              >\n                {positive ? <TrendingUp className=\"size-3\" /> : <TrendingDown className=\"size-3\" />}\n                {positive ? '+' : ''}\n                {insight.change}%\n              </p>\n            )}\n\n            {insight.note && (\n              <p className=\"mt-2 flex items-start gap-1.5 border-t border-black/[0.05] pt-2 text-[11.5px] leading-[1.5] text-neutral-500 dark:border-white/[0.06] dark:text-neutral-400\">\n                <Sparkles className=\"mt-0.5 size-3 shrink-0 text-neutral-400 dark:text-neutral-500\" />\n                {insight.note}\n              </p>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default InsightCards;\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/ai-assistants/insight-cards.tsx"
    }
  ],
  "type": "registry:block"
}