@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/logo-cloud-logo-metric-tiles/LogoCloudLogoMetricTiles.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Logo Metric Tiles.
+ *
+ * A heading and a line of text, then a grid of cards, each pairing a mark
+ * with one figure: the mark at the top, a hairline under it, the figure in
+ * display type and what it measures. The figures name no company: the
+ * marks are real ones, and the pairing is the example's, not a claim.
+ *
+ * One column on a phone, two from Tablet and three at Desktop. The mark
+ * steps from 20 to 28px tall and the figure from `text-xl` to `text-3xl`.
+ *
+ * Figma draws the hairline with its Separator component; the code registry
+ * has no Separator, so it is an `hr` in the `border` token. Each card's
+ * content starts at the start edge, so in Arabic it sits on the right. The
+ * marks are never mirrored. A figure with no Arabic in it keeps Geist and the
+ * English line height in Arabic, as Figma's RTL variants set it.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudLogoMetricTilesLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudLogoMetricTilesTile {
+  /** The figure, in display type. */
+  value: React.ReactNode
+  /** What the figure measures. */
+  label: React.ReactNode
+  /** The mark the figure sits under. Without it, the card shows a `muted` placeholder of a mark's size. */
+  logo?: LogoCloudLogoMetricTilesLogo
+}
+
+export interface LogoCloudLogoMetricTilesCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. Hidden when null. */
+  description: React.ReactNode
+  /** The cards, in order. Each has a `value`, a `label` and the `logo` it pairs with. */
+  tiles: LogoCloudLogoMetricTilesTile[]
+}
+
+/** Figma's copy, English and Arabic. No tile carries a mark: pass them in `tiles`. */
+const COPY: Record<"en" | "ar", LogoCloudLogoMetricTilesCopy> = {
+  en: {
+    heading: "The numbers behind the logos",
+    description: "What changed for teams in their first year on Fasla.",
+    tiles: [
+      { value: "+38%", label: "faster design-to-dev handoff" },
+      { value: "2.4×", label: "more components reused per release" },
+      { value: "−61%", label: "time spent on spec rework" },
+      { value: "11 days", label: "saved per launch cycle" },
+      { value: "99.98%", label: "uptime across audit workflows" },
+      { value: "4,200", label: "design tokens kept in sync" },
+    ],
+  },
+  ar: {
+    heading: "الأرقام خلف الشعارات",
+    description: "ما الذي تغيّر للفرق في عامها الأول على فاصلة.",
+    tiles: [
+      { value: "+38%", label: "تسليم أسرع من التصميم إلى التطوير" },
+      { value: "2.4×", label: "مكوّنات مُعاد استخدامها في كل إصدار" },
+      { value: "−61%", label: "من الوقت المُنفَق على إعادة صياغة المواصفات" },
+      {
+        value: (
+          <>
+            <bdi dir="ltr">11</bdi> يومًا
+          </>
+        ),
+        label: "مُوفَّرة في كل دورة إطلاق",
+      },
+      { value: "99.98%", label: "جاهزية عبر مسارات التدقيق" },
+      { value: "4,200", label: "رمز تصميم مُتزامن" },
+    ],
+  },
+}
+
+/** Arabic letters. Text without any is Latin: a figure or a brand name. */
+const ARABIC = /[\u0600-\u06FF]/
+
+export interface LogoCloudLogoMetricTilesProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudLogoMetricTilesCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function LogoCloudLogoMetricTiles({
+  locale = "en",
+  heading,
+  description,
+  tiles,
+  className,
+  ...props
+}: LogoCloudLogoMetricTilesProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const text = description === undefined ? copy.description : description
+  const list = tiles ?? copy.tiles
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-12">
+        <header className="flex flex-col gap-3">
+          <h2 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl lg:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+          {text ? <p className="text-base text-muted-foreground">{text}</p> : null}
+        </header>
+
+        {list.length > 0 ? (
+          <ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {list.map((tile, index) => (
+              <li key={index} className="flex flex-col gap-5 rounded-lg bg-card p-8 ring-1 ring-inset ring-border forced-colors:border">
+                {tile.logo ? (
+                  <>
+                    <span className="sr-only">{tile.logo.name}</span>
+                    <span
+                      aria-hidden="true"
+                      className="flex h-5 max-w-[88px] items-center text-muted-foreground md:h-6 md:max-w-[100px] lg:h-7 lg:max-w-[110px] [&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+                    >
+                      {tile.logo.logo}
+                    </span>
+                  </>
+                ) : (
+                  <span aria-hidden="true" className="h-5 w-[72px] rounded-md bg-muted md:h-6 md:w-20 lg:h-7 lg:w-24" />
+                )}
+                <hr className="border-border" />
+                {typeof tile.value === "string" && !ARABIC.test(tile.value) ? (
+                  <p className="font-sans text-xl font-semibold leading-7 text-card-foreground md:text-2xl md:leading-8 lg:text-3xl lg:leading-10">
+                    <bdi dir="ltr">{tile.value}</bdi>
+                  </p>
+                ) : (
+                  <p className="text-xl font-semibold text-card-foreground md:text-2xl lg:text-3xl">{tile.value}</p>
+                )}
+                <p className="text-sm text-muted-foreground">{tile.label}</p>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudLogoMetricTilesCopy = COPY

package/registry/blocks/logo-cloud-logo-metric-tiles/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudLogoMetricTiles,
+  logoCloudLogoMetricTilesCopy,
+  type LogoCloudLogoMetricTilesCopy,
+  type LogoCloudLogoMetricTilesLogo,
+  type LogoCloudLogoMetricTilesProps,
+  type LogoCloudLogoMetricTilesTile,
+} from "./LogoCloudLogoMetricTiles"

package/registry/blocks/logo-cloud-logo-quote-cards/LogoCloudLogoQuoteCards.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from "react"
+import { Quote } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Logo Quote Cards.
+ *
+ * A heading over a grid of outlined cards, each pairing one mark with a
+ * one-line quote from that customer, all on an inverted band. The band is
+ * painted with the inverse tokens, the only way Fasla inverts a surface: dark
+ * in Light, light in Dark, never a forced `.dark` class. The theme-inverse
+ * registry item maps the tokens. The marks are meant to be single-colour,
+ * as Figma's Monochrome logos are: the slot is `foreground-inverse`, so a
+ * mark drawn in `currentColor` follows the band.
+ *
+ * Three cards to a row on Desktop, two on Tablet, one on Mobile. Cards in a
+ * row share their height; a card stretched by a longer quote beside it
+ * centres its mark, glyph and quote, as Figma's RTL variants do. The marks keep Figma's height per breakpoint (28,
+ * 24 and 20px), never past their width cap.
+ *
+ * Mirroring comes from the page's `dir`: the heading moves to the start
+ * side and the cards fill rows from it, in the same order. Marks and the
+ * quote glyph are never flipped, as in Figma's RTL variants.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudLogoQuoteCardsLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudLogoQuoteCardsItem {
+  /** One line from the customer. Keep it unattributed unless the company said it. */
+  quote: React.ReactNode
+  /** The customer's mark, above the quote. Without one the slot shows a placeholder. */
+  logo?: LogoCloudLogoQuoteCardsLogo
+}
+
+export interface LogoCloudLogoQuoteCardsCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when `null`. */
+  description: React.ReactNode
+  /** The cards, in reading order. Each has a `quote` and an optional `logo`: `{ name, logo }`. */
+  quotes: LogoCloudLogoQuoteCardsItem[]
+  /** Shown in place of the cards when `quotes` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. Figma's marks are added by the page: see `quotes`. */
+const COPY: Record<"en" | "ar", LogoCloudLogoQuoteCardsCopy> = {
+  en: {
+    heading: "Customers",
+    description: "Join the teams building their product systems with Fasla.",
+    quotes: [
+      { quote: "We shortened processes that used to take hours down to minutes." },
+      { quote: "Our design team is measurably twice as efficient inside Fasla." },
+      { quote: "Fasla helped us cut churn in the handoff stage almost entirely." },
+      { quote: "We finally moved off five disconnected libraries onto one." },
+      { quote: "I never have to rebuild the same table component again." },
+      { quote: "Useful for our platform team while staying easy for everyone else." },
+    ],
+    empty: "No customer quotes yet.",
+  },
+  ar: {
+    heading: "العملاء",
+    description: "انضم إلى الفرق التي تبني أنظمة منتجاتها بفاصلة.",
+    quotes: [
+      { quote: "اختصرنا عمليات كانت تستغرق ساعات إلى دقائق." },
+      { quote: "فريق التصميم لدينا أكثر كفاءة بمقدار الضعف داخل فاصلة." },
+      { quote: "ساعدتنا فاصلة على الحدّ من الهدر في مرحلة التسليم بشكل شبه كامل." },
+      { quote: "انتقلنا أخيرًا من خمس مكتبات متفرّقة إلى مكتبة واحدة." },
+      { quote: "لم أعد مضطرًا لإعادة بناء مكوّن الجدول نفسه مرة أخرى." },
+      { quote: "مفيد لفريق المنصة لدينا وسهل في الوقت نفسه على الجميع." },
+    ],
+    empty: "لا توجد اقتباسات من العملاء بعد.",
+  },
+}
+
+export interface LogoCloudLogoQuoteCardsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudLogoQuoteCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function LogoCloudLogoQuoteCards({
+  locale = "en",
+  heading,
+  description,
+  quotes,
+  empty,
+  className,
+  ...props
+}: LogoCloudLogoQuoteCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const lead = description === undefined ? copy.description : description
+  const list = quotes ?? copy.quotes
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background-inverse p-8 md:p-16 lg:p-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-12">
+        <header className="flex flex-col gap-2">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground-inverse md:text-3xl lg:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+          {lead ? <p className="text-base text-muted-foreground-inverse">{lead}</p> : null}
+        </header>
+
+        {list.length === 0 ? (
+          <p className="text-sm text-muted-foreground-inverse">{empty ?? copy.empty}</p>
+        ) : (
+          <ul className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+            {list.map((item, index) => (
+              <li key={index}>
+                <figure className="flex h-full flex-col items-center justify-center gap-5 rounded-lg p-8 text-center ring-1 ring-inset ring-muted-foreground-inverse forced-colors:border">
+                  {/* The company, read before its quote; the mark itself is hidden. */}
+                  {item.logo ? <figcaption className="sr-only">{item.logo.name}</figcaption> : null}
+                  {/* The mark's box is the width cap, and its height follows the mark's
+                      proportions up to the slot height, so a wide wordmark (Microsoft) is
+                      shorter, as Figma sizes it, and its card no taller than its neighbours.
+                      The mark is centred in the box, so the box's width never shows. */}
+                  {item.logo ? (
+                    <span
+                      aria-hidden="true"
+                      className="flex items-center justify-center text-foreground-inverse [&>*]:h-auto [&>*]:max-h-5 [&>*]:w-[88px] md:[&>*]:max-h-6 md:[&>*]:w-[100px] lg:[&>*]:max-h-7 lg:[&>*]:w-[110px] [&>img]:object-contain"
+                    >
+                      {item.logo.logo}
+                    </span>
+                  ) : (
+                    // On the inverted band a `muted` bar would glare, so the
+                    // placeholder is the band's own muted text colour, faded.
+                    <span aria-hidden="true" className="h-5 w-[72px] rounded-md bg-muted-foreground-inverse opacity-30 md:h-6 md:w-20 lg:h-7 lg:w-24" />
+                  )}
+                  <Quote aria-hidden="true" size={16} strokeWidth={1.5} absoluteStrokeWidth className="shrink-0 text-muted-foreground-inverse" />
+                  <blockquote className="text-sm text-muted-foreground-inverse">{item.quote}</blockquote>
+                </figure>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudLogoQuoteCardsCopy = COPY

package/registry/blocks/logo-cloud-logo-quote-cards/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudLogoQuoteCards,
+  logoCloudLogoQuoteCardsCopy,
+  type LogoCloudLogoQuoteCardsCopy,
+  type LogoCloudLogoQuoteCardsItem,
+  type LogoCloudLogoQuoteCardsLogo,
+  type LogoCloudLogoQuoteCardsProps,
+} from "./LogoCloudLogoQuoteCards"

package/registry/blocks/logo-cloud-logo-testimonial-strip/LogoCloudLogoTestimonialStrip.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Logo Testimonial Strip.
+ *
+ * One testimonial beside a borderless grid of marks: a heading, the quote
+ * and who said it on one side, three rows of three marks on the other.
+ *
+ * Desktop sets the testimonial in a column at the start, centred against
+ * the grid. The two share the row, the testimonial never past Figma's
+ * 560px, so at 1440 the grid takes the rest as in Figma, and on a narrower
+ * desktop the grid keeps room for its marks. Tablet stacks the testimonial
+ * over the grid, three marks to a row; Mobile keeps the stack with two to a
+ * row, and an odd last mark takes the whole row, centred. The marks keep
+ * Figma's height per breakpoint (28, 24 and 20px), never past their width
+ * cap.
+ *
+ * Mirroring comes from the page's `dir`: the testimonial moves to the start
+ * side, the avatar leads the attribution from that side, and the marks keep
+ * their order. The marks are never flipped.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudLogoTestimonialStripLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudLogoTestimonialStripAttribution {
+  /** Who said it. Also the source of the avatar's initials. */
+  name: string
+  /** Their role, under the name. */
+  role: React.ReactNode
+  /** Their photo. None by default: the avatar shows the initials of `name`. */
+  avatar?: string
+}
+
+export interface LogoCloudLogoTestimonialStripCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The testimonial under the heading. Name no company: the marks are real ones. */
+  quote: React.ReactNode
+  /** Who said it: `name`, `role` and an optional `avatar` photo. */
+  attribution: LogoCloudLogoTestimonialStripAttribution
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudLogoTestimonialStripCopy> = {
+  en: {
+    heading: "Hear what others are saying",
+    quote:
+      "Our teams love the range of building blocks — instead of settling on one rigid template, they compose the screen they actually need, and everything still matches.",
+    attribution: { name: "Mona Tarek", role: "Head of Design Systems" },
+  },
+  ar: {
+    heading: "استمع إلى ما يقوله الآخرون",
+    quote:
+      "تحب فرقنا تنوّع اللبنات. فبدلًا من الاكتفاء بقالب جامد واحد، تُركّب الشاشة التي تحتاجها فعلًا، ويبقى كل شيء متناسقًا.",
+    attribution: { name: "منى طارق", role: "رئيسة أنظمة التصميم" },
+  },
+}
+
+/** Figma's count of marks: what the grid keeps, as placeholders, while no logos are passed. */
+const PLACEHOLDERS = 9
+
+export interface LogoCloudLogoTestimonialStripProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudLogoTestimonialStripCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order: three to a row on Desktop and Tablet, two on
+   * Mobile. None by default: each of Figma's nine slots shows a `muted` placeholder.
+   * @default none: 9 `muted` placeholders
+   */
+  logos?: LogoCloudLogoTestimonialStripLogo[]
+}
+
+export function LogoCloudLogoTestimonialStrip({
+  locale = "en",
+  heading,
+  quote,
+  attribution,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudLogoTestimonialStripProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const who = attribution ?? copy.attribution
+  const cells: (LogoCloudLogoTestimonialStripLogo | null)[] =
+    logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-10 md:gap-12 lg:flex-row lg:items-center lg:gap-20">
+        <div className="flex flex-col gap-5 lg:max-w-[560px] lg:flex-1">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground">
+            {heading ?? copy.heading}
+          </h2>
+          <figure className="flex flex-col gap-5">
+            <blockquote className="text-base text-muted-foreground">{quote ?? copy.quote}</blockquote>
+            <figcaption className="flex items-center gap-3">
+              {/* The name is printed beside it, so the avatar adds nothing to read. */}
+              <Avatar
+                aria-hidden="true"
+                src={who.avatar}
+                name={who.name}
+                variant={who.avatar ? "image" : "initials"}
+                radius="rounded"
+              />
+              <div className="flex min-w-0 flex-1 flex-col">
+                <p className="text-sm font-semibold text-foreground">{who.name}</p>
+                <p className="text-xs text-muted-foreground">{who.role}</p>
+              </div>
+            </figcaption>
+          </figure>
+        </div>
+
+        <ul className="grid min-w-0 flex-1 grid-cols-2 gap-x-6 gap-y-8 md:grid-cols-3">
+          {cells.map((item, index) => (
+            <li
+              key={item ? `${item.name}-${index}` : index}
+              className="flex h-16 items-center justify-center last:odd:col-span-2 md:h-12 md:last:odd:col-span-1 lg:h-11"
+            >
+              {item ? (
+                <>
+                  <span className="sr-only">{item.name}</span>
+                  <span
+                    aria-hidden="true"
+                    className="flex h-5 max-w-[88px] items-center justify-center text-muted-foreground md:h-6 md:max-w-[100px] lg:h-7 lg:max-w-[110px] [&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+                  >
+                    {item.logo}
+                  </span>
+                </>
+              ) : (
+                <span aria-hidden="true" className="h-5 w-[72px] rounded-md bg-muted md:h-6 md:w-20 lg:h-7 lg:w-24" />
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudLogoTestimonialStripCopy = COPY

package/registry/blocks/logo-cloud-logo-testimonial-strip/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudLogoTestimonialStrip,
+  logoCloudLogoTestimonialStripCopy,
+  type LogoCloudLogoTestimonialStripAttribution,
+  type LogoCloudLogoTestimonialStripCopy,
+  type LogoCloudLogoTestimonialStripLogo,
+  type LogoCloudLogoTestimonialStripProps,
+} from "./LogoCloudLogoTestimonialStrip"