{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spot",
  "title": "Spot",
  "description": "an icon at illustration scale (≥64px) · EmptyState, SuccessScreen and PermissionPrimer all use it",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils"
  ],
  "files": [
    {
      "path": "components/kit/spot.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon } from 'lucide-react-native';\nimport { View } from 'react-native';\n\nexport type SpotTone = 'muted' | 'primary' | 'success' | 'warning' | 'destructive' | 'info';\nexport type SpotSize = 'md' | 'lg' | 'xl';\n\ntype Props = {\n  icon: LucideIcon;\n  /** md 64 · lg 80 · xl 96. Default `lg`. */\n  size?: SpotSize;\n  tone?: SpotTone;\n  shape?: 'circle' | 'square';\n  /** Draw a soft halo behind the well — the success/celebration treatment. */\n  ring?: boolean;\n  className?: string;\n};\n\nconst SIZES: Record<SpotSize, { well: number; icon: number; halo: number }> = {\n  md: { well: 64, icon: 28, halo: 88 },\n  lg: { well: 80, icon: 36, halo: 108 },\n  xl: { well: 96, icon: 44, halo: 128 },\n};\n\nconst WELL: Record<SpotTone, string> = {\n  muted: 'bg-muted',\n  primary: 'bg-primary',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  destructive: 'bg-destructive',\n  info: 'bg-info',\n};\n\nconst GLYPH: Record<SpotTone, string> = {\n  muted: 'text-muted-foreground',\n  primary: 'text-primary-foreground',\n  success: 'text-success-foreground',\n  warning: 'text-warning-foreground',\n  destructive: 'text-destructive-foreground',\n  info: 'text-info-foreground',\n};\n\nconst HALO: Record<SpotTone, string> = {\n  muted: 'bg-muted/50',\n  primary: 'bg-primary/15',\n  success: 'bg-success/15',\n  warning: 'bg-warning/15',\n  destructive: 'bg-destructive/15',\n  info: 'bg-info/15',\n};\n\n/**\n * An icon at illustration scale — the kit's stand-in for a spot illustration.\n *\n * This is the whole illustration vocabulary: a bell for notifications, a lock for security,\n * a shield for privacy. Themed, so it follows light/dark and re-brands with the tokens.\n * For the leading slot of a row use `IconCircle` instead; the boundary is 44px.\n */\nexport function Spot({ icon, size = 'lg', tone = 'muted', shape = 'circle', ring, className }: Props) {\n  const s = SIZES[size];\n  const radius = shape === 'circle' ? 'rounded-full' : 'rounded-2xl';\n  const well = (\n    <View className={cn(WELL[tone], radius, 'items-center justify-center')} style={{ width: s.well, height: s.well }}>\n      <Icon as={icon} size={s.icon} className={GLYPH[tone]} />\n    </View>\n  );\n  if (!ring) {\n    return (\n      <View className={className} accessibilityElementsHidden importantForAccessibility=\"no-hide-descendants\">\n        {well}\n      </View>\n    );\n  }\n  return (\n    <View\n      className={cn(HALO[tone], radius, 'items-center justify-center', className)}\n      style={{ width: s.halo, height: s.halo }}\n      accessibilityElementsHidden\n      importantForAccessibility=\"no-hide-descendants\">\n      {well}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/spot.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Spot"
    ],
    "api": "<Spot icon size=\"md|lg|xl\" tone? shape=\"circle|square\" ring? />"
  },
  "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": [
    "media"
  ],
  "type": "registry:component"
}