{
  "$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 `src`",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/placeholder"
  ],
  "files": [
    {
      "path": "components/kit/image-tile.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport { ImageIcon, type LucideIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Placeholder } from '@/components/kit/placeholder';\n\ntype Props = {\n  src?: string;\n  /** Describes the image. Empty (\"\") when it is decoration. */\n  alt?: string;\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 `src` (or a broken one), 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({ src, alt = '', ratio = 4 / 3, fallbackIcon: Fallback = ImageIcon, seed, caption, className }: Props) {\n  const [failed, setFailed] = React.useState(false);\n  const showImage = !!src && !failed;\n  const Wrapper = caption ? 'figure' : 'div';\n  return (\n    <Wrapper className={cn('flex flex-col gap-2', className)}>\n      {!showImage && seed ? (\n        <Placeholder seed={seed} ratio={ratio} icon={Fallback} />\n      ) : (\n        <div className=\"bg-muted flex w-full items-center justify-center overflow-hidden rounded-lg\" style={{ aspectRatio: ratio }}>\n          {showImage ? (\n            // A prototype's images come from anywhere; next/image would need every host configured.\n            // eslint-disable-next-line @next/next/no-img-element\n            <img src={src} alt={alt} onError={() => setFailed(true)} className=\"size-full object-cover\" />\n          ) : (\n            <Fallback className=\"text-muted-foreground size-7\" aria-hidden />\n          )}\n        </div>\n      )}\n      {caption ? <figcaption className=\"text-muted-foreground text-sm\">{caption}</figcaption> : null}\n    </Wrapper>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/image-tile.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ImageTile"
    ],
    "api": "<ImageTile src? alt? ratio? caption? fallbackIcon? seed? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "media"
  ],
  "type": "registry:component"
}