@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/faq-two-column-grid/FaqTwoColumnGrid.tsx

@@ -0,0 +1,256 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+import { Badge } from "../../ui/badge/badge"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Two-Column Grid.
+ *
+ * A badge and heading over two columns of question cards, each card an
+ * Accordion item in its own bordered box, and a line of links to more help
+ * under them. The first half of the questions fills the first column. The
+ * columns stack on Mobile, the first above the second.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). Direction is the page's `dir`; every
+ * side here is a logical one.
+ */
+
+export interface FaqTwoColumnGridItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqTwoColumnGridCopy {
+  /** The badge above the heading. */
+  badge: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The questions, in order. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. */
+  items: FaqTwoColumnGridItem[]
+  /** The footer line: "{moreText} {docsLabel} {orText} {contactLabel}". */
+  moreText: React.ReactNode
+  /** The text of the link to the docs, in the closing line. */
+  docsLabel: React.ReactNode
+  /** The word between the two links in the closing line. */
+  orText: React.ReactNode
+  /** The text of the link to contact support, in the closing line. */
+  contactLabel: React.ReactNode
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqTwoColumnGridCopy> = {
+  en: {
+    badge: "F.A.Q",
+    heading: "Questions & answers",
+    items: [
+      {
+        question: "Is Fasla right for my team?",
+        answer:
+          "If your team designs in Figma and ships with React and Tailwind, yes. Fasla gives designers and developers the same components, names and tokens.",
+      },
+      {
+        question: "Can I try it before buying?",
+        answer: "Yes. Duplicate the free sample file to try a selection of components and blocks in your own workspace.",
+      },
+      {
+        question: "What’s the difference between the Figma file and the code kit?",
+        answer:
+          "The Figma file is the design library. The code kit is the same components in React, installed with one command and styled with the same tokens.",
+      },
+      {
+        question: "Do you support staging and dev versions?",
+        answer: "Yes. Publish a branch of the library for testing, and release it to the whole team when it’s ready.",
+      },
+      {
+        question: "I already use another kit — can I migrate?",
+        answer: "Yes. Swap components page by page; Fasla’s tokens follow shadcn/ui names, so most styles carry over.",
+      },
+      {
+        question: "Do you collect or store any customer data?",
+        answer: "No. The library runs in your own Figma files and your own codebase; nothing is sent to us.",
+      },
+      {
+        question: "What support is included?",
+        answer: "Email support with a reply within one business day, and a channel for requesting components.",
+      },
+      {
+        question: "One of my libraries is private — will it still work?",
+        answer: "Yes. Fasla works alongside private libraries, and your components can use its tokens like any other.",
+      },
+      {
+        question: "Can I move away from Fasla later?",
+        answer: "Yes. The files and the code are yours to keep, so you can stop updating at any time and nothing breaks.",
+      },
+    ],
+    moreText: "More questions? Visit the",
+    docsLabel: "documentation",
+    orText: "or",
+    contactLabel: "send us a message",
+    empty: "No questions yet.",
+  },
+  ar: {
+    badge: "الأسئلة الشائعة",
+    heading: "أسئلة وأجوبة",
+    items: [
+      {
+        question: "هل فاصلة مناسبة لفريقي؟",
+        answer:
+          "إذا كان فريقك يصمم في Figma ويبني واجهاته بمكتبة React مع Tailwind، فنعم. تمنح فاصلة المصممين والمطوّرين المكوّنات والأسماء والرموز نفسها.",
+      },
+      {
+        question: "هل يمكنني تجربتها قبل الشراء؟",
+        answer: "نعم. انسخ الملف التجريبي المجاني لتجرّب مجموعة من المكوّنات والكتل في مساحة عملك.",
+      },
+      {
+        question: "ما الفرق بين ملف Figma وحزمة الكود؟",
+        answer: "ملف Figma هو مكتبة التصميم. أما حزمة الكود فهي المكوّنات نفسها بلغة React، تُثبَّت بأمر واحد وتستخدم الرموز نفسها.",
+      },
+      {
+        question: "هل تدعمون نسخ التجريب والتطوير؟",
+        answer: "نعم. انشر فرعًا من المكتبة للاختبار، ثم أصدره للفريق كله حين يجهز.",
+      },
+      {
+        question: "أستخدم حزمة أخرى بالفعل، هل يمكنني الانتقال؟",
+        answer: "نعم. استبدل المكوّنات صفحةً بعد صفحة. أسماء رموز فاصلة تتبع أسماء shadcn/ui، فتنتقل معظم الأنماط كما هي.",
+      },
+      {
+        question: "هل تجمعون أو تخزّنون أي بيانات للعملاء؟",
+        answer: "لا. تعمل المكتبة في ملفات Figma الخاصة بك وفي شيفرتك، ولا يصلنا منها شيء.",
+      },
+      {
+        question: "ما الدعم المشمول؟",
+        answer: "دعم عبر البريد الإلكتروني بردّ خلال يوم عمل واحد، وقناة لطلب المكوّنات.",
+      },
+      {
+        question: "إحدى مكتباتي خاصة، هل ستعمل مع ذلك؟",
+        answer: "نعم. تعمل فاصلة إلى جانب المكتبات الخاصة، ويمكن لمكوّناتك استخدام رموزها كأي مكتبة أخرى.",
+      },
+      {
+        question: "هل يمكنني الاستغناء عن فاصلة لاحقًا؟",
+        answer: "نعم. الملفات والشيفرة ملكك، فيمكنك إيقاف التحديث في أي وقت دون أن يتعطل شيء.",
+      },
+    ],
+    moreText: "مزيد من الأسئلة؟ زر",
+    docsLabel: "التوثيق",
+    orText: "أو",
+    contactLabel: "راسلنا",
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqTwoColumnGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqTwoColumnGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** Where the documentation link goes. */
+  docsHref?: string
+  /** Where the message link goes. */
+  contactHref?: string
+  /** The items open at first, by `value`. None, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+const LINK =
+  "rounded-sm font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+
+export function FaqTwoColumnGrid({
+  locale = "en",
+  badge,
+  heading,
+  items,
+  moreText,
+  docsLabel,
+  orText,
+  contactLabel,
+  empty,
+  docsHref = "#",
+  contactHref = "#",
+  defaultValue = [],
+  multiple,
+  className,
+  ...props
+}: FaqTwoColumnGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+  // The first half fills the first column, which takes the odd one out.
+  const split = Math.ceil(list.length / 2)
+  const columns = [list.slice(0, split), list.slice(split)]
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-12">
+        <header className="flex w-full max-w-[720px] flex-col items-center gap-4 text-center">
+          <Badge variant="soft" tone="secondary" size="sm">
+            {badge ?? copy.badge}
+          </Badge>
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+        </header>
+
+        {list.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion
+            className="w-full max-w-[1120px] gap-6 md:flex-row md:items-start md:gap-5"
+            defaultValue={defaultValue}
+            multiple={multiple}
+          >
+            {columns.map((column, c) => (
+              <div key={c} className="flex min-w-0 flex-1 flex-col gap-4">
+                {column.map((item, i) => {
+                  const index = c === 0 ? i : split + i
+                  return (
+                    <AccordionItem
+                      key={item.value ?? index}
+                      value={item.value ?? String(index)}
+                      className="rounded-lg border border-border bg-card p-4 last:border"
+                    >
+                      <AccordionTrigger className="text-base">{item.question}</AccordionTrigger>
+                      <AccordionContent>{item.answer}</AccordionContent>
+                    </AccordionItem>
+                  )
+                })}
+              </div>
+            ))}
+          </Accordion>
+        )}
+
+        <p className="flex flex-wrap items-center justify-center gap-1 text-center text-sm text-muted-foreground">
+          <span>{moreText ?? copy.moreText}</span>
+          <a href={docsHref} className={LINK}>
+            {docsLabel ?? copy.docsLabel}
+          </a>
+          <span>{orText ?? copy.orText}</span>
+          <a href={contactHref} className={LINK}>
+            {contactLabel ?? copy.contactLabel}
+          </a>
+        </p>
+      </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 faqTwoColumnGridCopy = COPY

package/registry/blocks/faq-two-column-grid/index.ts

@@ -0,0 +1,7 @@
+export {
+  FaqTwoColumnGrid,
+  faqTwoColumnGridCopy,
+  type FaqTwoColumnGridItem,
+  type FaqTwoColumnGridCopy,
+  type FaqTwoColumnGridProps,
+} from "./FaqTwoColumnGrid"

package/registry/blocks/faq-uppercase-dense/FaqUppercaseDense.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Uppercase Dense.
+ *
+ * A compact list on a `muted` band: a two-line intro beside a long run of
+ * questions set in capitals. The questions are written in sentence case and
+ * set in capitals only in a left-to-right page: Arabic has no capitals, and a
+ * Latin name inside Arabic text keeps its own case.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface FaqUppercaseDenseItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqUppercaseDenseCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. */
+  description: React.ReactNode
+  /** The questions, in order. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. */
+  items: FaqUppercaseDenseItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqUppercaseDenseCopy> = {
+  en: {
+    heading: (
+      <>
+        Questions?
+        <br />
+        We’re here to help
+      </>
+    ),
+    description: "Everything about the library, the licence and the handoff.",
+    items: [
+      {
+        question: "Does it actually save time?",
+        answer:
+          "Teams moving onto Fasla report their first production screen in under a day, because every block is already tokenised, responsive and documented — nothing has to be rebuilt from a static mockup.",
+      },
+      {
+        question: "Is every component token-bound?",
+        answer: "Yes. Every fill, stroke, gap, padding and radius points at a variable, never a raw value.",
+      },
+      {
+        question: "How many blocks ship today?",
+        answer: "Hundreds, across marketing, application and commerce pages, with new families every month.",
+      },
+      {
+        question: "What about dark mode?",
+        answer: "Every component and block has light and dark modes from the same variables. Switching the mode swaps every colour.",
+      },
+      {
+        question: "Can I restyle it to my brand?",
+        answer: "Yes. Change the token values for your colours, radius and type, and every component follows.",
+      },
+      {
+        question: "Does it cover Arabic type?",
+        answer: "Yes. Arabic is set in Cairo with its own line heights, and every block has a right-to-left variant.",
+      },
+      {
+        question: "Are the blocks responsive?",
+        answer: "Yes. Each block has desktop, tablet and mobile variants, and the code follows the same breakpoints.",
+      },
+      {
+        question: "How do I hand off to engineers?",
+        answer: "Share the file. Token names in Figma match the code, and every block has an install command in the docs.",
+      },
+      {
+        question: "Is there a component changelog?",
+        answer: "Yes. A changelog page in the file lists every release, dated.",
+      },
+      {
+        question: "What support is included?",
+        answer: "Email support from our designers, with replies within one business day.",
+      },
+    ],
+    empty: "No questions yet.",
+  },
+  ar: {
+    heading: (
+      <>
+        أسئلة؟
+        <br />
+        نحن هنا للمساعدة
+      </>
+    ),
+    description: "كل ما يخصّ المكتبة والترخيص والتسليم.",
+    items: [
+      {
+        question: "هل توفّر الوقت فعلًا؟",
+        answer:
+          "تفيد الفرق التي تنتقل إلى فاصلة بإنجاز أول شاشة إنتاجية في أقل من يوم، لأن كل كتلة مرتبطة بالرموز ومتجاوبة وموثّقة، فلا حاجة إلى إعادة بناء أي شيء انطلاقًا من نموذج ثابت.",
+      },
+      {
+        question: "هل كل مكوّن مرتبط بالرموز؟",
+        answer: "نعم. كل تعبئة وحدّ وفجوة وحشوة ونصف قطر يشير إلى متغيّر، لا إلى قيمة ثابتة.",
+      },
+      {
+        question: "كم عدد الكتل المتاحة اليوم؟",
+        answer: "المئات، في صفحات التسويق والتطبيقات والتجارة، مع عائلات جديدة كل شهر.",
+      },
+      {
+        question: "ماذا عن الوضع الداكن؟",
+        answer: "لكل مكوّن وكتلة وضعان فاتح وداكن من المتغيّرات نفسها. وتغيير الوضع يبدّل كل الألوان.",
+      },
+      {
+        question: "هل يمكنني تكييفها مع هوية علامتي؟",
+        answer: "نعم. غيّر قيم الرموز لألوانك ونصف القطر والخطوط، وتتبعها كل المكوّنات.",
+      },
+      {
+        question: "هل تغطّي الخطوط العربية؟",
+        answer: "نعم. يُكتب النص العربي بخط Cairo بارتفاعات أسطر خاصة به، ولكل كتلة نسخة من اليمين إلى اليسار.",
+      },
+      {
+        question: "هل الكتل متجاوبة؟",
+        answer: "نعم. لكل كتلة نسخ لسطح المكتب والجهاز اللوحي والجوال، والشيفرة تتبع نقاط التوقّف نفسها.",
+      },
+      {
+        question: "كيف أسلّم العمل إلى المهندسين؟",
+        answer: "شارك الملف. أسماء الرموز في Figma تطابق الشيفرة، ولكل كتلة أمر تثبيت في التوثيق.",
+      },
+      {
+        question: "هل يوجد سجلّ تغييرات للمكوّنات؟",
+        answer: "نعم. تسرد صفحة سجلّ التغييرات في الملف كل إصدار بتاريخه.",
+      },
+      {
+        question: "ما الدعم المشمول؟",
+        answer: "دعم بالبريد الإلكتروني من مصممينا، مع الرد خلال يوم عمل واحد.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqUppercaseDenseProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqUppercaseDenseCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** The items open at first, by `value`. The first item, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqUppercaseDense({
+  locale = "en",
+  heading,
+  description,
+  items,
+  empty,
+  defaultValue = ["0"],
+  multiple,
+  className,
+  ...props
+}: FaqUppercaseDenseProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-muted px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-6 md:gap-8 lg:flex-row lg:items-start lg:gap-24">
+        <header className="flex flex-col gap-3 lg:w-[360px] lg:shrink-0">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-sm text-muted-foreground">{description ?? copy.description}</p>
+        </header>
+
+        {list.length === 0 ? (
+          <p className="min-w-0 flex-1 text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion indicator="plus" className="min-w-0 flex-1" defaultValue={defaultValue} multiple={multiple}>
+            {list.map((item, index) => (
+              <AccordionItem key={item.value ?? index} value={item.value ?? String(index)}>
+                <AccordionTrigger className="text-base [&:dir(ltr)]:uppercase">{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        )}
+      </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 faqUppercaseDenseCopy = COPY

package/registry/blocks/faq-uppercase-dense/index.ts

@@ -0,0 +1 @@
+export { FaqUppercaseDense, faqUppercaseDenseCopy, type FaqUppercaseDenseCopy, type FaqUppercaseDenseItem, type FaqUppercaseDenseProps } from "./FaqUppercaseDense"

package/registry/blocks/features/features.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import { ImageIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Features` (42367:57765). The parts every `features-*` block is built
+ * from, one per thing the Figma set repeats: the section and its 1248px
+ * column, the left-aligned section header (a 12px eyebrow, the heading and a
+ * line under it), the figures helper and the plain hairline.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container, so a block lays out for the room it is given, such as a docs
+ * preview narrower than the screen. The base classes are Figma's Mobile
+ * (360); `[@container(min-width:48rem)]:` is its Tablet (768) and
+ * `[@container(min-width:72rem)]:` its Desktop. The padding is on an inner
+ * wrapper so it can follow the container too: 32px, 64px, 96px. The page's
+ * `dir` sets the direction; nothing here takes one.
+ */
+
+export type FeaturesLocale = "en" | "ar"
+
+const FIGURE = /(\d[\d,.]*[%×]?)/
+
+/**
+ * Figures inside a sentence, such as `99.99%` or `1,240`, each set in its own
+ * left-to-right isolate so they keep their order inside Arabic text, as
+ * Figma's LRI…PDI marks do. Anything but a string passes through untouched.
+ */
+export function Figures({ children }: { children: React.ReactNode }) {
+  if (typeof children !== "string") return <>{children}</>
+  const parts = children.split(FIGURE)
+  if (parts.length === 1) return <>{children}</>
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? (
+          <bdi key={index} dir="ltr" className="whitespace-nowrap">
+            {part}
+          </bdi>
+        ) : (
+          <React.Fragment key={index}>{part}</React.Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+export interface FeaturesPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface FeaturesPhotoSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The photo. A `muted` placeholder shows without it. */
+  photo?: FeaturesPhoto
+  /** Classes for the image itself, such as a hover scale. */
+  imageClassName?: string
+}
+
+/**
+ * A photo slot: a `muted` box that the photo fills edge to edge, cropped to
+ * fit. Without a photo the box stays, so a block keeps its shape, and a faint
+ * image mark says the slot is empty on purpose (`data-empty`). Anything passed
+ * as children draws over the photo.
+ */
+export function FeaturesPhotoSlot({ photo, imageClassName, className, children, ...props }: FeaturesPhotoSlotProps) {
+  return (
+    <div data-empty={photo ? undefined : ""} className={cn("relative overflow-hidden bg-muted", className)} {...props}>
+      {photo ? (
+        <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className={cn("absolute inset-0 size-full object-cover", imageClassName)} />
+      ) : (
+        <span aria-hidden="true" className="absolute inset-0 flex items-center justify-center text-muted-foreground/40">
+          <ImageIcon size={24} strokeWidth={1.5} absoluteStrokeWidth />
+        </span>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export interface FeaturesSectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** The id of the heading that names the section. */
+  labelledBy?: string
+  /** Classes for the 1248px column inside the padding. */
+  contentClassName?: string
+  /** The space between the header and what follows: 64px (`lg`), 48px (`md`) or 32px (`sm`), as Figma sets each Type. */
+  gap?: "lg" | "md" | "sm"
+  /** Without the 32 / 64 / 96px padding, for a Type that runs a photo to the section's edge. */
+  flush?: boolean
+}
+
+/**
+ * Figma's section: `theme/background` (a Type paints its own with
+ * `className`), padding 32 on phones, 64 on Tablet and 96 on Desktop, and a
+ * 1248px column.
+ */
+export function FeaturesSection({ labelledBy, className, contentClassName, gap = "lg", flush = false, children, ...props }: FeaturesSectionProps) {
+  return (
+    <section aria-labelledby={labelledBy} className={cn("[container-type:inline-size] bg-background text-foreground", className)} {...props}>
+      <div className={flush ? undefined : "p-8 [@container(min-width:48rem)]:p-16 [@container(min-width:72rem)]:p-24"}>
+        <div
+          className={cn(
+            "mx-auto flex w-full max-w-[1248px] flex-col",
+            gap === "lg" ? "gap-12 [@container(min-width:48rem)]:gap-16" : gap === "md" ? "gap-10 [@container(min-width:72rem)]:gap-12" : "gap-8",
+            contentClassName
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export interface FeaturesHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** The id the section's `aria-labelledby` points at. */
+  headingId: string
+  /** The 12px line above the heading, in `primary`. Hidden when empty. */
+  eyebrow?: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading, in `muted-foreground`. Hidden when empty. */
+  description?: React.ReactNode
+  /** Paints the header on an inverse surface. */
+  inverse?: boolean
+  /** Caps the header's width in px, as Figma narrows it beside a note or a button. */
+  maxWidth?: number
+}
+
+/**
+ * Figma's `Section Header`: the eyebrow, the heading (3XL on phones, 3XL from
+ * Tablet, 4XL on Desktop) and its line, 16px apart.
+ */
+export function FeaturesHeader({ headingId, eyebrow, heading, description, inverse = false, maxWidth, className, style, children, ...props }: FeaturesHeaderProps) {
+  return (
+    <header className={cn("flex w-full min-w-0 flex-col items-start gap-4", className)} style={maxWidth ? { maxWidth, ...style } : style} {...props}>
+      {eyebrow ? (
+        <p className={cn("text-xs font-medium tracking-wide rtl:tracking-normal", inverse ? "text-muted-foreground-inverse" : "text-primary")}>{eyebrow}</p>
+      ) : null}
+      <h2
+        id={headingId}
+        className={cn(
+          "text-2xl font-semibold [@container(min-width:48rem)]:text-3xl [@container(min-width:72rem)]:text-4xl",
+          inverse ? "text-foreground-inverse" : "text-foreground"
+        )}
+      >
+        {heading}
+      </h2>
+      {description ? <p className={cn("text-base", inverse ? "text-muted-foreground-inverse" : "text-muted-foreground")}>{description}</p> : null}
+      {children}
+    </header>
+  )
+}
+
+/**
+ * Figma's `Separator`: a 1px `border` line across its container. The code
+ * library has no Separator component yet; swap this for it once it does.
+ */
+export function FeaturesRule({ className }: { className?: string }) {
+  return <div data-separator="" aria-hidden="true" className={cn("h-px w-full shrink-0 bg-border", className)} />
+}

package/registry/blocks/features/index.ts

@@ -0,0 +1,12 @@
+export {
+  FeaturesHeader,
+  FeaturesPhotoSlot,
+  FeaturesRule,
+  FeaturesSection,
+  Figures,
+  type FeaturesHeaderProps,
+  type FeaturesLocale,
+  type FeaturesPhoto,
+  type FeaturesPhotoSlotProps,
+  type FeaturesSectionProps,
+} from "./features"