{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-hover",
  "title": "Logo Cloud Hover",
  "description": "Logo wall that dims and blurs on hover to reveal a CTA link.",
  "registryDependencies": [],
  "files": [
    {
      "path": "payload-components/source/blocks/shared/logoCloudFields.ts",
      "content": "import type { Field } from 'payload'\n\n/**\n * Shared field core for the Logo Cloud kit family.\n *\n * Every logo-cloud variant (logo-cloud-grid, logo-cloud-hover,\n * logo-cloud-marquee, logo-cloud-inline, logo-cloud-inline-wrap, …) spreads\n * these fields first and then appends its own variant-specific shape (for\n * example the hover variant adds a CTA link group). Editing the shared\n * heading/logos shape here updates every installed logo-cloud block at once,\n * so the family never drifts field-by-field across a repo.\n *\n * Each logo is an editable Media upload plus an accessible name and an\n * optional link, so editors manage the wall of logos from the admin instead\n * of shipping hardcoded brand SVGs.\n *\n * Installed once per repo at `src/blocks/shared/logoCloudFields.ts`; re-running\n * `payload-components add logo-cloud-*` never overwrites a copy you have already edited.\n */\nexport const logoCloudFields: Field[] = [\n  {\n    name: 'heading',\n    type: 'text',\n    required: true,\n  },\n  {\n    name: 'logos',\n    type: 'array',\n    required: true,\n    minRows: 2,\n    maxRows: 12,\n    admin: {\n      initCollapsed: true,\n    },\n    fields: [\n      {\n        name: 'logo',\n        type: 'upload',\n        relationTo: 'media',\n        required: true,\n      },\n      {\n        name: 'name',\n        type: 'text',\n        required: true,\n      },\n      {\n        name: 'href',\n        type: 'text',\n      },\n    ],\n  },\n]\n",
      "type": "registry:file",
      "target": "~/src/blocks/shared/logoCloudFields.ts"
    },
    {
      "path": "payload-components/source/blocks/LogoCloudHover/config.ts",
      "content": "import type { Block } from 'payload'\n\nimport { logoCloudFields } from '@/blocks/shared/logoCloudFields'\nimport { linkGroup } from '@/fields/linkGroup'\n\nexport const LogoCloudHover: Block = {\n  slug: 'logoCloudHover',\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_log_clo_hov',\n  interfaceName: 'LogoCloudHoverBlock',\n  fields: [\n    // Shared logo-cloud core (heading + logos). Edit the shared shape in\n    // @/blocks/shared/logoCloudFields to update every logo-cloud variant.\n    ...logoCloudFields,\n    // Variant-specific: a single CTA revealed on hover over the logo wall.\n    linkGroup({\n      overrides: {\n        admin: {\n          initCollapsed: true,\n        },\n        maxRows: 1,\n      },\n    }),\n  ],\n  labels: {\n    plural: 'Logo Cloud Hover Blocks',\n    singular: 'Logo Cloud Hover',\n  },\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/LogoCloudHover/config.ts"
    },
    {
      "path": "payload-components/source/blocks/LogoCloudHover/Component.tsx",
      "content": "import React from 'react'\n\nimport type { LogoCloudHoverBlock as LogoCloudHoverBlockData } from '@/payload-types'\n\nimport { CMSLink } from '@/components/Link'\nimport { Media } from '@/components/Media'\nimport { cn } from '@/utilities/ui'\n\ntype Props = LogoCloudHoverBlockData & {\n  id?: string\n  className?: string\n  disableInnerContainer?: boolean\n}\n\nexport const LogoCloudHoverBlock: React.FC<Props> = ({\n  className,\n  disableInnerContainer,\n  heading,\n  id,\n  links,\n  logos,\n}) => {\n  return (\n    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>\n      <div className=\"overflow-hidden rounded-frame border border-border/70 bg-card/35 px-6 py-10 sm:px-8 lg:px-12 lg:py-14\">\n        <div\n          className={cn('flex flex-col gap-12', {\n            'mx-auto max-w-5xl': !disableInnerContainer,\n          })}\n        >\n          <p className=\"text-center text-sm font-medium text-muted-foreground\">{heading}</p>\n\n          <div className=\"group relative\">\n            {links && links.length > 0 ? (\n              <div className=\"pointer-events-none absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 transition duration-500 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100\">\n                {links.map(({ link }, index) => (\n                  <CMSLink\n                    appearance={link.appearance === 'outline' ? 'outline' : 'default'}\n                    key={index}\n                    {...link}\n                  />\n                ))}\n              </div>\n            ) : null}\n\n            {logos && logos.length > 0 ? (\n              <div className=\"grid grid-cols-3 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-40 group-hover:blur-sm group-focus-within:opacity-40 group-focus-within:blur-sm sm:gap-x-16 sm:gap-y-12 md:grid-cols-4\">\n                {logos.map((item, index) => {\n                  const logo = (\n                    <Media resource={item.logo} imgClassName=\"mx-auto h-6 w-auto object-contain\" />\n                  )\n\n                  return (\n                    <div\n                      className=\"flex items-center justify-center\"\n                      key={item.id ?? `${item.name}-${index}`}\n                    >\n                      {item.href ? (\n                        <a aria-label={item.name} href={item.href}>\n                          {logo}\n                        </a>\n                      ) : (\n                        logo\n                      )}\n                    </div>\n                  )\n                })}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:file",
      "target": "~/src/blocks/LogoCloudHover/Component.tsx"
    }
  ],
  "meta": {
    "payloadComponent": {
      "installCommand": "payload-components add logo-cloud-hover",
      "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 logo-cloud-hover\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://www.payload-components.xyz/r/logo-cloud-hover.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add logo-cloud-hover` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.",
  "type": "registry:block"
}