{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-video",
  "title": "Hero Video",
  "description": "Full-bleed video hero with editor-managed media and a reduced-motion poster fallback.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "payload-components/source/blocks/shared/heroFields.ts",
      "content": "import type { Field } from 'payload'\n\nimport { linkGroup } from '@/fields/linkGroup'\n\n/**\n * Shared field core for the Hero component family.\n *\n * Every hero variant spreads these fields first and then appends its own\n * variant-specific ones. Editing the\n * shared headline/eyebrow/description/CTA shape here updates every installed\n * hero block at once, so the family never drifts field-by-field across a repo.\n *\n * Installed once per repo at `src/blocks/shared/heroFields.ts`; re-running\n * `payload-components add hero-*` never overwrites a copy you have already edited.\n */\nexport const heroFields: Field[] = [\n  {\n    name: 'eyebrow',\n    type: 'text',\n  },\n  {\n    name: 'title',\n    type: 'text',\n    required: true,\n  },\n  {\n    name: 'description',\n    type: 'textarea',\n    required: true,\n  },\n  linkGroup({\n    overrides: {\n      admin: {\n        initCollapsed: true,\n      },\n      maxRows: 2,\n      minRows: 1,\n    },\n  }),\n]\n",
      "type": "registry:file",
      "target": "~/src/blocks/shared/heroFields.ts"
    },
    {
      "path": "payload-components/source/blocks/HeroVideo/Video.tsx",
      "content": "'use client'\n\nimport { useReducedMotion } from 'motion/react'\nimport { useEffect, useRef } from 'react'\n\ntype Props = {\n  posterUrl?: string\n  videoUrl: string\n}\n\nexport function HeroVideoPlayer({ posterUrl, videoUrl }: Props) {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const shouldReduceMotion = useReducedMotion()\n\n  useEffect(() => {\n    const video = videoRef.current\n\n    if (!video) return\n\n    if (shouldReduceMotion === false) {\n      void video.play().catch(() => undefined)\n      return\n    }\n\n    video.pause()\n  }, [shouldReduceMotion, videoUrl])\n\n  return (\n    <video\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 h-full w-full object-cover\"\n      loop\n      muted\n      playsInline\n      poster={posterUrl}\n      preload=\"none\"\n      ref={videoRef}\n      src={videoUrl}\n    />\n  )\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/HeroVideo/Video.tsx"
    },
    {
      "path": "payload-components/source/blocks/HeroVideo/config.ts",
      "content": "import type { Block } from 'payload'\n\nimport { heroFields } from '@/blocks/shared/heroFields'\n\nexport const HeroVideo: Block = {\n  slug: 'heroVideo',\n  // Existing apps must migrate stored data before adopting this identifier:\n  // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations\n  dbName: 'pc_hero_vid',\n  interfaceName: 'HeroVideoBlock',\n  fields: [\n    // Shared hero core (eyebrow, title, description, CTA links). Variant-specific\n    // fields follow; edit the shared shape in @/blocks/shared/heroFields.\n    ...heroFields,\n    {\n      name: 'video',\n      type: 'upload',\n      relationTo: 'media',\n      required: true,\n    },\n    {\n      name: 'poster',\n      type: 'upload',\n      relationTo: 'media',\n      required: true,\n    },\n    {\n      name: 'proofItems',\n      type: 'array',\n      admin: {\n        initCollapsed: true,\n      },\n      fields: [\n        {\n          name: 'label',\n          type: 'text',\n          required: true,\n        },\n      ],\n      maxRows: 4,\n    },\n  ],\n  labels: {\n    plural: 'Hero Video Blocks',\n    singular: 'Hero Video',\n  },\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/HeroVideo/config.ts"
    },
    {
      "path": "payload-components/source/blocks/HeroVideo/Component.tsx",
      "content": "import React from 'react'\n\nimport type { HeroVideoBlock as HeroVideoBlockData } from '@/payload-types'\n\nimport { CMSLink } from '@/components/Link'\nimport { Media } from '@/components/Media'\nimport { Badge } from '@/components/ui/badge'\nimport { cn } from '@/utilities/ui'\n\nimport { HeroVideoPlayer } from './Video'\n\n// Layout adapted from tailark/blocks (MIT) — re-implemented as a Payload block.\n\ntype Props = HeroVideoBlockData & {\n  id?: string\n  className?: string\n  disableInnerContainer?: boolean\n}\n\nexport const HeroVideoBlock: React.FC<Props> = ({\n  className,\n  description,\n  disableInnerContainer,\n  eyebrow,\n  id,\n  links,\n  poster,\n  proofItems,\n  title,\n  video,\n}) => {\n  const videoUrl =\n    typeof video === 'object' &&\n    video !== null &&\n    typeof video.mimeType === 'string' &&\n    video.mimeType.startsWith('video/') &&\n    typeof video.url === 'string'\n      ? video.url\n      : undefined\n\n  const posterUrl =\n    typeof poster === 'object' && poster !== null && typeof poster.url === 'string'\n      ? poster.url\n      : undefined\n\n  return (\n    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>\n      <div className=\"relative isolate min-h-[36rem] overflow-hidden rounded-frame border border-border/70 bg-foreground\">\n        <div className=\"absolute inset-0 overflow-hidden bg-muted\">\n          {poster ? (\n            <Media resource={poster} imgClassName=\"absolute inset-0 h-full w-full object-cover\" />\n          ) : null}\n          {videoUrl ? <HeroVideoPlayer posterUrl={posterUrl} videoUrl={videoUrl} /> : null}\n          <div className=\"absolute inset-0 bg-foreground/70\" />\n        </div>\n\n        <div\n          className={cn(\n            'relative flex min-h-[36rem] flex-col justify-end px-6 py-10 sm:px-8 lg:px-12 lg:py-14',\n            {\n              'mx-auto max-w-5xl': !disableInnerContainer,\n            },\n          )}\n        >\n          <div className=\"flex max-w-3xl flex-col gap-6\">\n            {eyebrow ? (\n              <Badge\n                variant=\"outline\"\n                className=\"w-fit rounded-full border-background/30 bg-background/10 px-3 py-1 text-background uppercase tracking-eyebrow\"\n              >\n                {eyebrow}\n              </Badge>\n            ) : null}\n\n            <div className=\"flex flex-col gap-4\">\n              <h2 className=\"text-4xl font-medium tracking-display text-balance text-background sm:text-6xl\">\n                {title}\n              </h2>\n              <p className=\"max-w-2xl text-base leading-7 text-background/80 sm:text-lg\">\n                {description}\n              </p>\n            </div>\n\n            {links && links.length > 0 ? (\n              <div className=\"flex flex-col gap-3 sm:flex-row\">\n                {links.map(({ link }, index) => (\n                  <CMSLink\n                    key={index}\n                    appearance={link.appearance === 'outline' ? 'outline' : 'default'}\n                    {...link}\n                  />\n                ))}\n              </div>\n            ) : null}\n\n            {proofItems && proofItems.length > 0 ? (\n              <div className=\"flex flex-wrap gap-3\">\n                {proofItems.map(({ label }, index) => (\n                  <Badge\n                    key={`${label}-${index}`}\n                    variant=\"secondary\"\n                    className=\"rounded-full bg-background/10 px-3 py-1 text-sm text-background\"\n                  >\n                    {label}\n                  </Badge>\n                ))}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/HeroVideo/Component.tsx"
    }
  ],
  "meta": {
    "payloadComponent": {
      "installCommand": "payload-components add hero-video",
      "postInstall": [
        "generate:types",
        "generate:importmap"
      ],
      "requiresPayloadComponentWrapper": true,
      "supportedTargets": [
        "payload-website-starter",
        "payload-blocks-app"
      ]
    }
  },
  "docs": "Payload Components installs this as a Payload CMS block for the Payload website starter shape.\n\nRecommended install:\n\n```bash\npnpm payload-components add hero-video\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://www.payload-components.xyz/r/hero-video.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add hero-video` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.",
  "type": "registry:block"
}