{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "team-section",
  "title": "Team Section",
  "type": "registry:block",
  "description": "Centered marketing team section. Eyebrow + headline + lede over a responsive member card grid (initials avatar, role badge, one-line bio, ghost social buttons). Members with a department field group under uppercase headers; variant=\"compact\" drops bios for tighter cards. Roster is stub data — edit DEFAULT_MEMBERS or pass members.",
  "categories": [
    "marketing"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/team-section/team-section.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\n\nexport interface TeamMember {\n  name: string\n  role: string\n  bio?: string\n  /** When any member has a department, the grid groups under uppercase headers. */\n  department?: string\n  twitter?: string\n  github?: string\n  linkedin?: string\n}\n\n/** Stub roster — swap for your data source after installing. */\nconst DEFAULT_MEMBERS: TeamMember[] = [\n  {\n    name: 'Amara Okafor',\n    role: 'Co-founder & CEO',\n    bio: 'Sets the vision and still reviews every release note before it ships.',\n    twitter: 'https://x.com/amaraokafor',\n    linkedin: 'https://linkedin.com/in/amaraokafor',\n  },\n  {\n    name: 'Jonas Lindqvist',\n    role: 'Co-founder & CTO',\n    bio: 'Owns architecture and keeps p95 latency under 80ms in every region.',\n    github: 'https://github.com/jonaslindqvist',\n    linkedin: 'https://linkedin.com/in/jonaslindqvist',\n  },\n  {\n    name: 'Priya Raghavan',\n    role: 'Staff Engineer',\n    bio: 'Leads the platform team and maintains our public REST and GraphQL APIs.',\n    github: 'https://github.com/priyaraghavan',\n  },\n  {\n    name: 'Marco Deluca',\n    role: 'Product Designer',\n    bio: 'Turns messy workflows into calm interfaces and runs our weekly design critique.',\n    twitter: 'https://x.com/marcodeluca',\n    github: 'https://github.com/marcodeluca',\n    linkedin: 'https://linkedin.com/in/marcodeluca',\n  },\n  {\n    name: 'Tomoko Saito',\n    role: 'Head of People',\n    bio: 'Builds hiring loops that respect candidates and onboarding that actually sticks.',\n    linkedin: 'https://linkedin.com/in/tomokosaito',\n  },\n  {\n    name: 'Felix Adeyemi',\n    role: 'Growth Engineer',\n    bio: 'Experiments across onboarding and pricing pages; ships behind flags daily.',\n    twitter: 'https://x.com/felixadeyemi',\n  },\n]\n\ninterface MemberSection {\n  department?: string\n  members: TeamMember[]\n}\n\nfunction initialsFor(name: string): string {\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => part.charAt(0).toUpperCase())\n    .join('')\n}\n\nfunction getSections(members: TeamMember[]): MemberSection[] {\n  if (!members.some((member) => member.department)) return [{ members }]\n  const grouped = new Map<string, TeamMember[]>()\n  for (const member of members) {\n    const key = member.department ?? ''\n    if (!grouped.has(key)) grouped.set(key, [])\n    grouped.get(key)!.push(member)\n  }\n  return Array.from(grouped.entries()).map(([department, groupedMembers]) => ({\n    department: department || undefined,\n    members: groupedMembers,\n  }))\n}\n\nconst XIcon = (className: string) => html`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" class=${className}>\n  <path\n    d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n  />\n</svg>`\n\nconst GithubIcon = (className: string) => html`<svg\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n  class=${className}\n>\n  <path\n    d=\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.69-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.02 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.26 5.66.41.35.78 1.05.78 2.12v3.14c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z\"\n  />\n</svg>`\n\nconst LinkedinIcon = (className: string) => html`<svg\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n  class=${className}\n>\n  <path\n    d=\"M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z\"\n  />\n</svg>`\n\n/**\n * <uip-team-section> — the registry TeamSection block as a web component.\n *\n * Class strings are React's TeamSection verbatim. `heading` is React's `title`\n * (`title` is taken by HTMLElement); `eyebrow`, `description`, `members` and\n * `variant` keep React's names (`members` is set as a property — complex\n * objects can't come from attributes). Social links render as <uip-button>\n * anchors (React's asChild pattern); `rel=\"noreferrer\"` has no forwarding\n * target on uip-button and is omitted.\n */\nexport class UipTeamSection extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    eyebrow: {},\n    heading: {},\n    description: {},\n    members: {},\n    variant: { reflect: true },\n  }\n\n  eyebrow = 'Our team'\n  heading = 'The people behind the product'\n  description =\n    'A small team with strong opinions about craft. We design, build and support everything ourselves — no outsourcing, no black boxes.'\n  members: TeamMember[] = DEFAULT_MEMBERS\n  variant: 'grid' | 'compact' = 'grid'\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'team-section')\n  }\n\n  render() {\n    const compact = this.variant === 'compact'\n    const showHeader = Boolean(this.eyebrow || this.heading || this.description)\n    const sections = getSections(this.members ?? DEFAULT_MEMBERS)\n\n    return html`\n      <section data-slot=\"team-section\" class=\"bg-background\">\n        <div class=\"mx-auto max-w-6xl px-6 py-24\">\n          ${showHeader\n            ? html`\n                <div data-slot=\"team-section-header\" class=\"mx-auto max-w-2xl text-center\">\n                  ${this.eyebrow\n                    ? html`<p class=\"text-primary text-sm font-medium tracking-widest uppercase\">${this.eyebrow}</p>`\n                    : ''}\n                  ${this.heading\n                    ? html`<h2 class=\"mt-2 text-3xl font-semibold tracking-tight sm:text-4xl\">${this.heading}</h2>`\n                    : ''}\n                  ${this.description\n                    ? html`<p class=\"text-muted-foreground mt-3 text-lg leading-relaxed\">${this.description}</p>`\n                    : ''}\n                </div>\n              `\n            : ''}\n          ${sections.map(\n            (section, i) => html`\n              <div\n                data-slot=\"team-section-group\"\n                class=${i > 0 || showHeader ? 'mt-12' : ''}\n              >\n                ${section.department\n                  ? html`<h3 class=\"text-muted-foreground text-xs font-semibold tracking-widest uppercase\">\n                      ${section.department}\n                    </h3>`\n                  : ''}\n                <div\n                  data-slot=\"team-section-grid\"\n                  class=${cn(\n                    'grid gap-6 sm:grid-cols-2 lg:grid-cols-3',\n                    compact ? 'gap-4' : '',\n                    section.department ? 'mt-6' : '',\n                  )}\n                >\n                  ${section.members.map(\n                    (member) => html`\n                      <uip-card class=\"text-center\">\n                        <uip-card-content class=${cn('flex flex-col items-center', compact ? 'gap-3 p-4' : 'gap-4 p-6')}>\n                          <uip-avatar class=${compact ? '[&::part(base)]:size-10' : '[&::part(base)]:size-16'}>\n                            <uip-avatar-fallback class=${compact ? '[&::part(base)]:text-sm' : '[&::part(base)]:text-lg'}>\n                              ${initialsFor(member.name)}\n                            </uip-avatar-fallback>\n                          </uip-avatar>\n                          <div class=\"space-y-1\">\n                            <p class=\"text-sm font-semibold\">${member.name}</p>\n                            <uip-badge variant=\"secondary\">${member.role}</uip-badge>\n                            ${!compact && member.bio\n                              ? html`<p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n                                  ${member.bio}\n                                </p>`\n                              : ''}\n                          </div>\n                          ${member.twitter || member.github || member.linkedin\n                            ? html`\n                                <div class=\"flex items-center gap-0.5\">\n                                  ${member.twitter\n                                    ? html`<uip-button\n                                        variant=\"ghost\"\n                                        size=\"icon-sm\"\n                                        href=${member.twitter}\n                                        target=\"_blank\"\n                                        aria-label=${`${member.name} on X (Twitter)`}\n                                      >\n                                        ${XIcon('size-4')}\n                                      </uip-button>`\n                                    : ''}\n                                  ${member.github\n                                    ? html`<uip-button\n                                        variant=\"ghost\"\n                                        size=\"icon-sm\"\n                                        href=${member.github}\n                                        target=\"_blank\"\n                                        aria-label=${`${member.name} on GitHub`}\n                                      >\n                                        ${GithubIcon('size-4')}\n                                      </uip-button>`\n                                    : ''}\n                                  ${member.linkedin\n                                    ? html`<uip-button\n                                        variant=\"ghost\"\n                                        size=\"icon-sm\"\n                                        href=${member.linkedin}\n                                        target=\"_blank\"\n                                        aria-label=${`${member.name} on LinkedIn`}\n                                      >\n                                        ${LinkedinIcon('size-4')}\n                                      </uip-button>`\n                                    : ''}\n                                </div>\n                              `\n                            : ''}\n                        </uip-card-content>\n                      </uip-card>\n                    `,\n                  )}\n                </div>\n              </div>\n            `,\n          )}\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-team-section') || customElements.define('uip-team-section', UipTeamSection)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-team-section': UipTeamSection\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/team-section/team-section.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/avatar.json",
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}