{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "percent-change",
  "title": "Percent change",
  "description": "signed % with trend icon",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/percent-change.tsx",
      "content": "import { cn } from 'cn';\nimport { TrendingDownIcon, TrendingUpIcon } from 'lucide-react';\n\ntype Props = {\n  /** Percentage, e.g. 2.35 for +2.35%. */\n  value: number;\n  decimals?: number;\n  showIcon?: boolean;\n  className?: string;\n};\n\n/** Signed percentage with a trend icon, coloured by sign. */\nexport function PercentChange({ value, decimals = 2, showIcon = true, className }: Props) {\n  const flat = value === 0;\n  const up = value > 0;\n  const tone = flat ? 'text-muted-foreground' : up ? 'text-success' : 'text-destructive';\n  const Icon = up ? TrendingUpIcon : TrendingDownIcon;\n  return (\n    <span className={cn('inline-flex items-center gap-1 text-sm font-medium tabular-nums', tone, className)}>\n      {showIcon && !flat ? <Icon className=\"size-3.5\" aria-hidden /> : null}\n      {up ? '+' : ''}\n      {value.toFixed(decimals)}%\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/percent-change.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PercentChange"
    ],
    "api": "<PercentChange value decimals? showIcon? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}