{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-badge",
  "title": "Glass Badge",
  "description": "A small tinted label for status, counts and categories.",
  "registryDependencies": [
    "@glassyui-native/glass-provider"
  ],
  "files": [
    {
      "path": "registry/glassyui-native/glass-badge.tsx",
      "content": "import { forwardRef, type ReactNode } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { useGlassTheme } from './glass-provider';\nimport type { GlassTone } from './lib/tokens';\n\nexport type GlassBadgeTone = GlassTone;\n\nexport type GlassBadgeProps = ViewProps & {\n  children?: ReactNode;\n  /** Leading status dot in the tone colour. */\n  dot?: boolean;\n  tone?: GlassBadgeTone;\n};\n\n// Each tone keeps 4.5:1 text over a white or black backdrop in both themes.\nconst TONES = {\n  dark: {\n    neutral: { fill: 'rgba(44, 44, 46, 0.88)', ink: '#f5f5f7', tint: '142, 142, 147' },\n    blue: { fill: 'rgba(13, 44, 82, 0.88)', ink: '#b2d6ff', tint: '0, 103, 217' },\n    green: { fill: 'rgba(22, 60, 48, 0.88)', ink: '#7cebc0', tint: '51, 214, 159' },\n    orange: { fill: 'rgba(70, 54, 22, 0.88)', ink: '#ffd27a', tint: '255, 189, 56' },\n    red: { fill: 'rgba(76, 30, 44, 0.88)', ink: '#ffa6b7', tint: '255, 92, 122' },\n    purple: { fill: 'rgba(44, 36, 92, 0.88)', ink: '#c7b8ff', tint: '155, 128, 255' },\n  },\n  light: {\n    neutral: { fill: 'rgba(242, 242, 244, 0.88)', ink: '#222224', tint: '142, 142, 147' },\n    blue: { fill: 'rgba(229, 241, 255, 0.88)', ink: '#0054b3', tint: '0, 103, 217' },\n    green: { fill: 'rgba(224, 247, 238, 0.88)', ink: '#08603f', tint: '20, 168, 116' },\n    orange: { fill: 'rgba(255, 243, 219, 0.88)', ink: '#824c00', tint: '232, 150, 12' },\n    red: { fill: 'rgba(255, 229, 236, 0.88)', ink: '#a8113a', tint: '232, 52, 90' },\n    purple: { fill: 'rgba(237, 232, 255, 0.88)', ink: '#5532d0', tint: '106, 76, 240' },\n  },\n} as const;\n\nconst HIGHLIGHT = { dark: 'rgba(255, 255, 255, 0.12)', light: 'rgba(255, 255, 255, 0.9)' } as const;\n\n/** A small label in one of six tones, with an optional status dot. */\nexport const GlassBadge = forwardRef<View, GlassBadgeProps>(\n  ({ children, dot = false, style, tone = 'neutral', ...rest }, ref) => {\n    const { preferences } = useGlassTheme();\n    const colors = TONES[preferences.theme][tone];\n\n    return (\n      <View\n        ref={ref}\n        style={[\n          styles.badge,\n          {\n            backgroundColor: colors.fill,\n            boxShadow: `inset 0px 1px 0px ${HIGHLIGHT[preferences.theme]}, inset 0px 0px 0px 0.5px rgba(${colors.tint}, 0.4)`,\n          },\n          style,\n        ]}\n        {...rest}\n      >\n        {dot ? <View style={[styles.dot, { backgroundColor: `rgb(${colors.tint})` }]} /> : null}\n        <Text numberOfLines={1} style={[styles.label, { color: colors.ink }]}>\n          {children}\n        </Text>\n      </View>\n    );\n  },\n);\n\nGlassBadge.displayName = 'GlassBadge';\n\nconst styles = StyleSheet.create({\n  badge: {\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    borderCurve: 'continuous',\n    borderRadius: 999,\n    flexDirection: 'row',\n    gap: 6,\n    paddingHorizontal: 10,\n    paddingVertical: 3,\n  },\n  dot: { borderRadius: 3, height: 6, width: 6 },\n  label: { fontSize: 12, fontWeight: '600', lineHeight: 16 },\n});\n",
      "type": "registry:ui",
      "target": "components/glassyui/glass-badge.tsx"
    }
  ],
  "type": "registry:ui"
}