@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/team-member-carousel/team-member-carousel.test.tsx

@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+import { cleanup, fireEvent, render, screen } from "@testing-library/react"
+import { TeamMemberCarousel, teamMemberCarouselCopy } from "./TeamMemberCarousel"
+
+beforeEach(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia
+})
+afterEach(() => cleanup())
+
+describe("Team Member Carousel", () => {
+  it.each(["en", "ar"] as const)("renders five cards and an h2 that names the section in %s", (locale) => {
+    const { container } = render(<TeamMemberCarousel locale={locale} />)
+    const copy = teamMemberCarouselCopy[locale]
+    expect(container.querySelectorAll("[data-slot='carousel-item']")).toHaveLength(5)
+    const heading = screen.getByRole("heading", { level: 2 })
+    expect(heading.textContent).toBe(copy.heading)
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(heading.id)
+    expect(screen.getByRole("button", { name: copy.labels.next })).toBeTruthy()
+    expect(screen.getByRole("button", { name: copy.labels.previous })).toBeTruthy()
+  })
+
+  it("steps one card per arrow press, and the dots follow", () => {
+    const { container } = render(<TeamMemberCarousel />)
+    const previous = screen.getByRole("button", { name: "Previous member" }) as HTMLButtonElement
+    const next = screen.getByRole("button", { name: "Next member" })
+    const current = () => container.querySelector("[data-slot='carousel-dot'][aria-current='true']")?.getAttribute("aria-label")
+    expect(previous.disabled).toBe(true)
+    expect(current()).toBe("1 / 5")
+    fireEvent.click(next)
+    expect(current()).toBe("2 / 5")
+    expect(previous.disabled).toBe(false)
+    fireEvent.click(previous)
+    expect(current()).toBe("1 / 5")
+  })
+
+  it("makes a card a link only when it has an href, and draws no controls for an empty list", () => {
+    const { container, rerender } = render(<TeamMemberCarousel people={[{ name: "Omar Nasser", role: "Head of Product", href: "/omar" }]} />)
+    expect(container.querySelector("a")?.getAttribute("href")).toBe("/omar")
+    rerender(<TeamMemberCarousel people={[]} />)
+    expect(screen.queryByRole("button", { name: "Next member" })).toBeNull()
+    expect(container.querySelector("[data-slot='carousel-content']")).toBeNull()
+  })
+
+  it("mirrors the arrow icons for right-to-left pages and never autoplays", () => {
+    const { container } = render(<TeamMemberCarousel locale="ar" />)
+    for (const svg of container.querySelectorAll("button svg")) expect(svg.getAttribute("class")).toContain("rtl:-scale-x-100")
+    expect(container.querySelector("[aria-live]")).toBeNull()
+  })
+})

