{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-tile",
  "title": "Image tile",
  "description": "rounded image · `seed` draws generated art when there is no `source`",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/placeholder",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/image-tile.tsx",
      "content": "import { Placeholder } from '@/components/kit/placeholder';\nimport { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { ImageIcon, type LucideIcon } from 'lucide-react-native';\nimport * as React from 'react';\nimport { Image, type ImageSourcePropType, View } from 'react-native';\n\ntype Props = {\n  source?: ImageSourcePropType;\n  /** Width / height. Default 4/3. */\n  ratio?: number;\n  /** Shown while loading or when there is no source. */\n  fallbackIcon?: LucideIcon;\n  /** With no `source`, draw generated art from this seed instead of a grey box. */\n  seed?: string;\n  caption?: string;\n  className?: string;\n};\n\n/** Rounded image with a muted placeholder — product shots, covers, attachments. */\nexport function ImageTile({ source, ratio = 4 / 3, fallbackIcon = ImageIcon, seed, caption, className }: Props) {\n  const [failed, setFailed] = React.useState(false);\n  const showImage = !!source && !failed;\n  if (!showImage && seed) {\n    return (\n      <View className={cn('gap-2', className)}>\n        <Placeholder seed={seed} ratio={ratio} icon={fallbackIcon} />\n        {caption ? <Text className=\"text-muted-foreground text-sm\">{caption}</Text> : null}\n      </View>\n    );\n  }\n  return (\n    <View className={cn('gap-2', className)}>\n      <View className=\"bg-muted w-full items-center justify-center overflow-hidden rounded-lg\" style={{ aspectRatio: ratio }}>\n        {showImage ? <Image source={source} onError={() => setFailed(true)} className=\"h-full w-full\" resizeMode=\"cover\" accessibilityIgnoresInvertColors /> : <Icon as={fallbackIcon} size={28} className=\"text-muted-foreground\" />}\n      </View>\n      {caption ? <Text className=\"text-muted-foreground text-sm\">{caption}</Text> : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/image-tile.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ImageTile"
    ],
    "api": "<ImageTile source? ratio? caption? fallbackIcon? />"
  },
  "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"
}