{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-screenshot",
  "title": "Screenshot",
  "description": "Screenshot theme-aware (light/dark) com otimização e skeleton — inspirado em Launch UI Screenshot.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lema-ds/skeleton"
  ],
  "files": [
    {
      "path": "components/ds/ds-screenshot.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\n// ── Types ──\n\nexport interface ScreenshotProps\n  extends\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\">,\n    VariantProps<typeof screenshotVariants> {\n  src: string\n  srcDark?: string\n  alt: string\n  width?: number\n  height?: number\n  loadingState?: boolean\n  priority?: boolean\n}\n\n// ── Variants ──\n\nexport const screenshotVariants = cva(\n  \"relative block w-full overflow-hidden bg-muted object-cover transition-opacity\",\n  {\n    variants: {\n      rounded: {\n        none: \"rounded-none\",\n        sm: \"rounded-sm\",\n        md: \"rounded-md\",\n        lg: \"rounded-lg\",\n        xl: \"rounded-xl\",\n        \"2xl\": \"rounded-2xl\",\n      },\n      shadow: {\n        none: \"shadow-none\",\n        sm: \"shadow-sm\",\n        md: \"shadow-md\",\n        lg: \"shadow-lg\",\n        xl: \"shadow-xl\",\n      },\n      aspect: {\n        auto: \"\",\n        video: \"aspect-video\",\n        square: \"aspect-square\",\n        \"4/3\": \"aspect-[4/3]\",\n      },\n    },\n    defaultVariants: {\n      rounded: \"xl\",\n      shadow: \"lg\",\n      aspect: \"auto\",\n    },\n  }\n)\n\n// ── Component ──\n\nexport function Screenshot({\n  src,\n  srcDark,\n  alt,\n  width = 1200,\n  height = 800,\n  rounded = \"xl\",\n  shadow = \"lg\",\n  aspect = \"auto\",\n  loadingState = false,\n  priority = false,\n  className,\n  ...props\n}: ScreenshotProps) {\n  const [loaded, setLoaded] = React.useState(priority)\n\n  if (loadingState) {\n    return (\n      <Skeleton\n        data-slot=\"screenshot-skeleton\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-busy=\"true\"\n        aria-label=\"Loading screenshot\"\n        className={cn(\n          screenshotVariants({ rounded, shadow, aspect }),\n          className\n        )}\n        style={{ width: \"100%\", aspectRatio: `${width}/${height}` }}\n      />\n    )\n  }\n\n  // theme-aware: render light + dark, CSS toggles via .dark\n  if (srcDark) {\n    return (\n      <div\n        data-slot=\"screenshot\"\n        className={cn(\"relative w-full\", className)}\n        style={{\n          aspectRatio: aspect === \"auto\" ? `${width}/${height}` : undefined,\n        }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={src}\n          alt={alt}\n          width={width}\n          height={height}\n          loading={priority ? \"eager\" : \"lazy\"}\n          decoding=\"async\"\n          onLoad={() => setLoaded(true)}\n          className={cn(\n            screenshotVariants({ rounded, shadow, aspect }),\n            \"dark:hidden\",\n            !loaded && \"opacity-0\",\n            loaded && \"opacity-100\"\n          )}\n          {...props}\n        />\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={srcDark}\n          alt={alt}\n          width={width}\n          height={height}\n          loading={priority ? \"eager\" : \"lazy\"}\n          decoding=\"async\"\n          onLoad={() => setLoaded(true)}\n          className={cn(\n            screenshotVariants({ rounded, shadow, aspect }),\n            \"hidden dark:block\",\n            !loaded && \"opacity-0\",\n            loaded && \"opacity-100\"\n          )}\n          aria-hidden={alt ? undefined : true}\n        />\n      </div>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      loading={priority ? \"eager\" : \"lazy\"}\n      decoding=\"async\"\n      onLoad={() => setLoaded(true)}\n      data-slot=\"screenshot\"\n      className={cn(\n        screenshotVariants({ rounded, shadow, aspect }),\n        !loaded && \"opacity-0\",\n        loaded && \"opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}