package/registry/blocks/team-member-table/TeamMemberTable.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { REVEAL, TeamHeader, TeamLinkArrow, TeamSection, type TeamLocale, type TeamPerson, teamAvatarFocus } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Team Table (named Member Table here: code
+ * names do not carry the block name).
+ *
+ * A header (eyebrow, heading) over a bordered table on `card`: a `muted` header
+ * row (MEMBER, ROLE, TEAM, BASED IN and an unlabelled link column), then one
+ * row per person: Avatar and name, role, a Secondary Solid Badge for the team,
+ * the city and an up-right arrow link. It is a real `<table>`.
+ *
+ * Desktop shows every column; Tablet drops BASED IN (by container query, so the
+ * cell is hidden, not removed); Mobile turns each row into a stacked block:
+ * person, role, then one line of badge, city and link. A block is `flex-wrap`
+ * rather than `block`, only so that last line can sit on one row as Figma has it.
+ *
+ * Motion (motion card): rows fade in once, top-down. Hover or focus fills a
+ * row with `muted`, scales the avatar to 1.08 and slides the arrow 4px toward
+ * the end. Mobile has no row fill.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop, by the block's own width.
+ */
+
+export interface TeamMemberTableRow extends TeamPerson {
+  /** The team, shown as a Badge. */
+  team: React.ReactNode
+  /** The city. Hidden on Tablet. */
+  location: React.ReactNode
+  /** Where the arrow link goes. Default `#`. */
+  href?: string
+}
+
+export interface TeamMemberTableCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The column headings, and the name of the link column (read out, never drawn). */
+  columns: { member: React.ReactNode; role: React.ReactNode; team: React.ReactNode; location: React.ReactNode; link: string }
+  /** The link's accessible name; the person's name follows, as "View profile: Layla Mansour". */
+  linkLabel: string
+  /** The people, in reading order. */
+  rows: TeamMemberTableRow[]
+}
+
+/** Figma's copy, English and Arabic. Two people Figma shows have no photo to ship, so others stand in. */
+const COPY: Record<TeamLocale, TeamMemberTableCopy> = {
+  en: {
+    eyebrow: "TEAM DIRECTORY",
+    heading: "Who does what, and where",
+    columns: { member: "MEMBER", role: "ROLE", team: "TEAM", location: "BASED IN", link: "Profile" },
+    linkLabel: "View profile",
+    rows: [
+      { name: "Layla Mansour", role: "Co-founder & Chief Executive", team: "Leadership", location: "Amman" },
+      { name: "Karim Haddad", role: "Co-founder & Chief Technology", team: "Engineering", location: "Amman" },
+      { name: "Yara Khalil", role: "VP of Design", team: "Design", location: "Dubai" },
+      { name: "Tomas Vidal", role: "VP of Engineering", team: "Engineering", location: "Lisbon" },
+      { name: "Omar Nasser", role: "Head of Product", team: "Product", location: "Dubai" },
+      { name: "Grace Okafor", role: "Principal Engineer", team: "Engineering", location: "Berlin" },
+      { name: "Clara Weiss", role: "People & Culture Lead", team: "People", location: "Amman" },
+      { name: "Rami Aziz", role: "Solutions Architect", team: "Engineering", location: "Dubai" },
+    ],
+  },
+  ar: {
+    eyebrow: "دليل الفريق",
+    heading: "من يفعل ماذا، وأين",
+    columns: { member: "العضو", role: "الدور", team: "الفريق", location: "المقر", link: "الملف الشخصي" },
+    linkLabel: "عرض الملف الشخصي",
+    rows: [
+      { name: "ليلى منصور", role: "شريكة مؤسِّسة والرئيسة التنفيذية", team: "القيادة", location: "عمّان" },
+      { name: "كريم حداد", role: "شريك مؤسِّس ورئيس التقنية", team: "الهندسة", location: "عمّان" },
+      { name: "يارا خليل", role: "نائبة رئيس التصميم", team: "التصميم", location: "دبي" },
+      { name: "توماس فيدال", role: "نائب رئيس الهندسة", team: "الهندسة", location: "لشبونة" },
+      { name: "عمر ناصر", role: "رئيس المنتج", team: "المنتج", location: "دبي" },
+      { name: "غرايس أوكافور", role: "مهندسة رئيسية", team: "الهندسة", location: "برلين" },
+      { name: "كلارا فايس", role: "قائدة الموارد البشرية والثقافة", team: "الموارد البشرية", location: "عمّان" },
+      { name: "رامي عزيز", role: "مهندس حلول", team: "الهندسة", location: "دبي" },
+    ],
+  },
+}
+
+export interface TeamMemberTableProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamMemberTableCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+}
+
+
+// Cells: a table cell from Tablet up, a block child of a wrapping row below it.
+const HEAD_CELL = cn("px-2 py-3 text-start text-xs font-medium text-muted-foreground first:ps-5 last:pe-5")
+const CELL = cn(
+  "px-0 py-0",
+  `[@container(min-width:40rem)]:table-cell [@container(min-width:40rem)]:px-2 [@container(min-width:40rem)]:py-3 [@container(min-width:40rem)]:align-middle [@container(min-width:40rem)]:first:ps-5 [@container(min-width:40rem)]:last:pe-5`
+)
+
+export function TeamMemberTable({ locale = "en", eyebrow, heading, columns, linkLabel, rows, className, ...props }: TeamMemberTableProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = rows ?? copy.rows
+  const cols = columns ?? copy.columns
+  const link = linkLabel ?? copy.linkLabel
+
+  return (
+    <TeamSection labelledBy={headingId} className={className} {...props}>
+      <TeamHeader headingId={headingId} eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow} heading={heading ?? copy.heading} />
+      {list.length > 0 ? (
+        <div className="w-full overflow-hidden rounded-lg border border-border bg-card">
+          <table className={cn("block w-full border-collapse", `[@container(min-width:40rem)]:table [@container(min-width:40rem)]:table-fixed`)}>
+            {/* Mobile has no columns to name, and its rows are blocks. */}
+            <thead className={cn("hidden bg-muted", `[@container(min-width:40rem)]:table-header-group`)}>
+              <tr>
+                <th scope="col" className={cn(HEAD_CELL)}>{cols.member}</th>
+                <th scope="col" className={cn(HEAD_CELL, `[@container(min-width:40rem)]:w-[15rem]`, `[@container(min-width:64rem)]:w-[16.25rem]`)}>{cols.role}</th>
+                <th scope="col" className={cn(HEAD_CELL, `[@container(min-width:40rem)]:w-[8.75rem]`, `[@container(min-width:64rem)]:w-40`)}>{cols.team}</th>
+                <th scope="col" className={cn(HEAD_CELL, "hidden", `[@container(min-width:64rem)]:table-cell [@container(min-width:64rem)]:w-[8.75rem]`)}>{cols.location}</th>
+                <th scope="col" className={cn(HEAD_CELL, `w-8 [@container(min-width:64rem)]:w-10`)}>
+                  <span className="sr-only">{cols.link}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="block [@container(min-width:40rem)]:table-row-group">
+              {list.map((row, index) => (
+                <tr
+                  key={index}
+                  style={{ "--reveal-i": index, "--reveal-y": "8px" } as React.CSSProperties}
+                  className={cn(
+                    REVEAL,
+                    "group/row flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border px-5 py-4 first:border-t-0",
+                    "motion-safe:transition-[opacity,transform,background-color]",
+                    `[@container(min-width:40rem)]:table-row [@container(min-width:40rem)]:p-0 [@container(min-width:40rem)]:first:border-t hover:[@container(min-width:40rem)]:bg-muted focus-within:[@container(min-width:40rem)]:bg-muted`
+                  )}
+                >
+                  <td className={cn(CELL, "w-full")}>
+                    <div className="flex items-center gap-3">
+                      <span aria-hidden className="shrink-0">
+                        <Avatar
+                          radius="rounded"
+                          className={cn("size-9 motion-safe:transition-transform motion-safe:duration-200 group-hover/row:motion-safe:scale-[1.08] group-focus-within/row:motion-safe:scale-[1.08]", teamAvatarFocus(row.photo).className)}
+                          style={teamAvatarFocus(row.photo).style}
+                          src={row.photo?.src}
+                          name={typeof row.name === "string" ? row.name : ""}
+                        />
+                      </span>
+                      <span className="min-w-0 text-base font-medium text-foreground">{row.name}</span>
+                    </div>
+                  </td>
+                  <td className={cn(CELL, "w-full text-sm text-muted-foreground", `[@container(min-width:40rem)]:w-auto`)}>{row.role}</td>
+                  <td className={cn(CELL, "flex w-auto items-center")}>
+                    <Badge variant="solid" tone="secondary" size="sm" radius="rounded">
+                      {row.team}
+                    </Badge>
+                  </td>
+                  <td className={cn(CELL, "flex-1 text-sm text-muted-foreground", `[@container(min-width:40rem)]:hidden`, `[@container(min-width:64rem)]:table-cell`)}>{row.location}</td>
+                  <td className={cn(CELL, "flex w-auto items-center justify-end text-end")}>
+                    <a
+                      href={row.href ?? "#"}
+                      aria-label={typeof row.name === "string" ? `${link}: ${row.name}` : link}
+                      className="inline-flex rounded-sm text-muted-foreground [outline:none] focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      <TeamLinkArrow
+                        strokeWidth={1.5}
+                        className="[--team-nudge:0.25rem] rtl:[--team-nudge:-0.25rem] motion-safe:transition-transform motion-safe:duration-200 group-hover/row:motion-safe:translate-x-[var(--team-nudge)] group-focus-within/row:motion-safe:translate-x-[var(--team-nudge)]"
+                      />
+                    </a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
+    </TeamSection>
+  )
+}
+
+/** The default copy, English and Arabic, as `locale` picks it. Spread it to change a few strings and keep the rest. */
+export const teamMemberTableCopy = COPY

package/registry/blocks/team-member-table/index.ts

@@ -0,0 +1,7 @@
+export {
+  TeamMemberTable,
+  teamMemberTableCopy,
+  type TeamMemberTableCopy,
+  type TeamMemberTableProps,
+  type TeamMemberTableRow,
+} from "./TeamMemberTable"

package/registry/blocks/team-member-table/member-table.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest"
+import { render, screen, within } from "@testing-library/react"
+import { TeamMemberTable, teamMemberTableCopy } from "./TeamMemberTable"
+
+describe("Team Member Table", () => {
+  it("is a real table with five columns and eight people", () => {
+    render(<TeamMemberTable />)
+    expect(screen.getByRole("heading", { level: 2, name: "Who does what, and where" })).toBeTruthy()
+    expect(screen.getByRole("region", { name: "Who does what, and where" })).toBeTruthy()
+    expect(screen.getAllByRole("columnheader")).toHaveLength(5)
+    expect(screen.getByRole("columnheader", { name: "BASED IN" })).toBeTruthy()
+    expect(screen.getAllByRole("row")).toHaveLength(9)
+  })
+
+  it("puts the name, role, team badge, city and a named link in a row", () => {
+    render(<TeamMemberTable />)
+    const row = screen.getAllByRole("row")[3]!
+    expect(within(row).getAllByText("Yara Khalil").length).toBeGreaterThan(0)
+    expect(within(row).getByText("VP of Design")).toBeTruthy()
+    expect(within(row).getByText("Design")).toBeTruthy()
+    expect(within(row).getByText("Dubai")).toBeTruthy()
+    expect(within(row).getByRole("link", { name: "View profile: Yara Khalil" })).toBeTruthy()
+  })
+
+  it("hides the location column below Desktop and fills the row on hover from Tablet", () => {
+    const { container } = render(<TeamMemberTable />)
+    const bodyRow = container.querySelector("tbody tr")!
+    expect(bodyRow.className).toContain("hover:[@container(min-width:40rem)]:bg-muted")
+    expect(bodyRow.className).toContain("focus-within:[@container(min-width:40rem)]:bg-muted")
+    const location = container.querySelectorAll("tbody tr:first-child td")[3]!
+    expect(location.className).toContain("[@container(min-width:40rem)]:hidden")
+    expect(location.className).toContain("[@container(min-width:64rem)]:table-cell")
+  })
+
+  it("renders the Arabic copy and nothing for an empty list", () => {
+    const { rerender } = render(<TeamMemberTable locale="ar" />)
+    expect(screen.getByRole("heading", { level: 2, name: teamMemberTableCopy.ar.heading as string })).toBeTruthy()
+    expect(screen.getAllByRole("row")).toHaveLength(9)
+    expect(screen.getByRole("link", { name: "عرض الملف الشخصي: رامي عزيز" })).toBeTruthy()
+    rerender(<TeamMemberTable rows={[]} />)
+    expect(screen.queryByRole("table")).toBeNull()
+  })
+})

package/registry/blocks/team-meta-profile-cards/TeamMetaProfileCards.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Reveal, TeamFigures, TeamHeader, TeamPortrait, TeamSection, type TeamLocale, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Meta Profile Cards (Desktop LTR 41435:1088).
+ *
+ * Three profile cards under a header: a 320px portrait, the name and role,
+ * then four label / value rows (based in, focus, joined, ask me about), each
+ * under a hairline, the label at the start and the value at the end. Desktop
+ * sets the cards three to a row; Tablet two to a row, the third left alone at
+ * half width as Figma draws it; phones stack them.
+ *
+ * Motion (motion card): the cards reveal once as the block enters, the meta
+ * rows cascading 40ms apart beneath the name. Hovering a card scales its
+ * portrait 1.04 inside the clip (not on phones, which have no hover: give a
+ * person an `href` and the whole card is the tap-through to the profile).
+ *
+ * Mobile first: base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop, by the block's own width.
+ */
+
+export interface TeamProfile extends TeamPerson {
+  /** The list key. */
+  id: string
+  /** The four meta values, in the order of `metaLabels`: based in, focus, joined, ask me about. */
+  meta: [React.ReactNode, React.ReactNode, React.ReactNode, React.ReactNode]
+  /** Makes the name a link that covers the whole card. */
+  href?: string
+}
+
+export interface TeamMetaProfileCardsCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description: React.ReactNode
+  /** The four row labels: based in, focus, joined, ask me about. */
+  metaLabels: [React.ReactNode, React.ReactNode, React.ReactNode, React.ReactNode]
+  /** The people, in reading order. An empty list renders no cards. */
+  people: TeamProfile[]
+}
+
+/**
+ * Figma's copy, English and Arabic. Amira Sultan's photo can't ship, so the
+ * first card is Sofia Marchetti; her four meta rows are written for her role,
+ * since Figma has none for her.
+ */
+const COPY: Record<TeamLocale, TeamMetaProfileCardsCopy> = {
+  en: {
+    eyebrow: "PROFILES",
+    heading: "Get to know them properly",
+    description: "A little more than a name and a job title.",
+    metaLabels: ["BASED IN", "FOCUS", "JOINED", "ASK ME ABOUT"],
+    people: [
+      { id: "sofia-marchetti", name: "Sofia Marchetti", role: "Brand Designer", meta: ["Dubai", "Visual identity", "2023", "Type pairing"] },
+      { id: "grace-okafor", name: "Grace Okafor", role: "Principal Engineer", meta: ["Berlin", "Token pipeline", "2021", "Build performance"] },
+      { id: "hana-kobayashi", name: "Hana Kobayashi", role: "Motion Designer", meta: ["Singapore", "Interaction & motion", "2023", "Easing curves"] },
+    ],
+  },
+  ar: {
+    eyebrow: "الملفات",
+    heading: "تعرَّف عليهم عن قرب",
+    description: "أكثر من مجرد اسم ومسمّى وظيفي.",
+    metaLabels: ["المقر", "التركيز", "تاريخ الانضمام", "اسألني عن"],
+    people: [
+      { id: "sofia-marchetti", name: "صوفيا ماركيتي", role: "مصمِّمة هوية", meta: ["دبي", "الهوية البصرية", "2023", "اختيار الخطوط"] },
+      { id: "grace-okafor", name: "غرايس أوكافور", role: "مهندسة رئيسية", meta: ["برلين", "مسار الرموز التصميمية", "2021", "أداء البناء"] },
+      { id: "hana-kobayashi", name: "هانا كوباياشي", role: "مصمِّمة حركة", meta: ["سنغافورة", "التفاعل والحركة", "2023", "منحنيات التوقيت"] },
+    ],
+  },
+}
+
+export interface TeamMetaProfileCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamMetaProfileCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+}
+
+export function TeamMetaProfileCards({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  metaLabels,
+  people,
+  className,
+  ...props
+}: TeamMetaProfileCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = people ?? copy.people
+  const labels = metaLabels ?? copy.metaLabels
+
+  return (
+    <TeamSection labelledBy={headingId} className={className} {...props}>
+      <TeamHeader
+        headingId={headingId}
+        eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow}
+        heading={heading ?? copy.heading}
+        description={description === undefined ? copy.description : description}
+      />
+      {list.length > 0 ? (
+        <ul className="grid w-full grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:grid-cols-3">
+          {list.map((person, index) => (
+            <Reveal key={person.id} as="li" index={index} className="flex">
+              <article
+                className={cn(
+                  "group/card relative flex w-full flex-col overflow-hidden rounded-xl border border-border bg-card",
+                  "focus-within:ring-2 focus-within:ring-ring"
+                )}
+              >
+                <TeamPortrait
+                  person={person}
+                  className="h-80 shrink-0"
+                  imageClassName="motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out [@container(min-width:40rem)]:group-hover/card:scale-[1.04]"
+                />
+                <div className="flex flex-1 flex-col gap-4 p-6">
+                  <div className="flex flex-col">
+                    <h3 className="text-lg font-semibold text-foreground">
+                      {person.href ? (
+                        <a href={person.href} className="outline-none after:absolute after:inset-0">
+                          {person.name}
+                        </a>
+                      ) : (
+                        person.name
+                      )}
+                    </h3>
+                    <p className="text-sm font-medium text-muted-foreground">{person.role}</p>
+                  </div>
+                  <dl className="flex flex-col">
+                    {labels.map((label, row) => (
+                      <Reveal key={row} index={row + 1} y={8} step={40} className="flex items-center justify-between gap-3 border-t border-border py-2">
+                        <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
+                        <dd className="text-end text-sm text-foreground">
+                          <TeamFigures>{person.meta[row]}</TeamFigures>
+                        </dd>
+                      </Reveal>
+                    ))}
+                  </dl>
+                </div>
+              </article>
+            </Reveal>
+          ))}
+        </ul>
+      ) : null}
+    </TeamSection>
+  )
+}
+
+/** The default copy, English and Arabic, as `locale` picks it. Spread it to change a few strings and keep the rest. */
+export const teamMetaProfileCardsCopy = COPY

package/registry/blocks/team-meta-profile-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  TeamMetaProfileCards,
+  teamMetaProfileCardsCopy,
+  type TeamMetaProfileCardsCopy,
+  type TeamMetaProfileCardsProps,
+  type TeamProfile,
+} from "./TeamMetaProfileCards"

