50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Te03,/** * LogoMark — one customer or partner logo, optionally linked. * * Handles the two things logo walls always need: a consistent optical size * across wildly different aspect ratios (height-constrained, width-auto), and a * desaturated resting state that does not also wash out the dark theme. * * a11y: a logo in a "trusted by" wall is decorative *as an image* — the company * name is the information. So the image carries `alt=""` and the name is exposed * as visually hidden text, which keeps the wall readable without a screen reader * announcing "image, Acme logo" for every item. Set `showName` to make it * visible instead. * * The `muted` resting treatment (desaturate and fade) is applied to the image * only, never to a shared wrapper. On the wrapper it also dims the text * fallback and the visible name, pushing both under 4.5:1 — which the axe run * caught, and which is why the class list below is split the way it is. * * Dependencies: react, @/lib/types, @/lib/utils. */ import type { ElementType } from "react" import type { ImageComponent, LinkComponent } from "@/lib/types" import { cn } from "@/lib/utils" export interface LogoItem { /** Company name. Always exposed to assistive tech. */ name: string src?: string width?: number height?: number /** Links the logo. Omit for a non-interactive wall. */ href?: string } export interface LogoMarkProps extends LogoItem { /** Your image component, such as `next/image`. Defaults to `"img"`. */ image?: ImageComponent /** Your link component, such as `next/link`. Defaults to `"a"`. */ link?: LinkComponent /** Height in px. The width keeps the logo's proportions. */ size?: "sm" | "md" | "lg" /** Shows the logo in grey until hover or focus. Default `true`. */ muted?: boolean /** Shows the name as visible text instead of hiding it. */ showName?: boolean className?: string } const heights = { sm: "h-6", md: "h-8", lg: "h-10" } as const export function LogoMark({ name, src, href, width, height, image, link, size = "md", muted = true, showName = false, className, }: LogoMarkProps) { const Image = (image ?? "img") as ElementType const Link = (link ?? "a") as ElementType // Only ever applied to the image. Text keeps its full contrast. const imageTreatment = cn( "w-auto object-contain", heights[size], muted && "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", ) const content = src ? ( <>

{name} ) : ( {name} ) const shared = cn("group inline-flex items-center gap-2", className) if (!href) { return {content} } return ( {content} ) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/ui/logo-mark.tsx","content":"$52","type":"registry:ui","target":"components/ui/logo-mark.tsx"}],"className":"h-[70svh] min-h-80"}]]}]