@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/social-proof-app-review-row/SocialProofAppReviewRow.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import * as React from "react"
+import { SocialIcon } from "../../ui/social-icons/social-icons"
+import {
+  Isolated,
+  SocialProofQuote,
+  SocialProofSection,
+  SocialProofStars,
+  SocialProofStepper,
+  useStepper,
+  useSwipeStep,
+  type SocialProofLocale,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=App Review Row.
+ *
+ * A centred heading over app store reviews three to a set, each set off by a
+ * 2px `foreground` line at its start: five `primary` stars, the review, and
+ * the store with the reviewer's handle. Previous and next arrows (Icon
+ * Button, Ghost xs) sit under the set, at the end.
+ *
+ * Motion (Figma's ⚡ Motion note): the first set shows on load, and the arrows
+ * step through further sets of three when you pass more reviews. Manual only:
+ * no autoplay, and paging stops at the first and last set, so previous is
+ * disabled on the first set and next on the last. On change the outgoing
+ * reviews fade out (fadeIn in reverse, 180ms) and the incoming ones slide up
+ * 10px with a fade (slideUp, 180ms), 60ms apart (stagger). Reduced motion:
+ * opacity only, 120ms. On phones, swiping the stack also steps through sets.
+ * With Figma's three reviews there is one set, so both arrows are disabled.
+ *
+ * Desktop and Tablet set a set three across; phones stack it.
+ */
+
+export interface SocialProofAppReviewRowItem {
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  /** The store, as Figma sets it beside the Apple mark: "App Store" in English, "App Store،" in Arabic. */
+  store: string
+  /** The reviewer's handle, after the store: "· chicago_pm" in English, "chicago_pm" in Arabic. */
+  handle: string
+}
+
+export interface SocialProofAppReviewRowCopy {
+  heading: React.ReactNode
+  /** The reviews, in reading order; the arrows page through them three at a time. */
+  items: SocialProofAppReviewRowItem[]
+}
+
+/** Figma's copy, English and Arabic. Every reviewer is invented. */
+const COPY: Record<SocialProofLocale, SocialProofAppReviewRowCopy> = {
+  en: {
+    heading: "Rated where it counts",
+    items: [
+      {
+        quote: "“Fasla Studio is flat-out awesome. I recommend it as the primary design tool for any product team. So many great defaults!”",
+        store: "App Store",
+        handle: "· chicago_pm",
+      },
+      {
+        quote: "“I absolutely love the theming. It's so easy to set up, and my mockups look client-ready every time I export.”",
+        store: "App Store",
+        handle: "· nawaf.builds",
+      },
+      {
+        quote: "“The best design-system app I've used — better than the two big names combined, and as good as anything enterprise.”",
+        store: "App Store",
+        handle: "· rx_dev",
+      },
+    ],
+  },
+  ar: {
+    heading: "تقييمات عالية في متاجر التطبيقات",
+    items: [
+      {
+        quote: "«فاصلة ستوديو رائعة بكل معنى الكلمة. أوصي بها أداةَ تصميم أساسية لكل فريق منتج. إعداداتها الافتراضية ممتازة!»",
+        store: "App Store،",
+        handle: "chicago_pm",
+      },
+      {
+        quote: "«أحب نظام السمات كثيرًا. إعداده سهل جدًا، وتخرج تصاميمي جاهزة للعميل في كل تصدير.»",
+        store: "App Store،",
+        handle: "nawaf.builds",
+      },
+      {
+        quote: "«أفضل تطبيق لأنظمة التصميم جرّبته، يتفوق على أشهر تطبيقين معًا، ويضاهي أي حل مؤسسي.»",
+        store: "App Store،",
+        handle: "rx_dev",
+      },
+    ],
+  },
+}
+
+/** Reviews per set, as Figma lays them out. */
+const PER_SET = 3
+
+export interface SocialProofAppReviewRowProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<SocialProofAppReviewRowCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** The set shown, from 0, to control the arrows. */
+  set?: number
+  /** Called when the arrows or a swipe change the set. */
+  onSetChange?: (set: number) => void
+}
+
+export function SocialProofAppReviewRow({
+  locale = "en",
+  heading,
+  items,
+  set: setProp,
+  onSetChange,
+  className,
+  ...props
+}: SocialProofAppReviewRowProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const listId = React.useId()
+  const list = items ?? copy.items
+  const count = Math.max(1, Math.ceil(list.length / PER_SET))
+  const { ref: listRef, index: current, go } = useStepper<HTMLUListElement>({ count, index: setProp, onIndexChange: onSetChange, stagger: true })
+  const swipe = useSwipeStep((delta) => go(current + delta))
+  const shown = list.slice(current * PER_SET, current * PER_SET + PER_SET)
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="gap-12" {...props}>
+      <h2 id={headingId} className="text-center text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-4xl">
+        <Isolated>{heading ?? copy.heading}</Isolated>
+      </h2>
+      <div className="flex w-full flex-col gap-12" {...swipe}>
+        <ul
+          ref={listRef}
+          id={listId}
+          aria-live="polite"
+          className="grid w-full grid-cols-1 gap-8 [@container(min-width:40rem)]:grid-cols-3 [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:gap-10"
+        >
+          {shown.map((item, index) => (
+            <li key={current * PER_SET + index} data-step-item="" className="min-w-0 border-s-2 border-foreground ps-5">
+              <figure className="m-0 flex flex-col gap-3">
+                <SocialProofStars tone="primary" locale={locale} />
+                <SocialProofQuote quote={item.quote} className="text-base text-foreground" />
+                <figcaption className="flex items-center gap-1.5 text-xs">
+                  <SocialIcon platform="apple" className="size-4 shrink-0" />
+                  <span className="font-medium text-foreground">{item.store}</span>
+                  <span className="text-muted-foreground">{item.handle}</span>
+                </figcaption>
+              </figure>
+            </li>
+          ))}
+        </ul>
+        <SocialProofStepper
+          index={current}
+          count={count}
+          onIndexChange={go}
+          locale={locale}
+          controls={listId}
+          className="self-end"
+        />
+      </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 socialProofAppReviewRowCopy = COPY

package/registry/blocks/social-proof-app-review-row/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofAppReviewRow,
+  socialProofAppReviewRowCopy,
+  type SocialProofAppReviewRowCopy,
+  type SocialProofAppReviewRowProps,
+  type SocialProofAppReviewRowItem,
+} from "./SocialProofAppReviewRow"

