@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/logo-cloud-named-integration-cards/LogoCloudNamedIntegrationCards.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Named Integration Cards.
+ *
+ * A centred heading and line of text, then a grid of cards: each one a mark,
+ * the company's name under it and a line on what the integration does. A
+ * closing line and a button close the section.
+ *
+ * The name on each card is the mark's own `name`, so the block never spells
+ * out a brand: pass each integration its `logo`, and until then the card
+ * shows `muted` placeholders where the mark and the name go.
+ *
+ * One column on a phone, two from Tablet and four at Desktop. Cards keep
+ * their own height, as Figma's do, so a row's cards share a top edge but
+ * not a bottom one. On a phone the button spans the column.
+ *
+ * Each card's content starts at the start edge, so in Arabic it sits on the
+ * right; the header and footer are centred in both directions. 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 LogoCloudNamedIntegrationCardsLogo {
+  /** The company's name, shown as the card's title. The mark itself is hidden from screen readers. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudNamedIntegrationCardsIntegration {
+  /** What the integration does, in one line. */
+  description: React.ReactNode
+  /** The company's mark and name. Without it, the card shows `muted` placeholders in their place. */
+  logo?: LogoCloudNamedIntegrationCardsLogo
+}
+
+export interface LogoCloudNamedIntegrationCardsAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface LogoCloudNamedIntegrationCardsCopy {
+  /** 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 `description` and the `logo` it describes. */
+  integrations: LogoCloudNamedIntegrationCardsIntegration[]
+  /** The line above the button. Hidden when null. */
+  closing: React.ReactNode
+  /** The solid button under the cards: where the full list lives. Hidden when null. */
+  action: LogoCloudNamedIntegrationCardsAction | null
+}
+
+/** Figma's copy, English and Arabic. No integration carries a mark: pass them in `integrations`. */
+const COPY: Record<"en" | "ar", LogoCloudNamedIntegrationCardsCopy> = {
+  en: {
+    heading: "Integrated like no other tool",
+    description: "Bring the tools your team already relies on straight into Fasla.",
+    integrations: [
+      { description: "Live product metrics beside every spec" },
+      { description: "Two-way sync for shapes and tokens" },
+      { description: "Shipment tracking pinned to release notes" },
+      { description: "Command-palette search across all files" },
+      { description: "People data mapped to project roles" },
+      { description: "Field notes captured straight into tickets" },
+      { description: "Award-winning audit trail for every change" },
+      { description: "Growth dashboards embedded in reviews" },
+    ],
+    closing: "Choose from hundreds more in the Fasla integrations gallery.",
+    action: { label: "Explore integrations", href: "#integrations" },
+  },
+  ar: {
+    heading: "تكامل لا تجده في أي أداة أخرى",
+    description: "اجلب الأدوات التي يعتمد عليها فريقك مباشرة إلى فاصلة.",
+    integrations: [
+      { description: "مؤشرات منتج حيّة بجانب كل مواصفة" },
+      { description: "مزامنة ثنائية الاتجاه للأشكال والرموز" },
+      { description: "تتبّع الشحنات مثبّت على ملاحظات الإصدار" },
+      { description: "بحث بلوحة الأوامر عبر جميع الملفات" },
+      { description: "بيانات الأفراد مرتبطة بأدوار المشروع" },
+      { description: "ملاحظات ميدانية تُسجَّل مباشرة في التذاكر" },
+      { description: "سجل تدقيق حائز على جوائز لكل تغيير" },
+      { description: "لوحات نمو مدمجة في المراجعات" },
+    ],
+    closing: "اختر من مئات أخرى في معرض تكاملات فاصلة.",
+    action: { label: "استكشف التكاملات", href: "#integrations" },
+  },
+}
+
+/** Arabic letters. A name without any is Latin, and keeps Geist in Arabic, as Figma sets it. */
+const ARABIC = /[\u0600-\u06FF]/
+
+export interface LogoCloudNamedIntegrationCardsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudNamedIntegrationCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function LogoCloudNamedIntegrationCards({
+  locale = "en",
+  heading,
+  description,
+  integrations,
+  closing,
+  action,
+  className,
+  ...props
+}: LogoCloudNamedIntegrationCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const text = description === undefined ? copy.description : description
+  const list = integrations ?? copy.integrations
+  const footnote = closing === undefined ? copy.closing : closing
+  const button = action === undefined ? copy.action : action
+
+  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 text-center">
+          <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 items-start gap-5 md:grid-cols-2 lg:grid-cols-4">
+            {list.map((integration, index) => (
+              <li key={index} className="flex flex-col gap-4 rounded-lg bg-card p-6 ring-1 ring-inset ring-border forced-colors:border">
+                {integration.logo ? (
+                  <>
+                    <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"
+                    >
+                      {integration.logo.logo}
+                    </span>
+                    {ARABIC.test(integration.logo.name) ? (
+                      <h3 className="text-base font-semibold text-card-foreground">{integration.logo.name}</h3>
+                    ) : (
+                      <h3 className="font-sans text-base font-semibold leading-6 text-card-foreground">
+                        <bdi dir="ltr">{integration.logo.name}</bdi>
+                      </h3>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <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" />
+                    <span aria-hidden="true" className="h-6 w-20 rounded-md bg-muted" />
+                  </>
+                )}
+                <p className="text-sm text-muted-foreground">{integration.description}</p>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        {footnote || button ? (
+          <footer className="flex flex-col items-center gap-3 text-center">
+            {footnote ? <p className="text-sm text-muted-foreground">{footnote}</p> : null}
+            {button ? (
+              <a href={button.href} className={buttonVariants({ className: "w-full md:w-auto" })}>
+                {button.label}
+              </a>
+            ) : null}
+          </footer>
+        ) : 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 logoCloudNamedIntegrationCardsCopy = COPY

package/registry/blocks/logo-cloud-named-integration-cards/index.ts

@@ -0,0 +1,9 @@
+export {
+  LogoCloudNamedIntegrationCards,
+  logoCloudNamedIntegrationCardsCopy,
+  type LogoCloudNamedIntegrationCardsAction,
+  type LogoCloudNamedIntegrationCardsCopy,
+  type LogoCloudNamedIntegrationCardsIntegration,
+  type LogoCloudNamedIntegrationCardsLogo,
+  type LogoCloudNamedIntegrationCardsProps,
+} from "./LogoCloudNamedIntegrationCards"

package/registry/blocks/logo-cloud-pyramid-row-stack/LogoCloudPyramidRowStack.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Pyramid Row Stack.
+ *
+ * A one-line caption over the marks in centred rows that narrow as they go
+ * down, like an upturned pyramid. Figma's seventeen marks run 8, 6, 3 on
+ * Desktop, 4, 4, 4, 3, 2 on Tablet and two to a row on a phone. Any other
+ * number keeps the shape: the rows follow the same narrowing sizes, and
+ * marks past their total add full rows at the top.
+ *
+ * Each breakpoint has its own row breaks, so the list is laid out once per
+ * breakpoint and only that one is shown; the other two are `display: none`,
+ * out of the accessibility tree. Tablet's rows of four start at `sm:` (640),
+ * where four phone-sized marks already fit, so a wide phone is not a tall
+ * column of pairs.
+ *
+ * There is no heading: the caption names the section. The rows are in DOM
+ * order, so `dir="rtl"` on the page starts each 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 LogoCloudPyramidRowStackLogo {
+  /** 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 LogoCloudPyramidRowStackCopy {
+  /** The one line above the marks. It names the section. */
+  caption: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudPyramidRowStackCopy> = {
+  en: {
+    caption: "Trusted by 500,000 leading teams",
+  },
+  ar: {
+    caption: (
+      <>
+        موثوق به لدى <bdi dir="ltr">500,000</bdi> فريق رائد
+      </>
+    ),
+  },
+}
+
+/** How many marks Figma shows: the number of placeholders when no logos are passed. */
+const PLACEHOLDERS = 17
+
+/** Each breakpoint's row sizes, top to bottom, from Figma's 17 marks. */
+const ROWS = {
+  mobile: [2],
+  tablet: [4, 4, 4, 3, 2, 1],
+  desktop: [8, 6, 4, 3, 2, 1],
+} as const
+
+/** Splits `count` marks into rows that never widen going down. */
+function rowSizes(count: number, schedule: readonly number[]) {
+  const sizes: number[] = []
+  const first = schedule[0] ?? 1
+  let left = count
+  const fits = schedule.reduce((sum, size) => sum + size, 0)
+  while (left > fits) {
+    sizes.push(first)
+    left -= first
+  }
+  for (const size of schedule) {
+    if (left <= 0) break
+    sizes.push(Math.min(size, left))
+    left -= Math.min(size, left)
+  }
+  return sizes
+}
+
+export interface LogoCloudPyramidRowStackProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudPyramidRowStackCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order, widest row first. Each has a `name` and a
+   * `logo`. None by default: each slot shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudPyramidRowStackLogo[]
+}
+
+export function LogoCloudPyramidRowStack({ locale = "en", caption, logos = [], className, ...props }: LogoCloudPyramidRowStackProps) {
+  const copy = COPY[locale]
+  const captionId = React.useId()
+  const count = logos.length > 0 ? logos.length : PLACEHOLDERS
+
+  const item = (index: number) => {
+    const logo = logos[index]
+    return logo ? (
+      <div role="listitem" 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>
+      </div>
+    ) : (
+      <div 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" />
+      </div>
+    )
+  }
+
+  /** One breakpoint's layout: rows of the given sizes, each centred. */
+  const stack = (schedule: readonly number[], className: string) => {
+    let start = 0
+    return (
+      <div role={logos.length > 0 ? "list" : undefined} className={cn("flex-col items-center", className)}>
+        {rowSizes(count, schedule).map((size, row) => {
+          const indexes = Array.from({ length: size }, (_, offset) => start + offset)
+          start += size
+          return (
+            <div key={row} role="none" className="flex items-center justify-center gap-x-10">
+              {indexes.map(item)}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <section aria-labelledby={captionId} 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">
+        <p id={captionId} className="text-center text-sm font-medium text-muted-foreground">
+          {caption ?? copy.caption}
+        </p>
+        {stack(ROWS.mobile, "flex gap-y-5 sm:hidden")}
+        {stack(ROWS.tablet, "hidden gap-y-5 sm:flex md:gap-y-6 lg:hidden")}
+        {stack(ROWS.desktop, "hidden gap-y-8 lg:flex")}
+      </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 logoCloudPyramidRowStackCopy = COPY

package/registry/blocks/logo-cloud-pyramid-row-stack/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudPyramidRowStack,
+  logoCloudPyramidRowStackCopy,
+  type LogoCloudPyramidRowStackCopy,
+  type LogoCloudPyramidRowStackLogo,
+  type LogoCloudPyramidRowStackProps,
+} from "./LogoCloudPyramidRowStack"

package/registry/blocks/logo-cloud-quote-panel-grid/LogoCloudQuotePanelGrid.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { Quote } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Quote Panel Grid.
+ *
+ * A short heading over two parts side by side: a testimonial on an inverted
+ * panel, and the marks in a ruled grid of equal cells. The panel is painted
+ * with the inverse tokens, the only way Fasla inverts a surface, so it is
+ * dark in Light and light in Dark and never forces a `.dark` class; the
+ * theme-inverse registry item maps the tokens.
+ *
+ * Desktop puts the panel at the start, 440px wide and as tall as the grid,
+ * with the attribution held to its bottom, and the grid in four columns.
+ * Tablet and Mobile stack the panel over a two-column grid. The cells keep
+ * Figma's heights (96, 72 and 76px) and each mark is scaled to Figma's
+ * height for that breakpoint, never past its width cap.
+ *
+ * Mirroring comes from the page's `dir`: the panel moves to the start side,
+ * the grid's rules sit on each cell's end and bottom edges, and the marks
+ * keep their order. The quote mark and 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 LogoCloudQuotePanelGridLogo {
+  /** 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 LogoCloudQuotePanelGridAttribution {
+  /** 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 LogoCloudQuotePanelGridCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when `null`. */
+  description: React.ReactNode
+  /** The testimonial on the panel. Name no company: the marks are real ones. */
+  quote: React.ReactNode
+  /** Who said it: `name`, `role` and an optional `avatar` photo. */
+  attribution: LogoCloudQuotePanelGridAttribution
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudQuotePanelGridCopy> = {
+  en: {
+    heading: "Customers.",
+    description: "Trusted by the world’s leading enterprises.",
+    quote: "Fasla gave our twelve product teams one shared language. Handoff time dropped by half in the first quarter.",
+    attribution: { name: "Dana Whitfield", role: "VP Product" },
+  },
+  ar: {
+    heading: "العملاء.",
+    description: "موثوق به لدى كبرى المؤسسات في العالم.",
+    quote: "منحت فاصلة فرق المنتج الاثني عشر لدينا لغة مشتركة واحدة. وانخفض وقت التسليم إلى النصف في الربع الأول.",
+    attribution: { name: "دانا ويتفيلد", role: "نائبة رئيس المنتج" },
+  },
+}
+
+/** Figma's count of cells: what the grid keeps, as placeholders, while no logos are passed. */
+const PLACEHOLDERS = 16
+
+export interface LogoCloudQuotePanelGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudQuotePanelGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order: four to a row on Desktop, two on Tablet and
+   * Mobile. None by default: each of Figma's 16 cells shows a `muted` placeholder.
+   * @default none: 16 `muted` placeholders
+   */
+  logos?: LogoCloudQuotePanelGridLogo[]
+}
+
+export function LogoCloudQuotePanelGrid({
+  locale = "en",
+  heading,
+  description,
+  quote,
+  attribution,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudQuotePanelGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const lead = description === undefined ? copy.description : description
+  const who = attribution ?? copy.attribution
+  const cells: (LogoCloudQuotePanelGridLogo | 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-8">
+        <header className="flex flex-col gap-1">
+          <h2 id={headingId} className="text-lg font-semibold text-foreground md:text-xl lg:text-2xl">
+            {heading ?? copy.heading}
+          </h2>
+          {lead ? <p className="text-lg text-muted-foreground">{lead}</p> : null}
+        </header>
+
+        <div className="flex flex-col gap-6 md:gap-8 lg:flex-row lg:gap-6">
+          <figure className="flex flex-col gap-8 rounded-lg bg-background-inverse p-10 lg:w-[440px] lg:shrink-0">
+            <div className="flex flex-1 flex-col gap-5">
+              <Quote aria-hidden="true" size={28} strokeWidth={1.5} absoluteStrokeWidth className="shrink-0 text-foreground-inverse" />
+              <blockquote className="text-lg text-foreground-inverse md:text-xl">{quote ?? copy.quote}</blockquote>
+            </div>
+            <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-inverse">{who.name}</p>
+                <p className="text-xs text-muted-foreground-inverse">{who.role}</p>
+              </div>
+            </figcaption>
+          </figure>
+
+          {/* The rules: every cell draws its end and bottom edges, and the box
+              clips the last column's and last row's, so only inner lines show.
+              The list tucks a pixel under the box's top edge too, so the box is
+              the rows' height, as Figma's inside stroke is. */}
+          <div className="min-w-0 flex-1 overflow-hidden rounded-md border border-border lg:self-start">
+            <ul className="-mb-px -me-px -mt-px grid grid-cols-2 lg:grid-cols-4">
+              {cells.map((item, index) => (
+                <li
+                  key={item ? `${item.name}-${index}` : index}
+                  className="flex h-[76px] items-center justify-center border-b border-e border-border px-3 md:h-[72px] lg:h-24"
+                >
+                  {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>
+        </div>
+      </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 logoCloudQuotePanelGridCopy = COPY

package/registry/blocks/logo-cloud-quote-panel-grid/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudQuotePanelGrid,
+  logoCloudQuotePanelGridCopy,
+  type LogoCloudQuotePanelGridAttribution,
+  type LogoCloudQuotePanelGridCopy,
+  type LogoCloudQuotePanelGridLogo,
+  type LogoCloudQuotePanelGridProps,
+} from "./LogoCloudQuotePanelGrid"