{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image",
  "title": "Image",
  "description": "An image component with variants",
  "files": [
    {
      "path": "registry/cs/ui/image/image.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface ImageProps extends React.ComponentProps<\"img\"> {\n  variant?: \"default\" | \"rounded\" | \"circle\" | \"bordered\"\n  fit?: \"cover\" | \"contain\" | \"fill\" | \"none\" | \"scale-down\"\n}\n\nconst Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  ({ className, variant = \"default\", fit = \"cover\", alt, ...props }, ref) => {\n    return (\n      <img\n        ref={ref}\n        data-slot=\"image\"\n        alt={alt}\n        className={cn(\n          \"object-cover\",\n          {\n            \"rounded-none\": variant === \"default\",\n            \"rounded-lg\": variant === \"rounded\",\n            \"rounded-full\": variant === \"circle\",\n            \"rounded-lg border-2 border-border\": variant === \"bordered\",\n            \"object-cover\": fit === \"cover\",\n            \"object-contain\": fit === \"contain\",\n            \"object-fill\": fit === \"fill\",\n            \"object-none\": fit === \"none\",\n            \"object-scale-down\": fit === \"scale-down\",\n          },\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nImage.displayName = \"Image\"\n\nfunction ImageContainer({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"image-container\"\n      className={cn(\n        \"relative overflow-hidden bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ImageOverlay({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"image-overlay\"\n      className={cn(\n        \"absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ImageCaption({ className, ...props }: React.ComponentProps<\"figcaption\">) {\n  return (\n    <figcaption\n      data-slot=\"image-caption\"\n      className={cn(\n        \"text-sm text-muted-foreground mt-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ImageFigure({ className, ...props }: React.ComponentProps<\"figure\">) {\n  return (\n    <figure\n      data-slot=\"image-figure\"\n      className={cn(\"\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Image,\n  ImageContainer,\n  ImageOverlay,\n  ImageCaption,\n  ImageFigure,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}