{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "percent-change",
  "title": "Percent change",
  "description": "signed % with trend icon",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/percent-change.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { TrendingDownIcon, TrendingUpIcon } from 'lucide-react-native';\nimport { View } from 'react-native';\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  return (\n    <View className={cn('flex-row items-center gap-1', className)}>\n      {showIcon && !flat ? <Icon as={up ? TrendingUpIcon : TrendingDownIcon} size={14} className={tone} /> : null}\n      <Text className={cn('text-sm font-medium', tone)}>\n        {up ? '+' : ''}\n        {value.toFixed(decimals)}%\n      </Text>\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/percent-change.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PercentChange"
    ],
    "api": "<PercentChange value decimals? showIcon? />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}