{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spot-01",
  "title": "Metrics",
  "description": "A stat card with trend and sparkline, layered over a second.",
  "dependencies": [],
  "registryDependencies": [
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "registry/illustrations/spot/spot-01.tsx",
      "content": "import { TrendingUp } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nconst sizeStyles = {\n  default: {\n    shell: 'h-40',\n    cardWrap: 'w-56',\n    backCard:\n      'absolute -top-3 -right-3 h-28 w-44 rotate-3 rounded-2xl opacity-60',\n    frontCard: 'rounded-2xl p-4',\n    label: 'text-xs',\n    headerGap: '',\n    value: 'mt-2 text-2xl',\n    chart: 'mt-3 h-12 gap-1',\n  },\n  lg: {\n    shell: 'h-64 sm:h-72',\n    cardWrap: 'w-full max-w-md',\n    backCard:\n      'absolute -top-5 right-2 h-full w-3/4 rotate-6 rounded-2xl opacity-50 sm:right-0',\n    frontCard: 'rounded-2xl p-5',\n    label: 'text-sm',\n    headerGap: 'gap-3',\n    value: 'mt-4 text-3xl',\n    chart: 'mt-5 h-20 gap-1.5',\n  },\n} as const\n\nconst sparkBySize = {\n  default: [\n    'h-3',\n    'h-5',\n    'h-4',\n    'h-6',\n    'h-4',\n    'h-7',\n    'h-5',\n    'h-6',\n    'h-4',\n    'h-7',\n    'h-5',\n    'h-6',\n  ],\n  lg: [\n    'h-6',\n    'h-10',\n    'h-8',\n    'h-14',\n    'h-9',\n    'h-16',\n    'h-12',\n    'h-20',\n    'h-10',\n    'h-16',\n    'h-14',\n    'h-20',\n  ],\n} as const\n\nexport function Spot01({\n  size = 'default',\n  className,\n}: Readonly<{\n  size?: keyof typeof sizeStyles\n  className?: string\n}>) {\n  const vs = sizeStyles[size]\n  const spark = sparkBySize[size]\n\n  return (\n    <div\n      className={cn(\n        'relative flex w-full items-center justify-center',\n        vs.shell,\n        className,\n      )}\n    >\n      <div className={cn('relative', vs.cardWrap)}>\n        <Card className={cn('gap-0 p-0 shadow-sm', vs.backCard)} />\n\n        <Card className={cn('relative gap-0 shadow-sm', vs.frontCard)}>\n          <div\n            className={cn('flex items-center justify-between', vs.headerGap)}\n          >\n            <span\n              className={cn('text-muted-foreground font-medium', vs.label)}\n            >\n              Revenue\n            </span>\n            <Badge\n              variant=\"secondary\"\n              className=\"gap-1 text-emerald-600 dark:text-emerald-400\"\n            >\n              <TrendingUp className=\"size-3\" />\n              12%\n            </Badge>\n          </div>\n\n          <div\n            className={cn('font-semibold tracking-tight tabular-nums', vs.value)}\n          >\n            $48,262\n          </div>\n\n          <div className={cn('flex w-full items-end', vs.chart)}>\n            {spark.map((height, index) => (\n              <div\n                key={index}\n                className={cn(\n                  'bg-primary/60 min-w-0 flex-1 rounded-full',\n                  height,\n                )}\n              />\n            ))}\n          </div>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/illustrations/spot/spot-01.tsx"
    }
  ],
  "type": "registry:block"
}