{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-mark",
  "type": "registry:ui",
  "title": "Logo mark",
  "description": "One customer logo, with an optional link. Logos get the same visual height, and the company name is available to screen readers.",
  "categories": [
    "atom"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/logo-mark.tsx",
      "type": "registry:ui",
      "target": "components/ui/logo-mark.tsx",
      "content": "/**\n * LogoMark — one customer or partner logo, optionally linked.\n *\n * Handles the two things logo walls always need: a consistent optical size\n * across wildly different aspect ratios (height-constrained, width-auto), and a\n * desaturated resting state that does not also wash out the dark theme.\n *\n * a11y: a logo in a \"trusted by\" wall is decorative *as an image* — the company\n * name is the information. So the image carries `alt=\"\"` and the name is exposed\n * as visually hidden text, which keeps the wall readable without a screen reader\n * announcing \"image, Acme logo\" for every item. Set `showName` to make it\n * visible instead.\n *\n * The `muted` resting treatment (desaturate and fade) is applied to the image\n * only, never to a shared wrapper. On the wrapper it also dims the text\n * fallback and the visible name, pushing both under 4.5:1 — which the axe run\n * caught, and which is why the class list below is split the way it is.\n *\n * Dependencies: react, @/lib/types, @/lib/utils.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type { ImageComponent, LinkComponent } from \"@/lib/types\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface LogoItem {\n  /** Company name. Always exposed to assistive tech. */\n  name: string\n  src?: string\n  width?: number\n  height?: number\n  /** Links the logo. Omit for a non-interactive wall. */\n  href?: string\n}\n\nexport interface LogoMarkProps extends LogoItem {\n  /** Your image component, such as `next/image`. Defaults to `\"img\"`. */\n  image?: ImageComponent\n  /** Your link component, such as `next/link`. Defaults to `\"a\"`. */\n  link?: LinkComponent\n  /** Height in px. The width keeps the logo's proportions. */\n  size?: \"sm\" | \"md\" | \"lg\"\n  /** Shows the logo in grey until hover or focus. Default `true`. */\n  muted?: boolean\n  /** Shows the name as visible text instead of hiding it. */\n  showName?: boolean\n  className?: string\n}\n\nconst heights = { sm: \"h-6\", md: \"h-8\", lg: \"h-10\" } as const\n\nexport function LogoMark({\n  name,\n  src,\n  href,\n  width,\n  height,\n  image,\n  link,\n  size = \"md\",\n  muted = true,\n  showName = false,\n  className,\n}: LogoMarkProps) {\n  const Image = (image ?? \"img\") as ElementType\n  const Link = (link ?? \"a\") as ElementType\n\n  // Only ever applied to the image. Text keeps its full contrast.\n  const imageTreatment = cn(\n    \"w-auto object-contain\",\n    heights[size],\n    muted &&\n      \"duration-facade-base ease-facade-out opacity-70 grayscale transition-[opacity,filter] group-hover:opacity-100 group-hover:grayscale-0 group-focus-visible:opacity-100 group-focus-visible:grayscale-0\",\n  )\n\n  const content = src ? (\n    <>\n      <Image\n        src={src}\n        alt=\"\"\n        width={width}\n        height={height}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className={imageTreatment}\n      />\n      <span\n        className={showName ? \"text-muted-foreground text-sm font-medium\" : \"sr-only\"}\n      >\n        {name}\n      </span>\n    </>\n  ) : (\n    <span\n      className={cn(\n        \"text-muted-foreground text-lg font-semibold tracking-tight\",\n        heights[size],\n        \"flex items-center\",\n      )}\n    >\n      {name}\n    </span>\n  )\n\n  const shared = cn(\"group inline-flex items-center gap-2\", className)\n\n  if (!href) {\n    return <span className={shared}>{content}</span>\n  }\n\n  return (\n    <Link\n      href={href}\n      className={cn(\n        shared,\n        \"focus-visible:ring-ring focus-visible:ring-offset-background rounded-md outline-none focus-visible:ring-2 focus-visible:ring-offset-4\",\n      )}\n    >\n      {content}\n    </Link>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/logo-mark"
}