@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/error-state-server-error-500/ErrorStateServerError500.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from "react"
+import { Clock } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Server Error 500.
+ *
+ * A 500 page on a muted field: the apology, a retry and the status page on
+ * one side, and a live status card on the other, one row per service with a
+ * coloured dot. The card sits beside the copy on Desktop and under it on
+ * Tablet and Mobile, where each row's state drops under its name.
+ *
+ * Retry is real: while `onRetry` runs, the button shows its spinner, and if
+ * it rejects, a line under the actions says so. Without `onRetry` it reloads
+ * the page.
+ *
+ * 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 is a logical one.
+ */
+
+type Tone = "success" | "warning" | "destructive" | "info"
+
+export interface ErrorStateServerError500Service {
+  /** The service's name. */
+  label: React.ReactNode
+  /** Its state, at the row's end: "Operational", "Partial outage". */
+  state: React.ReactNode
+  /** The dot's colour. */
+  tone: Tone
+}
+
+export interface ErrorStateServerError500Status {
+  label: React.ReactNode
+  /** The pill's colour. */
+  tone: Tone
+}
+
+export interface ErrorStateServerError500Action {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateServerError500Copy {
+  /** The pill above the heading. Hidden when empty. */
+  badge: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button that runs `onRetry`. */
+  retryLabel: React.ReactNode
+  /** Read out while `onRetry` runs. */
+  retryingLabel: string
+  /** Shown under the actions when `onRetry` rejects. */
+  retryError: React.ReactNode
+  /** The outline link beside it, to the status page. Hidden when null. */
+  statusAction: ErrorStateServerError500Action | null
+  /** The incident line under the actions, after a clock. Hidden when empty. */
+  incident: React.ReactNode
+  /** The status card's heading. */
+  statusHeading: React.ReactNode
+  /** The pill beside it: the overall state. Hidden when null. */
+  overall: ErrorStateServerError500Status | null
+  /** The card's rows, one per service. Each has a `label`, a `state` and a `tone`. The rows and the dividers are hidden when the list is empty. */
+  services: ErrorStateServerError500Service[]
+  /** The small print at the foot of the card. Hidden when empty. */
+  note: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateServerError500Copy> = {
+  en: {
+    badge: "500 — server error",
+    heading: "Something went wrong on our end",
+    description:
+      "This is not your fault. Our team has already been paged and is working on it. Retry in a moment, or follow along on the status page.",
+    retryLabel: "Retry now",
+    retryingLabel: "Retrying",
+    retryError: "Still not working. Give it a minute and try again.",
+    statusAction: { label: "Open status page", href: "#status" },
+    incident: "Incident INC-2481 · opened 4 minutes ago",
+    statusHeading: "System status",
+    overall: { label: "Degraded", tone: "warning" },
+    services: [
+      { label: "Website", state: "Operational", tone: "success" },
+      { label: "API", state: "Partial outage", tone: "destructive" },
+      { label: "Dashboard", state: "Degraded performance", tone: "warning" },
+      { label: "Webhooks", state: "Operational", tone: "success" },
+    ],
+    note: "Updated automatically every 30 seconds. Subscribe on the status page for incident emails.",
+  },
+  ar: {
+    badge: (
+      <>
+        <bdi dir="ltr">500</bdi> - خطأ في الخادم
+      </>
+    ),
+    heading: "حدث خطأ من جانبنا",
+    description:
+      "هذا ليس خطأك. تم تنبيه فريقنا بالفعل وهو يعمل على حلها. أعد المحاولة بعد قليل، أو تابع الحالة على صفحة الحالة.",
+    retryLabel: "أعد المحاولة الآن",
+    retryingLabel: "جارٍ إعادة المحاولة",
+    retryError: "ما زال الخطأ قائمًا. انتظر دقيقة ثم أعد المحاولة.",
+    statusAction: { label: "افتح صفحة الحالة", href: "#status" },
+    incident: (
+      <>
+        فُتح البلاغ <bdi dir="ltr">INC-2481</bdi> قبل <bdi dir="ltr">4</bdi> دقائق
+      </>
+    ),
+    statusHeading: "حالة النظام",
+    overall: { label: "متدهور", tone: "warning" },
+    services: [
+      { label: "الموقع", state: "يعمل", tone: "success" },
+      { label: <bdi dir="ltr">API</bdi>, state: "انقطاع جزئي", tone: "destructive" },
+      { label: "لوحة التحكم", state: "أداء متدهور", tone: "warning" },
+      { label: <bdi dir="ltr">Webhooks</bdi>, state: "يعمل", tone: "success" },
+    ],
+    note: (
+      <>
+        يتم التحديث تلقائيًا كل <bdi dir="ltr">30</bdi> ثانية. اشترك في صفحة الحالة لتصلك رسائل البلاغات.
+      </>
+    ),
+  },
+}
+
+const DOT: Record<Tone, string> = {
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+}
+
+export interface ErrorStateServerError500Props
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateServerError500Copy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * Runs when Retry is pressed. The button shows its spinner until the
+   * promise settles; a rejection shows `retryError`.
+   * @default reloads the page
+   */
+  onRetry?: () => Promise<void> | void
+}
+
+export function ErrorStateServerError500({
+  locale = "en",
+  badge,
+  heading,
+  description,
+  retryLabel,
+  retryingLabel,
+  retryError,
+  statusAction,
+  incident,
+  statusHeading,
+  overall,
+  services,
+  note,
+  onRetry,
+  className,
+  ...props
+}: ErrorStateServerError500Props) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const cardId = React.useId()
+  const [status, setStatus] = React.useState<"idle" | "pending" | "error">("idle")
+  const pill = badge ?? copy.badge
+  const link = statusAction === undefined ? copy.statusAction : statusAction
+  const meta = incident ?? copy.incident
+  const state = overall === undefined ? copy.overall : overall
+  const rows = services ?? copy.services
+  const small = note ?? copy.note
+
+  const retry = async () => {
+    if (!onRetry) {
+      window.location.reload()
+      return
+    }
+    setStatus("pending")
+    try {
+      await onRetry()
+      setStatus("idle")
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  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 lg:flex-row lg:items-center lg:justify-between lg:gap-16">
+        <div className="flex flex-col items-start gap-5 lg:w-[560px]">
+          {pill ? (
+            <Badge variant="soft" tone="destructive">
+              {pill}
+            </Badge>
+          ) : null}
+          <h1 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+            <Button loading={status === "pending"} loadingLabel={retryingLabel ?? copy.retryingLabel} onClick={retry}>
+              {retryLabel ?? copy.retryLabel}
+            </Button>
+            {link ? (
+              <a href={link.href} className={buttonVariants({ variant: "outline" })}>
+                {link.label}
+              </a>
+            ) : null}
+          </div>
+          <p role="status" className="text-sm text-destructive empty:hidden">
+            {status === "error" ? (retryError ?? copy.retryError) : null}
+          </p>
+          {meta ? (
+            <p className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Clock size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-3.5 shrink-0" />
+              <span>{meta}</span>
+            </p>
+          ) : null}
+        </div>
+
+        <section
+          aria-labelledby={cardId}
+          className="flex w-full shrink-0 flex-col gap-2 rounded-xl bg-card p-5 shadow-md ring-1 ring-inset ring-border md:gap-5 md:p-7 lg:w-[460px]"
+        >
+          <div className="flex items-center justify-between gap-3">
+            <h2 id={cardId} className="text-base font-semibold text-foreground">
+              {statusHeading ?? copy.statusHeading}
+            </h2>
+            {state ? (
+              <Badge variant="soft" tone={state.tone}>
+                {state.label}
+              </Badge>
+            ) : null}
+          </div>
+          {rows.length > 0 ? (
+            <>
+              <hr className="border-border" />
+              <ul className="flex flex-col gap-4">
+                {rows.map((row, index) => (
+                  <li
+                    key={index}
+                    className="flex flex-col gap-0.5 text-sm md:flex-row md:items-center md:justify-between md:gap-3"
+                  >
+                    <span className="flex items-center gap-2.5 text-foreground">
+                      <span aria-hidden="true" className={cn("size-2 shrink-0 rounded-full", DOT[row.tone])} />
+                      <span>{row.label}</span>
+                    </span>
+                    <span className="text-muted-foreground">{row.state}</span>
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : null}
+          {small ? (
+            <>
+              <hr className="border-border" />
+              <p className="text-xs text-muted-foreground">{small}</p>
+            </>
+          ) : null}
+        </section>
+      </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 errorStateServerError500Copy = COPY

package/registry/blocks/error-state-server-error-500/index.ts

@@ -0,0 +1,9 @@
+export {
+  ErrorStateServerError500,
+  errorStateServerError500Copy,
+  type ErrorStateServerError500Action,
+  type ErrorStateServerError500Copy,
+  type ErrorStateServerError500Props,
+  type ErrorStateServerError500Service,
+  type ErrorStateServerError500Status,
+} from "./ErrorStateServerError500"

package/registry/blocks/error-state-sitemap-columns/ErrorStateSitemapColumns.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Sitemap Columns.
+ *
+ * The error code and a line beside two ways out, a hairline, then the whole
+ * site in four columns of links: four across on Desktop, two by two on
+ * Tablet and Mobile. 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 is a logical one, so the header and the columns
+ * mirror in Arabic.
+ */
+
+export interface ErrorStateSitemapColumnsAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateSitemapColumnsLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateSitemapColumnsColumn {
+  /** The column's label, an `h2`. */
+  title: React.ReactNode
+  links: ErrorStateSitemapColumnsLink[]
+}
+
+export interface ErrorStateSitemapColumnsCopy {
+  /** The status code in display type: the page's heading, an `h1`. */
+  code: React.ReactNode
+  /** The line under the code: what happened and what follows. */
+  description: React.ReactNode
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStateSitemapColumnsAction
+  /** The outline button beside it. Hidden when null. */
+  secondaryAction: ErrorStateSitemapColumnsAction | null
+  /** Names the columns' navigation landmark for screen readers. */
+  sitemapLabel: string
+  /** The columns of links, in reading order. Hidden, with the hairline, when the list is empty. */
+  columns: ErrorStateSitemapColumnsColumn[]
+}
+
+const links = (labels: string[], hrefs: string[]) => labels.map((label, index) => ({ label, href: hrefs[index] ?? "#" }))
+const PRODUCT = ["#overview", "#features", "#integrations", "#pricing", "#changelog"]
+const RESOURCES = ["#docs", "#api", "#guides", "#templates", "#community"]
+const COMPANY = ["#about", "#customers", "#careers", "#journal", "#press"]
+const SUPPORT = ["#help", "#status", "#support", "#security", "#accessibility"]
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateSitemapColumnsCopy> = {
+  en: {
+    code: "404",
+    description: "We couldn’t find that page — but here is everything else.",
+    primaryAction: { label: "Back to home", href: "/" },
+    secondaryAction: { label: "Report a broken link", href: "#report" },
+    sitemapLabel: "Sitemap",
+    columns: [
+      { title: "PRODUCT", links: links(["Overview", "Features", "Integrations", "Pricing", "Changelog"], PRODUCT) },
+      { title: "RESOURCES", links: links(["Documentation", "API reference", "Guides", "Templates", "Community"], RESOURCES) },
+      { title: "COMPANY", links: links(["About Fasla", "Customers", "Careers", "Journal", "Press kit"], COMPANY) },
+      {
+        title: "SUPPORT",
+        links: links(["Help centre", "System status", "Contact support", "Security", "Accessibility"], SUPPORT),
+      },
+    ],
+  },
+  ar: {
+    code: "404",
+    description: "لم نتمكن من العثور على تلك الصفحة. لكن إليك كل الصفحات الأخرى.",
+    primaryAction: { label: "العودة إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "أبلغ عن رابط معطل", href: "#report" },
+    sitemapLabel: "خريطة الموقع",
+    columns: [
+      { title: "المنتج", links: links(["نظرة عامة", "المزايا", "التكاملات", "الأسعار", "سجل التغييرات"], PRODUCT) },
+      {
+        title: "الموارد",
+        links: [
+          { label: "التوثيق", href: "#docs" },
+          {
+            label: (
+              <>
+                مرجع <bdi dir="ltr">API</bdi>
+              </>
+            ),
+            href: "#api",
+          },
+          ...links(["الأدلة", "القوالب", "المجتمع"], RESOURCES.slice(2)),
+        ],
+      },
+      { title: "الشركة", links: links(["عن فاصلة", "العملاء", "الوظائف", "المدونة", "الملف الصحفي"], COMPANY) },
+      { title: "الدعم", links: links(["مركز المساعدة", "حالة النظام", "تواصل مع الدعم", "الأمان", "إمكانية الوصول"], SUPPORT) },
+    ],
+  },
+}
+
+export interface ErrorStateSitemapColumnsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateSitemapColumnsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStateSitemapColumns({
+  locale = "en",
+  code,
+  description,
+  primaryAction,
+  secondaryAction,
+  sitemapLabel,
+  columns,
+  className,
+  ...props
+}: ErrorStateSitemapColumnsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const list = columns ?? copy.columns
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-10">
+        <header className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between lg:gap-16">
+          <div className="flex flex-col gap-3 lg:max-w-[600px]">
+            <h1 id={headingId} className="text-4xl font-semibold text-destructive md:text-5xl lg:text-6xl">
+              {code ?? copy.code}
+            </h1>
+            <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <a href={primary.href} className={buttonVariants()}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+                {secondary.label}
+              </a>
+            ) : null}
+          </div>
+        </header>
+
+        {list.length > 0 ? (
+          <>
+            <hr className="h-px border-0 bg-border" />
+            <nav aria-label={sitemapLabel ?? copy.sitemapLabel}>
+              <div className="grid grid-cols-2 gap-6 md:gap-8 lg:grid-cols-4">
+                {list.map((column, index) => (
+                  <ColumnLinks key={index} column={column} />
+                ))}
+              </div>
+            </nav>
+          </>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+function ColumnLinks({ column }: { column: ErrorStateSitemapColumnsColumn }) {
+  const titleId = React.useId()
+  return (
+    <div className="flex min-w-0 flex-col gap-3">
+      <h2 id={titleId} className="text-xs font-medium text-muted-foreground">
+        {column.title}
+      </h2>
+      <ul aria-labelledby={titleId} className="flex flex-col gap-3 text-sm">
+        {column.links.map((link, index) => (
+          <li key={index}>
+            <a
+              href={link.href}
+              className="rounded-sm text-foreground underline-offset-4 [outline:none] hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateSitemapColumnsCopy = COPY

package/registry/blocks/error-state-sitemap-columns/index.ts

@@ -0,0 +1,9 @@
+export {
+  ErrorStateSitemapColumns,
+  errorStateSitemapColumnsCopy,
+  type ErrorStateSitemapColumnsAction,
+  type ErrorStateSitemapColumnsColumn,
+  type ErrorStateSitemapColumnsCopy,
+  type ErrorStateSitemapColumnsLink,
+  type ErrorStateSitemapColumnsProps,
+} from "./ErrorStateSitemapColumns"

package/registry/blocks/error-state-split-colour-panel/ErrorStateSplitColourPanel.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Split Colour Panel.
+ *
+ * An inverted panel holding the error code, beside the message: a heading,
+ * a line of help, a rule, a short list of reassurances and two ways out. The
+ * panel is painted with the inverse tokens, the only way Fasla inverts a
+ * surface: dark in Light, light in Dark. The theme-inverse registry item maps
+ * them, falling back to the page colours swapped in a theme without them.
+ *
+ * The panel is a square at the start on Desktop and a full-width band above
+ * the message on Tablet and Mobile. 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, so in Arabic the panel moves to the right.
+ */
+
+export interface ErrorStateSplitColourPanelAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateSplitColourPanelCopy {
+  /** The status code on the panel. Hidden when empty. */
+  code: React.ReactNode
+  /** The line under the code on the panel. Hidden when empty. */
+  codeLabel: React.ReactNode
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The reassurances under the rule, each with a check. The rule and list are hidden when empty. */
+  checks: React.ReactNode[]
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStateSplitColourPanelAction
+  /** The outline button beside it. Hidden when null. */
+  secondaryAction: ErrorStateSplitColourPanelAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateSplitColourPanelCopy> = {
+  en: {
+    code: "404",
+    codeLabel: "PAGE NOT FOUND",
+    eyebrow: "ERROR 404",
+    heading: "That link has expired",
+    description:
+      "Pages get retired when the product moves on. Nothing is broken — we just need to point you somewhere newer.",
+    checks: ["Your account and data are untouched", "Bookmarks to the new page still work"],
+    primaryAction: { label: "Back to home", href: "/" },
+    secondaryAction: { label: "See what changed", href: "#changelog" },
+  },
+  ar: {
+    code: "404",
+    codeLabel: "الصفحة غير موجودة",
+    eyebrow: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>
+      </>
+    ),
+    heading: "انتهت صلاحية هذا الرابط",
+    description: "تُوقف الصفحات عندما يتطور المنتج. لا يوجد عطل. علينا فقط توجيهك إلى مكان أحدث.",
+    checks: ["حسابك وبياناتك لم تُمس", "الإشارات المرجعية للصفحة الجديدة لا تزال تعمل"],
+    primaryAction: { label: "العودة إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "اطّلع على التغييرات", href: "#changelog" },
+  },
+}
+
+export interface ErrorStateSplitColourPanelProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateSplitColourPanelCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStateSplitColourPanel({
+  locale = "en",
+  code,
+  codeLabel,
+  eyebrow,
+  heading,
+  description,
+  checks,
+  primaryAction,
+  secondaryAction,
+  className,
+  ...props
+}: ErrorStateSplitColourPanelProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const status = code ?? copy.code
+  const statusLabel = codeLabel ?? copy.codeLabel
+  const label = eyebrow ?? copy.eyebrow
+  const list = checks ?? copy.checks
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("flex flex-col bg-background lg:min-h-[620px] lg:flex-row", className)}
+      {...props}
+    >
+      <div className="flex h-60 shrink-0 flex-col items-center justify-center gap-4 bg-background-inverse p-8 text-center md:h-80 lg:h-auto lg:w-[620px] lg:p-12">
+        {status ? <p className="text-7xl font-bold text-foreground-inverse md:text-8xl lg:text-9xl">{status}</p> : null}
+        {statusLabel ? <p className="text-base font-medium text-muted-foreground-inverse">{statusLabel}</p> : null}
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col justify-center p-8 md:p-16 lg:py-0 lg:pe-0 lg:ps-16">
+        <div className="flex flex-col gap-6">
+          {label ? <p className="text-xs font-medium text-destructive">{label}</p> : null}
+          <h1 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          {list.length > 0 ? (
+            <>
+              <div aria-hidden="true" className="h-px bg-border" />
+              <ul className="flex flex-col gap-3">
+                {list.map((item, index) => (
+                  <li key={index} className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                    <Check aria-hidden="true" size={16} strokeWidth={1.5} absoluteStrokeWidth className="size-4 shrink-0" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : null}
+          <div className="flex flex-wrap gap-3">
+            <a href={primary.href} className={buttonVariants()}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+                {secondary.label}
+              </a>
+            ) : null}
+          </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 errorStateSplitColourPanelCopy = COPY

package/registry/blocks/error-state-split-colour-panel/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateSplitColourPanel,
+  errorStateSplitColourPanelCopy,
+  type ErrorStateSplitColourPanelAction,
+  type ErrorStateSplitColourPanelCopy,
+  type ErrorStateSplitColourPanelProps,
+} from "./ErrorStateSplitColourPanel"