@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/logo-cloud-dark-logo-wall/LogoCloudDarkLogoWall.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Dark Logo Wall.
+ *
+ * A centred heading and line of text over a grid of marks, on an inverted
+ * band: dark in Light, light in Dark. Four marks across on a desktop, three
+ * on a tablet and two on a phone.
+ *
+ * The band is painted with the inverse tokens, the only way Fasla inverts a
+ * surface, so it never forces a `.dark` or `.light` class and never borrows
+ * `bg-foreground`. The theme-inverse registry item maps the tokens. Each
+ * mark's slot is coloured `foreground-inverse`, so a mark drawn in
+ * `currentColor` (Figma's Monochrome) follows the band. A mark in its brand
+ * colours would fight the band, and near-black ones would vanish on it.
+ *
+ * The grid fills in reading order, so in Arabic the first mark sits at the
+ * right of the first row, as Figma's RTL variants place it, with the same
+ * list of logos. The marks themselves are never mirrored.
+ *
+ * No logos come with the block: pass `logos`. Until then each cell shows a
+ * placeholder of a mark's size.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudDarkLogoWallLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`, drawn in `currentColor`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudDarkLogoWallCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. Hidden when null. */
+  description: React.ReactNode | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudDarkLogoWallCopy> = {
+  en: {
+    heading: "From startups to enterprises",
+    description: "Thousands of teams run their product work on Fasla.",
+  },
+  ar: {
+    heading: "من الشركات الناشئة إلى المؤسسات الكبرى",
+    description: "آلاف الفرق تدير عمل منتجاتها على فاصلة.",
+  },
+}
+
+/** How many cells Figma draws, and so how many placeholders show without logos. */
+const PLACEHOLDERS = 12
+
+export interface LogoCloudDarkLogoWallProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudDarkLogoWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order: each a `name` and a `logo` drawn in
+   * `currentColor`. None by default: each cell shows a placeholder.
+   * @default none: placeholders
+   */
+  logos?: LogoCloudDarkLogoWallLogo[]
+}
+
+export function LogoCloudDarkLogoWall({
+  locale = "en",
+  heading,
+  description,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudDarkLogoWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const text = description === undefined ? copy.description : description
+  const cells = logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+
+  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-14">
+        <header className="flex flex-col gap-3 text-center">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground-inverse md:text-3xl lg:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+          {text ? <p className="text-base text-muted-foreground-inverse">{text}</p> : null}
+        </header>
+        <ul className="grid grid-cols-2 gap-x-6 gap-y-8 md:grid-cols-3 lg:grid-cols-4">
+          {cells.map((item, index) => (
+            <li key={index} className="flex px-2 h-[68px] min-w-0 items-center justify-center md:h-[60px] lg:h-16">
+              {item ? (
+                <>
+                  <span className="sr-only">{item.name}</span>
+                  <span
+                    aria-hidden="true"
+                    className="flex h-5 max-w-[min(88px,100%)] items-center justify-center text-foreground-inverse md:h-6 md:max-w-[min(100px,100%)] lg:h-7 lg:max-w-[min(110px,100%)] [&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+                  >
+                    {item.logo}
+                  </span>
+                </>
+              ) : (
+                <span aria-hidden="true" className="h-5 w-20 max-w-full rounded-md bg-muted-foreground-inverse opacity-25 md:h-6 md:w-24 lg:h-7" />
+              )}
+            </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 logoCloudDarkLogoWallCopy = COPY

package/registry/blocks/logo-cloud-dark-logo-wall/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudDarkLogoWall,
+  logoCloudDarkLogoWallCopy,
+  type LogoCloudDarkLogoWallCopy,
+  type LogoCloudDarkLogoWallLogo,
+  type LogoCloudDarkLogoWallProps,
+} from "./LogoCloudDarkLogoWall"

package/registry/blocks/logo-cloud-divider-rule-row/LogoCloudDividerRuleRow.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Divider Rule Row.
+ *
+ * A centred heading over the marks in a ruled band, on an inverted surface:
+ * dark in Light, light in Dark. The surface is painted with the inverse
+ * tokens, the only way Fasla inverts a surface, so it never forces a `.dark`
+ * or `.light` class and never borrows `bg-foreground`. The theme-inverse
+ * registry item maps the tokens.
+ *
+ * The heading is Figma's 4XL style at every breakpoint: its size steps down
+ * on smaller screens, but its line height stays the 4XL rung's (44px, 60px
+ * in Arabic), read from the type ramp so it follows the direction. `md:`
+ * repeats it because `md:text-3xl` would otherwise bring its own.
+ *
+ * Rules run above and below the band, with a hairline between cells. On
+ * Desktop the cells share one row; on Tablet they run three to a row, a
+ * shorter last row splitting the width between its cells; on a phone they
+ * stack, one mark to a row. The marks take the inverse foreground, so pass
+ * them monochrome (drawn in `currentColor`): full-colour marks lose their
+ * dark parts on the dark band.
+ *
+ * The rules between cells are logical (`border-s`), so `dir="rtl"` on the
+ * page starts the row on the right, as Figma's RTL variants do. The marks
+ * are never mirrored.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudDividerRuleRowLogo {
+  /** 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 cell, keeping
+   * its proportions, and gives it the inverse foreground as `currentColor`.
+   */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudDividerRuleRowCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudDividerRuleRowCopy> = {
+  en: {
+    // Figma breaks the line after "work". On a phone that leaves "work" alone on its line, so
+    // the break starts at Tablet and the phone wraps on its own.
+    heading: (
+      <>
+        See how our customers work
+        <br className="hidden md:inline" /> with us to build trust.
+      </>
+    ),
+  },
+  ar: {
+    heading: (
+      <>
+        اطّلع على كيفية عمل عملائنا
+        <br /> معنا لبناء الثقة.
+      </>
+    ),
+  },
+}
+
+/** How many marks Figma shows: the number of placeholder cells when no logos are passed. */
+const PLACEHOLDERS = 5
+
+/** Cells per row on Tablet. */
+const TABLET_ROW = 3
+
+export interface LogoCloudDividerRuleRowProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudDividerRuleRowCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order. Each has a `name` and a `logo`; pass
+   * monochrome marks. None by default: each cell shows a placeholder.
+   * @default none: placeholders
+   */
+  logos?: LogoCloudDividerRuleRowLogo[]
+}
+
+export function LogoCloudDividerRuleRow({ locale = "en", heading, logos = [], className, ...props }: LogoCloudDividerRuleRowProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const count = logos.length > 0 ? logos.length : PLACEHOLDERS
+
+  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-14">
+        <h2
+          id={headingId}
+          className="mx-auto max-w-[640px] text-balance text-center text-2xl font-semibold leading-[calc(var(--leading-4xl)*2.25rem)] text-foreground-inverse md:text-3xl md:leading-[calc(var(--leading-4xl)*2.25rem)] lg:text-4xl"
+        >
+          {heading ?? copy.heading}
+        </h2>
+
+        {/* `-my-px`: the rules above and below take no height, as Figma draws them inside the band. */}
+        <ul className="-my-px flex flex-col border-y border-muted-foreground-inverse md:flex-row md:flex-wrap lg:flex-nowrap">
+          {Array.from({ length: count }, (_, index) => {
+            const logo = logos[index]
+            return (
+              <li
+                key={index}
+                aria-hidden={logo ? undefined : true}
+                className={cn(
+                  "flex h-[72px] min-w-0 items-center justify-center border-muted-foreground-inverse md:h-24 md:grow md:basis-1/3 lg:basis-0",
+                  // Phone: a rule above every cell but the first.
+                  index > 0 && "border-t",
+                  // Tablet: a rule above every row but the first, and between the cells of a row.
+                  index < TABLET_ROW ? "md:border-t-0" : "md:border-t",
+                  index % TABLET_ROW > 0 && "md:border-s",
+                  // Desktop: one row, a rule between the cells.
+                  "lg:border-t-0",
+                  index > 0 ? "lg:border-s" : "lg:border-s-0"
+                )}
+              >
+                {logo ? (
+                  <>
+                    <span className="sr-only">{logo.name}</span>
+                    <span
+                      aria-hidden="true"
+                      className="flex h-5 max-w-[88px] items-center text-foreground-inverse md:h-6 md:max-w-[100px] lg:h-7 lg:max-w-[110px] [&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+                    >
+                      {logo.logo}
+                    </span>
+                  </>
+                ) : (
+                  <span className="h-5 w-16 rounded-md bg-muted-foreground-inverse opacity-40 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 logoCloudDividerRuleRowCopy = COPY

package/registry/blocks/logo-cloud-divider-rule-row/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudDividerRuleRow,
+  logoCloudDividerRuleRowCopy,
+  type LogoCloudDividerRuleRowCopy,
+  type LogoCloudDividerRuleRowLogo,
+  type LogoCloudDividerRuleRowProps,
+} from "./LogoCloudDividerRuleRow"

package/registry/blocks/logo-cloud-editorial-eyebrow-split/LogoCloudEditorialEyebrowSplit.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Editorial Eyebrow Split.
+ *
+ * An editorial intro, then a hairline, then the marks. On Desktop the intro
+ * is split: a short eyebrow in a fixed column at the start and a larger
+ * sentence beside it, and the marks spread across one row from edge to edge.
+ * From Tablet down the eyebrow sits above the sentence, and the marks centre
+ * in rows of three (Tablet, and from `sm:` on a wide phone) or two (Mobile).
+ *
+ * There is no heading: the eyebrow names the section. Figma draws the
+ * hairline with its Separator component; the code registry has no Separator
+ * yet, so it is an `hr` in the `border` token.
+ *
+ * The rows are in DOM order, so `dir="rtl"` on the page puts the eyebrow and
+ * the first mark on the right, as Figma's RTL variants do. The marks are
+ * never mirrored.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudEditorialEyebrowSplitLogo {
+  /** 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 LogoCloudEditorialEyebrowSplitCopy {
+  /** The short label at the start of the intro. It names the section. */
+  eyebrow: React.ReactNode
+  /** The larger sentence beside the eyebrow: who the marks are. Hidden when null. */
+  description: React.ReactNode | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudEditorialEyebrowSplitCopy> = {
+  en: {
+    eyebrow: "Who we build for",
+    description: "For the teams shipping the products people use every day — and for the operators keeping them running.",
+  },
+  ar: {
+    eyebrow: "لمن نبني",
+    description: "للفرق التي تُطلق المنتجات التي يستخدمها الناس كل يوم، وللمشغّلين الذين يبقونها تعمل.",
+  },
+}
+
+/** How many marks Figma shows: the number of placeholders when no logos are passed. */
+const PLACEHOLDERS = 6
+
+export interface LogoCloudEditorialEyebrowSplitProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudEditorialEyebrowSplitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order. Each has a `name` and a `logo`. None by
+   * default: each slot shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudEditorialEyebrowSplitLogo[]
+}
+
+export function LogoCloudEditorialEyebrowSplit({
+  locale = "en",
+  eyebrow,
+  description,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudEditorialEyebrowSplitProps) {
+  const copy = COPY[locale]
+  const eyebrowId = React.useId()
+  const sentence = description === undefined ? copy.description : description
+
+  return (
+    <section aria-labelledby={eyebrowId} 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">
+        <div className="flex flex-col gap-4 md:gap-5 lg:flex-row lg:items-start lg:gap-20">
+          <p id={eyebrowId} className="text-sm font-medium text-foreground lg:w-60 lg:shrink-0">
+            {eyebrow ?? copy.eyebrow}
+          </p>
+          {sentence ? <p className="text-lg text-muted-foreground lg:max-w-[560px]">{sentence}</p> : null}
+        </div>
+
+        <hr className="border-border" />
+
+        <ul className="grid grid-cols-[repeat(2,auto)] justify-center gap-6 sm:grid-cols-[repeat(3,auto)] md:gap-x-10 md:gap-y-8 lg:flex lg:items-center lg:justify-between lg:gap-10 lg:py-8">
+          {logos.length > 0
+            ? logos.map((logo, index) => (
+                <li key={index} className="flex items-center justify-center">
+                  <span className="sr-only">{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"
+                  >
+                    {logo.logo}
+                  </span>
+                </li>
+              ))
+            : Array.from({ length: PLACEHOLDERS }, (_, index) => (
+                <li key={index} aria-hidden="true" className="flex items-center justify-center">
+                  <span className="h-5 w-16 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 logoCloudEditorialEyebrowSplitCopy = COPY

package/registry/blocks/logo-cloud-editorial-eyebrow-split/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudEditorialEyebrowSplit,
+  logoCloudEditorialEyebrowSplitCopy,
+  type LogoCloudEditorialEyebrowSplitCopy,
+  type LogoCloudEditorialEyebrowSplitLogo,
+  type LogoCloudEditorialEyebrowSplitProps,
+} from "./LogoCloudEditorialEyebrowSplit"

package/registry/blocks/logo-cloud-enterprise-wall/LogoCloudEnterpriseWall.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Enterprise Wall.
+ *
+ * A centred heading over a dense wall of marks: the one layout built for the
+ * full 24, for a brand with many customers to show.
+ *
+ * Desktop sets the marks six to a row, Tablet three and Mobile two, each
+ * centred in a cell 48px tall on Desktop, 52px on Tablet and 56px on Mobile,
+ * 40px between rows. Each mark sits in a slot as tall as Figma's (28, 24,
+ * 20px) and no wider than its cap (110, 100, 88px), so wide wordmarks such as
+ * Oracle or Samsung come out shorter than square ones, as in Figma.
+ *
+ * The marks come in through `logos`, in reading order; the page's `dir` sets
+ * which side the first one starts on, and the marks themselves are never
+ * flipped. Without logos each cell shows a `muted` placeholder.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudEnterpriseWallLogo {
+  /** 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 LogoCloudEnterpriseWallCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudEnterpriseWallCopy> = {
+  en: {
+    heading: "Built for teams large and small",
+  },
+  ar: {
+    heading: "مصمَّم للفرق الكبيرة والصغيرة",
+  },
+}
+
+/** Figma's count of marks, the number of placeholders shown without logos. */
+const PLACEHOLDERS = 24
+
+/** The slot a mark sits in: Figma's height at each breakpoint, and its width cap. */
+const SLOT =
+  "flex h-5 items-center md:h-6 lg:h-7 [&>*]:h-full [&>*]:w-auto [&>*]:max-w-[88px] md:[&>*]:max-w-[100px] lg:[&>*]:max-w-[110px] [&>img]:object-contain"
+
+export interface LogoCloudEnterpriseWallProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudEnterpriseWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order. Each has the company's `name` and its `logo`.
+   * None by default: each cell shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudEnterpriseWallLogo[]
+}
+
+export function LogoCloudEnterpriseWall({
+  locale = "en",
+  heading,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudEnterpriseWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const slots = 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-14">
+        <h2 id={headingId} className="text-center text-2xl font-semibold text-foreground md:text-3xl lg:text-4xl">
+          {heading ?? copy.heading}
+        </h2>
+
+        <ul
+          aria-hidden={logos.length === 0 || undefined}
+          className="grid grid-cols-2 gap-x-4 gap-y-10 text-muted-foreground md:grid-cols-3 lg:grid-cols-6"
+        >
+          {slots.map((logo, index) => (
+            <li key={index} className="flex h-14 min-w-0 items-center justify-center md:h-[52px] lg:h-12">
+              {logo ? (
+                <>
+                  <span className="sr-only">{logo.name}</span>
+                  <span aria-hidden="true" className={SLOT}>
+                    {logo.logo}
+                  </span>
+                </>
+              ) : (
+                <span className="block h-5 w-16 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 logoCloudEnterpriseWallCopy = COPY

package/registry/blocks/logo-cloud-enterprise-wall/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudEnterpriseWall,
+  logoCloudEnterpriseWallCopy,
+  type LogoCloudEnterpriseWallCopy,
+  type LogoCloudEnterpriseWallLogo,
+  type LogoCloudEnterpriseWallProps,
+} from "./LogoCloudEnterpriseWall"