{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-video-dialog",
  "title": "VideoDialog",
  "description": "Thumbnail de vídeo com overlay interativo, botão play pulsante e abertura de modal responsivo em Dialog.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@lema-ds/dialog",
    "@lema-ds/ui-i18n",
    "@lema-ds/ds-locale-provider"
  ],
  "files": [
    {
      "path": "components/ds/ds-video-dialog.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { PlayIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogTrigger,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { UI_I18N, type UILocale } from \"@/lib/ui-i18n\"\nimport { useUILocale } from \"@/components/ui/ds-locale-provider\"\n\n// ── Types ──\n\nexport interface VideoDialogProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof videoDialogVariants> {\n  videoSrc: string\n  thumbnailSrc: string\n  thumbnailAlt?: string\n  title?: string\n  aspectRatio?: \"16/9\" | \"4/3\" | \"1/1\" | \"21/9\"\n  locale?: UILocale\n}\n\n// ── Variants ──\n\nexport const videoDialogVariants = cva(\n  \"group relative cursor-pointer overflow-hidden rounded-xl border border-border/60 transition-all duration-300 hover:border-border\",\n  {\n    variants: {\n      variant: {\n        default: \"shadow-md hover:shadow-xl\",\n        minimal: \"shadow-none\",\n        glow: \"shadow-[0_0_24px_oklch(var(--primary)/0.2)] hover:shadow-[0_0_36px_oklch(var(--primary)/0.35)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport const playButtonVariants = cva(\n  \"relative flex items-center justify-center rounded-full transition-transform duration-300 group-hover:scale-110\",\n  {\n    variants: {\n      variant: {\n        default: \"size-14 bg-primary text-primary-foreground shadow-lg\",\n        minimal:\n          \"size-12 bg-background/80 text-foreground shadow-md backdrop-blur-sm\",\n        glow: \"size-16 bg-primary text-primary-foreground shadow-[0_0_20px_oklch(var(--primary)/0.5)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n// ── Component ──\n\nexport const VideoDialog = React.forwardRef<HTMLDivElement, VideoDialogProps>(\n  (\n    {\n      className,\n      videoSrc,\n      thumbnailSrc,\n      thumbnailAlt = \"Video preview\",\n      title,\n      aspectRatio = \"16/9\",\n      variant = \"default\",\n      locale: localeProp,\n      ...props\n    },\n    ref\n  ) => {\n    const locale = useUILocale(localeProp)\n    const [open, setOpen] = React.useState(false)\n    const t = UI_I18N[locale]?.videoDialog ?? UI_I18N[\"en-US\"].videoDialog\n    const label = title ? `${t.playVideo}: ${title}` : t.playVideo\n\n    const aspectClasses = {\n      \"16/9\": \"aspect-video\",\n      \"4/3\": \"aspect-4/3\",\n      \"1/1\": \"aspect-square\",\n      \"21/9\": \"aspect-21/9\",\n    }[aspectRatio]\n\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <div\n            ref={ref}\n            role=\"button\"\n            tabIndex={0}\n            aria-label={label}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                setOpen(true)\n              }\n            }}\n            className={cn(\n              videoDialogVariants({ variant }),\n              aspectClasses,\n              \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none\",\n              className\n            )}\n            {...props}\n          >\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={thumbnailSrc}\n              alt={thumbnailAlt}\n              loading=\"lazy\"\n              decoding=\"async\"\n              className=\"size-full object-cover transition-transform duration-500 group-hover:scale-105\"\n            />\n\n            {/* Overlay */}\n            <div className=\"absolute inset-0 bg-foreground/30 transition-colors duration-300 group-hover:bg-foreground/40\" />\n\n            {/* Pulsing Play Button */}\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              <div className=\"relative flex items-center justify-center\">\n                {variant === \"glow\" && (\n                  <span className=\"absolute size-full animate-ping rounded-full bg-primary/40 opacity-75\" />\n                )}\n                <div className={cn(playButtonVariants({ variant }))}>\n                  <PlayIcon\n                    className=\"size-6 translate-x-0.5 fill-current\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </DialogTrigger>\n\n        <DialogContent className=\"max-w-4xl overflow-hidden border-border/60 bg-card/90 p-1 sm:rounded-2xl\">\n          <DialogTitle className=\"sr-only\">{title || label}</DialogTitle>\n          <div className=\"relative aspect-video w-full overflow-hidden rounded-xl\">\n            {open && (\n              <iframe\n                src={videoSrc}\n                title={title || label}\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowFullScreen\n                className=\"size-full border-0\"\n              />\n            )}\n          </div>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\nVideoDialog.displayName = \"VideoDialog\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}