{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "A dashboard card with a dotted-underline title, headline value with trend, an action slot and a legend.",
  "files": [
    {
      "path": "registry/dashboard/components/card/card.tsx",
      "content": "import { cn } from '@/lib/utils'\n\ntype CardProps = {\n  title: React.ReactNode\n  value?: React.ReactNode\n  change?: number\n  action?: React.ReactNode\n  legend?: React.ReactNode\n  className?: string\n  children: React.ReactNode\n}\n\nexport function Card({ title, value, change, action, legend, className, children }: CardProps) {\n  return (\n    <article\n      className={cn(\n        'flex flex-col gap-3 rounded-xl bg-card p-4 text-card-foreground shadow-(--shadow-card)',\n        className,\n      )}\n    >\n      <header className=\"flex items-start justify-between gap-2\">\n        <h3 className=\"text-sm font-semibold underline decoration-muted-foreground/50 decoration-dotted decoration-2 underline-offset-4\">\n          {title}\n        </h3>\n        {action}\n      </header>\n      {value !== undefined && (\n        <div className=\"flex items-baseline gap-2\">\n          <span className=\"text-2xl font-bold tracking-tight tabular-nums\">{value}</span>\n          {change !== undefined && <Trend value={change} />}\n        </div>\n      )}\n      <div className=\"min-h-0 flex-1\">{children}</div>\n      {legend && (\n        <footer className=\"flex flex-wrap justify-center gap-4 text-xs text-muted-foreground\">\n          {legend}\n        </footer>\n      )}\n    </article>\n  )\n}\n\nexport function Trend({ value, className }: { value: number; className?: string }) {\n  const up = value >= 0\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-0.5 text-xs font-semibold tabular-nums',\n        up ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400',\n        className,\n      )}\n    >\n      <span aria-hidden>{up ? '↗' : '↘'}</span>\n      <span className=\"sr-only\">{up ? 'Up' : 'Down'}</span>\n      {Math.abs(value)}%\n    </span>\n  )\n}\n\nexport function LegendItem({\n  color,\n  dashed = false,\n  children,\n}: {\n  color: string\n  dashed?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      <svg width=\"16\" height=\"4\" aria-hidden>\n        <line\n          x1=\"2\"\n          y1=\"2\"\n          x2=\"14\"\n          y2=\"2\"\n          stroke={color}\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeDasharray={dashed ? '0.5 4' : undefined}\n        />\n      </svg>\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/card.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "shadow-card": "0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.07)"
    },
    "dark": {
      "shadow-card": "0 4px 4px rgb(42 42 42 / 0.32), 0 0 0 1px #0e0e0e, inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.08)"
    }
  },
  "meta": {
    "scenario": "dashboard",
    "kind": "components"
  },
  "categories": [
    "dashboard",
    "charts",
    "cards"
  ],
  "type": "registry:component"
}