package/registry/blocks/team-meta-profile-cards/team-meta-profile-cards.test.tsx

@@ -0,0 +1,29 @@
+import { beforeAll, describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { TeamMetaProfileCards, teamMetaProfileCardsCopy } from "./TeamMetaProfileCards"
+
+// jsdom has no matchMedia, which the shared reveal hook asks for.
+beforeAll(() => {
+  window.matchMedia ??= ((query: string) => ({ matches: false, media: query, addEventListener() {}, removeEventListener() {} })) as unknown as typeof window.matchMedia
+})
+
+describe("Team Meta Profile Cards", () => {
+  it.each(["en", "ar"] as const)("renders three profiles of four meta rows in %s, under an h2 that names the section", (locale) => {
+    const { container } = render(<TeamMetaProfileCards locale={locale} />)
+    const copy = teamMetaProfileCardsCopy[locale]
+    const heading = screen.getByRole("heading", { level: 2 })
+    expect(heading.textContent).toBe(copy.heading)
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(heading.id)
+    expect(screen.getAllByRole("listitem").filter((li) => li.closest("ul")?.parentElement?.tagName !== "DL")).toHaveLength(3)
+    expect(container.querySelectorAll("dl")).toHaveLength(3)
+    expect(container.querySelectorAll("dt")).toHaveLength(12)
+    expect([...container.querySelector("dl")!.querySelectorAll("dt")].map((dt) => dt.textContent)).toEqual(copy.metaLabels)
+  })
+
+  it("turns the name into a card-wide link given an href, and renders nothing for an empty list", () => {
+    const { rerender } = render(<TeamMetaProfileCards people={[{ id: "a", name: "A", role: "r", meta: ["1", "2", "3", "4"], href: "/a" }]} />)
+    expect(screen.getByRole("link", { name: "A" }).getAttribute("href")).toBe("/a")
+    rerender(<TeamMetaProfileCards people={[]} />)
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0)
+  })
+})

