@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/error-state-support-escalation-band/ErrorStateSupportEscalationBand.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import * as React from "react"
+import { Undo2 } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Support Escalation Band.
+ *
+ * One card on a muted field that hands the visitor to a person: a status
+ * badge, the heading and a line of help, the support team's avatars with
+ * their reply time, and a column of ways to reach them, with a quiet link
+ * home under it.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). The copy and the actions sit side by
+ * side on Desktop and stack below it; on Mobile the team row moves above the
+ * badge. Direction is the page's `dir`; every side is a logical one, so the
+ * avatar stack overlaps the other way in Arabic, and the back glyph turns
+ * into its redo twin.
+ */
+
+export interface ErrorStateSupportEscalationBandAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateSupportEscalationBandPerson {
+  /** The person's name: the photo's `alt`, and the initials when there is no photo. */
+  name: string
+  /** Their photo. Without one, the avatar shows their initials. */
+  src?: string
+}
+
+export interface ErrorStateSupportEscalationBandCopy {
+  /** The pill above the heading. Hidden when empty. */
+  badge: React.ReactNode
+  /** The band's heading, an `h1`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The support team, shown as an overlapping avatar stack, each marked online. */
+  people: ErrorStateSupportEscalationBandPerson[]
+  /** Beside the avatars: who answers and how fast. Hidden when null. */
+  teamNote: React.ReactNode
+  /** The solid button. */
+  primaryAction: ErrorStateSupportEscalationBandAction
+  /** The outline button under it. Hidden when null. */
+  secondaryAction: ErrorStateSupportEscalationBandAction | null
+  /** The quiet link under the buttons. Hidden when null. */
+  homeLink: ErrorStateSupportEscalationBandAction | null
+}
+
+/** The team's names. Figma shows two photos and the initials "VB". */
+const PEOPLE: ErrorStateSupportEscalationBandPerson[] = [
+  { name: "Hana Malik" },
+  { name: "Sami Rahman" },
+  { name: "Vera Bauer" },
+]
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateSupportEscalationBandCopy> = {
+  en: {
+    badge: "Error 404",
+    heading: "Still can’t find it? Talk to a human.",
+    description:
+      "Tell us what you were looking for and we will send you the right link — or fix the broken one for everybody.",
+    people: PEOPLE,
+    teamNote: "Fasla support — usually replies within an hour",
+    primaryAction: { label: "Start a live chat", href: "#chat" },
+    secondaryAction: { label: "Email support", href: "mailto:support@fasla.com" },
+    homeLink: { label: "or go back to the homepage", href: "/" },
+  },
+  ar: {
+    badge: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>
+      </>
+    ),
+    heading: "ما زلت لا تجدها؟ تحدث إلى إنسان.",
+    description: "أخبرنا بما كنت تبحث عنه. سنرسل لك الرابط الصحيح، أو نصلح الرابط المعطل للجميع.",
+    people: PEOPLE,
+    teamNote: "دعم فاصلة يرد عادةً خلال ساعة",
+    primaryAction: { label: "ابدأ محادثة مباشرة", href: "#chat" },
+    secondaryAction: { label: "راسل الدعم", href: "mailto:support@fasla.com" },
+    homeLink: { label: "أو عد إلى الصفحة الرئيسية", href: "/" },
+  },
+}
+
+export interface ErrorStateSupportEscalationBandProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateSupportEscalationBandCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStateSupportEscalationBand({
+  locale = "en",
+  badge,
+  heading,
+  description,
+  people,
+  teamNote,
+  primaryAction,
+  secondaryAction,
+  homeLink,
+  className,
+  ...props
+}: ErrorStateSupportEscalationBandProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const pill = badge ?? copy.badge
+  const team = people ?? copy.people
+  const note = teamNote === undefined ? copy.teamNote : teamNote
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const home = homeLink === undefined ? copy.homeLink : homeLink
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-muted p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-8 rounded-2xl bg-card p-6 shadow-md ring-1 ring-inset ring-border md:p-8 lg:flex-row lg:items-center lg:justify-between lg:gap-16 lg:p-10">
+        <div className="flex min-w-0 flex-col items-start gap-4 lg:max-w-[600px] lg:flex-1">
+          {pill ? (
+            <Badge variant="soft" tone="destructive" size="sm" radius="rounded">
+              {pill}
+            </Badge>
+          ) : null}
+          <h1 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          {team.length > 0 || note ? (
+            <div className="flex flex-col gap-2.5 max-md:order-first md:flex-row md:items-center md:gap-3">
+              {team.length > 0 ? (
+                <ul className="flex shrink-0 items-center">
+                  {team.map((person, index) => (
+                    <li key={index} className={index > 0 ? "-ms-1" : undefined}>
+                      <Avatar
+                        variant={person.src ? "image" : "initials"}
+                        src={person.src}
+                        name={person.name}
+                        radius="rounded"
+                        border
+                        status="online"
+                      />
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+              {note ? <p className="max-w-[140px] text-sm text-muted-foreground md:max-w-none">{note}</p> : null}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-2.5 md:flex-row md:items-center md:gap-3 lg:w-[280px] lg:shrink-0 lg:flex-col lg:items-stretch">
+          <a href={primary.href} className={buttonVariants({ size: "lg" })}>
+            {primary.label}
+          </a>
+          {secondary ? (
+            <a href={secondary.href} className={buttonVariants({ variant: "outline", size: "lg" })}>
+              {secondary.label}
+            </a>
+          ) : null}
+          {home ? (
+            <a
+              href={home.href}
+              className="flex items-center justify-center gap-2 self-center rounded-sm text-xs text-muted-foreground [outline:none] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
+            >
+              <Undo2 aria-hidden="true" className="size-3.5 shrink-0 [&:dir(rtl)]:-scale-x-100" size={14} strokeWidth={1.5} absoluteStrokeWidth />
+              {home.label}
+            </a>
+          ) : null}
+        </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 errorStateSupportEscalationBandCopy = COPY

package/registry/blocks/error-state-support-escalation-band/index.ts

@@ -0,0 +1,8 @@
+export {
+  ErrorStateSupportEscalationBand,
+  errorStateSupportEscalationBandCopy,
+  type ErrorStateSupportEscalationBandAction,
+  type ErrorStateSupportEscalationBandCopy,
+  type ErrorStateSupportEscalationBandPerson,
+  type ErrorStateSupportEscalationBandProps,
+} from "./ErrorStateSupportEscalationBand"

package/registry/blocks/error-state-terminal-console/ErrorStateTerminalConsole.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import * as React from "react"
+import { TriangleAlert } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Terminal Console.
+ *
+ * A terminal window replays the failed request: the command, the response
+ * headers and, last, the 404 in destructive with a warning glyph. Under it,
+ * the heading, a line of help and two buttons, one of which copies the
+ * request ID. The window is painted with the inverse tokens, so it is dark
+ * in light mode and light in dark mode.
+ *
+ * The window is a log: its content is English and left to right in both
+ * directions (`dir="ltr" lang="en"`), so its traffic lights and title bar
+ * never mirror. Only the copy and buttons around it follow the page's `dir`.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). Every side is a logical one.
+ */
+
+export interface ErrorStateTerminalConsoleAction {
+  label: React.ReactNode
+  href: string
+}
+
+/** What the terminal window shows. Always English and left to right. */
+export interface ErrorStateTerminalConsoleLog {
+  /** The window's title, in its title bar. */
+  title: string
+  /** The command after the `$` prompt. */
+  command: string
+  /** The response lines, in order. */
+  output: string[]
+  /** The last line, in destructive with a warning glyph. Hidden when empty. */
+  error: string
+}
+
+export interface ErrorStateTerminalConsoleCopy {
+  /** The heading under the window, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, a link. */
+  primaryAction: ErrorStateTerminalConsoleAction
+  /** The outline button's label. It copies `requestId`. Hidden when empty. */
+  copyLabel: React.ReactNode
+  /** Replaces the copy button's label, and is announced, for a moment after copying. */
+  copiedLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateTerminalConsoleCopy> = {
+  en: {
+    heading: "404 — that route doesn’t resolve",
+    description: "Copy the request ID above if you need to raise it with support — it tells us exactly what happened.",
+    primaryAction: { label: "Back to docs", href: "/docs" },
+    copyLabel: "Copy request ID",
+    copiedLabel: "Copied",
+  },
+  ar: {
+    heading: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>: هذا المسار غير صالح
+      </>
+    ),
+    description: "انسخ معرّف الطلب أعلاه إذا احتجت إلى مراجعة الدعم. فهو يخبرنا بالضبط بما حدث.",
+    primaryAction: { label: "العودة إلى التوثيق", href: "/docs" },
+    copyLabel: "انسخ معرّف الطلب",
+    copiedLabel: "تم النسخ",
+  },
+}
+
+/** Figma's log, around the request ID it reports. */
+const logFor = (requestId: string): ErrorStateTerminalConsoleLog => ({
+  title: "fasla — request log",
+  command: "curl -I https://fasla.com/journal/old-post",
+  output: ["HTTP/2 404", `x-fasla-request-id: ${requestId}`, "date: Fri, 04 Sep 2026 09:12:44 GMT"],
+  error: "page not found — the resource has no current location",
+})
+
+export interface ErrorStateTerminalConsoleProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateTerminalConsoleCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction; the window stays English. */
+  locale?: "en" | "ar"
+  /**
+   * The ID the copy button copies, and the default log reports.
+   * @default "3a760e2a7b3349a887b1c5f6ee46192d"
+   */
+  requestId?: string
+  /**
+   * What the terminal window shows. English in both languages.
+   * @default Figma's log, reporting `requestId`
+   */
+  log?: ErrorStateTerminalConsoleLog
+}
+
+/** How long "Copied" stays up, as Figma's dev notes say. */
+const COPIED_FOR = 1500
+
+export function ErrorStateTerminalConsole({
+  locale = "en",
+  heading,
+  description,
+  primaryAction,
+  copyLabel,
+  copiedLabel,
+  requestId = "3a760e2a7b3349a887b1c5f6ee46192d",
+  log,
+  className,
+  ...props
+}: ErrorStateTerminalConsoleProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const primary = primaryAction ?? copy.primaryAction
+  const copyButton = copyLabel ?? copy.copyLabel
+  const copiedText = copiedLabel ?? copy.copiedLabel
+  const terminal = log ?? logFor(requestId)
+
+  const [copied, setCopied] = React.useState(false)
+  React.useEffect(() => {
+    if (!copied) return
+    const timer = window.setTimeout(() => setCopied(false), COPIED_FOR)
+    return () => window.clearTimeout(timer)
+  }, [copied])
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(requestId)
+      setCopied(true)
+    } catch {
+      // No clipboard (an insecure page, or permission refused): the ID stays
+      // in the log to select by hand.
+    }
+  }
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-muted p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[760px] flex-col items-center gap-6 text-center md:gap-7">
+        <div
+          dir="ltr"
+          lang="en"
+          className="w-full overflow-hidden rounded-xl bg-background-inverse text-start shadow-lg"
+        >
+          <div className="flex h-11 items-center gap-3 border-b border-muted-foreground-inverse px-5">
+            <span aria-hidden="true" className="flex shrink-0 gap-1.5">
+              <span className="size-2.5 rounded-full bg-destructive" />
+              <span className="size-2.5 rounded-full bg-warning" />
+              <span className="size-2.5 rounded-full bg-success" />
+            </span>
+            <p className="min-w-0 flex-1 truncate text-center text-xs text-muted-foreground-inverse">{terminal.title}</p>
+          </div>
+          <div className="flex flex-col gap-1.5 p-4 text-sm [overflow-wrap:anywhere] md:gap-2 md:p-6">
+            <p className="flex gap-2 text-foreground-inverse">
+              <span aria-hidden="true" className="shrink-0 text-success">
+                $
+              </span>
+              <span className="min-w-0">{terminal.command}</span>
+            </p>
+            {terminal.output.map((line, index) => (
+              <p key={index} className="text-muted-foreground-inverse">
+                {line}
+              </p>
+            ))}
+            {terminal.error ? (
+              <p className="flex gap-2 text-destructive">
+                <span className="flex h-[1lh] shrink-0 items-center">
+                  <TriangleAlert aria-hidden="true" className="size-3.5" size={14} strokeWidth={1.5} absoluteStrokeWidth />
+                </span>
+                <span className="min-w-0">{terminal.error}</span>
+              </p>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col gap-2.5">
+          <h1 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+
+        <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+          <a href={primary.href} className={buttonVariants()}>
+            {primary.label}
+          </a>
+          {copyButton ? (
+            <Button variant="outline" onClick={handleCopy}>
+              {copied ? copiedText : copyButton}
+            </Button>
+          ) : null}
+        </div>
+        <span role="status" className="sr-only">
+          {copied ? copiedText : null}
+        </span>
+      </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 errorStateTerminalConsoleCopy = COPY

package/registry/blocks/error-state-terminal-console/index.ts

@@ -0,0 +1,8 @@
+export {
+  ErrorStateTerminalConsole,
+  errorStateTerminalConsoleCopy,
+  type ErrorStateTerminalConsoleAction,
+  type ErrorStateTerminalConsoleCopy,
+  type ErrorStateTerminalConsoleLog,
+  type ErrorStateTerminalConsoleProps,
+} from "./ErrorStateTerminalConsole"

package/registry/blocks/faq-accent-active-card/FaqAccentActiveCard.tsx

@@ -0,0 +1,186 @@
+"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=Accent Active Card.
+ *
+ * One column of questions where the open one lifts out of the list: a card
+ * with a `primary` accent bar at its start edge, so the current topic is never
+ * lost. Whichever item opens becomes the card; the rest stay plain rows with
+ * a divider. The card is drawn from the item's own open state, so it follows
+ * the reader's clicks with no state of its own.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface FaqAccentActiveCardItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqAccentActiveCardCopy {
+  /** 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: FaqAccentActiveCardItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqAccentActiveCardCopy> = {
+  en: {
+    heading: "Questions, answered",
+    description: "The open answer lifts out of the list so the current topic is never lost.",
+    items: [
+      {
+        question: "How do I keep my file in sync when Fasla updates?",
+        answer:
+          "Fasla publishes as a Figma library. When we ship an update Figma shows a review prompt in your file — you accept the changes you want and skip the rest. Nothing is overwritten without your confirmation.",
+      },
+      {
+        question: "What happens to my file if I cancel?",
+        answer:
+          "Everything you built stays yours. The library stops receiving updates, but every screen keeps rendering with the components it already uses.",
+      },
+      {
+        question: "Can two designers edit the library at once?",
+        answer:
+          "Yes. Each seat can edit at the same time as the others, and Figma merges the changes as it does in any shared file.",
+      },
+      {
+        question: "Do you ship Tailwind tokens with the file?",
+        answer:
+          "Yes. Every Figma variable has a Tailwind token of the same name, so the handoff needs no translation table.",
+      },
+      {
+        question: "Is there a changelog I can follow?",
+        answer: "Yes. A changelog page in the file lists every release, dated, with what was added, changed or removed.",
+      },
+      {
+        question: "Can I request a component?",
+        answer: "Yes. Send a request from the file’s feedback page; the most-asked components ship first.",
+      },
+    ],
+    empty: "No questions yet.",
+  },
+  ar: {
+    heading: "أسئلة وإجابات",
+    description: "ترتفع الإجابة المفتوحة عن القائمة حتى لا يضيع الموضوع الحالي.",
+    items: [
+      {
+        question: "كيف أُبقي ملفّي متزامنًا عند تحديث فاصلة؟",
+        answer:
+          "تُنشَر فاصلة كمكتبة في Figma. وعند إصدار تحديث يعرض Figma إشعار مراجعة داخل ملفك، فتقبل ما تريد من التغييرات وتتجاهل الباقي. ولا يُستبدل أي شيء دون تأكيدك.",
+      },
+      {
+        question: "ماذا يحدث لملفّي إذا ألغيت الاشتراك؟",
+        answer: "يبقى كل ما بنيته ملكًا لك. تتوقف المكتبة عن تلقّي التحديثات، لكن كل شاشة تظل تُعرض بالمكوّنات التي تستخدمها.",
+      },
+      {
+        question: "هل يمكن لمصمّمَين تحرير المكتبة في الوقت نفسه؟",
+        answer: "نعم. يستطيع كل مقعد التحرير في الوقت نفسه مع الآخرين، ويدمج Figma التغييرات كما يفعل في أي ملف مشترك.",
+      },
+      {
+        question: "هل تُرفَق رموز Tailwind مع الملف؟",
+        answer: "نعم. لكل متغيّر في Figma رمز في Tailwind بالاسم نفسه، فلا يحتاج التسليم إلى جدول مقابلة.",
+      },
+      {
+        question: "هل يوجد سجلّ تغييرات يمكنني متابعته؟",
+        answer: "نعم. تسرد صفحة سجلّ التغييرات في الملف كل إصدار بتاريخه، مع ما أُضيف أو تغيّر أو أُزيل.",
+      },
+      {
+        question: "هل يمكنني طلب مكوّن جديد؟",
+        answer: "نعم. أرسل طلبك من صفحة الملاحظات في الملف، وتصدر المكوّنات الأكثر طلبًا أولًا.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqAccentActiveCardProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqAccentActiveCardCopy> {
+  /** 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; each open one becomes a card.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqAccentActiveCard({
+  locale = "en",
+  heading,
+  description,
+  items,
+  empty,
+  defaultValue = ["0"],
+  multiple,
+  className,
+  ...props
+}: FaqAccentActiveCardProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  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-[880px] flex-col gap-3 text-center">
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </header>
+
+        {list.length === 0 ? (
+          <p className="w-full max-w-[880px] text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion className="w-full max-w-[880px] gap-3" defaultValue={defaultValue} multiple={multiple}>
+            {list.map((item, index) => (
+              <AccordionItem
+                key={item.value ?? index}
+                value={item.value ?? String(index)}
+                className={cn(
+                  // Closed: a plain row with a divider. Open: a raised card
+                  // with Figma's 4px accent bar on the start edge, which the
+                  // padding clears (4 + 24). Only the card clips, to its
+                  // corners: a closed row must not, or it would cut off the
+                  // trigger's focus ring, which reaches 6px past each side.
+                  "relative",
+                  "data-[open]:overflow-hidden data-[open]:rounded-lg data-[open]:border data-[open]:border-border data-[open]:bg-card data-[open]:py-5 data-[open]:pe-6 data-[open]:ps-7 data-[open]:shadow data-[open]:last:border",
+                  "before:absolute before:inset-y-0 before:start-0 before:hidden before:w-1 before:bg-primary data-[open]:before:block"
+                )}
+              >
+                <AccordionTrigger className="text-base">{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 faqAccentActiveCardCopy = COPY

package/registry/blocks/faq-accent-active-card/index.ts

@@ -0,0 +1 @@
+export { FaqAccentActiveCard, faqAccentActiveCardCopy, type FaqAccentActiveCardCopy, type FaqAccentActiveCardItem, type FaqAccentActiveCardProps } from "./FaqAccentActiveCard"