package/registry/blocks/social-proof-arch-portrait-quote/SocialProofArchPortraitQuote.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "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=Arch Portrait Quote.
+ *
+ * A portrait of the author in an arch (fully rounded top, `border radius/sm`
+ * at the foot) with an echo of the arch, a 2px `border` outline, set behind
+ * it toward the end and down. Beside it a label, the quote in 2XL Light (XL
+ * on phones) and the author. Desktop: a 400 by 520 arch, the echo 44px off.
+ * Tablet: 300 by 400, 30px off. Phones: 260 by 350 above the quote.
+ */
+
+export interface SocialProofArchPortraitQuoteCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** The line above the quote. Up to 41 characters in English, 31 in Arabic. */
+  eyebrow: React.ReactNode
+  /** Up to 164 characters in English, 133 in Arabic. */
+  quote: React.ReactNode
+  /** The portrait is `photos[author.id]`. */
+  author: SocialProofPerson
+}
+
+const FAHAD = { id: "fahad-salem" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofArchPortraitQuoteCopy> = {
+  en: {
+    label: "What customers say",
+    eyebrow: "A NOTE FROM OUR CUSTOMERS",
+    quote: "“Bank-grade compliance and beautiful UI used to be a trade-off. Now our auditors and our designers quote the same source of truth.”",
+    author: { ...FAHAD, name: "Fahad Salem", role: "Brand Director, Arvenna Bank" },
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    eyebrow: "كلمة من عملائنا",
+    quote: "«كنا نضحّي بجمال الواجهة لنلبّي الامتثال المصرفي. اليوم يرجع مدققونا ومصممونا إلى مصدر واحد للحقيقة.»",
+    author: { ...FAHAD, name: "فهد سالم", role: "مدير العلامة التجارية، بنك أرفينا" },
+  },
+}
+
+/** The arch at each size: the portrait, and the echo pushed toward the end and down. */
+const ARCH = "rounded-b-sm rounded-t-full h-[350px] w-[260px] [@container(min-width:40rem)]:h-[400px] [@container(min-width:40rem)]:w-[300px] [@container(min-width:64rem)]:h-[520px] [@container(min-width:64rem)]:w-[400px]"
+const ECHO_OFFSET = "start-[30px] top-[30px] [@container(min-width:64rem)]:start-[44px] [@container(min-width:64rem)]:top-[44px]"
+
+export interface SocialProofArchPortraitQuoteProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofArchPortraitQuoteCopy> {
+  /** 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 arch is empty. */
+  photos?: SocialProofPhotos
+}
+
+export function SocialProofArchPortraitQuote({
+  locale = "en",
+  label,
+  eyebrow,
+  quote,
+  author,
+  photos,
+  className,
+  ...props
+}: SocialProofArchPortraitQuoteProps) {
+  const copy = COPY[locale]
+  const person = author ?? copy.author
+  const line = eyebrow === undefined ? copy.eyebrow : eyebrow
+
+  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-20"
+      {...props}
+    >
+      <div className="relative shrink-0 pb-[30px] pe-[30px] [@container(min-width:64rem)]:pb-[44px] [@container(min-width:64rem)]:pe-[44px]">
+        <span aria-hidden className={cn("absolute border-2 border-border", ARCH, ECHO_OFFSET)} />
+        <SocialProofPhoto src={photos?.[person.id]} className={cn("relative", ARCH)} />
+      </div>
+      <figure className="m-0 flex w-full min-w-0 flex-col gap-6 [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:flex-1">
+        {line ? (
+          <p className="text-xs font-medium text-muted-foreground">
+            <Isolated>{line}</Isolated>
+          </p>
+        ) : null}
+        <SocialProofQuote quote={quote ?? copy.quote} className="text-xl font-light text-foreground [@container(min-width:40rem)]:text-2xl" />
+        <figcaption 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>
+        </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 socialProofArchPortraitQuoteCopy = COPY

package/registry/blocks/social-proof-arch-portrait-quote/index.ts

@@ -0,0 +1,6 @@
+export {
+  SocialProofArchPortraitQuote,
+  socialProofArchPortraitQuoteCopy,
+  type SocialProofArchPortraitQuoteCopy,
+  type SocialProofArchPortraitQuoteProps,
+} from "./SocialProofArchPortraitQuote"

package/registry/blocks/social-proof-avatar-selector-row/SocialProofAvatarSelectorRow.tsx

@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import { Quote } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofQuote,
+  SocialProofSection,
+  stepKeys,
+  useStepper,
+  type SocialProofLocale,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Avatar-Selector Row.
+ *
+ * A quote centred over a row of five portrait tiles: the company in XS Bold,
+ * the name and the short role under each portrait. The selected tile is the
+ * quote's author: its portrait carries a 2px `info` ring, its company turns
+ * `info` with a short `info` underline. The other tiles keep their portraits
+ * dimmed to 55% and their names and roles at full contrast. Two quote marks
+ * frame the quote from Tablet up.
+ *
+ * The portraits are 120px on Desktop, 104 on Tablet and 88 on phones, where
+ * the tiles wrap three and two. They are photo slots, not the Avatar atom,
+ * which stops at 32px.
+ *
+ * Motion (Figma's ⚡ Motion note): selecting a portrait, by click, tap or the
+ * arrow keys within the row, makes it the active tile. Manual only: no
+ * auto-cycling, no timer. On select the quote fades in (fadeIn, 180ms) and
+ * the tile takes the active style in 120ms. Reduced motion: opacity only,
+ * 120ms. In RTL the first portrait is on the right.
+ *
+ * Figma shows Khalid Saad's quote. The other four are quotes the same people
+ * give elsewhere in the set: Sami Naji's from Highlighted-Phrase Spotlight,
+ * Hani Jaber's from Giant Quote Duo, Yousef Amin's from Staggered Columns and
+ * Adel Qasim's from Benefit-Title Cards.
+ */
+
+export interface SocialProofAvatarSelectorRowItem {
+  /** The key in `photos` for the portrait. */
+  id: string
+  /** The company, above the name. Up to 20 characters. */
+  company: React.ReactNode
+  /** Up to 19 characters. */
+  name: string
+  /** The short role under the name. */
+  role: React.ReactNode
+  /** Up to 164 characters in English, 133 in Arabic. */
+  quote: React.ReactNode
+}
+
+export interface SocialProofAvatarSelectorRowCopy {
+  /** The line above the quote. Up to 41 characters in English, 31 in Arabic. */
+  eyebrow: React.ReactNode
+  /** Names the row of portraits for assistive tech. */
+  label: string
+  /** The people, in reading order. */
+  items: SocialProofAvatarSelectorRowItem[]
+}
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofAvatarSelectorRowCopy> = {
+  en: {
+    eyebrow: "TRUSTED BY THE BEST PRODUCT TEAMS",
+    label: "Choose a customer",
+    items: [
+      {
+        id: "sami-naji",
+        company: "NIMBUS LABS",
+        name: "Sami Naji",
+        role: "Product Lead",
+        quote: "“We didn't buy a component library. We bought back two design days a week — and every release finally feels finished.”",
+      },
+      {
+        id: "khalid-saad",
+        company: "ATLAS FREIGHT",
+        name: "Khalid Saad",
+        role: "Frontend Lead",
+        quote: "“Perfect solution for our design needs — Fasla just works exactly how you'd want it to.”",
+      },
+      {
+        id: "hani-jaber",
+        company: "CLEARFEN",
+        name: "Hani Jaber",
+        role: "Staff Engineer",
+        quote: "“You just have to build one screen with it. You'll feel it immediately.”",
+      },
+      {
+        id: "yousef-amin",
+        company: "HALCYON GAMES",
+        name: "Yousef Amin",
+        role: "Co-founder",
+        quote: "“Our game dashboards finally match our brand. Players noticed before the press did.”",
+      },
+      {
+        id: "adel-qasim",
+        company: "FORMA STUDIO",
+        name: "Adel Qasim",
+        role: "Head of Design",
+        quote: "“We cut a third of our custom CSS. The UI feels lighter to use and to maintain.”",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "تثق بها أفضل فرق المنتجات",
+    label: "اختر أحد العملاء",
+    items: [
+      {
+        id: "sami-naji",
+        company: "نيمبوس لابس",
+        name: "سامي ناجي",
+        role: "قائد المنتج",
+        quote: "«لم نشترِ مكتبة مكوّنات، بل استعدنا يومين من التصميم كل أسبوع، وصار كل إصدار يبدو مكتملًا أخيرًا.»",
+      },
+      {
+        id: "khalid-saad",
+        company: "أطلس فريت",
+        name: "خالد سعد",
+        role: "قائد الواجهات الأمامية",
+        quote: "«الحل الأمثل لاحتياجاتنا في التصميم: فاصلة تعمل تمامًا كما نريد.»",
+      },
+      {
+        id: "hani-jaber",
+        company: "كليرفين",
+        name: "هاني جابر",
+        role: "مهندس أول",
+        quote: "«يكفي أن تبني شاشة واحدة بها. ستشعر بالفرق فورًا.»",
+      },
+      {
+        id: "yousef-amin",
+        company: "هالسيون غيمز",
+        name: "يوسف أمين",
+        role: "شريك مؤسس",
+        quote: "«صارت لوحات ألعابنا تشبه علامتنا أخيرًا، ولاحظ اللاعبون ذلك قبل الصحافة.»",
+      },
+      {
+        id: "adel-qasim",
+        company: "فورما ستوديو",
+        name: "عادل قاسم",
+        role: "رئيس التصميم",
+        quote: "«حذفنا ثلث شيفرة CSS المخصصة، فصارت الواجهة أخف في الاستخدام والصيانة.»",
+      },
+    ],
+  },
+}
+
+export interface SocialProofAvatarSelectorRowProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofAvatarSelectorRowCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Portrait photos by person id. Without them the portraits show their `muted` ground. */
+  photos?: SocialProofPhotos
+  /** The selected person, from 0, to control the row. */
+  index?: number
+  /**
+   * The person selected first: Khalid Saad, as Figma shows.
+   * @default 1
+   */
+  defaultIndex?: number
+  /** Called when a portrait is selected. */
+  onIndexChange?: (index: number) => void
+}
+
+export function SocialProofAvatarSelectorRow({
+  locale = "en",
+  eyebrow,
+  label,
+  items,
+  photos,
+  index: indexProp,
+  defaultIndex = 1,
+  onIndexChange,
+  className,
+  ...props
+}: SocialProofAvatarSelectorRowProps) {
+  const copy = COPY[locale]
+  const list = items ?? copy.items
+  const line = eyebrow === undefined ? copy.eyebrow : eyebrow
+  const baseId = React.useId()
+  const tabs = React.useRef<(HTMLButtonElement | null)[]>([])
+  const { ref, index, go } = useStepper<HTMLDivElement>({
+    count: list.length,
+    index: indexProp,
+    defaultIndex,
+    onIndexChange,
+    slide: false,
+    exit: false,
+  })
+  const select = (next: number) => {
+    go(next)
+    tabs.current[next]?.focus()
+  }
+  const active = list[index]
+  if (!active) return null
+
+  return (
+    <SocialProofSection aria-label={label ?? copy.label} className={cn("lg:px-24", className)} contentClassName="max-w-[1248px] gap-12" {...props}>
+      <div
+        ref={ref}
+        id={`${baseId}-panel`}
+        role="tabpanel"
+        aria-labelledby={`${baseId}-tab-${index}`}
+        className="relative flex w-full max-w-[900px] flex-col items-center gap-4 text-center"
+      >
+        <Quote aria-hidden size={28} strokeWidth={1.5} className="absolute start-0 top-0 hidden rotate-180 text-muted-foreground [@container(min-width:40rem)]:block [@container(min-width:64rem)]:-start-[60px]" />
+        <Quote aria-hidden size={28} strokeWidth={1.5} className="absolute end-0 bottom-0 hidden text-muted-foreground [@container(min-width:40rem)]:block [@container(min-width:64rem)]:-end-[60px]" />
+        {line ? (
+          <p className="text-xs font-medium text-muted-foreground">
+            <Isolated>{line}</Isolated>
+          </p>
+        ) : null}
+        <figure key={index} data-step-item="fade" className="m-0">
+          <SocialProofQuote quote={active.quote} className="text-xl font-medium text-foreground [@container(min-width:40rem)]:text-2xl" />
+          <figcaption className="sr-only">
+            <cite>{active.name}</cite>, <Isolated>{active.role}</Isolated>
+          </figcaption>
+        </figure>
+      </div>
+      <div
+        role="tablist"
+        aria-label={label ?? copy.label}
+        onKeyDown={stepKeys(index, list.length, select)}
+        className="flex flex-wrap items-start justify-center gap-4 [@container(min-width:40rem)]:flex-nowrap [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:gap-8"
+      >
+        {list.map((item, i) => {
+          const selected = i === index
+          return (
+            <button
+              key={item.id}
+              ref={(el) => {
+                tabs.current[i] = el
+              }}
+              type="button"
+              role="tab"
+              id={`${baseId}-tab-${i}`}
+              aria-selected={selected}
+              aria-controls={`${baseId}-panel`}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => go(i)}
+              className="group flex w-[88px] flex-col items-center gap-2.5 rounded-lg text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [@container(min-width:40rem)]:w-[104px] [@container(min-width:64rem)]:w-[120px]"
+            >
+              <span className="relative block size-[88px] [@container(min-width:40rem)]:size-[104px] [@container(min-width:64rem)]:size-[120px]">
+                <SocialProofPhoto
+                  src={photos?.[item.id]}
+                  className={cn("size-full rounded-lg transition-opacity duration-[120ms] motion-reduce:transition-none", !selected && "opacity-55")}
+                />
+                {selected ? <span aria-hidden className="pointer-events-none absolute inset-0 rounded-lg ring-2 ring-inset ring-info" /> : null}
+              </span>
+              <span className={cn("text-xs font-bold transition-colors duration-[120ms] motion-reduce:transition-none", selected ? "text-info" : "text-foreground")}>
+                <Isolated>{item.company}</Isolated>
+              </span>
+              {selected ? <span aria-hidden className="h-[3px] w-8 rounded-full bg-info" /> : null}
+              <span className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">{item.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  <Isolated>{item.role}</Isolated>
+                </span>
+              </span>
+            </button>
+          )
+        })}
+      </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 socialProofAvatarSelectorRowCopy = COPY

package/registry/blocks/social-proof-avatar-selector-row/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofAvatarSelectorRow,
+  socialProofAvatarSelectorRowCopy,
+  type SocialProofAvatarSelectorRowCopy,
+  type SocialProofAvatarSelectorRowProps,
+  type SocialProofAvatarSelectorRowItem,
+} from "./SocialProofAvatarSelectorRow"