{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "icon-badge",
  "title": "Icon badge",
  "description": "icon button with unread count/dot · always labelled",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/icon-badge.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\ntype Props = React.ComponentProps<typeof Pressable> & {\n  icon: LucideIcon;\n  /** Number shown in the badge; 0 hides it. Values over 99 show \"99+\". */\n  count?: number;\n  /** Show a plain dot instead of a count. */\n  dot?: boolean;\n  size?: number;\n  accessibilityLabel: string;\n};\n\n/** Icon button with a notification badge (bell, cart, inbox). Always give it a label. */\nexport function IconBadge({ icon, count = 0, dot, size = 22, className, accessibilityLabel, ...props }: Props) {\n  const showCount = !dot && count > 0;\n  const label = showCount ? `${accessibilityLabel}, ${count} new` : accessibilityLabel;\n  return (\n    <Pressable accessibilityRole=\"button\" accessibilityLabel={label} className={cn('size-11 items-center justify-center rounded-full active:bg-accent', className)} {...props}>\n      <Icon as={icon} size={size} />\n      {dot ? <View className=\"bg-destructive border-background absolute right-2 top-2 size-2.5 rounded-full border-2\" /> : null}\n      {showCount ? (\n        <View className=\"bg-destructive border-background absolute -top-0.5 right-0 min-w-5 items-center justify-center rounded-full border-2 px-1 py-px\">\n          <Text className=\"text-destructive-foreground text-[10px] font-bold leading-3\">{count > 99 ? '99+' : count}</Text>\n        </View>\n      ) : null}\n    </Pressable>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/icon-badge.tsx"
    }
  ],
  "meta": {
    "exports": [
      "IconBadge"
    ],
    "api": "<IconBadge icon count? dot? accessibilityLabel />"
  },
  "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": [
    "actions"
  ],
  "type": "registry:component"
}