{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "hero-video-dialog",
	"title": "Hero Video Dialog",
	"type": "registry:block",
	"description": "A video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.",
	"dependencies": [
		"@lucide/svelte",
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, AnimatePresence } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\n\ttype AnimationStyle =\n\t\t| \"from-bottom\"\n\t\t| \"from-center\"\n\t\t| \"from-top\"\n\t\t| \"from-left\"\n\t\t| \"from-right\"\n\t\t| \"fade\"\n\t\t| \"top-in-bottom-out\"\n\t\t| \"left-in-right-out\";\n\n\tinterface HeroVideoDialogProps {\n\t\tanimationStyle?: AnimationStyle;\n\t\tvideoSrc: string;\n\t\tthumbnailSrc: string;\n\t\tthumbnailAlt?: string;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tanimationStyle = \"from-center\",\n\t\tvideoSrc,\n\t\tthumbnailSrc,\n\t\tthumbnailAlt = \"Video thumbnail\",\n\t\tclass: className,\n\t}: HeroVideoDialogProps = $props();\n\n\tlet isVideoOpen = $state(false);\n\n\tconst animationVariants = {\n\t\t\"from-bottom\": {\n\t\t\tinitial: { y: \"100%\", opacity: 0 },\n\t\t\tanimate: { y: 0, opacity: 1 },\n\t\t\texit: { y: \"100%\", opacity: 0 },\n\t\t},\n\t\t\"from-center\": {\n\t\t\tinitial: { scale: 0.5, opacity: 0 },\n\t\t\tanimate: { scale: 1, opacity: 1 },\n\t\t\texit: { scale: 0.5, opacity: 0 },\n\t\t},\n\t\t\"from-top\": {\n\t\t\tinitial: { y: \"-100%\", opacity: 0 },\n\t\t\tanimate: { y: 0, opacity: 1 },\n\t\t\texit: { y: \"-100%\", opacity: 0 },\n\t\t},\n\t\t\"from-left\": {\n\t\t\tinitial: { x: \"-100%\", opacity: 0 },\n\t\t\tanimate: { x: 0, opacity: 1 },\n\t\t\texit: { x: \"-100%\", opacity: 0 },\n\t\t},\n\t\t\"from-right\": {\n\t\t\tinitial: { x: \"100%\", opacity: 0 },\n\t\t\tanimate: { x: 0, opacity: 1 },\n\t\t\texit: { x: \"100%\", opacity: 0 },\n\t\t},\n\t\tfade: {\n\t\t\tinitial: { opacity: 0 },\n\t\t\tanimate: { opacity: 1 },\n\t\t\texit: { opacity: 0 },\n\t\t},\n\t\t\"top-in-bottom-out\": {\n\t\t\tinitial: { y: \"-100%\", opacity: 0 },\n\t\t\tanimate: { y: 0, opacity: 1 },\n\t\t\texit: { y: \"100%\", opacity: 0 },\n\t\t},\n\t\t\"left-in-right-out\": {\n\t\t\tinitial: { x: \"-100%\", opacity: 0 },\n\t\t\tanimate: { x: 0, opacity: 1 },\n\t\t\texit: { x: \"100%\", opacity: 0 },\n\t\t},\n\t};\n\n\tconst selectedAnimation = $derived(animationVariants[animationStyle]);\n\n\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (e.key === \"Escape\" || e.key === \"Enter\" || e.key === \" \") {\n\t\t\tisVideoOpen = false;\n\t\t}\n\t};\n</script>\n\n<div class={cn(\"relative\", className)}>\n\t<button\n\t\ttype=\"button\"\n\t\taria-label=\"Play video\"\n\t\tclass=\"group relative cursor-pointer border-0 bg-transparent p-0\"\n\t\tonclick={() => (isVideoOpen = true)}\n\t>\n\t\t<img\n\t\t\tsrc={thumbnailSrc}\n\t\t\talt={thumbnailAlt}\n\t\t\twidth={1920}\n\t\t\theight={1080}\n\t\t\tclass=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n\t\t/>\n\t\t<div\n\t\t\tclass=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]\"\n\t\t\t\t>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n\t\t\t\t\t\tstyle=\"filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<polygon points=\"5 3 19 12 5 21 5 3\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</button>\n\t<AnimatePresence>\n\t\t{#if isVideoOpen}\n\t\t\t<motion.div\n\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\trole=\"button\"\n\t\t\t\tonkeydown={handleKeyDown}\n\t\t\t\tonclick={() => (isVideoOpen = false)}\n\t\t\t\tclass=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={selectedAnimation.initial}\n\t\t\t\t\tanimate={selectedAnimation.animate}\n\t\t\t\t\texit={selectedAnimation.exit}\n\t\t\t\t\ttransition={{ type: \"spring\", damping: 30, stiffness: 300 }}\n\t\t\t\t\tclass=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n\t\t\t\t>\n\t\t\t\t\t<motion.button\n\t\t\t\t\t\tclass=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"size-5\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n\t\t\t\t\t\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</motion.button>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<iframe\n\t\t\t\t\t\t\tsrc={videoSrc}\n\t\t\t\t\t\t\ttitle=\"Hero Video player\"\n\t\t\t\t\t\t\tclass=\"size-full rounded-2xl\"\n\t\t\t\t\t\t\tallowfullscreen\n\t\t\t\t\t\t\tallow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n\t\t\t\t\t\t></iframe>\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t{/if}\n\t</AnimatePresence>\n</div>\n",
			"type": "registry:component",
			"target": "magic/hero-video-dialog/hero-video-dialog.svelte"
		},
		{
			"content": "export { default as HeroVideoDialog } from \"./hero-video-dialog.svelte\";\n",
			"type": "registry:file",
			"target": "magic/hero-video-dialog/index.ts"
		}
	]
}