@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/social-proof-overlay-photo-quote/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofOverlayPhotoQuote,
+  socialProofOverlayPhotoQuoteCopy,
+  type SocialProofOverlayPhotoQuoteCopy,
+  type SocialProofOverlayPhotoQuoteProps,
+  SOCIAL_PROOF_OVERLAY_PHOTO,
+} from "./SocialProofOverlayPhotoQuote"

package/registry/blocks/social-proof-persona-pillars/SocialProofPersonaPillars.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofQuote,
+  SocialProofSection,
+  stepKeys,
+  useStepper,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Persona Pillars.
+ *
+ * A centred heading over four tall pillars, one per part of the team, each a
+ * portrait with its label under it. The selected pillar is wider and holds a
+ * `primary` quote panel: the author's photo (72px), the quote and the author.
+ * Desktop: 210px pillars, the selected one 500, all 460 tall. Tablet: 120 and
+ * 300, 380 tall. Phones: the selected panel full width, the other three in a
+ * strip of 96px pillars under it.
+ *
+ * The author's photo is a photo slot, not the Avatar atom, which stops at
+ * 32px.
+ *
+ * Motion (Figma's ⚡ Motion note): selecting a pillar, by click, tap or the
+ * arrow keys within the row, makes it the active one. Manual only, with no
+ * width animation: the selected pillar takes its wider column at once, then
+ * its quote panel crossfades in (fadeIn, 180ms) and the author slides up 10px
+ * with a fade (slideUp, 180ms). Reduced motion: opacity only, 120ms. In RTL
+ * the first pillar is on the right.
+ *
+ * Figma shows the Engineers quote, Khalid Saad's. The others are quotes the
+ * people on those pillars give elsewhere in the set: Fahad Salem's from Proof
+ * Bento, Tariq Zaki's from Centered Logo Spotlight and Majed Nouri's from
+ * Case-Study Row.
+ */
+
+export interface SocialProofPersonaPillarsItem {
+  /** The part of the team, under the pillar. Up to 20 characters in English, 18 in Arabic. */
+  label: React.ReactNode
+  /** Up to 290 characters in English, 284 in Arabic. */
+  quote: React.ReactNode
+  /** The pillar's portrait and the panel's photo are `photos[author.id]`. */
+  author: SocialProofPerson
+}
+
+export interface SocialProofPersonaPillarsCopy {
+  heading: React.ReactNode
+  /** The pillars, in reading order. */
+  items: SocialProofPersonaPillarsItem[]
+}
+
+const p = (id: string, name: string, role: string): SocialProofPerson => ({ id, name, role })
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofPersonaPillarsCopy> = {
+  en: {
+    heading: "Built to power your entire team",
+    items: [
+      {
+        label: "Designers",
+        quote: "“We consolidated three design tools and an entire QA checklist into one system. Fasla is the rare platform both our brand team and our engineers call theirs.”",
+        author: p("fahad-salem", "Fahad Salem", "Brand Director, Arvenna Bank"),
+      },
+      {
+        label: "Engineers",
+        quote: "“Fasla is central to how we build — whether it's sprint UI reviews or big launches, its guardrails help engineers ship polished screens without waiting on design.”",
+        author: p("khalid-saad", "Khalid Saad", "Frontend Lead, Atlas Freight"),
+      },
+      {
+        label: "Product",
+        quote: "“Fasla turned our design language into a growth channel. Every launch ships looking exactly like us — on the first try.”",
+        author: p("tariq-zaki", "Tariq Zaki", "Head of Product, Marlow HR"),
+      },
+      {
+        label: "Marketing",
+        quote: "“Because every screen flows through one system, our patient tools adapt to what each clinic actually needs.”",
+        author: p("majed-nouri", "Majed Nouri", "COO, Arcadia Health"),
+      },
+    ],
+  },
+  ar: {
+    heading: "صُمّم ليخدم فريقك بأكمله",
+    items: [
+      {
+        label: "المصممون",
+        quote: "«دمجنا ثلاث أدوات تصميم وقائمة فحص جودة كاملة في نظام واحد. وفاصلة من المنصات النادرة التي يعدّها فريق العلامة والمهندسون أداتهم.»",
+        author: p("fahad-salem", "فهد سالم", "مدير العلامة التجارية، بنك أرفينا"),
+      },
+      {
+        label: "المهندسون",
+        quote: "«فاصلة في صميم طريقة عملنا. ففي مراجعات الواجهات خلال كل سبرنت وفي الإطلاقات الكبرى، تساعد ضوابطها المهندسين على إطلاق شاشات متقنة دون انتظار فريق التصميم.»",
+        author: p("khalid-saad", "خالد سعد", "قائد الواجهات الأمامية، أطلس فريت"),
+      },
+      {
+        label: "المنتج",
+        quote: "«جعلت فاصلة هويتنا البصرية مصدرًا للنمو، فكل إطلاق يخرج بصورتنا تمامًا من المحاولة الأولى.»",
+        author: p("tariq-zaki", "طارق زكي", "رئيس المنتج، مارلو إتش آر"),
+      },
+      {
+        label: "التسويق",
+        quote: "«لأن كل شاشة تمر عبر نظام واحد، تتكيّف أدوات المرضى لدينا مع ما تحتاجه كل عيادة فعلًا.»",
+        author: p("majed-nouri", "ماجد نوري", "الرئيس التنفيذي للعمليات، أركاديا هيلث"),
+      },
+    ],
+  },
+}
+
+export interface SocialProofPersonaPillarsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofPersonaPillarsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Portrait photos by person id. Without them the pillars show their `muted` ground. */
+  photos?: SocialProofPhotos
+  /** The selected pillar, from 0, to control the row. */
+  index?: number
+  /**
+   * The pillar selected first: Engineers, as Figma shows.
+   * @default 1
+   */
+  defaultIndex?: number
+  /** Called when a pillar is selected. */
+  onIndexChange?: (index: number) => void
+}
+
+export function SocialProofPersonaPillars({
+  locale = "en",
+  heading,
+  items,
+  photos,
+  index: indexProp,
+  defaultIndex = 1,
+  onIndexChange,
+  className,
+  ...props
+}: SocialProofPersonaPillarsProps) {
+  const copy = COPY[locale]
+  const list = items ?? copy.items
+  const headingId = React.useId()
+  const tabs = React.useRef<(HTMLButtonElement | null)[]>([])
+  const focusSelected = React.useRef(false)
+  const { ref, index, go } = useStepper<HTMLDivElement>({
+    count: list.length,
+    index: indexProp,
+    defaultIndex,
+    onIndexChange,
+    slide: false,
+    exit: false,
+  })
+  // After a key moves the selection, focus follows it to the selected pillar's label.
+  React.useEffect(() => {
+    if (!focusSelected.current) return
+    focusSelected.current = false
+    tabs.current[index]?.focus()
+  }, [index])
+  const select = (next: number) => {
+    focusSelected.current = true
+    go(next)
+  }
+  const active = list[index]
+  if (!active) return null
+
+  const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+
+  /** A pillar you can select: its portrait and its label. */
+  const pillar = (item: SocialProofPersonaPillarsItem, i: number, strip: boolean) => (
+    <button
+      key={i}
+      type="button"
+      aria-pressed={false}
+      tabIndex={-1}
+      onClick={() => go(i)}
+      className={cn(
+        "flex shrink-0 flex-col items-center gap-3 rounded-xl text-sm font-medium text-foreground",
+        focusRing,
+        strip ? "w-24" : "w-[120px] [@container(min-width:64rem)]:w-[210px]"
+      )}
+    >
+      <SocialProofPhoto
+        src={photos?.[item.author.id]}
+        className={cn("w-full rounded-xl", strip ? "h-[124px]" : "h-[380px] [@container(min-width:64rem)]:h-[460px]")}
+      />
+      <Isolated>{item.label}</Isolated>
+    </button>
+  )
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={cn("lg:px-24", className)} contentClassName="max-w-[1248px] 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
+        role="group"
+        aria-labelledby={headingId}
+        onKeyDown={stepKeys(index, list.length, select)}
+        className="flex w-full flex-col items-center gap-5 [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-start [@container(min-width:40rem)]:gap-4 [@container(min-width:64rem)]:gap-5"
+      >
+        {list.map((item, i) =>
+          i === index ? (
+            <div key={i} className="flex w-full flex-col items-center gap-3 [@container(min-width:40rem)]:w-[300px] [@container(min-width:64rem)]:w-[500px]">
+              <div ref={ref} aria-live="polite" className="w-full">
+                <figure
+                  key={i}
+                  data-step-item="fade"
+                  className="m-0 flex min-h-[340px] w-full flex-col justify-between gap-6 rounded-xl bg-primary p-8 text-primary-foreground [@container(min-width:40rem)]:min-h-[380px] [@container(min-width:64rem)]:min-h-[460px]"
+                >
+                  <SocialProofPhoto src={photos?.[item.author.id]} className="size-[72px] shrink-0 rounded-lg bg-primary-foreground/10" />
+                  <SocialProofQuote quote={item.quote} className="text-base" />
+                  <figcaption data-step-item="slide" className="flex flex-col">
+                    <cite className="text-sm font-medium not-italic">{item.author.name}</cite>
+                    <span className="text-xs">
+                      <Isolated>{item.author.role}</Isolated>
+                    </span>
+                  </figcaption>
+                </figure>
+              </div>
+              <button
+                ref={(el) => {
+                  tabs.current[i] = el
+                }}
+                type="button"
+                aria-pressed
+                tabIndex={0}
+                className={cn("rounded-sm text-sm font-semibold text-foreground", focusRing)}
+              >
+                <Isolated>{item.label}</Isolated>
+              </button>
+            </div>
+          ) : (
+            <div key={i} className="hidden [@container(min-width:40rem)]:contents">
+              {pillar(item, i, false)}
+            </div>
+          )
+        )}
+        <div className="flex justify-center gap-3 [@container(min-width:40rem)]:hidden">
+          {list.map((item, i) => (i === index ? null : pillar(item, i, true)))}
+        </div>
+      </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 socialProofPersonaPillarsCopy = COPY

package/registry/blocks/social-proof-persona-pillars/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofPersonaPillars,
+  socialProofPersonaPillarsCopy,
+  type SocialProofPersonaPillarsCopy,
+  type SocialProofPersonaPillarsProps,
+  type SocialProofPersonaPillarsItem,
+} from "./SocialProofPersonaPillars"

