@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/social-proof-staggered-columns/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofStaggeredColumns,
+  socialProofStaggeredColumnsCopy,
+  type SocialProofStaggeredColumnsCopy,
+  type SocialProofStaggeredColumnsProps,
+  type SocialProofStaggeredColumnsItem,
+} from "./SocialProofStaggeredColumns"

package/registry/blocks/social-proof-stat-story-cards/SocialProofStatStoryCards.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+import { Avatar } from "../../ui/avatar/avatar"
+import { CarouselDots } from "../../ui/carousel/carousel"
+import {
+  Isolated,
+  SocialProofHeader,
+  SocialProofQuote,
+  SocialProofSection,
+  stepKeys,
+  useStepper,
+  useSwipeStep,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Stat-Story Cards.
+ *
+ * A centred header over three story cards, each tinted: the author (Avatar
+ * at 44px, name, role and company), the quote beside a large figure with its
+ * label, and a `Read the full story` outline button. Three dots under the
+ * cards page between three sets of three. Desktop sets the cards three
+ * across, the quote and figure side by side; Tablet and Mobile stack them,
+ * the figure under the quote.
+ *
+ * Motion (Figma's ⚡ Motion note): the dots page between the sets. Manual
+ * only, no autoplay. On select the outgoing cards fade out (180ms) and the
+ * new cards slide up 10px with a fade (slideUp), 60ms apart (stagger). The
+ * active dot stretches to a pill. Keyboard: the arrow keys, Home and End move
+ * between dots. Reduced motion: opacity only, 120ms. In RTL the first page is
+ * the rightmost dot.
+ *
+ * Figma shows the first set. The other two are the stat stories the same
+ * people give elsewhere in the set: Bader Al-Ghamdi's, Majed Nouri's and
+ * Fahad Salem's on the second, and Bader's, Majed's and Omar Haddad's on the
+ * third, so Bader and Majed appear on both.
+ */
+
+export interface SocialProofStatStory {
+  author: SocialProofPerson
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  /** Up to 5 characters in English, 9 in Arabic: `41%`, `30h`, `2.1×`. */
+  stat: string
+  /** Up to 60 characters in English, 56 in Arabic. */
+  statLabel: React.ReactNode
+}
+
+export interface SocialProofStatStoryCardsCopy {
+  /** Up to 46 characters in English, 40 in Arabic. */
+  heading: React.ReactNode
+  /** Up to 128 characters in English, 125 in Arabic. */
+  description: React.ReactNode
+  /** Up to 25 characters in English, 26 in Arabic. */
+  link: React.ReactNode
+  /** Names the dots for assistive tech. */
+  label: string
+  /** The sets, in order: three of three stories. */
+  pages: SocialProofStatStory[][]
+}
+
+const p = (id: string, name: string, role: string): SocialProofPerson => ({ id, name, role })
+
+const COPY: Record<SocialProofLocale, SocialProofStatStoryCardsCopy> = {
+  en: {
+    heading: "Trusted by top performers",
+    description: "Stories with the receipts attached.",
+    link: "Read the full story",
+    label: "Story sets",
+    pages: [
+      [
+        { author: p("ziad-karam", "Ziad Karam", "CEO · Quillfield"), quote: "“I underestimated how much slow UI was costing us until the numbers came in.”", stat: "41%", statLabel: "faster weekly release cadence" },
+        { author: p("omar-haddad", "Omar Haddad", "VP Engineering · Cobalt Systems"), quote: "“We set a gold standard for what shared components should feel like.”", stat: "30h", statLabel: "saved per engineer, per quarter" },
+        { author: p("adel-qasim", "Adel Qasim", "Head of Design · Forma Studio"), quote: "“The system carries our brand better than our old brand book did.”", stat: "20%", statLabel: "lift in trial-to-paid conversion" },
+      ],
+      [
+        { author: p("bader-al-ghamdi", "Bader Al-Ghamdi", "CTO · Beacon Analytics"), quote: "“We deleted forty thousand lines of UI code.”", stat: "2.1×", statLabel: "faster dashboard delivery" },
+        { author: p("majed-nouri", "Majed Nouri", "COO · Arcadia Health"), quote: "“Contrast ratios stopped being a conversation entirely.”", stat: "3.4×", statLabel: "faster clinical screen reviews" },
+        { author: p("fahad-salem", "Fahad Salem", "Brand Director · Arvenna Bank"), quote: "“Every audit finding used to be a design debate. Now it's a token change.”", stat: "99%", statLabel: "of screens pass brand review on the first try" },
+      ],
+      [
+        { author: p("bader-al-ghamdi", "Bader Al-Ghamdi", "CTO · Beacon Analytics"), quote: "“Set-up took one morning, and the library works straight inside our tools with no add-ons.”", stat: "28%", statLabel: "increase in activation rate" },
+        { author: p("majed-nouri", "Majed Nouri", "COO · Arcadia Health"), quote: "“Because every screen flows through one system, our patient tools adapt to what each clinic actually needs.”", stat: "97%", statLabel: "accessibility audit pass rate" },
+        { author: p("omar-haddad", "Omar Haddad", "VP Engineering · Cobalt Systems"), quote: "“I feel genuinely confident shipping UI without a design review in the loop.”", stat: "6×", statLabel: "faster brand theming since switching" },
+      ],
+    ],
+  },
+  ar: {
+    heading: "تثق بها الفرق الأعلى أداءً",
+    description: "قصص تدعمها الأرقام.",
+    link: "اقرأ القصة كاملة",
+    label: "مجموعات القصص",
+    pages: [
+      [
+        { author: p("ziad-karam", "زياد كرم", "الرئيس التنفيذي، كويلفيلد"), quote: "«لم أدرك كم كلّفتنا الواجهات البطيئة حتى رأيت الأرقام.»", stat: "41%", statLabel: "أسرع في وتيرة الإصدارات الأسبوعية" },
+        { author: p("omar-haddad", "عمر حداد", "نائب رئيس الهندسة، كوبالت سيستمز"), quote: "«وضعنا معيارًا ذهبيًا لما ينبغي أن تكون عليه المكوّنات المشتركة.»", stat: "30 ساعة", statLabel: "يوفّرها كل مهندس في الربع" },
+        { author: p("adel-qasim", "عادل قاسم", "رئيس التصميم، فورما ستوديو"), quote: "«يعبّر النظام عن علامتنا أفضل مما كان يفعل دليلها القديم.»", stat: "20%", statLabel: "زيادة في التحويل إلى اشتراك مدفوع" },
+      ],
+      [
+        { author: p("bader-al-ghamdi", "بدر الغامدي", "الرئيس التقني، بيكون أناليتكس"), quote: "«حذفنا أربعين ألف سطر من شيفرة الواجهات.»", stat: "2.1×", statLabel: "أسرع في تسليم لوحات المعلومات" },
+        { author: p("majed-nouri", "ماجد نوري", "الرئيس التنفيذي للعمليات، أركاديا هيلث"), quote: "«لم تعد نسب التباين موضوع نقاش على الإطلاق.»", stat: "3.4×", statLabel: "أسرع في مراجعة الشاشات السريرية" },
+        { author: p("fahad-salem", "فهد سالم", "مدير العلامة التجارية، بنك أرفينا"), quote: "«كانت كل ملاحظة تدقيق تفتح نقاشًا في التصميم، والآن يكفيها تعديل رمز واحد.»", stat: "99%", statLabel: "من الشاشات تجتاز مراجعة العلامة من أول محاولة" },
+      ],
+      [
+        { author: p("bader-al-ghamdi", "بدر الغامدي", "الرئيس التقني، بيكون أناليتكس"), quote: "«أنهينا الإعداد في صباح واحد، وتعمل المكتبة مباشرة ضمن أدواتنا دون أي إضافات.»", stat: "28%", statLabel: "زيادة في معدل التفعيل" },
+        { author: p("majed-nouri", "ماجد نوري", "الرئيس التنفيذي للعمليات، أركاديا هيلث"), quote: "«لأن كل شاشة تمر عبر نظام واحد، تتكيّف أدوات المرضى لدينا مع ما تحتاجه كل عيادة فعلًا.»", stat: "97%", statLabel: "معدل اجتياز تدقيق إمكانية الوصول" },
+        { author: p("omar-haddad", "عمر حداد", "نائب رئيس الهندسة، كوبالت سيستمز"), quote: "«أُطلق الواجهات بثقة تامة دون انتظار مراجعة التصميم.»", stat: "6×", statLabel: "أسرع في تطبيق سمات العلامة منذ الانتقال" },
+      ],
+    ],
+  },
+}
+
+/** The three tints, in card order: `info`, `destructive`, `warning`, as Figma sets them. */
+const TINTS = ["bg-info/10", "bg-destructive/10", "bg-warning/10"]
+
+export interface SocialProofStatStoryCardsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofStatStoryCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id. Without them the avatars show initials. */
+  photos?: SocialProofPhotos
+  /** The set shown, from 0, to control the dots. */
+  index?: number
+  /** Called when a dot, a key or a swipe changes the set. */
+  onIndexChange?: (index: number) => void
+  /** Where the buttons go. The same for every story. */
+  href?: string
+}
+
+export function SocialProofStatStoryCards({
+  locale = "en",
+  heading,
+  description,
+  link,
+  label,
+  pages,
+  photos,
+  index: indexProp,
+  onIndexChange,
+  href = "#",
+  className,
+  ...props
+}: SocialProofStatStoryCardsProps) {
+  const copy = COPY[locale]
+  const list = pages ?? copy.pages
+  const headingId = React.useId()
+  const dots = React.useRef<HTMLDivElement>(null)
+  const focusDot = React.useRef(false)
+  const { ref, index, go } = useStepper<HTMLDivElement>({ count: list.length, index: indexProp, onIndexChange, stagger: true })
+  const swipe = useSwipeStep((delta) => go(index + delta))
+  React.useEffect(() => {
+    if (!focusDot.current) return
+    focusDot.current = false
+    dots.current?.querySelectorAll("button")[index]?.focus()
+  }, [index])
+  const select = (next: number) => {
+    focusDot.current = true
+    go(next)
+  }
+  const stories = list[index]
+  if (!stories) return null
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="gap-10" {...props}>
+      <SocialProofHeader headingId={headingId} heading={heading ?? copy.heading} description={description ?? copy.description} headingSize="3xl" descriptionSize="base" />
+      <div ref={ref} aria-live="polite" className="flex w-full flex-col gap-6 [@container(min-width:64rem)]:flex-row" {...swipe}>
+        {stories.map((story, i) => (
+          <article
+            key={`${index}-${i}`}
+            data-step-item="slide"
+            className={cn("flex min-w-0 flex-1 flex-col justify-between gap-5 rounded-xl p-6 [@container(min-width:64rem)]:p-8", TINTS[i % TINTS.length])}
+          >
+            <figure className="m-0 flex flex-col gap-5">
+              <figcaption className="flex items-center gap-3">
+                <Avatar aria-hidden size="32" radius="rounded" src={photos?.[story.author.id]} name={story.author.name} className="size-11 shrink-0" />
+                <div className="flex min-w-0 flex-col">
+                  <cite className="text-sm font-medium not-italic text-foreground">{story.author.name}</cite>
+                  <span className="text-xs text-muted-foreground">
+                    <Isolated>{story.author.role}</Isolated>
+                  </span>
+                </div>
+              </figcaption>
+              <div className="flex flex-col gap-5 [@container(min-width:64rem)]:flex-row">
+                <SocialProofQuote quote={story.quote} className="min-w-0 flex-1 text-base text-foreground" />
+                <p className="flex shrink-0 flex-col gap-1 [@container(min-width:64rem)]:w-[120px]">
+                  <span className="text-4xl font-semibold text-foreground">
+                    <Isolated>{story.stat}</Isolated>
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    <Isolated>{story.statLabel}</Isolated>
+                  </span>
+                </p>
+              </div>
+            </figure>
+            <a href={href} className={buttonVariants({ variant: "outline", tone: "primary", size: "sm", radius: "rounded", className: "self-start" })}>
+              {link ?? copy.link}
+            </a>
+          </article>
+        ))}
+      </div>
+      <div ref={dots} role="group" aria-label={label ?? copy.label} onKeyDown={stepKeys(index, list.length, select)}>
+        <CarouselDots count={list.length} activeIndex={index} onActiveIndexChange={go} label={(i, count) => (locale === "ar" ? `المجموعة ${i + 1} من ${count}` : `Set ${i + 1} of ${count}`)} />
+      </div>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofStatStoryCardsCopy = COPY

package/registry/blocks/social-proof-stat-story-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofStatStoryCards,
+  socialProofStatStoryCardsCopy,
+  type SocialProofStatStory,
+  type SocialProofStatStoryCardsCopy,
+  type SocialProofStatStoryCardsProps,
+} from "./SocialProofStatStoryCards"

package/registry/blocks/social-proof-tinted-panel-portrait/SocialProofTintedPanelPortrait.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofQuote,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Tinted-Panel Portrait.
+ *
+ * A portrait of the author centred on a panel in a 10% `info` tint, beside the
+ * quote in XL and a row with the author's name and role at the start and a
+ * link to the full story at the end. Desktop: a 480px square panel holding a
+ * 340 by 380 portrait. Tablet: a 300 by 340 panel, a 220 by 260 portrait.
+ * Phones: the panel full width and 300px tall above the quote, a 200 by 240
+ * portrait, and the link under the author when the row runs out of room.
+ */
+
+export interface SocialProofTintedPanelPortraitLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface SocialProofTintedPanelPortraitCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** Up to 290 characters in English, 284 in Arabic. */
+  quote: React.ReactNode
+  /** The portrait is `photos[author.id]`. */
+  author: SocialProofPerson
+  /** The link to the full story. Hidden when empty. Up to 25 characters in English, 26 in Arabic. */
+  link: SocialProofTintedPanelPortraitLink | null
+}
+
+const ADEL = { id: "adel-qasim" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofTintedPanelPortraitCopy> = {
+  en: {
+    label: "What customers say",
+    quote: "“Fasla changed everything. We now build exactly what my team designs, pixel for pixel. Having that power and flexibility at our fingertips is a paradigm shift.”",
+    author: { ...ADEL, name: "Adel Qasim", role: "Director of Brand Design, Forma Studio" },
+    link: { label: "Customer story", href: "#" },
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    quote: "«غيّرت فاصلة كل شيء. صرنا نبني تمامًا ما يصممه فريقي، بكسلًا بكسل. وامتلاك هذه القوة والمرونة بين أيدينا غيّر طريقة تفكيرنا كلها.»",
+    author: { ...ADEL, name: "عادل قاسم", role: "مدير تصميم العلامة، فورما ستوديو" },
+    link: { label: "قصة عميل", href: "#" },
+  },
+}
+
+export interface SocialProofTintedPanelPortraitProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofTintedPanelPortraitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Photos by person id: the portrait is the author's. Without it the slot is empty. */
+  photos?: SocialProofPhotos
+}
+
+export function SocialProofTintedPanelPortrait({
+  locale = "en",
+  label,
+  quote,
+  author,
+  link,
+  photos,
+  className,
+  ...props
+}: SocialProofTintedPanelPortraitProps) {
+  const copy = COPY[locale]
+  const person = author ?? copy.author
+  const more = link === undefined ? copy.link : link
+
+  return (
+    <SocialProofSection
+      aria-label={label ?? copy.label}
+      className={className}
+      contentClassName="gap-8 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-10 [@container(min-width:64rem)]:gap-16"
+      {...props}
+    >
+      <div
+        className={cn(
+          "flex h-[300px] w-full shrink-0 items-center justify-center rounded-xl bg-info/10",
+          "[@container(min-width:40rem)]:h-[340px] [@container(min-width:40rem)]:w-[300px] [@container(min-width:64rem)]:size-[480px]"
+        )}
+      >
+        <SocialProofPhoto
+          src={photos?.[person.id]}
+          className="h-[240px] w-[200px] rounded-lg [@container(min-width:40rem)]:h-[260px] [@container(min-width:40rem)]:w-[220px] [@container(min-width:64rem)]:h-[380px] [@container(min-width:64rem)]:w-[340px]"
+        />
+      </div>
+      <figure className="m-0 flex w-full min-w-0 flex-col gap-8 [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:flex-1">
+        <SocialProofQuote quote={quote ?? copy.quote} className="text-xl text-foreground" />
+        <figcaption className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+          <span className="flex flex-col gap-0.5">
+            <cite className="text-sm font-medium not-italic text-foreground">{person.name}</cite>
+            <span className="text-xs text-muted-foreground">
+              <Isolated>{person.role}</Isolated>
+            </span>
+          </span>
+          {more ? (
+            <a
+              href={more.href}
+              className="inline-flex shrink-0 items-center gap-1.5 rounded-sm text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <Isolated>{more.label}</Isolated>
+              <ArrowRight aria-hidden size={16} className="rtl:rotate-180" />
+            </a>
+          ) : null}
+        </figcaption>
+      </figure>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofTintedPanelPortraitCopy = COPY

package/registry/blocks/social-proof-tinted-panel-portrait/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofTintedPanelPortrait,
+  socialProofTintedPanelPortraitCopy,
+  type SocialProofTintedPanelPortraitCopy,
+  type SocialProofTintedPanelPortraitProps,
+  type SocialProofTintedPanelPortraitLink,
+} from "./SocialProofTintedPanelPortrait"

package/registry/blocks/social-proof-tweet-wall/SocialProofTweetWall.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { Heart, MessageCircle } from "lucide-react"
+import { SocialIcon } from "../../ui/social-icons/social-icons"
+import {
+  Isolated,
+  SocialProofAuthor,
+  SocialProofHeader,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Tweet Wall.
+ *
+ * A centred header over six posts as they appeared on X: the author's
+ * avatar, name and handle with the X mark at the end, the post with every
+ * mention in `info`, and a footer with the date and the like and reply
+ * counts. The posts are display only: nothing here is a button.
+ *
+ * Desktop sets them three to a row, Tablet two, phones one under another.
+ */
+
+export interface SocialProofTweetWallItem {
+  /** The author; `role` holds the handle, `@tariqbuilds`. Keep handles under 15 characters. */
+  author: SocialProofPerson
+  /** The post as written. Mentions (`@Fasla`) are set in `info`. Up to 122 characters in English, 129 in Arabic. */
+  post: string
+  date: React.ReactNode
+  likes: React.ReactNode
+  replies: React.ReactNode
+}
+
+export interface SocialProofTweetWallCopy {
+  heading: React.ReactNode
+  description: React.ReactNode
+  /** The posts, in reading order. */
+  items: SocialProofTweetWallItem[]
+  /** Read before each count by assistive tech: "Likes", "Replies". */
+  countLabels: { likes: string; replies: string }
+  /** The X mark's accessible name. */
+  networkLabel: string
+}
+
+const p = (id: string, name: string, role: string): SocialProofPerson => ({ id, name, role })
+
+/** Figma's copy, English and Arabic, posts as their authors wrote them. Every person is invented. */
+const COPY: Record<SocialProofLocale, SocialProofTweetWallCopy> = {
+  en: {
+    heading: "Loved in public",
+    description: "Unfiltered posts from the timeline.",
+    countLabels: { likes: "Likes", replies: "Replies" },
+    networkLabel: "Posted on X",
+    items: [
+      { author: p("tariq-zaki", "Tariq Zaki", "@tariqbuilds"), post: "took me 2 minutes to wire @Fasla tokens into our app. everything just… matched. still suspicious.", date: "Apr 2", likes: "214", replies: "18" },
+      { author: p("hani-jaber", "Hani Jaber", "@hanijaber"), post: "initial impressions of @Fasla: zero-config theming is real. shipped dark mode before standup.", date: "May 11", likes: "512", replies: "34" },
+      { author: p("omar-haddad", "Omar Haddad", "@omarbuilds"), post: "i'm super bullish on @Fasla. self-served components first, and the new blocks program is exciting.", date: "Jun 3", likes: "128", replies: "9" },
+      { author: p("ziad-karam", "Ziad Karam", "@ziadbuilds"), post: "really gotta commend @Fasla for sane defaults. never seen spacing this consistent in any library.", date: "Jun 19", likes: "342", replies: "21" },
+      { author: p("adel-qasim", "Adel Qasim", "@adelqasim"), post: "our brand book is now literally just a link to @Fasla tokens", date: "Jul 8", likes: "890", replies: "56" },
+      { author: p("khalid-saad", "Khalid Saad", "@ksaad"), post: "QA: “no visual regressions this sprint?”  me: @Fasla", date: "Aug 1", likes: "1.2K", replies: "73" },
+    ],
+  },
+  ar: {
+    heading: "إشادات على الملأ",
+    description: "منشورات كما كتبها أصحابها، دون تعديل.",
+    countLabels: { likes: "الإعجابات", replies: "الردود" },
+    networkLabel: "منشور على X",
+    items: [
+      { author: p("tariq-zaki", "طارق زكي", "@tariqbuilds"), post: "استغرق مني ربط رموز التصميم من @Fasla بتطبيقنا دقيقتين. تطابق كل شيء… ببساطة. وما زلت غير مصدّق.", date: "2 أبريل", likes: "214", replies: "18" },
+      { author: p("hani-jaber", "هاني جابر", "@hanijaber"), post: "انطباعي الأول عن @Fasla: تغيير السمات دون أي إعداد حقيقي فعلًا. أطلقت الوضع الداكن قبل الاجتماع اليومي.", date: "11 مايو", likes: "512", replies: "34" },
+      { author: p("omar-haddad", "عمر حداد", "@omarbuilds"), post: "متفائل جدًا بشأن @Fasla. مكوّنات تستخدمها بنفسك من البداية، وبرنامج الكتل الجديد واعد.", date: "3 يونيو", likes: "128", replies: "9" },
+      { author: p("ziad-karam", "زياد كرم", "@ziadbuilds"), post: "لا بد أن أثني على @Fasla لإعداداتها الافتراضية المدروسة. لم أرَ تباعدًا بهذا الاتساق في أي مكتبة.", date: "19 يونيو", likes: "342", replies: "21" },
+      { author: p("adel-qasim", "عادل قاسم", "@adelqasim"), post: "دليل علامتنا صار حرفيًا رابطًا إلى رموز التصميم في @Fasla", date: "8 يوليو", likes: "890", replies: "56" },
+      { author: p("khalid-saad", "خالد سعد", "@ksaad"), post: "فريق الجودة: «لا تراجعات بصرية في هذا السبرنت؟»  أنا: @Fasla", date: "1 أغسطس", likes: "1.2K", replies: "73" },
+    ],
+  },
+}
+
+const MENTION = /(@[A-Za-z0-9_]+)/
+
+/** The post, every mention in `info` and in its own left-to-right isolate. */
+function Post({ text }: { text: string }) {
+  return (
+    <>
+      {text.split(MENTION).map((part, index) =>
+        index % 2 === 1 ? (
+          <bdi key={index} dir="ltr" className="text-info">
+            {part}
+          </bdi>
+        ) : (
+          <Isolated key={index}>{part}</Isolated>
+        )
+      )}
+    </>
+  )
+}
+
+export interface SocialProofTweetWallProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<SocialProofTweetWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id. Without them the avatars show initials. */
+  photos?: SocialProofPhotos
+}
+
+export function SocialProofTweetWall({
+  locale = "en",
+  heading,
+  description,
+  items,
+  countLabels,
+  networkLabel,
+  photos,
+  className,
+  ...props
+}: SocialProofTweetWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+  const labels = countLabels ?? copy.countLabels
+  const network = networkLabel ?? copy.networkLabel
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="gap-10" {...props}>
+      <SocialProofHeader
+        headingId={headingId}
+        heading={heading ?? copy.heading}
+        description={description === undefined ? copy.description : description}
+        headingSize="3xl"
+        descriptionSize="base"
+        className="gap-3"
+      />
+      <ul className="grid w-full grid-cols-1 gap-5 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-3">
+        {list.map((item, index) => (
+          <li key={index} className="min-w-0 rounded-lg bg-card p-5 ring-1 ring-inset ring-border forced-colors:border">
+            <figure className="m-0 flex flex-col gap-3">
+              <SocialProofAuthor
+                person={item.author}
+                photos={photos}
+                gap="2.5"
+                avatarClassName="size-9"
+                nameClassName="font-semibold"
+                trailing={<SocialIcon platform="x" color="negative" title={network} className="size-[18px] shrink-0" />}
+              />
+              <blockquote className="m-0">
+                <p className="text-sm text-foreground">
+                  <Post text={item.post} />
+                </p>
+              </blockquote>
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <span>
+                  <Isolated>{item.date}</Isolated>
+                </span>
+                <span className="inline-flex items-center gap-1">
+                  <Heart aria-hidden size={14} />
+                  <span className="sr-only">{labels.likes}: </span>
+                  <bdi dir="ltr">{item.likes}</bdi>
+                </span>
+                <span className="inline-flex items-center gap-1">
+                  <MessageCircle aria-hidden size={14} />
+                  <span className="sr-only">{labels.replies}: </span>
+                  <bdi dir="ltr">{item.replies}</bdi>
+                </span>
+              </div>
+            </figure>
+          </li>
+        ))}
+      </ul>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofTweetWallCopy = COPY

package/registry/blocks/social-proof-tweet-wall/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofTweetWall,
+  socialProofTweetWallCopy,
+  type SocialProofTweetWallCopy,
+  type SocialProofTweetWallProps,
+  type SocialProofTweetWallItem,
+} from "./SocialProofTweetWall"