@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/careers-perks-benefits/CareersPerksBenefits.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, CalendarDays, GraduationCap, Globe, Heart, Laptop, Plane } from "lucide-react"
+import { buttonVariants, Button } from "../../ui/button/button"
+import { CareersHeader, CareersSection, Figures, type CareersLocale } from "../careers/careers"
+
+/*
+ * Figma: `Careers` (46378:5405), Type=Perks & Benefits.
+ *
+ * A header (an eyebrow line, the heading, a line under it), then a photo
+ * beside six perks, and a footer with a note and an outline See open roles
+ * button. A perk is a 32px `muted` square holding a 16px Lucide mark, its
+ * title and a line on it.
+ *
+ * Desktop sets a 460 × 432 photo at the start and the perks two across at the
+ * end. Tablet puts the photo above the perks at full width, still two across.
+ * Mobile is one column. The footer's note and button share a row on Desktop
+ * and Tablet and stack on Mobile. In Arabic the photo sits on the right.
+ *
+ * The block says what it offers and where to read more; it holds no state.
+ *
+ * Content limits: a perk's title up to 28 characters and its line up to 100.
+ * The other limits are in the block's documentation page, which the default
+ * copy stays inside.
+ */
+
+export interface CareersPerk {
+  /** Keys the perk. */
+  id: string
+  /** The perk's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+  /** The Lucide mark before it. */
+  icon?: React.ElementType
+}
+
+export interface CareersPerksBenefitsCopy {
+  /** The small line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The perks, in order. */
+  perks: CareersPerk[]
+  /** The note in the footer. */
+  note: React.ReactNode
+  /** The footer button's label. */
+  seeRoles: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<CareersLocale, CareersPerksBenefitsCopy> = {
+  en: {
+    eyebrow: "Working at Fasla",
+    heading: "Why people stay",
+    description: "We would rather be honest about a short list than generous with a long one. These apply to everyone, from day one.",
+    perks: [
+      { id: "four-day-week", icon: CalendarDays, title: "A four-day week", description: "Thirty-two hours, full pay. Not a pilot. It is how we have worked since 2024." },
+      { id: "remote-first", icon: Globe, title: "Remote-first, genuinely", description: "Work from anywhere in ±3 hours of CET. We fly everyone in one week a quarter." },
+      { id: "learning", icon: GraduationCap, title: "€2,000 to learn", description: "Yearly, no approval needed. Conferences, courses, books, a coach: your call." },
+      { id: "health", icon: Heart, title: "Health cover for family", description: "Private cover for you, a partner, and children, in every country we hire in." },
+      { id: "time-off", icon: Plane, title: "Six weeks off", description: "Plus public holidays, and a two-week minimum we actually enforce." },
+      { id: "hardware", icon: Laptop, title: "Hardware you choose", description: "Any laptop, any OS, replaced every three years. Home-office budget on top." },
+    ],
+    note: "Full policy details are in the handbook, which we share before your first interview.",
+    seeRoles: "See open roles",
+  },
+  ar: {
+    eyebrow: "العمل في فاصلة",
+    heading: "لماذا يبقى الناس",
+    description: "نفضّل الصدق بقائمة قصيرة على الكرم بقائمة طويلة. هذه تنطبق على الجميع، من اليوم الأول.",
+    perks: [
+      { id: "four-day-week", icon: CalendarDays, title: "أسبوع من أربعة أيام", description: "اثنتان وثلاثون ساعة بأجر كامل. ليست تجربة، فهكذا نعمل منذ 2024." },
+      { id: "remote-first", icon: Globe, title: "العمل عن بُعد أولاً، فعلاً", description: "اعمل من أي مكان في نطاق ±3 ساعات من توقيت وسط أوروبا. نجمع الجميع أسبوعًا كل ربع." },
+      { id: "learning", icon: GraduationCap, title: "2,000 يورو للتعلّم", description: "سنويًا، بلا موافقات. مؤتمرات ودورات وكتب ومدرّب: القرار لك." },
+      { id: "health", icon: Heart, title: "تأمين صحي للعائلة", description: "تأمين خاص لك ولشريكك وأطفالك، في كل بلد نوظّف فيه." },
+      { id: "time-off", icon: Plane, title: "ستة أسابيع إجازة", description: "بالإضافة إلى العطل الرسمية، وحد أدنى أسبوعين نلتزم به فعلاً." },
+      { id: "hardware", icon: Laptop, title: "أجهزة من اختيارك", description: "أي حاسوب، أي نظام تشغيل، يُستبدل كل ثلاث سنوات. وميزانية مكتب منزلي إضافية." },
+    ],
+    note: "تفاصيل السياسة الكاملة في الدليل، الذي نشاركه قبل مقابلتك الأولى.",
+    seeRoles: "عرض الوظائف المتاحة",
+  },
+}
+
+export interface CareersPerksBenefitsPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface CareersPerksBenefitsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<CareersPerksBenefitsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: CareersLocale
+  /** The photo beside the perks. A `muted` placeholder shows without it. */
+  photo?: CareersPerksBenefitsPhoto
+  /** Where the footer button goes. Without it, the button calls `onSeeRoles`. */
+  seeRolesHref?: string
+  /** Called when the footer button is pressed and has no `seeRolesHref`. */
+  onSeeRoles?: () => void
+}
+
+export function CareersPerksBenefits({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  perks,
+  note,
+  seeRoles,
+  photo,
+  seeRolesHref,
+  onSeeRoles,
+  className,
+  ...props
+}: CareersPerksBenefitsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = perks ?? copy.perks
+  const label = seeRoles ?? copy.seeRoles
+  const arrow = <ArrowUpRight aria-hidden strokeWidth={1.5} className="[&:dir(rtl)]:-scale-x-100" />
+
+  return (
+    <CareersSection labelledBy={headingId} className={className} {...props}>
+      <CareersHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} description={description ?? copy.description} />
+
+      <div className="flex flex-col gap-8 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-12">
+        <div className="relative h-56 w-full overflow-hidden rounded-2xl bg-muted [@container(min-width:40rem)]:h-60 [@container(min-width:64rem)]:h-[27rem] [@container(min-width:64rem)]:w-[28.75rem] [@container(min-width:64rem)]:shrink-0">
+          {photo ? <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" /> : null}
+        </div>
+        <ul className="grid min-w-0 flex-1 grid-cols-1 gap-x-8 gap-y-8 [@container(min-width:40rem)]:grid-cols-2">
+          {list.map((perk) => {
+            const Icon = perk.icon
+            return (
+              <li key={perk.id} className="flex flex-col items-start gap-4">
+                {Icon ? (
+                  <span className="flex size-8 items-center justify-center rounded-lg bg-muted text-foreground">
+                    <Icon size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                  </span>
+                ) : null}
+                <div className="flex flex-col gap-2">
+                  <h3 className="text-sm font-semibold text-foreground">
+                    <Figures>{perk.title}</Figures>
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    <Figures>{perk.description}</Figures>
+                  </p>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+
+      <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-8">
+        <p className="text-sm text-muted-foreground">{note ?? copy.note}</p>
+        {seeRolesHref ? (
+          <a href={seeRolesHref} className={buttonVariants({ variant: "outline", size: "md", className: "shrink-0 self-start" })}>
+            <span>{label}</span>
+            {arrow}
+          </a>
+        ) : (
+          <Button type="button" variant="outline" size="md" onClick={onSeeRoles} className="shrink-0 self-start">
+            <span>{label}</span>
+            {arrow}
+          </Button>
+        )}
+      </div>
+    </CareersSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const careersPerksBenefitsCopy = COPY

package/registry/blocks/careers-perks-benefits/index.ts

@@ -0,0 +1,8 @@
+export {
+  CareersPerksBenefits,
+  careersPerksBenefitsCopy,
+  type CareersPerk,
+  type CareersPerksBenefitsCopy,
+  type CareersPerksBenefitsPhoto,
+  type CareersPerksBenefitsProps,
+} from "./CareersPerksBenefits"

package/registry/blocks/careers-role-cards-grid/CareersRoleCardsGrid.tsx

@@ -0,0 +1,405 @@
+"use client"
+
+import * as React from "react"
+import { Bookmark, Search } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { Input } from "../../ui/input/input"
+import { Select } from "../../ui/select/select"
+import {
+  CAREERS_ALL,
+  CareersHeader,
+  CareersRoleAction,
+  CareersRoleMeta,
+  CareersSection,
+  arabicCount,
+  distinctValues,
+  filterRoles,
+  useControllableValue,
+  type CareersLocale,
+  type CareersRole,
+  type CareersRoleFilters,
+} from "../careers/careers"
+
+/*
+ * Figma: `Careers` (46378:5405), Type=Role Cards Grid.
+ *
+ * A header, a toolbar of a search field and three selects (team, place and
+ * type), a line of status (how many roles show, and how they are sorted),
+ * and the roles as cards. A card is the team and a bookmark, the title, a
+ * line on the role, its place, commitment and pay stacked, and under a
+ * hairline the posting date with a ghost View role button.
+ *
+ * Desktop lays the cards three across and puts the search at the start of the
+ * toolbar and the selects at the end. Tablet is two across, the search over
+ * the selects. Mobile is one card wide, the selects stacked. In Arabic the
+ * grid and the toolbar run right to left.
+ *
+ * The search and the selects filter the cards for real, and the count follows.
+ * The selects offer the teams, places and types the roles name. The bookmark
+ * keeps a role in a saved list the page can read.
+ *
+ * Content limits: a role's title up to 27 characters, with its New badge.
+ * The other limits are in the block's documentation page, which the default
+ * copy stays inside.
+ */
+
+export interface CareersRoleCardsGridCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The search field's placeholder, which also names it. */
+  searchPlaceholder: string
+  /** The team select's first option, and its placeholder. */
+  allDepartments: string
+  /** The place select's first option. */
+  allLocations: string
+  /** The type select's first option. */
+  anyType: string
+  /** Names the selects for assistive technology, in order: team, place, type. */
+  filterLabels: [string, string, string]
+  /** The line of status, given how many roles show and how many there are. */
+  showing: (shown: number, of: number) => React.ReactNode
+  /** How the cards are sorted. */
+  sortedBy: React.ReactNode
+  /** The roles, in order. */
+  roles: CareersRole[]
+  /** The label of every card's button. */
+  viewRole: string
+  /** The bookmark's label, followed by the role's title for assistive technology. */
+  saveRole: string
+  /** The bookmark's label once the role is saved. */
+  savedRole: string
+  /** Shown in place of the cards when none match. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<CareersLocale, CareersRoleCardsGridCopy> = {
+  en: {
+    heading: "Find your next role",
+    description: "Ten open roles across six teams. Filter by what matters to you.",
+    searchPlaceholder: "Search roles or keywords",
+    allDepartments: "All departments",
+    allLocations: "All locations",
+    anyType: "Any type",
+    filterLabels: ["Team", "Location", "Type"],
+    showing: (shown, of) => `Showing ${shown} of ${of} ${of === 1 ? "role" : "roles"}`,
+    sortedBy: "Sorted by most recent",
+    roles: [
+      {
+        id: "senior-product-designer",
+        title: "Senior Product Designer",
+        department: "Design",
+        summary: "Own end-to-end design for the design-system surface: token model, component anatomy, and the docs that make it usable.",
+        location: "Remote (EU)",
+        commitment: "Full-time",
+        pay: "$95K–$120K",
+        posted: "Posted 2 days ago",
+      },
+      {
+        id: "design-systems-engineer",
+        title: "Design Systems Engineer",
+        department: "Engineering",
+        summary: "Build and maintain the component library every Fasla product is assembled from, in React and in Figma.",
+        location: "Berlin · Hybrid",
+        commitment: "Full-time",
+        pay: "$110K–$140K",
+        posted: "Posted 3 days ago",
+      },
+      {
+        id: "product-manager-platform",
+        title: "Product Manager, Platform",
+        department: "Product",
+        summary: "Shape the roadmap for tokens, theming, and the design-to-code pipeline that connects both.",
+        location: "Amman · Hybrid",
+        commitment: "Full-time",
+        pay: "$80K–$105K",
+        posted: "Posted 5 days ago",
+      },
+      {
+        id: "motion-designer",
+        title: "Motion Designer",
+        department: "Design",
+        summary: "Define how our interfaces move: micro-interactions, transitions, and the motion spec behind them.",
+        location: "Remote",
+        commitment: "Contract",
+        pay: "$70K–$90K",
+        posted: "Posted 1 week ago",
+      },
+      {
+        id: "developer-advocate",
+        title: "Developer Advocate",
+        department: "Marketing",
+        summary: "Help engineers adopt the system through docs, talks, sample apps, and a very loud feedback loop.",
+        location: "Dubai",
+        commitment: "Full-time",
+        pay: "$85K–$110K",
+        posted: "Posted 1 week ago",
+      },
+      {
+        id: "customer-success-manager",
+        title: "Customer Success Manager",
+        department: "Customer Success",
+        summary: "Partner with design teams rolling out the system, from first workshop to full adoption.",
+        location: "Remote",
+        commitment: "Full-time",
+        pay: "$65K–$85K",
+        posted: "Posted 2 weeks ago",
+      },
+    ],
+    viewRole: "View role",
+    saveRole: "Save role",
+    savedRole: "Saved",
+    empty: "No roles match your search. Try a different word or clear a filter.",
+  },
+  ar: {
+    heading: "اعثر على وظيفتك القادمة",
+    description: "عشر وظائف متاحة في ستة فرق. صفِّ النتائج بما يهمّك.",
+    searchPlaceholder: "ابحث عن وظيفة أو كلمة مفتاحية",
+    allDepartments: "كل الفرق",
+    allLocations: "كل المواقع",
+    anyType: "أي نوع",
+    filterLabels: ["الفريق", "الموقع", "النوع"],
+    showing: (shown, of) =>
+      `عرض ${shown} من ${arabicCount(of, { zero: "لا توجد وظائف", one: "وظيفة واحدة", two: "وظيفتين", few: "{n} وظائف", many: "{n} وظيفة" })}`,
+    sortedBy: "مرتّبة حسب الأحدث",
+    roles: [
+      {
+        id: "senior-product-designer",
+        title: "مصمم/ة منتجات أول",
+        department: "التصميم",
+        summary: "تملّك التصميم من البداية إلى النهاية لواجهة نظام التصميم: نموذج الرموز وتشريح المكوّنات والتوثيق الذي يجعله قابلاً للاستخدام.",
+        location: "عن بُعد (الاتحاد الأوروبي)",
+        commitment: "دوام كامل",
+        pay: "من 95 إلى 120 ألف دولار",
+        posted: "نُشرت قبل يومين",
+      },
+      {
+        id: "design-systems-engineer",
+        title: "مهندس/ة أنظمة تصميم",
+        department: "الهندسة",
+        summary: "بناء وصيانة مكتبة المكوّنات التي تُبنى منها كل منتجات فاصلة، في الكود وفي ملفات التصميم.",
+        location: "برلين، هجين",
+        commitment: "دوام كامل",
+        pay: "من 110 إلى 140 ألف دولار",
+        posted: "نُشرت قبل 3 أيام",
+      },
+      {
+        id: "product-manager-platform",
+        title: "مدير/ة منتج، المنصة",
+        department: "المنتج",
+        summary: "رسم خطة الطريق للرموز والسمات ومسار التحويل من التصميم إلى الكود الذي يربط الاثنين.",
+        location: "عمّان، هجين",
+        commitment: "دوام كامل",
+        pay: "من 80 إلى 105 ألف دولار",
+        posted: "نُشرت قبل 5 أيام",
+      },
+      {
+        id: "motion-designer",
+        title: "مصمم/ة حركة",
+        department: "التصميم",
+        summary: "تحديد كيفية حركة واجهاتنا: التفاعلات الدقيقة والانتقالات ومواصفات الحركة التي تدعمها.",
+        location: "عن بُعد",
+        commitment: "عقد",
+        pay: "من 70 إلى 90 ألف دولار",
+        posted: "نُشرت قبل أسبوع",
+      },
+      {
+        id: "developer-advocate",
+        title: "مناصر/ة المطوّرين",
+        department: "التسويق",
+        summary: "مساعدة المهندسين على تبنّي النظام عبر التوثيق والمحاضرات والتطبيقات النموذجية وحلقة تغذية راجعة عالية الصوت.",
+        location: "دبي",
+        commitment: "دوام كامل",
+        pay: "من 85 إلى 110 ألف دولار",
+        posted: "نُشرت قبل أسبوع",
+      },
+      {
+        id: "customer-success-manager",
+        title: "مدير/ة نجاح العملاء",
+        department: "نجاح العملاء",
+        summary: "العمل مع فرق التصميم التي تطبّق النظام، من أول ورشة حتى التبنّي الكامل.",
+        location: "عن بُعد",
+        commitment: "دوام كامل",
+        pay: "من 65 إلى 85 ألف دولار",
+        posted: "نُشرت قبل أسبوعين",
+      },
+    ],
+    viewRole: "عرض الوظيفة",
+    saveRole: "حفظ الوظيفة",
+    savedRole: "تم الحفظ",
+    empty: "لا توجد وظائف تطابق بحثك. جرّب كلمة أخرى أو أزل أحد عوامل التصفية.",
+  },
+}
+
+export interface CareersRoleCardsGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<CareersRoleCardsGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: CareersLocale
+  /** The search word and the chosen team, place and type. Pass it to control the filters. */
+  filters?: CareersRoleFilters
+  /** The filters on first render. */
+  defaultFilters?: CareersRoleFilters
+  /** Called with the new filters whenever the search or a select changes. */
+  onFiltersChange?: (filters: CareersRoleFilters) => void
+  /** How many open roles there are in all, when the list holds fewer. Shown while no filter is on. */
+  total?: number
+  /** The ids of the saved roles. Pass it to control the bookmarks. */
+  saved?: string[]
+  /** The ids saved on first render. */
+  defaultSaved?: string[]
+  /** Called with the saved ids after a bookmark is pressed. */
+  onSavedChange?: (saved: string[]) => void
+  /** Called when a role without an `href` has its button pressed. */
+  onRoleSelect?: (role: CareersRole) => void
+}
+
+export function CareersRoleCardsGrid({
+  locale = "en",
+  heading,
+  description,
+  searchPlaceholder,
+  allDepartments,
+  allLocations,
+  anyType,
+  filterLabels,
+  showing,
+  sortedBy,
+  roles,
+  viewRole,
+  saveRole,
+  savedRole,
+  empty,
+  filters: filtersProp,
+  defaultFilters,
+  onFiltersChange,
+  total,
+  saved: savedProp,
+  defaultSaved,
+  onSavedChange,
+  onRoleSelect,
+  className,
+  ...props
+}: CareersRoleCardsGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = roles ?? copy.roles
+  const [filters, setFilters] = useControllableValue<CareersRoleFilters>(filtersProp, defaultFilters ?? {}, onFiltersChange)
+  const [savedIds, setSavedIds] = useControllableValue<string[]>(savedProp, defaultSaved ?? [], onSavedChange)
+  const labels = filterLabels ?? copy.filterLabels
+
+  const shown = filterRoles(list, filters)
+  const filtered = shown.length !== list.length || !!filters.query?.trim()
+  const everything = filtered ? list.length : (total ?? list.length)
+
+  const options = (field: "department" | "location" | "commitment", all: string) => [
+    { value: CAREERS_ALL, label: all },
+    ...distinctValues(list, field).map((value) => ({ value, label: value })),
+  ]
+  const setFilter = (field: "department" | "location" | "commitment") => (value: string | null) =>
+    setFilters({ ...filters, [field]: value && value !== CAREERS_ALL ? value : undefined })
+
+  const toggleSaved = (id: string) => setSavedIds(savedIds.includes(id) ? savedIds.filter((item) => item !== id) : [...savedIds, id])
+
+  return (
+    <CareersSection labelledBy={headingId} className={className} {...props}>
+      <CareersHeader headingId={headingId} heading={heading ?? copy.heading} description={description ?? copy.description} />
+
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-3 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between">
+          <Input
+            type="search"
+            size="md"
+            aria-label={searchPlaceholder ?? copy.searchPlaceholder}
+            placeholder={searchPlaceholder ?? copy.searchPlaceholder}
+            startIcon={<Search aria-hidden strokeWidth={1.5} />}
+            value={filters.query ?? ""}
+            onChange={(event) => setFilters({ ...filters, query: event.target.value || undefined })}
+            className="w-full [@container(min-width:64rem)]:max-w-[420px]"
+          />
+          <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:flex-wrap">
+            <Select
+              aria-label={labels[0]}
+              size="md"
+              items={options("department", allDepartments ?? copy.allDepartments)}
+              value={filters.department ?? CAREERS_ALL}
+              onValueChange={setFilter("department")}
+              className="[@container(min-width:40rem)]:w-[200px]"
+            />
+            <Select
+              aria-label={labels[1]}
+              size="md"
+              items={options("location", allLocations ?? copy.allLocations)}
+              value={filters.location ?? CAREERS_ALL}
+              onValueChange={setFilter("location")}
+              className="[@container(min-width:40rem)]:w-[200px]"
+            />
+            <Select
+              aria-label={labels[2]}
+              size="md"
+              items={options("commitment", anyType ?? copy.anyType)}
+              value={filters.commitment ?? CAREERS_ALL}
+              onValueChange={setFilter("commitment")}
+              className="[@container(min-width:40rem)]:w-[160px]"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-4 text-sm text-muted-foreground">
+          <p aria-live="polite">{(showing ?? copy.showing)(shown.length, everything)}</p>
+          <p>{sortedBy ?? copy.sortedBy}</p>
+        </div>
+
+        {shown.length === 0 ? (
+          <p className="rounded-xl border border-dashed border-border px-6 py-12 text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <ul className="grid grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-3">
+            {shown.map((role) => {
+              const isSaved = savedIds.includes(role.id)
+              const title = typeof role.title === "string" ? role.title : ""
+              return (
+                <li key={role.id}>
+                  <article className="flex h-full flex-col gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
+                    <div className="flex items-center justify-between gap-2">
+                      <p className="text-xs font-medium text-muted-foreground">{role.department}</p>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-xs"
+                        aria-pressed={isSaved}
+                        aria-label={`${isSaved ? (savedRole ?? copy.savedRole) : (saveRole ?? copy.saveRole)}: ${title}`}
+                        onClick={() => toggleSaved(role.id)}
+                      >
+                        <Bookmark aria-hidden strokeWidth={1.5} className={cn(isSaved && "fill-current")} />
+                      </Button>
+                    </div>
+                    <div className="flex flex-1 flex-col gap-4">
+                      <div className="flex flex-col gap-2">
+                        <h3 className="text-lg font-medium text-foreground">{role.title}</h3>
+                        {role.summary ? <p className="text-sm text-muted-foreground">{role.summary}</p> : null}
+                      </div>
+                      <CareersRoleMeta role={role} stacked />
+                    </div>
+                    <div className="flex items-center justify-between gap-4 border-t border-border pt-4">
+                      <span className="text-xs text-muted-foreground">{role.posted}</span>
+                      <CareersRoleAction role={role} label={viewRole ?? copy.viewRole} variant="ghost" size="sm" arrow onSelect={onRoleSelect} />
+                    </div>
+                  </article>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+    </CareersSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const careersRoleCardsGridCopy = COPY

package/registry/blocks/careers-role-cards-grid/index.ts

@@ -0,0 +1,6 @@
+export {
+  CareersRoleCardsGrid,
+  careersRoleCardsGridCopy,
+  type CareersRoleCardsGridCopy,
+  type CareersRoleCardsGridProps,
+} from "./CareersRoleCardsGrid"