{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kpi-card",
  "title": "KPI Card",
  "description": "Metric card built on Tremor primitives with Archway styling.",
  "dependencies": [
    "@tremor/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/composed/tremor/kpi-card.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  Flex,\n  Metric,\n  ProgressBar,\n  Text,\n  type CardProps,\n  type FlexProps,\n  type MetricProps,\n  type ProgressBarProps,\n  type TextProps,\n} from \"@tremor/react\";\nimport type { ComponentType } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface KpiCardProps {\n  title: string;\n  currentValue: number;\n  targetValue?: number;\n  delta?: number;\n  showProgress?: boolean;\n  formatter?: (value: number) => string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst defaultFormatter = (value: number) =>\n  new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n  }).format(value);\n\nexport function KpiCard({\n  title,\n  currentValue,\n  targetValue,\n  delta,\n  showProgress = Boolean(targetValue),\n  formatter = defaultFormatter,\n  className,\n  children,\n}: KpiCardProps) {\n  const progress = targetValue ? Math.min((currentValue / targetValue) * 100, 100) : undefined;\n  const TremorCard = Card as ComponentType<CardProps>;\n  const TremorText = Text as ComponentType<TextProps>;\n  const TremorMetric = Metric as ComponentType<MetricProps>;\n  const TremorFlex = Flex as ComponentType<FlexProps>;\n  const TremorProgressBar = ProgressBar as ComponentType<ProgressBarProps>;\n\n  return (\n    <TremorCard className={cn(\"flex h-full flex-col gap-4\", className)}>\n      <div className=\"space-y-2\">\n        <TremorText className=\"text-sm font-medium text-muted-foreground\">{title}</TremorText>\n        <TremorMetric className=\"text-3xl font-semibold text-foreground\">\n          {formatter(currentValue)}\n        </TremorMetric>\n        {typeof delta === \"number\" && (\n          <TremorText className={cn(delta >= 0 ? \"text-emerald-500\" : \"text-red-500\", \"text-sm\")}>{\n            delta >= 0 ? `▲ ${delta.toFixed(1)}%` : `▼ ${Math.abs(delta).toFixed(1)}%`\n          }</TremorText>\n        )}\n      </div>\n      {showProgress && typeof progress === \"number\" && (\n        <TremorFlex className=\"items-center gap-3\">\n          <TremorProgressBar\n            value={progress}\n            className=\"w-full\"\n            color={delta && delta < 0 ? \"red\" : \"blue\"}\n          />\n          <TremorText className=\"text-xs text-muted-foreground\">\n            {formatter(targetValue ?? 0)} target\n          </TremorText>\n        </TremorFlex>\n      )}\n      {children ? <div className=\"mt-auto text-sm text-muted-foreground\">{children}</div> : null}\n    </TremorCard>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/index.ts",
      "content": "export * from \"./ui\";\nexport * from \"./composed/tremor/analytics-area-chart\";\nexport * from \"./composed/tremor/kpi-card\";\n",
      "type": "registry:lib"
    },
    {
      "path": "lib/tremor/utils.ts",
      "content": "import type { ClassValue } from \"clsx\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cx(...args: ClassValue[]): string {\n  return twMerge(clsx(...args));\n}\n\nexport const focusInput = [\n  \"focus:ring-2\",\n  \"focus:ring-blue-200 dark:focus:ring-blue-700/30\",\n  \"focus:border-blue-500 dark:focus:border-blue-700\",\n];\n\nexport const focusRing = [\n  \"outline outline-offset-2 outline-0 focus-visible:outline-2\",\n  \"outline-blue-500 dark:outline-blue-500\",\n];\n\nexport const hasErrorInput = [\n  \"ring-2\",\n  \"border-red-500 dark:border-red-700\",\n  \"ring-red-200 dark:ring-red-700/30\",\n];\n",
      "type": "registry:lib"
    },
    {
      "path": "lib/index.ts",
      "content": "export * from \"./utils\";\nexport * from \"./tremor/utils\";\nexport * from \"./tremor/chart-utils\";\n",
      "type": "registry:lib"
    }
  ],
  "docs": "Use for KPI summaries. Example: import { KpiCard } from '@archwayai/design-system'.",
  "categories": [
    "analytics",
    "dashboard"
  ],
  "type": "registry:block"
}