{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team",
  "type": "registry:block",
  "title": "Team",
  "description": "An \"about us\" team section. Each social link names the person as well as the network.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/heading.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/team.tsx",
      "type": "registry:component",
      "target": "components/sections/team.tsx",
      "content": "/**\n * Team — the people behind the product.\n *\n * a11y: portraits carry the person's name as `alt` only when there is no visible\n * name beside them, which there almost always is — so the default is `alt=\"\"`.\n * Announcing \"photo of Rosa Iqbal, Rosa Iqbal, Head of Design\" is worse than\n * announcing the name once.\n *\n * Social links are per person and each gets an accessible name that includes\n * whose profile it is: four \"Twitter\" links in a row are indistinguishable when\n * read out of context, which is exactly how a screen-reader user meets them in\n * a links list.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/heading, @/components/ui/section,\n * @/components/ui/section-header.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type {\n  HeadingLevel,\n  IconComponent,\n  ImageComponent,\n  LinkComponent,\n  ListSlotProps,\n  SectionBaseProps,\n} from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { Heading } from \"@/components/ui/heading\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\n\nexport interface TeamSocial {\n  /** Network name, e.g. \"GitHub\". Combined with the person's name for the label. */\n  label: string\n  href: string\n  icon: IconComponent\n}\n\nexport interface TeamMember {\n  name: string\n  role: string\n  bio?: string\n  photoSrc?: string\n  social?: TeamSocial[]\n}\n\nexport interface TeamProps extends SectionBaseProps, ListSlotProps {\n  items: TeamMember[]\n  title?: string\n  eyebrow?: string\n  description?: string\n  image?: ImageComponent\n  link?: LinkComponent\n  columns?: 2 | 3 | 4\n  /** `square` crops photos to a card. `circle` shows round avatars. */\n  shape?: \"square\" | \"circle\"\n  itemHeadingLevel?: HeadingLevel\n  align?: \"start\" | \"center\"\n}\n\nconst columnClasses = {\n  2: \"sm:grid-cols-2\",\n  3: \"sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"grid-cols-2 lg:grid-cols-4\",\n} as const\n\nexport function Team({\n  items,\n  title,\n  eyebrow,\n  description,\n  image,\n  link,\n  columns = 3,\n  shape = \"square\",\n  itemHeadingLevel,\n  align = \"center\",\n  listAs,\n  itemAs,\n  headingLevel = 2,\n  as,\n  spacing = \"md\",\n  className,\n  id,\n}: TeamProps) {\n  const List = (listAs ?? \"ul\") as ElementType\n  const Item = (itemAs ?? \"li\") as ElementType\n  const Image = (image ?? \"img\") as ElementType\n  const Link = (link ?? \"a\") as ElementType\n  const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined\n  const itemLevel = itemHeadingLevel ?? (Math.min(headingLevel + 1, 6) as HeadingLevel)\n  const circle = shape === \"circle\"\n\n  return (\n    <Section\n      as={as ?? (title ? \"section\" : \"div\")}\n      spacing={spacing}\n      labelledBy={titleId}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col gap-14\">\n        {title ? (\n          <SectionHeader\n            align={align}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            headingLevel={headingLevel}\n            titleId={titleId}\n          />\n        ) : null}\n\n        <List className={cn(\"grid gap-8\", columnClasses[columns])}>\n          {items.map((member) => (\n            <Item\n              key={member.name}\n              className={cn(\"flex flex-col gap-4\", circle && \"items-center text-center\")}\n            >\n              {member.photoSrc ? (\n                <Image\n                  src={member.photoSrc}\n                  // The name is text directly below; repeating it here is noise.\n                  alt=\"\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                  className={cn(\n                    \"bg-muted w-full object-cover\",\n                    circle ? \"size-28 rounded-full\" : \"aspect-[4/5] rounded-xl\",\n                  )}\n                />\n              ) : null}\n\n              <div className={cn(\"flex flex-col gap-1\", circle && \"items-center\")}>\n                <Heading level={itemLevel} className=\"text-foreground font-semibold\">\n                  {member.name}\n                </Heading>\n                <p className=\"text-muted-foreground text-sm\">{member.role}</p>\n              </div>\n\n              {member.bio ? (\n                <p className=\"text-muted-foreground text-pretty text-sm\">{member.bio}</p>\n              ) : null}\n\n              {member.social?.length ? (\n                <ul className={cn(\"flex items-center gap-1\", circle && \"justify-center\")}>\n                  {member.social.map((social) => {\n                    const Icon = social.icon as ElementType\n                    return (\n                      <li key={social.label}>\n                        <Link\n                          href={social.href}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className=\"text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:ring-ring inline-flex size-11 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2\"\n                        >\n                          <Icon aria-hidden focusable=\"false\" className=\"size-5\" />\n                          {/* Whose profile, not just which network. */}\n                          <span className=\"sr-only\">\n                            {member.name} on {social.label} (opens in a new tab)\n                          </span>\n                        </Link>\n                      </li>\n                    )\n                  })}\n                </ul>\n              ) : null}\n            </Item>\n          ))}\n        </List>\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/team"
}