{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "title": "Bar chart",
  "description": "plain Views",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/bar-chart.tsx",
      "content": "import { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { View } from 'react-native';\n\nexport type Bar = { label: string; value: number; /** Tailwind bg class, default bg-primary. */ className?: string };\n\ntype Props = { data: Bar[]; height?: number; showValues?: boolean; className?: string };\n\n/** Vertical bar chart from plain Views. Bars scale to the max value. */\nexport function BarChart({ data, height = 160, showValues = false, className }: Props) {\n  const max = Math.max(...data.map((d) => d.value), 1);\n  return (\n    <View className={cn('flex-row items-end gap-2', className)} style={{ height: height + 28 }}>\n      {data.map((d, i) => (\n        <View key={`${d.label}-${i}`} className=\"flex-1 items-center\">\n          {showValues ? <Text className=\"text-muted-foreground mb-1 text-xs\">{d.value}</Text> : null}\n          <View className={cn('w-[70%] rounded-t-sm', d.className ?? 'bg-primary')} style={{ height: Math.max(2, (d.value / max) * height) }} />\n          <Text className=\"text-muted-foreground mt-1 text-xs\" numberOfLines={1}>\n            {d.label}\n          </Text>\n        </View>\n      ))}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/bar-chart.tsx"
    }
  ],
  "meta": {
    "exports": [
      "BarChart"
    ],
    "api": "<BarChart data={[{label,value,className?}]} height showValues? />"
  },
  "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"
}