package/registry/blocks/social-proof-progress-carousel/SocialProofProgressCarousel.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { Progress } from "../../ui/progress/progress"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofQuote,
+  SocialProofSection,
+  SocialProofStepper,
+  stepKeys,
+  useColumnCount,
+  useStepper,
+  useSwipeStep,
+  type SocialProofLocale,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Progress Carousel.
+ *
+ * A heading with previous and next arrows (Icon Button, Outline xs) at its
+ * end, over one customer story at a time on a `card` panel: the company in
+ * XS Bold, the quote in LG, the attribution, a link to the story, and a photo
+ * (460 by 300 on Desktop, 280 by 220 on Tablet, full width and 200 tall above
+ * the copy on phones). Under the card, the counter (01 / 04) and the Progress
+ * bar.
+ *
+ * Motion (Figma's ⚡ Motion note): the arrows step through four stories, one at
+ * a time. Manual only: no autoplay, no timer, and paging stops at the first and
+ * last story, so previous is disabled on the first and next on the last. On
+ * change the whole story panel, photo and copy, slides sideways (the `slideX`
+ * preset): the outgoing story fades and leaves 24px in 120ms, the new one
+ * fades in from the other side in 180ms. Going forward the new story arrives
+ * from the end side, so from the right in LTR; in RTL it is mirrored, from the
+ * left, and previous is the opposite. On phones the photo comes first and the
+ * copy 60ms after it (stagger). The counter and the bar show the position: the
+ * bar moves in 25% steps, one per story, only when you navigate; it never
+ * fills over time. The arrow keys move between stories; on phones, swiping the
+ * copy also steps (toward the right is next in RTL). Reduced motion: opacity
+ * only, 120ms. In RTL the bar fills from the right and the left arrow goes to
+ * the next story.
+ *
+ * Figma shows the first story. The other three are quotes the same people
+ * give elsewhere in the set: Fahad Salem's from Bracket-Framed Quote, Adel
+ * Qasim's from Tinted-Panel Portrait and Khalid Saad's from Persona
+ * Pillars. Only the first story has a photo in Figma; the other three have
+ * `photoId`s of their own, so a `photos` map can fill them too.
+ */
+
+export interface SocialProofProgressCarouselLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface SocialProofProgressCarouselItem {
+  /** The company, above the quote. Up to 20 characters. */
+  company: React.ReactNode
+  /** Up to 290 characters in English, 284 in Arabic. */
+  quote: React.ReactNode
+  /** The author and role, under the quote. Up to 48 characters in English, 50 in Arabic. */
+  attribution: React.ReactNode
+  /** The key in `photos` for the story's photo. Without one the slot is empty. */
+  photoId?: string
+  /** The link to the full story. Hidden when empty. Up to 25 characters in English, 26 in Arabic. */
+  link?: SocialProofProgressCarouselLink | null
+}
+
+export interface SocialProofProgressCarouselCopy {
+  heading: React.ReactNode
+  /** The stories, in order. Four, as Figma's counter counts them. */
+  items: SocialProofProgressCarouselItem[]
+}
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofProgressCarouselCopy> = {
+  en: {
+    heading: "Why leading teams trust Fasla",
+    items: [
+      {
+        company: "BEACON ANALYTICS",
+        quote: "“The team at Fasla has made foundational contributions to how we build product. Their system helps us harness design at enterprise scale — automate the routine, accelerate the rest.”",
+        attribution: "— Bader Al-Ghamdi, Chief Technology Officer",
+        photoId: "progress-carousel-1",
+        link: { label: "Read the story", href: "#" },
+      },
+      {
+        company: "ARVENNA BANK",
+        quote: "“I've found Fasla to be a genuinely valuable thought partner. The relationship is as much about how we execute near-term as it is about where design is going.”",
+        attribution: "— Fahad Salem, Brand Director",
+        photoId: "progress-carousel-2",
+        link: { label: "Read the story", href: "#" },
+      },
+      {
+        company: "FORMA STUDIO",
+        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.”",
+        attribution: "— Adel Qasim, Director of Brand Design",
+        photoId: "progress-carousel-3",
+        link: { label: "Read the story", href: "#" },
+      },
+      {
+        company: "ATLAS FREIGHT",
+        quote: "“Fasla is central to how we build — whether it's sprint UI reviews or big launches, its guardrails help engineers ship polished screens without waiting on design.”",
+        attribution: "— Khalid Saad, Frontend Lead",
+        photoId: "progress-carousel-4",
+        link: { label: "Read the story", href: "#" },
+      },
+    ],
+  },
+  ar: {
+    heading: "سرّ ثقة الفرق الرائدة بفاصلة",
+    items: [
+      {
+        company: "بيكون أناليتكس",
+        quote: "«أسهم فريق فاصلة إسهامًا أساسيًا في طريقة بنائنا للمنتج، ونظامهم يعيننا على إدارة التصميم على مستوى المؤسسة: نؤتمت المتكرر ونسرّع الباقي.»",
+        attribution: "بدر الغامدي، الرئيس التقني",
+        photoId: "progress-carousel-1",
+        link: { label: "اقرأ القصة", href: "#" },
+      },
+      {
+        company: "بنك أرفينا",
+        quote: "«وجدت في فاصلة شريكًا نتبادل معه الأفكار بحق، فعلاقتنا تشمل طريقة تنفيذنا اليوم بقدر ما تشمل مستقبل التصميم.»",
+        attribution: "فهد سالم، مدير العلامة التجارية",
+        photoId: "progress-carousel-2",
+        link: { label: "اقرأ القصة", href: "#" },
+      },
+      {
+        company: "فورما ستوديو",
+        quote: "«غيّرت فاصلة كل شيء. صرنا نبني تمامًا ما يصممه فريقي، بكسلًا بكسل. وامتلاك هذه القوة والمرونة بين أيدينا غيّر طريقة تفكيرنا كلها.»",
+        attribution: "عادل قاسم، مدير تصميم العلامة",
+        photoId: "progress-carousel-3",
+        link: { label: "اقرأ القصة", href: "#" },
+      },
+      {
+        company: "أطلس فريت",
+        quote: "«فاصلة في صميم طريقة عملنا. ففي مراجعات الواجهات خلال كل سبرنت وفي الإطلاقات الكبرى، تساعد ضوابطها المهندسين على إطلاق شاشات متقنة دون انتظار فريق التصميم.»",
+        attribution: "خالد سعد، قائد الواجهات الأمامية",
+        photoId: "progress-carousel-4",
+        link: { label: "اقرأ القصة", href: "#" },
+      },
+    ],
+  },
+}
+
+/** The counter, as Figma writes it: two digits each side, `01 / 04`. */
+const counter = (index: number, count: number) => `${String(index + 1).padStart(2, "0")} / ${String(count).padStart(2, "0")}`
+
+export interface SocialProofProgressCarouselProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofProgressCarouselCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Story photos by `photoId`. Without one a story's photo slot is empty. */
+  photos?: SocialProofPhotos
+  /** The story shown, from 0, to control the carousel. */
+  index?: number
+  /** Called when the arrows, keys or a swipe change the story. */
+  onIndexChange?: (index: number) => void
+}
+
+export function SocialProofProgressCarousel({
+  locale = "en",
+  heading,
+  items,
+  photos,
+  index: indexProp,
+  onIndexChange,
+  className,
+  ...props
+}: SocialProofProgressCarouselProps) {
+  const copy = COPY[locale]
+  const list = items ?? copy.items
+  const headingId = React.useId()
+  const storyId = React.useId()
+  const [sizeRef, columns] = useColumnCount<HTMLDivElement>(2)
+  const { ref, index, go } = useStepper<HTMLDivElement>({ count: list.length, index: indexProp, onIndexChange, stagger: columns === 1, axis: "x" })
+  const swipe = useSwipeStep((delta) => go(index + delta))
+  const story = list[index]
+  if (!story) return null
+
+  return (
+    <SocialProofSection
+      labelledBy={headingId}
+      aria-roledescription="carousel"
+      className={className}
+      contentClassName="items-stretch gap-8"
+      onKeyDown={stepKeys(index, list.length, go)}
+      {...props}
+    >
+      <div ref={sizeRef} className="flex w-full items-center justify-between gap-6">
+        <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+          <Isolated>{heading ?? copy.heading}</Isolated>
+        </h2>
+        <SocialProofStepper index={index} count={list.length} onIndexChange={go} locale={locale} variant="outline" controls={storyId} className="shrink-0" />
+      </div>
+      <div
+        ref={ref}
+        id={storyId}
+        role="group"
+        aria-roledescription="slide"
+        aria-label={counter(index, list.length)}
+        aria-live="polite"
+        tabIndex={0}
+        className="flex flex-col gap-6 rounded-xl bg-card p-10 ring-1 ring-inset ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring forced-colors:border [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-10"
+        {...swipe}
+      >
+        <SocialProofPhoto
+          key={`photo-${index}`}
+          data-step-item="fade"
+          src={story.photoId ? photos?.[story.photoId] : undefined}
+          className="h-[200px] w-full shrink-0 rounded-lg [@container(min-width:40rem)]:order-last [@container(min-width:40rem)]:h-[220px] [@container(min-width:40rem)]:w-[280px] [@container(min-width:64rem)]:h-[300px] [@container(min-width:64rem)]:w-[460px]"
+        />
+        <figure key={`story-${index}`} data-step-item="slide" className="m-0 flex min-w-0 flex-1 flex-col gap-5">
+          <p className="text-xs font-bold text-foreground">
+            <Isolated>{story.company}</Isolated>
+          </p>
+          <SocialProofQuote quote={story.quote} className="text-lg text-foreground" />
+          <figcaption className="flex flex-col gap-5">
+            <span className="text-sm text-muted-foreground">
+              <Isolated>{story.attribution}</Isolated>
+            </span>
+            {story.link ? (
+              <a
+                href={story.link.href}
+                className="inline-flex items-center gap-1.5 self-start rounded-sm text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <Isolated>{story.link.label}</Isolated>
+                <ArrowRight aria-hidden size={16} className="rtl:rotate-180" />
+              </a>
+            ) : null}
+          </figcaption>
+        </figure>
+      </div>
+      <div className="flex w-full items-center gap-5">
+        <span aria-hidden className="shrink-0 text-sm font-medium text-foreground">
+          <bdi dir="ltr">{counter(index, list.length)}</bdi>
+        </span>
+        <Progress value={((index + 1) / list.length) * 100} size="sm" showPercentage={false} aria-label={counter(index, list.length)} className="flex-1" />
+      </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 socialProofProgressCarouselCopy = COPY

package/registry/blocks/social-proof-progress-carousel/index.ts

@@ -0,0 +1,8 @@
+export {
+  SocialProofProgressCarousel,
+  socialProofProgressCarouselCopy,
+  type SocialProofProgressCarouselCopy,
+  type SocialProofProgressCarouselProps,
+  type SocialProofProgressCarouselItem,
+  type SocialProofProgressCarouselLink,
+} from "./SocialProofProgressCarousel"