@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/pricing/pricing.tsx

@@ -0,0 +1,343 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Pricing` (46332:2894). The parts every `pricing-*` block is built
+ * from, one per thing the Figma set repeats: the section and its 1280px
+ * content, the centred header, a price with its unit, the list of features
+ * with a check before each, and the hairline between groups.
+ *
+ * Mobile first, and sized by the block's own width, not the window's, as the
+ * Gallery blocks are: 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:40rem)]:`
+ * is its Tablet, from 640px of content (Figma's Tablet, 768 less its padding),
+ * and `[@container(min-width:64rem)]:` its Desktop, from 1024px of content.
+ * The section's own padding still follows the window, since an element can't
+ * query itself. The page's `dir` sets the direction; nothing here takes one.
+ */
+
+export type PricingLocale = "en" | "ar"
+
+const ARABIC = /[؀-ۿ]/
+
+/**
+ * Whether a string has no Arabic letters. Figma keeps such figures — a price,
+ * "99.9%", "—" — on its English style in the Arabic variants too, so they stay
+ * in Geist: `font-sans` with the English line height, set explicitly because
+ * `[dir="rtl"]` re-leads every `text-*` size to Cairo's.
+ */
+export const isLatin = (text: React.ReactNode) => typeof text === "string" && !ARABIC.test(text)
+
+/**
+ * A price, an amount or a count, with its sign and currency: `$29`,
+ * `–$480.00`, `2,784.00`, `24`. Figures joined by a slash stay one run, so
+ * `24/7` is not split into `24` and `7` and read back as `7/24`.
+ */
+const FIGURE = /([−–-]?\$?\d[\d,.]*(?:\/\d[\d,.]*)*)/
+
+/**
+ * Text with every figure in it set in its own left-to-right isolate, so a
+ * price inside an Arabic sentence keeps its order — `فوترة سنوية، أو $59
+ * شهريًا`, `8 مقاعد × $29 × 12 شهرًا` — as Figma's LRI…PDI marks keep it.
+ * A trailing `%` stays outside the isolate, as it does in Figma.
+ * 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">
+            {part}
+          </bdi>
+        ) : (
+          <React.Fragment key={index}>{part}</React.Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+export interface PricingSectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** The id of the heading that names the section. */
+  labelledBy?: string
+  /** Classes for the 1280px column inside the padding. */
+  contentClassName?: string
+}
+
+/**
+ * Figma's section: `theme/background`, padding 96 × 80 on Desktop, 64 × 24
+ * on Tablet and 32 × 16 on phones, and a 1280px column with 48px between
+ * the header and what follows.
+ */
+export function PricingSection({ labelledBy, className, contentClassName, children, ...props }: PricingSectionProps) {
+  return (
+    <section
+      aria-labelledby={labelledBy}
+      className={cn("[container-type:inline-size] bg-background px-4 py-8 md:px-6 md:py-16 lg:px-20 lg:py-24", className)}
+      {...props}
+    >
+      <div className={cn("mx-auto flex w-full max-w-[1280px] flex-col items-center gap-12", contentClassName)}>{children}</div>
+    </section>
+  )
+}
+
+export interface PricingHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** The id the section's `aria-labelledby` points at. */
+  headingId: string
+  /** The Soft badge above the heading. Hidden when empty. */
+  eyebrow?: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description?: React.ReactNode
+}
+
+/**
+ * The centred header: an optional Soft badge, the heading (2XL on phones, 3XL
+ * from Tablet up) and the description in `muted-foreground`, 12px apart.
+ * Anything passed as children, such as the billing toggle, follows them.
+ */
+export function PricingHeader({ headingId, eyebrow, heading, description, className, children, ...props }: PricingHeaderProps) {
+  return (
+    <header className={cn("flex w-full flex-col items-center gap-3 text-center", className)} {...props}>
+      {eyebrow ? (
+        <Badge variant="soft" size="sm">
+          {eyebrow}
+        </Badge>
+      ) : null}
+      <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+        <Figures>{heading}</Figures>
+      </h2>
+      {description ? (
+        <p className="text-base text-muted-foreground">
+          <Figures>{description}</Figures>
+        </p>
+      ) : null}
+      {children}
+    </header>
+  )
+}
+
+/** Figma's two price sizes: 5XL on the plan cards, LG in the rows you choose from. */
+export type PricingPriceSize = "display" | "row"
+
+const AMOUNT: Record<PricingPriceSize, string> = {
+  display: "text-5xl leading-[3.625rem]",
+  row: "text-lg leading-7",
+}
+const UNIT: Record<PricingPriceSize, string> = {
+  display: "text-sm",
+  row: "text-xs",
+}
+
+export interface PricingPriceProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** The price, `$24`. */
+  amount: React.ReactNode
+  /** What the price is per, `/user/mo`. Hidden when empty. */
+  unit?: React.ReactNode
+  /** A struck-through price before it, the one the plan used to cost. Hidden when empty. */
+  previous?: React.ReactNode
+  /** Which of Figma's two sizes. */
+  size?: PricingPriceSize
+}
+
+/**
+ * The amount in `foreground`, Semi Bold, with its unit in `muted-foreground`
+ * after it on the same baseline (6px apart on a card, 4px in a row). A
+ * previous price, when there is one, comes first, struck through, at LG.
+ * The amount keeps Geist in Arabic, as Figma sets it.
+ */
+export function PricingPrice({ amount, unit, previous, size = "display", className, ...props }: PricingPriceProps) {
+  return (
+    <p className={cn("flex flex-wrap items-baseline", size === "display" ? "gap-x-1.5" : "gap-x-1", className)} {...props}>
+      {previous ? (
+        <s className={cn("text-lg text-muted-foreground", isLatin(previous) && "font-sans leading-7")}>
+          <Figures>{previous}</Figures>
+        </s>
+      ) : null}
+      <span className={cn("font-semibold text-foreground", AMOUNT[size], isLatin(amount) && "font-sans")}>
+        <Figures>{amount}</Figures>
+      </span>
+      {unit ? (
+        <span className={cn("text-muted-foreground", UNIT[size])}>
+          <Figures>{unit}</Figures>
+        </span>
+      ) : null}
+    </p>
+  )
+}
+
+export interface PricingFeatureListProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The short label above the list, "What's included". Hidden when empty. */
+  label?: React.ReactNode
+  /** One line per feature. */
+  features: React.ReactNode[]
+  /** Figma's two sizes: SM text and 16px checks on the cards, XS and 14px in Plan Picker's rows. */
+  size?: "sm" | "xs"
+}
+
+/**
+ * The features, one per line, each after a `primary` check (Lucide's, at
+ * Figma's 1.5 stroke). The label is SM Medium in `foreground`; the lines are
+ * `muted-foreground`.
+ */
+export function PricingFeatureList({ label, features, size = "sm", className, ...props }: PricingFeatureListProps) {
+  const small = size === "xs"
+  return (
+    <div className={cn("flex w-full flex-col", small ? "gap-1.5" : "gap-3", className)} {...props}>
+      {label ? (
+        <p className="text-sm font-medium text-foreground">
+          <Figures>{label}</Figures>
+        </p>
+      ) : null}
+      <ul className={cn("flex flex-col", small ? "gap-1.5" : "gap-3")}>
+        {features.map((feature, index) => (
+          <li key={index} className={cn("flex items-center gap-2 text-muted-foreground", small ? "text-xs" : "text-sm")}>
+            <Check size={small ? 14 : 16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="shrink-0 text-primary" />
+            <span className="min-w-0">
+              <Figures>{feature}</Figures>
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+/**
+ * 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 PricingRule({ className }: { className?: string }) {
+  return <div role="presentation" className={cn("w-full border-t border-border", className)} />
+}
+
+/** A plan's button: a link when it has an `href`, a button that calls `onPlanSelect` when it hasn't. */
+export interface PricingAction {
+  label: React.ReactNode
+  href?: string
+}
+
+export interface PricingActionButtonProps {
+  action: PricingAction
+  /** Solid `primary` for the plan you recommend, Outline for the others. */
+  highlighted?: boolean
+  /** Figma's Button sizes: md (36px) on the cards, sm (32px) in the matrix, lg (40px) in Plan Spotlight. */
+  size?: "sm" | "md" | "lg"
+  /** Called when a button without an `href` is pressed. */
+  onSelect?: () => void
+  className?: string
+}
+
+/** The action as a full-width Button, or as a link styled as one when it has an `href`. */
+export function PricingActionButton({ action, highlighted = false, size = "md", onSelect, className }: PricingActionButtonProps) {
+  const variant = highlighted ? "default" : "outline"
+  const label = (
+    <span>
+      <Figures>{action.label}</Figures>
+    </span>
+  )
+  if (action.href) {
+    return (
+      <a href={action.href} className={buttonVariants({ variant, size, className: cn("w-full", className) })}>
+        {label}
+      </a>
+    )
+  }
+  return (
+    <Button type="button" variant={variant} size={size} onClick={onSelect} className={cn("w-full", className)}>
+      {label}
+    </Button>
+  )
+}
+
+export interface PricingPlanCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  name: React.ReactNode
+  /** A Solid badge beside the name, "Most popular". Hidden when empty. */
+  badge?: React.ReactNode
+  description?: React.ReactNode
+  price: React.ReactNode
+  unit?: React.ReactNode
+  /** A struck-through earlier price before the price. Hidden when empty. */
+  previousPrice?: React.ReactNode
+  /** The line under the price, how the plan is billed. Hidden when empty. */
+  note?: React.ReactNode
+  /** Figma's Growth card: a `primary` border, a 5% `primary` tint, the md shadow and a Solid button. */
+  highlighted?: boolean
+  /** The button: Solid on the highlighted card, Outline on the others. */
+  action: React.ReactNode
+  featuresLabel?: React.ReactNode
+  features: React.ReactNode[]
+}
+
+/**
+ * The card Pricing Tiers and Two-Plan Compare are built from: 32px padding,
+ * 24px between its groups, `border radius/xl` (14px), a 1px `border` line
+ * and Figma's xs shadow. The line is an inset ring, drawn inside the card as
+ * Figma draws its stroke, so the card keeps Figma's height; forced-colors
+ * mode, which drops shadows, gets a real border instead. The name (XL Semi
+ * Bold) and its badge share the top row, then the description, the price and
+ * its note, the button, a rule, and the features. The highlighted card lays a
+ * 5% `primary` tint over `card`, as Figma stacks the two fills.
+ */
+export function PricingPlanCard({
+  name,
+  badge,
+  description,
+  price,
+  unit,
+  previousPrice,
+  note,
+  highlighted = false,
+  action,
+  featuresLabel,
+  features,
+  className,
+  ...props
+}: PricingPlanCardProps) {
+  return (
+    <article
+      className={cn(
+        "flex min-w-0 flex-col gap-6 rounded-xl bg-card p-8 ring-1 ring-inset forced-colors:border",
+        highlighted ? "bg-gradient-to-r from-primary/5 to-primary/5 shadow-md ring-primary" : "shadow-sm ring-border",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col gap-6">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-xl font-semibold text-foreground">
+            <Figures>{name}</Figures>
+          </h3>
+          {badge ? <Badge>{badge}</Badge> : null}
+        </div>
+        {description ? (
+          <p className="text-sm text-muted-foreground">
+            <Figures>{description}</Figures>
+          </p>
+        ) : null}
+        <div className="flex flex-col gap-1">
+          <PricingPrice amount={price} unit={unit} previous={previousPrice} />
+          {note ? (
+            <p className="text-xs text-muted-foreground">
+              <Figures>{note}</Figures>
+            </p>
+          ) : null}
+        </div>
+      </div>
+      {action}
+      <PricingRule />
+      <PricingFeatureList label={featuresLabel} features={features} />
+    </article>
+  )
+}

package/registry/blocks/pricing-comparison-matrix/PricingComparisonMatrix.tsx

@@ -0,0 +1,336 @@
+"use client"
+
+import * as React from "react"
+import { Check, Minus } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Figures, PricingActionButton, PricingHeader, PricingRule, PricingSection, isLatin, type PricingAction } from "../pricing/pricing"
+
+/*
+ * Figma: `Pricing` (46332:2894), Type=Comparison Matrix.
+ *
+ * Every plan's features side by side in one table: a column per plan headed
+ * by its name, price and an sm button, and a row per feature under a `muted`
+ * row that names its group. A check in `primary` marks a feature a plan has
+ * and a minus in `muted-foreground` one it hasn't; the other cells are text.
+ * The recommended plan's column is tinted 5% `primary` from its header down,
+ * and its header carries a Solid badge and the Solid button.
+ *
+ * From Tablet up it is a real table: the feature column is 400px on Desktop
+ * and 176px on Tablet, the plans share the rest, and Tablet narrows the cell
+ * padding. On phones the table becomes a card per plan, one under another,
+ * each listing every feature with its value at the end of the line, and the
+ * feature names take their `shortLabel` where they have one.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop, by the block's own width.
+ */
+
+export interface PricingComparisonMatrixPlan {
+  /** Passed to `onPlanSelect`. */
+  id: string
+  name: React.ReactNode
+  /** The price under the name, with its unit: `$24 /user/mo`, or `Custom pricing`. */
+  price: React.ReactNode
+  /** A Solid badge above the name, "Most popular". */
+  badge?: React.ReactNode
+  /** The plan you recommend: its column is tinted and its button Solid. */
+  highlighted?: boolean
+  action: PricingAction
+}
+
+/** A cell: `true` draws a check, `false` a minus, and text shows as it is. */
+export type PricingComparisonMatrixValue = React.ReactNode | boolean
+
+export interface PricingComparisonMatrixRow {
+  label: React.ReactNode
+  /** A shorter name for the cards on phones, as Figma shortens it there. */
+  shortLabel?: React.ReactNode
+  /** One value per plan, in the plans' order. */
+  values: PricingComparisonMatrixValue[]
+}
+
+export interface PricingComparisonMatrixGroup {
+  label: React.ReactNode
+  rows: PricingComparisonMatrixRow[]
+}
+
+export interface PricingComparisonMatrixCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The label in the table's top corner, over the feature column. */
+  cornerLabel: React.ReactNode
+  /** The plans, one column each, in reading order. */
+  plans: PricingComparisonMatrixPlan[]
+  /** The features, in groups. */
+  groups: PricingComparisonMatrixGroup[]
+  /** What assistive tech reads for a check. */
+  includedLabel: string
+  /** What assistive tech reads for a minus. */
+  notIncludedLabel: string
+}
+
+/**
+ * Figma's copy, English and Arabic. The two cell labels are for assistive
+ * tech only. One departure: Figma's Arabic short label «SSO و SCIM» puts a و
+ * between two Latin names, where it reads as a Latin "g"; the code uses the
+ * house separator, «SSO · SCIM».
+ */
+const COPY: Record<"en" | "ar", PricingComparisonMatrixCopy> = {
+  en: {
+    heading: "Compare plans in detail",
+    description: "Every plan starts with the essentials. Pick the one that matches where your team is headed.",
+    cornerLabel: "Compare features",
+    plans: [
+      { id: "starter", name: "Starter", price: "$10 /user/mo", action: { label: "Get started" } },
+      { id: "growth", name: "Growth", price: "$24 /user/mo", badge: "Most popular", highlighted: true, action: { label: "Choose Growth" } },
+      { id: "scale", name: "Scale", price: "$49 /user/mo", action: { label: "Choose Scale" } },
+      { id: "enterprise", name: "Enterprise", price: "Custom pricing", action: { label: "Talk to sales" } },
+    ],
+    groups: [
+      {
+        label: "Usage",
+        rows: [
+          { label: "Team members", values: ["Up to 3", "Up to 20", "Unlimited", "Custom"] },
+          { label: "Active projects", values: ["5", "Unlimited", "Unlimited", "Unlimited"] },
+          { label: "File storage", values: ["2 GB", "50 GB", "500 GB", "Custom"] },
+        ],
+      },
+      {
+        label: "Features",
+        rows: [
+          { label: "Analytics", values: ["Basic", "Advanced", "Advanced", "Advanced"] },
+          { label: "Custom domains", values: [false, true, true, true] },
+          { label: "API access", values: [false, false, true, true] },
+          { label: "SSO & SCIM provisioning", shortLabel: "SSO & SCIM", values: [false, false, true, true] },
+          { label: "Audit logs", values: [false, false, true, true] },
+        ],
+      },
+      {
+        label: "Support & security",
+        rows: [
+          { label: "Support", values: ["Community", "Priority email", "24/7 chat", "Dedicated manager"] },
+          { label: "SOC 2 Type II report", shortLabel: "SOC 2 Type II", values: [false, false, true, true] },
+          { label: "Uptime SLA", values: ["—", "—", "—", "99.9%"] },
+        ],
+      },
+    ],
+    includedLabel: "Included",
+    notIncludedLabel: "Not included",
+  },
+  ar: {
+    heading: "قارن الخطط بالتفصيل",
+    description: "كل الخطط تبدأ بالأساسيات. اختر ما يناسب وجهة فريقك.",
+    cornerLabel: "قارن الميزات",
+    plans: [
+      { id: "starter", name: "المبتدئة", price: "$10 /مستخدم/شهر", action: { label: "ابدأ الآن" } },
+      { id: "growth", name: "النمو", price: "$24 /مستخدم/شهر", badge: "الأكثر شيوعًا", highlighted: true, action: { label: "اختر النمو" } },
+      { id: "scale", name: "التوسّع", price: "$49 /مستخدم/شهر", action: { label: "اختر التوسّع" } },
+      { id: "enterprise", name: "المؤسسات", price: "تسعير مخصص", action: { label: "تحدث إلى المبيعات" } },
+    ],
+    groups: [
+      {
+        label: "الاستخدام",
+        rows: [
+          { label: "أعضاء الفريق", values: ["حتى 3", "حتى 20", "غير محدود", "مخصص"] },
+          { label: "المشاريع النشطة", values: ["5", "غير محدود", "غير محدود", "غير محدود"] },
+          { label: "تخزين الملفات", values: ["2 جيجابايت", "50 جيجابايت", "500 جيجابايت", "مخصص"] },
+        ],
+      },
+      {
+        label: "الميزات",
+        rows: [
+          { label: "التحليلات", values: ["أساسية", "متقدمة", "متقدمة", "متقدمة"] },
+          { label: "نطاقات مخصصة", values: [false, true, true, true] },
+          { label: "الوصول إلى API", values: [false, false, true, true] },
+          { label: "SSO وإدارة SCIM", shortLabel: "SSO · SCIM", values: [false, false, true, true] },
+          { label: "سجلات التدقيق", values: [false, false, true, true] },
+        ],
+      },
+      {
+        label: "الدعم والأمان",
+        rows: [
+          { label: "الدعم", values: ["المجتمع", "بريد ذو أولوية", "محادثة 24/7", "مدير مخصص"] },
+          { label: "تقرير SOC 2 Type II", shortLabel: "SOC 2 Type II", values: [false, false, true, true] },
+          { label: "اتفاقية مستوى الخدمة SLA", values: ["—", "—", "—", "99.9%"] },
+        ],
+      },
+    ],
+    includedLabel: "مشمولة",
+    notIncludedLabel: "غير مشمولة",
+  },
+}
+
+/**
+ * The 1px `border` line under a row, drawn inside its cells as Figma draws the
+ * stroke inside the row, so each row keeps Figma's 48px instead of 49.
+ */
+const DIVIDER = "shadow-[inset_0_-1px_0_0_var(--border)]"
+
+export interface PricingComparisonMatrixProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<PricingComparisonMatrixCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** Called with the plan's `id` when a button without an `href` is pressed. */
+  onPlanSelect?: (planId: string) => void
+}
+
+export function PricingComparisonMatrix({
+  locale = "en",
+  heading,
+  description,
+  cornerLabel,
+  plans,
+  groups,
+  includedLabel,
+  notIncludedLabel,
+  onPlanSelect,
+  className,
+  ...props
+}: PricingComparisonMatrixProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const planList = plans ?? copy.plans
+  const groupList = groups ?? copy.groups
+  const yes = includedLabel ?? copy.includedLabel
+  const no = notIncludedLabel ?? copy.notIncludedLabel
+
+  /** A value as the cell shows it: a check, a minus, or the text (Geist when it has no Arabic, as Figma sets it). */
+  const value = (cell: PricingComparisonMatrixValue, textClass: string) => {
+    if (cell === true || cell === false) {
+      const Icon = cell ? Check : Minus
+      return (
+        <span className="inline-flex">
+          <Icon size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className={cell ? "text-primary" : "text-muted-foreground"} />
+          <span className="sr-only">{cell ? yes : no}</span>
+        </span>
+      )
+    }
+    return (
+      <span className={cn(textClass, isLatin(cell) && "font-sans leading-5")}>
+        <Figures>{cell}</Figures>
+      </span>
+    )
+  }
+
+  return (
+    <PricingSection labelledBy={headingId} className={className} {...props}>
+      <PricingHeader headingId={headingId} heading={heading ?? copy.heading} description={description ?? copy.description} />
+
+      {/* Tablet and Desktop: the table. */}
+      <div className="hidden w-full overflow-hidden rounded-xl border border-border bg-card shadow-sm [@container(min-width:40rem)]:block">
+        <table className="w-full table-fixed border-collapse">
+          <colgroup>
+            <col className="w-[176px] [@container(min-width:64rem)]:w-[400px]" />
+            {planList.map((plan) => (
+              <col key={plan.id} />
+            ))}
+          </colgroup>
+          <thead>
+            <tr>
+              <th scope="col" className={cn("px-4 py-5 text-start align-bottom text-sm font-semibold text-muted-foreground [@container(min-width:64rem)]:px-6", DIVIDER)}>
+                <Figures>{cornerLabel ?? copy.cornerLabel}</Figures>
+              </th>
+              {planList.map((plan) => (
+                <th key={plan.id} scope="col" className={cn("px-2 py-5 align-bottom font-normal [@container(min-width:64rem)]:px-4", DIVIDER, plan.highlighted && "bg-primary/5")}>
+                  <div className="flex flex-col items-center gap-2">
+                    {plan.badge ? <Badge>{plan.badge}</Badge> : null}
+                    <span className="text-base font-semibold text-foreground">
+                      <Figures>{plan.name}</Figures>
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      <Figures>{plan.price}</Figures>
+                    </span>
+                    <PricingActionButton action={plan.action} highlighted={plan.highlighted} size="sm" onSelect={() => onPlanSelect?.(plan.id)} />
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          {groupList.map((group, groupIndex) => (
+            <tbody key={groupIndex}>
+              <tr>
+                <th
+                  scope="colgroup"
+                  colSpan={planList.length + 1}
+                  className="bg-muted px-4 py-2.5 text-start text-sm font-semibold text-foreground [@container(min-width:64rem)]:px-6"
+                >
+                  <Figures>{group.label}</Figures>
+                </th>
+              </tr>
+              {group.rows.map((row, rowIndex) => {
+                const last = groupIndex === groupList.length - 1 && rowIndex === group.rows.length - 1
+                return (
+                  <tr key={rowIndex}>
+                    <th scope="row" className={cn("px-4 py-3.5 text-start text-sm font-normal text-foreground [@container(min-width:64rem)]:px-6", !last && DIVIDER)}>
+                      <Figures>{row.label}</Figures>
+                    </th>
+                    {planList.map((plan, planIndex) => (
+                      <td key={plan.id} className={cn("px-2 py-3.5 text-center text-sm", !last && DIVIDER, plan.highlighted && "bg-primary/5")}>
+                        {/* A flex box, not a line: the cell keeps Figma's 48px row instead of the body's 24px line box. */}
+                        <div className="flex items-center justify-center">{value(row.values[planIndex], "text-sm text-muted-foreground")}</div>
+                      </td>
+                    ))}
+                  </tr>
+                )
+              })}
+            </tbody>
+          ))}
+        </table>
+      </div>
+
+      {/* Phones: a card per plan. */}
+      <div className="flex w-full flex-col gap-4 [@container(min-width:40rem)]:hidden">
+        {planList.map((plan, planIndex) => (
+          <article
+            key={plan.id}
+            className={cn(
+              "flex flex-col gap-3 rounded-lg bg-card p-5 ring-1 ring-inset forced-colors:border",
+              plan.highlighted ? "bg-gradient-to-r from-primary/5 to-primary/5 ring-primary" : "ring-border"
+            )}
+          >
+            <div className="flex items-center justify-between gap-2">
+              <h3 className="text-base font-semibold text-foreground">
+                <Figures>{plan.name}</Figures>
+              </h3>
+              {plan.badge ? <Badge>{plan.badge}</Badge> : null}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              <Figures>{plan.price}</Figures>
+            </p>
+            <PricingActionButton action={plan.action} highlighted={plan.highlighted} size="sm" onSelect={() => onPlanSelect?.(plan.id)} />
+            <PricingRule />
+            {groupList.map((group, groupIndex) => (
+              <React.Fragment key={groupIndex}>
+                <p className={cn("text-xs font-semibold text-muted-foreground", groupIndex > 0 && "pt-2")}>
+                  <Figures>{group.label}</Figures>
+                </p>
+                <dl className="flex flex-col gap-3">
+                  {group.rows.map((row, rowIndex) => (
+                    <div key={rowIndex} className="flex items-center justify-between gap-3">
+                      <dt className="min-w-0 text-sm text-muted-foreground">
+                        <Figures>{row.shortLabel ?? row.label}</Figures>
+                      </dt>
+                      {/* A flex box, not a line: the row keeps Figma's 20px instead of the body's 24px line box. */}
+                      <dd className="flex shrink-0">{value(row.values[planIndex], "text-sm font-medium text-foreground")}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </React.Fragment>
+            ))}
+          </article>
+        ))}
+      </div>
+    </PricingSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const pricingComparisonMatrixCopy = COPY