@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/team-hairline-grid/TeamHairlineGrid.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { TeamHeader, TeamPortrait, TeamSection, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Hairline Team Grid (named Hairline Grid
+ * here: code names do not carry the block name).
+ *
+ * Painted with the inverse tokens. An eyebrow and a light heading, then six
+ * people in a ruled grid: three across by two on Desktop, two by three on
+ * Tablet, one by six on phones. Each cell is a portrait beside a name and a
+ * role, and a small plus sits where the rules cross.
+ *
+ * The rules are real borders on the cells (`border-s`/`border-e`, so they
+ * mirror with the page's `dir`): a top and start edge on the grid, an end and
+ * bottom edge on each cell. The draw-in is a one-time layer of strips in the
+ * section's own colour that scale away over them with CSS transforms,
+ * verticals first, then horizontals, then the crosshairs pop. Without motion,
+ * or before it runs, the rules are simply there.
+ *
+ * Portraits rest greyscale where there is hover and the room for it (Tablet
+ * and up). Pointing at a cell returns its portrait to colour and dims the
+ * others to 30%; on touch and on Mobile every portrait is in colour.
+ *
+ * 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 TeamHairlineGridCopy {
+  /** 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. Six fill the grid as Figma has it. */
+  people: TeamPerson[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", TeamHairlineGridCopy> = {
+  en: {
+    eyebrow: "FASLA — THE TEAM",
+    heading: "The people who own the system",
+    people: [
+      { name: "Karim Haddad", role: "Co-founder & Chief Technology, Fasla" },
+      { name: "Omar Nasser", role: "Head of Product, Fasla" },
+      { name: "Grace Okafor", role: "Principal Engineer, Fasla" },
+      { name: "Clara Weiss", role: "Accessibility Lead, Fasla" },
+      { name: "Rami Aziz", role: "Solutions Architect, Fasla" },
+      { name: "Yara Khalil", role: "Product Manager, Fasla" },
+    ],
+  },
+  ar: {
+    eyebrow: "فاصلة — الفريق",
+    heading: "الفريق المسؤول عن النظام",
+    people: [
+      { name: "كريم حداد", role: "شريك مؤسِّس ورئيس التقنية، فاصلة" },
+      { name: "عمر ناصر", role: "رئيس المنتج، فاصلة" },
+      { name: "غرايس أوكافور", role: "مهندسة رئيسية، فاصلة" },
+      { name: "كلارا فايس", role: "قائدة إمكانية الوصول، فاصلة" },
+      { name: "رامي عزيز", role: "مهندس حلول، فاصلة" },
+      { name: "يارا خليل", role: "مديرة المنتج، فاصلة" },
+    ],
+  },
+}
+
+export const teamHairlineGridCopy = COPY
+
+/** The three layouts of six cells, and the container width each one shows at. */
+const LAYOUTS = [
+  { cols: 1, rows: 6, show: "[@container(min-width:40rem)]:hidden" },
+  { cols: 2, rows: 3, show: "hidden [@container(min-width:40rem)_and_(max-width:63.99rem)]:block" },
+  { cols: 3, rows: 2, show: "hidden [@container(min-width:64rem)]:block" },
+] as const
+
+// The pending classes are written out whole below: Tailwind only generates a class it can read in the source.
+
+/** The draw-in strips and the crosshairs for one layout. Decorative; the rules themselves are the cells' borders. */
+function Lattice({ cols, rows, show }: (typeof LAYOUTS)[number]) {
+  const verticals = Array.from({ length: cols + 1 }, (_, i) => i)
+  const horizontals = Array.from({ length: rows + 1 }, (_, i) => i)
+  const rulesAt = (cols + 1) * 80
+  const crossAt = rulesAt + (rows + 1) * 60 + 150
+  return (
+    <div aria-hidden data-lattice={`${cols}x${rows}`} className={cn("pointer-events-none absolute inset-0", show)}>
+      {verticals.map((i) => (
+        <span
+          key={`v${i}`}
+          className={cn(
+            "absolute inset-y-0 -ms-[1.5px] w-[3px] origin-bottom scale-y-0 bg-background-inverse",
+            "motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out motion-safe:[transition-delay:var(--team-d)]",
+            "motion-safe:group-data-[reveal=pending]/team:scale-y-100"
+          )}
+          style={{ insetInlineStart: `${(i / cols) * 100}%`, "--team-d": `${i * 80}ms` } as React.CSSProperties}
+        />
+      ))}
+      {horizontals.map((j) => (
+        <span
+          key={`h${j}`}
+          className={cn(
+            "absolute inset-x-0 -mt-[1.5px] h-[3px] origin-right scale-x-0 bg-background-inverse rtl:origin-left",
+            "motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out motion-safe:[transition-delay:var(--team-d)]",
+            "motion-safe:group-data-[reveal=pending]/team:scale-x-100"
+          )}
+          style={{ top: `${(j / rows) * 100}%`, "--team-d": `${rulesAt + j * 60}ms` } as React.CSSProperties}
+        />
+      ))}
+      {verticals.flatMap((i) =>
+        horizontals.map((j) => (
+          <span
+            key={`c${i}-${j}`}
+            className={cn(
+              "absolute -ms-[5.5px] -mt-[5.5px] size-[11px]",
+              "motion-safe:transition-[opacity,transform] motion-safe:duration-300 motion-safe:ease-out motion-safe:[transition-delay:var(--team-d)]",
+              "motion-safe:group-data-[reveal=pending]/team:scale-50 motion-safe:group-data-[reveal=pending]/team:opacity-0"
+            )}
+            style={{ insetInlineStart: `${(i / cols) * 100}%`, top: `${(j / rows) * 100}%`, "--team-d": `${crossAt}ms` } as React.CSSProperties}
+          >
+            <span className="absolute inset-x-0 top-1/2 h-px bg-foreground-inverse" />
+            <span className="absolute inset-y-0 start-1/2 w-px bg-foreground-inverse" />
+          </span>
+        ))
+      )}
+    </div>
+  )
+}
+
+export interface TeamHairlineGridProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamHairlineGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function TeamHairlineGrid({ locale = "en", eyebrow, heading, people, className, ...props }: TeamHairlineGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = people ?? copy.people
+  const eyebrowText = eyebrow === undefined ? copy.eyebrow : eyebrow
+
+  return (
+    <TeamSection inverse labelledBy={headingId} className={className} contentClassName="gap-16" {...props}>
+      <TeamHeader
+        inverse
+        headingId={headingId}
+        eyebrow={eyebrowText ? <span className="text-foreground-inverse">{eyebrowText}</span> : null}
+        heading={heading ?? copy.heading}
+        headingClassName="font-light"
+      />
+      {list.length > 0 ? (
+        <div className="relative w-full">
+          <ul
+            className={cn(
+              "group/grid grid w-full grid-cols-1 border-t border-s border-foreground-inverse",
+              "[@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-3"
+            )}
+          >
+            {list.map((person, index) => (
+              <li key={index} className="group/cell border-b border-e border-foreground-inverse">
+                <div
+                  className={cn(
+                    "flex items-start gap-5 p-6 motion-safe:transition-opacity motion-safe:duration-200 motion-reduce:transition-none",
+                    "[@media(hover)]:group-hover/grid:opacity-30 hover:[@media(hover)]:!opacity-100"
+                  )}
+                >
+                  <TeamPortrait
+                    person={person}
+                    className="size-24 shrink-0 [@container(min-width:40rem)]:size-[110px] [@container(min-width:64rem)]:size-[120px]"
+                    imageClassName={cn(
+                      "motion-safe:transition-[filter] motion-safe:duration-300 motion-reduce:transition-none",
+                      // Greyscale only where there is hover and room: never on touch or Mobile.
+                      "[@media(hover)]:[@container(min-width:40rem)]:grayscale [@media(hover)]:[@container(min-width:40rem)]:group-hover/cell:grayscale-0"
+                    )}
+                  />
+                  <div className="flex min-w-0 flex-1 flex-col gap-3">
+                    <span className="text-2xl font-light text-foreground-inverse">{person.name}</span>
+                    <span className="text-sm text-foreground-inverse">{person.role}</span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+          {LAYOUTS.map((layout) => (
+            <Lattice key={layout.cols} {...layout} />
+          ))}
+        </div>
+      ) : null}
+    </TeamSection>
+  )
+}

package/registry/blocks/team-hairline-grid/hairline-grid.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { TeamHairlineGrid } from "./TeamHairlineGrid"
+
+describe("Team Hairline Grid", () => {
+  it("renders Figma's English copy with six people under an h2 that names the section", () => {
+    render(<TeamHairlineGrid />)
+    expect(screen.getByRole("heading", { level: 2, name: "The people who own the system" })).toBeTruthy()
+    expect(screen.getByRole("region", { name: "The people who own the system" })).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(6)
+    expect(screen.getByText("Co-founder & Chief Technology, Fasla")).toBeTruthy()
+  })
+
+  it("renders the Arabic copy", () => {
+    render(<TeamHairlineGrid locale="ar" />)
+    expect(screen.getByRole("heading", { level: 2, name: "الفريق المسؤول عن النظام" })).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(6)
+    expect(screen.getByText("شريك مؤسِّس ورئيس التقنية، فاصلة")).toBeTruthy()
+  })
+
+  it("is painted with the inverse tokens and its rules are logical borders", () => {
+    const { container } = render(<TeamHairlineGrid />)
+    const section = container.querySelector("section")!
+    expect(section.className).toContain("bg-background-inverse")
+    const list = screen.getByRole("list")
+    expect(list.className).toContain("border-s")
+    expect(list.className).toContain("border-foreground-inverse")
+    expect(screen.getAllByRole("listitem")[0]!.className).toContain("border-e")
+  })
+
+  it("draws crosshairs at every crossing of each layout: 4x3, 3x4 and 2x7", () => {
+    const { container } = render(<TeamHairlineGrid />)
+    const counts = ["1x6", "2x3", "3x2"].map((id) => container.querySelector(`[data-lattice="${id}"]`)!.children.length)
+    // strips (cols + 1 verticals, rows + 1 horizontals) plus one crosshair per crossing
+    expect(counts).toEqual([2 + 7 + 14, 3 + 4 + 12, 4 + 3 + 12])
+  })
+
+  it("keeps portraits in colour on touch: greyscale is behind the hover media query", () => {
+    render(<TeamHairlineGrid people={[{ name: "A B", role: "x", photo: { src: "/a.webp", alt: "A" } }]} />)
+    const img = screen.getByAltText("A")
+    expect(img.className).toContain("[@media(hover)]:[@container(min-width:40rem)]:grayscale")
+    expect(img.className).not.toMatch(/(^|\s)grayscale(\s|$)/)
+  })
+
+  it("renders no grid for an empty roster", () => {
+    render(<TeamHairlineGrid people={[]} />)
+    expect(screen.queryByRole("list")).toBeNull()
+  })
+})

package/registry/blocks/team-hairline-grid/index.ts

@@ -0,0 +1 @@
+export { TeamHairlineGrid, teamHairlineGridCopy, type TeamHairlineGridCopy, type TeamHairlineGridProps } from "./TeamHairlineGrid"

package/registry/blocks/team-leadership-grid/TeamLeadershipGrid.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { Reveal, TeamHeader, TeamPortrait, TeamSection, type TeamLocale, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Leadership Grid (Desktop LTR 41435:1079).
+ *
+ * Three leader cards under a header: a 300px portrait, then the name, the
+ * role, a short bio and a Ghost "Read full bio" button.
+ * Desktop sets the cards three to a row; Tablet two to a row, the third
+ * card left alone at half width as Figma draws it (it does not stretch);
+ * phones stack them. Cards in a row share the tallest one's height.
+ *
+ * Motion (motion card): the cards rise 12px and fade in once, 60ms apart,
+ * from the start side. Hover lifts a card to `shadow-md` and nudges the
+ * button's label 4px toward the end (the other way in Arabic);
+ * a press scales the card to 0.99, which is what a phone gets.
+ *
+ * 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 TeamLeader extends TeamPerson {
+  /** Passed to `onReadBio`, and the list key. */
+  id: string
+  /** The paragraph under the role. */
+  bio: React.ReactNode
+  /** Makes "Read full bio" a link instead of a button. */
+  href?: string
+}
+
+export interface TeamLeadershipGridCopy {
+  /** 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 label of every card's button. */
+  readFullBio: React.ReactNode
+  /** The leaders, in reading order. An empty list renders no cards. */
+  people: TeamLeader[]
+}
+
+/**
+ * Figma's copy, English and Arabic. Nadia Rahman's photo can't ship, so the
+ * third card is Sofia Marchetti, with Nadia's bio under her own name.
+ */
+const COPY: Record<TeamLocale, TeamLeadershipGridCopy> = {
+  en: {
+    eyebrow: "LEADERSHIP",
+    heading: "The people steering the system",
+    description: "Fasla is built by a small group who have shipped design systems at scale before.",
+    readFullBio: "Read full bio",
+    people: [
+      {
+        id: "layla-mansour",
+        name: "Layla Mansour",
+        role: "Co-founder & Chief Executive",
+        bio: "Layla started Fasla after a decade of watching good design systems die in handoff. She sets the product direction and still reviews every release note.",
+      },
+      {
+        id: "karim-haddad",
+        name: "Karim Haddad",
+        role: "Co-founder & Chief Technology",
+        bio: "Karim owns the platform that turns tokens into shipped code. Previously he led front-end infrastructure for a design tooling company.",
+      },
+      {
+        id: "sofia-marchetti",
+        name: "Sofia Marchetti",
+        role: "Brand Designer",
+        bio: "Sofia shapes how Fasla looks and sounds. She drew the first version of the component library's visual language and keeps its rules honest.",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "القيادة",
+    heading: "الفريق الذي يقود النظام",
+    description: "يبني فاصلة فريق صغير سبق له إطلاق أنظمة تصميم على نطاق واسع.",
+    readFullBio: "السيرة الكاملة",
+    people: [
+      {
+        id: "layla-mansour",
+        name: "ليلى منصور",
+        role: "شريكة مؤسِّسة والرئيسة التنفيذية",
+        bio: "أنشأت ليلى فاصلة بعد عشر سنوات من مشاهدة أنظمة تصميم جيدة تموت عند التسليم. تحدّد اتجاه المنتج ولا تزال تراجع كل ملاحظات الإصدار.",
+      },
+      {
+        id: "karim-haddad",
+        name: "كريم حداد",
+        role: "شريك مؤسِّس ورئيس التقنية",
+        bio: "يدير كريم المنصة التي تحوّل الرموز التصميمية إلى كود منشور. قاد سابقًا بنية الواجهات الأمامية في شركة أدوات تصميم.",
+      },
+      {
+        id: "sofia-marchetti",
+        name: "صوفيا ماركيتي",
+        role: "مصمِّمة هوية",
+        bio: "تصوغ صوفيا هوية فاصلة البصرية. رسمت اللغة البصرية لأول نسخة من مكتبة المكوّنات وتحافظ على صدق قواعدها.",
+      },
+    ],
+  },
+}
+
+export interface TeamLeadershipGridProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamLeadershipGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+  /** Called with the leader's `id` when a button without an `href` is pressed. */
+  onReadBio?: (id: string) => void
+}
+
+export function TeamLeadershipGrid({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  readFullBio,
+  people,
+  onReadBio,
+  className,
+  ...props
+}: TeamLeadershipGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = people ?? copy.people
+  const label = readFullBio ?? copy.readFullBio
+
+  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) => {
+            const content = (
+              <span className="inline-flex items-center gap-1.5 motion-safe:transition-transform motion-safe:duration-200 group-hover/card:translate-x-1 group-focus-within/card:translate-x-1 rtl:group-hover/card:-translate-x-1 rtl:group-focus-within/card:-translate-x-1">
+                {label}
+              </span>
+            )
+            return (
+              <Reveal key={person.id} as="li" index={index} className="flex">
+                <article
+                  className={cn(
+                    "group/card flex w-full flex-col overflow-hidden rounded-xl border border-border bg-card",
+                    "motion-safe:transition-[box-shadow,transform] motion-safe:duration-200 active:motion-safe:scale-[0.99] hover:shadow-md"
+                  )}
+                >
+                  <TeamPortrait person={person} className="h-[18.75rem] shrink-0" />
+                  <div className="flex flex-1 flex-col gap-2 p-6">
+                    <h3 className="text-lg font-semibold text-foreground">{person.name}</h3>
+                    <p className="text-sm font-medium text-muted-foreground">{person.role}</p>
+                    <p className="text-sm text-muted-foreground">{person.bio}</p>
+                    <div className="mt-auto pt-2">
+                      {person.href ? (
+                        <a href={person.href} className={buttonVariants({ variant: "ghost", tone: "primary", size: "sm" })}>
+                          {content}
+                        </a>
+                      ) : (
+                        <Button variant="ghost" tone="primary" size="sm" onClick={() => onReadBio?.(person.id)}>
+                          {content}
+                        </Button>
+                      )}
+                    </div>
+                  </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 teamLeadershipGridCopy = COPY

package/registry/blocks/team-leadership-grid/index.ts

@@ -0,0 +1,7 @@
+export {
+  TeamLeadershipGrid,
+  teamLeadershipGridCopy,
+  type TeamLeader,
+  type TeamLeadershipGridCopy,
+  type TeamLeadershipGridProps,
+} from "./TeamLeadershipGrid"

package/registry/blocks/team-leadership-grid/team-leadership-grid.test.tsx

@@ -0,0 +1,38 @@
+import { beforeAll, describe, it, expect, vi } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { TeamLeadershipGrid, teamLeadershipGridCopy } from "./TeamLeadershipGrid"
+
+// 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 Leadership Grid", () => {
+  it.each(["en", "ar"] as const)("renders three leaders in %s, under an h2 that names the section", (locale) => {
+    const { container } = render(<TeamLeadershipGrid locale={locale} />)
+    const copy = teamLeadershipGridCopy[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")).toHaveLength(3)
+    expect(screen.getAllByRole("button", { name: String(copy.readFullBio) })).toHaveLength(3)
+    for (const person of copy.people) expect(screen.getByText(person.name as string)).toBeTruthy()
+  })
+
+  it("calls onReadBio with the leader's id, and makes the button a link given an href", () => {
+    const onReadBio = vi.fn()
+    const people = [
+      { id: "a", name: "A", role: "r", bio: "b" },
+      { id: "b", name: "B", role: "r", bio: "b", href: "/b" },
+    ]
+    render(<TeamLeadershipGrid people={people} onReadBio={onReadBio} />)
+    fireEvent.click(screen.getByRole("button", { name: "Read full bio" }))
+    expect(onReadBio).toHaveBeenCalledWith("a")
+    expect(screen.getByRole("link", { name: "Read full bio" }).getAttribute("href")).toBe("/b")
+  })
+
+  it("renders no cards for an empty list", () => {
+    render(<TeamLeadershipGrid people={[]} />)
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0)
+  })
+})

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

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem, useCarousel } from "../../ui/carousel/carousel"
+import { Reveal, TeamHeader, TeamLinkArrow, TeamPortrait, TeamSection, type TeamLocale, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Team Carousel (named Member Carousel here:
+ * code names do not carry the block name).
+ *
+ * A header (eyebrow and heading, with the previous and next arrow buttons at
+ * the end of the line), a rail of five portrait cards and the dots beneath it.
+ * Each card is a `secondary` panel: the name and role with a link arrow above,
+ * the portrait below. The rail is the Carousel atom: swipe, drag, the arrows
+ * and the arrow keys step it one card at a time, 320ms ease-out is the atom's
+ * own smooth scroll, and reduced motion is honoured by its CSS. Cards are
+ * Figma's 280px wide with 24px between, so the peek is what is left over:
+ * about 4.5 cards on Desktop, 2.4 on Tablet, 1.15 on Mobile. Nothing autoplays
+ * and nothing follows the scroll position.
+ *
+ * Desktop and Tablet put the two arrows at the end of the header; on Mobile
+ * they sit under the copy. The dots are the atom's: one for each view the
+ * track can reach, so a wide viewport that already shows most cards has fewer
+ * dots than cards (Figma draws four).
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet.
+ */
+
+export interface TeamMemberCarouselPerson extends TeamPerson {
+  /** Makes the whole card a link, as the arrow in its corner promises. */
+  href?: string
+}
+
+export interface TeamMemberCarouselCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The five people, in reading order. */
+  people: TeamMemberCarouselPerson[]
+  /** The accessible names of the two arrow buttons and of the carousel. */
+  labels: { previous: string; next: string; carousel: string }
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<TeamLocale, TeamMemberCarouselCopy> = {
+  en: {
+    eyebrow: "DESIGN",
+    heading: "The people who draw the system",
+    people: [
+      { name: "Omar Nasser", role: "Head of Product" },
+      { name: "Lukas Berg", role: "Design Systems Lead" },
+      { name: "Elena Novak", role: "Staff Product Designer" },
+      { name: "Sofia Marchetti", role: "Brand Designer" },
+      { name: "Hana Kobayashi", role: "Motion Designer" },
+    ],
+    labels: { previous: "Previous member", next: "Next member", carousel: "Team members" },
+  },
+  ar: {
+    eyebrow: "التصميم",
+    heading: "الفريق الذي يرسم النظام",
+    people: [
+      { name: "عمر ناصر", role: "رئيس المنتج" },
+      { name: "لوكاس بيرغ", role: "قائد أنظمة التصميم" },
+      { name: "إيلينا نوفاك", role: "مصمِّمة منتجات أولى" },
+      { name: "صوفيا ماركيتي", role: "مصمِّمة هوية" },
+      { name: "هانا كوباياشي", role: "مصمِّمة حركة" },
+    ],
+    labels: { previous: "العضو السابق", next: "العضو التالي", carousel: "أعضاء الفريق" },
+  },
+}
+
+export interface TeamMemberCarouselProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<TeamMemberCarouselCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+}
+
+/** The two arrow buttons. They read the carousel, so they live inside it. */
+function Controls({ labels }: { labels: TeamMemberCarouselCopy["labels"] }) {
+  const { activeIndex, lastIndex, scrollTo } = useCarousel()
+  return (
+    <div className="flex shrink-0 items-center gap-2">
+      <Button
+        variant="outline"
+        tone="secondary"
+        size="icon-md"
+        radius="rounded"
+        aria-label={labels.previous}
+        disabled={activeIndex <= 0}
+        onClick={() => scrollTo(activeIndex - 1)}
+      >
+        <ArrowLeft aria-hidden className="rtl:-scale-x-100" />
+      </Button>
+      <Button
+        variant="outline"
+        tone="secondary"
+        size="icon-md"
+        radius="rounded"
+        aria-label={labels.next}
+        disabled={activeIndex >= lastIndex}
+        onClick={() => scrollTo(activeIndex + 1)}
+      >
+        <ArrowRight aria-hidden className="rtl:-scale-x-100" />
+      </Button>
+    </div>
+  )
+}
+
+function MemberCard({ person }: { person: TeamMemberCarouselPerson }) {
+  const Tag = person.href ? "a" : "div"
+  return (
+    <Tag
+      {...(person.href ? { href: person.href } : {})}
+      className={cn(
+        "group/card flex w-full flex-col gap-4 rounded-xl bg-secondary p-4 text-start",
+        "[outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+        "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out hover:motion-safe:-translate-y-1 focus-within:motion-safe:-translate-y-1"
+      )}
+    >
+      <div className="flex items-start gap-2">
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="text-base font-medium text-foreground">{person.name}</span>
+          <span className="text-sm text-muted-foreground">{person.role}</span>
+        </div>
+        <TeamLinkArrow className="mt-0.5 size-[18px] text-muted-foreground" />
+      </div>
+      <TeamPortrait person={person} className="aspect-[248/300] w-full rounded-lg" />
+    </Tag>
+  )
+}
+
+/** A header with two arrow buttons, a rail of portrait cards and the dots. */
+export function TeamMemberCarousel({ locale = "en", eyebrow, heading, people, labels, className, ...props }: TeamMemberCarouselProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = (people ?? copy.people).slice(0, 5)
+  const names = labels ?? copy.labels
+
+  return (
+    <TeamSection labelledBy={headingId} className={className} contentClassName="gap-0" {...props}>
+      <Carousel aria-label={names.carousel} className="flex flex-col gap-16">
+        <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-end [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-8">
+          <TeamHeader
+            headingId={headingId}
+            eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow}
+            heading={heading ?? copy.heading}
+            className="min-w-0 flex-1"
+          />
+          {list.length > 0 ? <Controls labels={names} /> : null}
+        </div>
+        {list.length > 0 ? (
+          <>
+            {/* The track is a scroller: the vertical padding gives a lifted card room to rise. */}
+            <CarouselContent className="-my-1 gap-6 py-1">
+              {list.map((person, index) => (
+                <CarouselItem key={index} className="w-[280px] basis-auto">
+                  <Reveal index={index + 3} className="h-full">
+                    <MemberCard person={person} />
+                  </Reveal>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselDots className="pt-4" />
+          </>
+        ) : null}
+      </Carousel>
+    </TeamSection>
+  )
+}
+
+/** The default copy, English and Arabic, as `locale` picks it. Spread it to change a few strings and keep the rest. */
+export const teamMemberCarouselCopy = COPY

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

@@ -0,0 +1,7 @@
+export {
+  TeamMemberCarousel,
+  teamMemberCarouselCopy,
+  type TeamMemberCarouselCopy,
+  type TeamMemberCarouselPerson,
+  type TeamMemberCarouselProps,
+} from "./TeamMemberCarousel"