package/registry/blocks/team-overlay-portrait-cards/TeamOverlayPortraitCards.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Reveal, TeamHeader, TeamPortrait, TeamSection, type TeamLocale, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Overlay Portrait Cards (Desktop LTR 41435:1091).
+ *
+ * Four 420px-tall portraits, square-cornered, in the inverse band under a
+ * light heading (no description). Over the foot of each photo a caption bar
+ * (a scrim, 88px) carries the name and role. Desktop sets the cards four to
+ * a row; Tablet two by two; phones one under another.
+ *
+ * Figma draws no bio, but the motion card has one: hovering (or focusing) a
+ * card raises its bar 8px and fades a one-line bio in beneath the role, and
+ * on phones the bar is always raised with the bio shown. So each person takes
+ * an optional `bio`; without one the bar still raises and nothing fades in.
+ * Where there is no hover (touch screens) the bio is shown, so it is never
+ * hidden from anyone; a card with a bio takes focus so a keyboard can reveal it.
+ *
+ * Motion (motion card): the portraits scale 1.08 to 1 once on entry; the
+ * cards' own entrance runs from the start side. Nothing else moves.
+ *
+ * The caption bar follows the inverse tokens, as the section does: a dark scrim
+ * with light text in light mode, and in dark mode a light scrim with dark text,
+ * as Figma draws both.
+ *
+ * The photographs are in greyscale, as Figma draws them.
+ *
+ * Mobile first: base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop, by the block's own width.
+ */
+
+export interface TeamOverlayPerson extends TeamPerson {
+  /** The list key. */
+  id: string
+  /** One line shown under the role on hover, focus and phones. Figma draws none. */
+  bio?: React.ReactNode
+}
+
+export interface TeamOverlayPortraitCardsCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The people, in reading order. An empty list renders no cards. */
+  people: TeamOverlayPerson[]
+}
+
+/** Figma's copy, English and Arabic, with a one-line sample bio each for the hover. */
+const COPY: Record<TeamLocale, TeamOverlayPortraitCardsCopy> = {
+  en: {
+    eyebrow: "IN THE ROOM",
+    heading: "The people you will actually work with",
+    people: [
+      { id: "omar-nasser", name: "Omar Nasser", role: "Head of Product", bio: "Sets the product direction and keeps every release honest." },
+      { id: "grace-okafor", name: "Grace Okafor", role: "Principal Engineer", bio: "Builds the pipeline that turns tokens into shipped code." },
+      { id: "sofia-marchetti", name: "Sofia Marchetti", role: "Brand Designer", bio: "Shapes how Fasla looks and sounds." },
+      { id: "mei-tanaka", name: "Mei Tanaka", role: "Customer Success Lead", bio: "Makes sure every customer gets an answer that sticks." },
+    ],
+  },
+  ar: {
+    eyebrow: "في الغرفة",
+    heading: "الفريق الذي ستعمل معه فعلًا",
+    people: [
+      { id: "omar-nasser", name: "عمر ناصر", role: "رئيس المنتج", bio: "يحدد اتجاه المنتج ويحرص على صدق كل إصدار." },
+      { id: "grace-okafor", name: "غرايس أوكافور", role: "مهندسة رئيسية", bio: "تبني المسار الذي يحوّل الرموز التصميمية إلى كود منشور." },
+      { id: "sofia-marchetti", name: "صوفيا ماركيتي", role: "مصمِّمة هوية", bio: "تصوغ هوية فاصلة البصرية." },
+      { id: "mei-tanaka", name: "ماي تاناكا", role: "قائدة نجاح العملاء", bio: "تحرص على أن يحصل كل عميل على جواب يلبّي حاجته." },
+    ],
+  },
+}
+
+// Written out in full, not built from parts: Tailwind only finds class names that appear whole.
+/** Raised on phones; from Tablet at rest until hover or focus. */
+const BAR =
+  "-translate-y-2 [@container(min-width:40rem)]:translate-y-0 [@container(min-width:40rem)]:group-hover/card:-translate-y-2 [@container(min-width:40rem)]:group-focus-within/card:-translate-y-2"
+/** Shown on phones and on touch screens; from Tablet faded out until hover or focus. */
+const BIO =
+  "grid-rows-[1fr] opacity-100 [@container(min-width:40rem)]:grid-rows-[0fr] [@container(min-width:40rem)]:opacity-0 " +
+  "[@container(min-width:40rem)]:group-hover/card:grid-rows-[1fr] [@container(min-width:40rem)]:group-hover/card:opacity-100 " +
+  "[@container(min-width:40rem)]:group-focus-within/card:grid-rows-[1fr] [@container(min-width:40rem)]:group-focus-within/card:opacity-100 " +
+  "[@container(min-width:40rem)]:[@media(hover:none)]:grid-rows-[1fr] [@container(min-width:40rem)]:[@media(hover:none)]:opacity-100"
+
+export interface TeamOverlayPortraitCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamOverlayPortraitCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+}
+
+export function TeamOverlayPortraitCards({ locale = "en", eyebrow, heading, people, className, ...props }: TeamOverlayPortraitCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = people ?? copy.people
+
+  return (
+    <TeamSection inverse labelledBy={headingId} className={className} {...props}>
+      <TeamHeader
+        inverse
+        headingId={headingId}
+        eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow}
+        heading={heading ?? copy.heading}
+        headingClassName="font-light"
+      />
+      {list.length > 0 ? (
+        <ul className="grid w-full grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-4">
+          {list.map((person, index) => (
+            <Reveal key={person.id} as="li" index={index} className="flex">
+              <article
+                tabIndex={person.bio ? 0 : undefined}
+                className="group/card relative h-[26.25rem] w-full overflow-hidden bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <TeamPortrait
+                  person={person}
+                  className="absolute inset-0"
+                  imageClassName="grayscale motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out motion-safe:group-data-[reveal=pending]/team:scale-[1.08]"
+                />
+                {/* Rests 8px below the card's edge so raising it never leaves a gap under the scrim. */}
+                <div
+                  className={cn(
+                    "absolute inset-x-0 -bottom-2 bg-background-inverse/[0.55] px-5 pb-7 pt-5 text-foreground-inverse",
+                    "motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out",
+                    BAR
+                  )}
+                >
+                  <h3 className="text-lg font-medium">{person.name}</h3>
+                  <p className="text-sm">{person.role}</p>
+                  {person.bio ? (
+                    <div className={cn("grid motion-safe:transition-[grid-template-rows,opacity] motion-safe:duration-300", BIO)}>
+                      <p className="min-h-0 overflow-hidden pt-1 text-sm">{person.bio}</p>
+                    </div>
+                  ) : null}
+                </div>
+              </article>
+            </Reveal>
+          ))}
+        </ul>
+      ) : null}
+    </TeamSection>
+  )
+}
+
+/** The default copy, English and Arabic, as `locale` picks it. Spread it to change a few strings and keep the rest. */
+export const teamOverlayPortraitCardsCopy = COPY

package/registry/blocks/team-overlay-portrait-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  TeamOverlayPortraitCards,
+  teamOverlayPortraitCardsCopy,
+  type TeamOverlayPerson,
+  type TeamOverlayPortraitCardsCopy,
+  type TeamOverlayPortraitCardsProps,
+} from "./TeamOverlayPortraitCards"