@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/blog-cards-newsletter-latest/BlogCardsNewsletterLatest.tsx

@@ -0,0 +1,291 @@
+import * as React from "react"
+import { MailIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { Input } from "../../ui/input/input"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Newsletter + Latest.
+ *
+ * A subscribe panel beside a short list of the latest posts, on the page
+ * background. The panel is an inverted card, dark in light mode and light in
+ * dark mode, painted with the inverse tokens: a mail icon, a title, a note, a
+ * form (an email field and a secondary "Subscribe" button) and a line of small
+ * print. The list has a label with a "View all" link, then four rows: a
+ * thumbnail, a title and a line of category, date and read time, each ruled by
+ * a hairline. Each row is one link named by its title.
+ *
+ * The form is the Input atom and the Button atom, so the field's focus ring is
+ * the atom's own; this block draws no other state. It submits nowhere: the
+ * browser's own submit is cancelled, and `onSubmit` receives the event so the
+ * page can read the address.
+ *
+ * Desktop (Figma 1440) sets the panel 560 wide and the list 672 beside it, the
+ * thumbnails 88 by 66. Tablet (768) stacks them, the thumbnails 96 by 72.
+ * Mobile (360) stacks them with the form in a column and 72 by 56 thumbnails.
+ *
+ * Hovering a row scales its thumbnail from 1.00 to 1.06 inside its clip and
+ * turns its title `info` (180ms). Keyboard focus does the same. There is no
+ * hover on Mobile; pressing a row dims it to 92%. The mail icon is decorative
+ * and does not move. Reduced motion turns the scale off. Nothing plays on load
+ * or on a timer.
+ *
+ * Arabic mirrors by the page's `dir`: on Desktop the panel is at the right and
+ * the list at the left, the thumbnails sit at the right of each row, and the
+ * field's text is aligned to the start. The photographs are never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * still follows the window, since an element can't query itself.
+ */
+
+export interface BlogCardsNewsletterLatestPanel {
+  /** The panel title, an `h2`. */
+  title: React.ReactNode
+  /** The note under the title. */
+  note: React.ReactNode
+  /** The email field's placeholder. */
+  placeholder: string
+  /** The email field's accessible name. The field shows no label, as in Figma. Falls back to the default copy's. */
+  emailLabel?: string
+  /** The button's label. */
+  submitLabel: React.ReactNode
+  /** The small print under the form. Hidden when empty. */
+  smallPrint: React.ReactNode
+}
+
+export interface BlogCardsNewsletterLatestPost {
+  /** The thumbnail. Without one the thumbnail is a placeholder of the same size. */
+  image?: { src: string; alt: string }
+  /** The category. */
+  category: React.ReactNode
+  /** The date, as written: "Aug 18, 2026". */
+  date: React.ReactNode
+  /** The read time, as written: "9 min read". */
+  readTime: React.ReactNode
+  /** The title, an `h3`, and the row's accessible name. */
+  title: React.ReactNode
+  /** Where the row goes. */
+  href: string
+}
+
+export interface BlogCardsNewsletterLatestCopy {
+  /** The subscribe panel. */
+  panel: BlogCardsNewsletterLatestPanel
+  /** The label over the list, an `h2`. */
+  latestLabel: React.ReactNode
+  /** The link at the end of the list label. Hidden when null. */
+  viewAll: { label: React.ReactNode; href: string } | null
+  /** The latest posts, in reading order. */
+  latest: BlogCardsNewsletterLatestPost[]
+  /** Shown instead of the rows when `latest` is empty. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsNewsletterLatestCopy> = {
+  en: {
+    panel: {
+      title: "The Fasla dispatch",
+      note: "One email a month: new posts, what changed in the system, and the decisions behind it. No product news.",
+      placeholder: "you@company.com",
+      emailLabel: "Email address",
+      submitLabel: "Subscribe",
+      smallPrint: "2,140 designers and engineers already read it. Unsubscribe any time.",
+    },
+    latestLabel: "LATEST POSTS",
+    viewAll: { label: "View all", href: "#" },
+    latest: [
+      { category: "Design Systems", date: "Aug 18, 2026", readTime: "9 min read", title: "Why we rebuilt every token as a Figma variable", href: "#" },
+      { category: "RTL & Arabic", date: "Aug 11, 2026", readTime: "12 min read", title: "Arabic type on the web: what breaks and why", href: "#" },
+      { category: "Foundations", date: "Aug 4, 2026", readTime: "6 min read", title: "The 8-point grid is not a religion", href: "#" },
+      { category: "Engineering", date: "Jul 28, 2026", readTime: "8 min read", title: "Shipping dark mode without a second design file", href: "#" },
+    ],
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    panel: {
+      title: "نشرة فاصلة",
+      note: "بريد واحد في الشهر: مقالات جديدة، وما تغيّر في النظام، والقرارات وراء ذلك. بلا أخبار منتجات.",
+      placeholder: "you@company.com",
+      emailLabel: "البريد الإلكتروني",
+      submitLabel: "اشترك",
+      smallPrint: "2,140 مصمماً ومهندساً يقرؤونها بالفعل. ألغِ الاشتراك متى شئت.",
+    },
+    latestLabel: "أحدث المقالات",
+    viewAll: { label: "عرض الكل", href: "#" },
+    latest: [
+      { category: "أنظمة التصميم", date: "18 أغسطس 2026", readTime: "قراءة 9 دقائق", title: "لماذا أعدنا بناء كل رمز تصميمي كمتغيّر في Figma", href: "#" },
+      { category: "العربية وRTL", date: "11 أغسطس 2026", readTime: "قراءة 12 دقيقة", title: "الخط العربي على الويب: ما الذي ينكسر ولماذا", href: "#" },
+      { category: "الأساسيات", date: "4 أغسطس 2026", readTime: "قراءة 6 دقائق", title: "شبكة الثماني نقاط ليست عقيدة", href: "#" },
+      { category: "الهندسة", date: "28 يوليو 2026", readTime: "قراءة 8 دقائق", title: "إطلاق الوضع الداكن دون ملف تصميم ثانٍ", href: "#" },
+    ],
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsNewsletterLatestCopy = COPY
+
+/*
+ * Every class below is written out whole: Tailwind finds a class by reading
+ * the source, so none is built from pieces. The hover and focus ones are from
+ * Tablet up (Mobile has none).
+ */
+const ROW =
+  "group/row flex items-center gap-4 border-b py-4 transition-opacity duration-[120ms] motion-reduce:transition-none [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:[@container(max-width:39.99rem)]:opacity-[0.92]"
+const THUMB_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:motion-safe:scale-[1.06] group-focus-visible/row:[@container(min-width:40rem)]:motion-safe:scale-[1.06]"
+/*
+ * The field sits on the inverse panel, which is white in dark mode, while the
+ * Input atom paints itself with mode tokens: a 5% white fill and a 20% white
+ * border (invisible on white), a `muted-foreground` placeholder (#d4d4d4, about
+ * 1.5:1) and `foreground` text (near-white). In dark mode the field reads the
+ * inverse tokens instead, so its edge, placeholder and text are visible
+ * (`muted-foreground-inverse` is 4.7:1 on the panel). Light mode is the atom's
+ * own, as Figma draws it.
+ */
+const FIELD =
+  "min-w-0 flex-1 dark:[&_[data-slot=input-box]]:border-muted-foreground-inverse dark:[&_[data-slot=input-box]]:bg-transparent dark:[&_[data-slot=input]]:text-foreground-inverse dark:[&_[data-slot=input]]:placeholder:text-muted-foreground-inverse"
+const TITLE_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:text-info group-focus-visible/row:[@container(min-width:40rem)]:text-info"
+
+export interface BlogCardsNewsletterLatestProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSubmit">,
+    Partial<BlogCardsNewsletterLatestCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** Called with the submit event. The block submits nowhere itself. */
+  onSubmit?: React.FormEventHandler<HTMLFormElement>
+}
+
+export function BlogCardsNewsletterLatest({
+  locale = "en",
+  panel,
+  latestLabel,
+  viewAll,
+  latest,
+  emptyLabel,
+  onSubmit,
+  className,
+  ...props
+}: BlogCardsNewsletterLatestProps) {
+  const copy = COPY[locale]
+  const panelId = React.useId()
+  const listId = React.useId()
+  const rowId = React.useId()
+  const form = panel ?? copy.panel
+  const list = latest ?? copy.latest
+  const link = viewAll === undefined ? copy.viewAll : viewAll
+
+  return (
+    <section
+      aria-labelledby={panelId}
+      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="mx-auto flex w-full max-w-[1280px] flex-col gap-8 [@container(min-width:40rem)]:gap-10 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-12">
+        <div className="flex flex-col gap-6 rounded-xl bg-background-inverse p-6 [@container(min-width:40rem)]:p-10 [@container(min-width:64rem)]:w-[560px] [@container(min-width:64rem)]:shrink-0">
+          <MailIcon aria-hidden="true" className="size-7 text-foreground-inverse" />
+          <h2
+            id={panelId}
+            className="text-2xl font-semibold text-foreground-inverse [@container(min-width:40rem)]:text-3xl"
+          >
+            {form.title}
+          </h2>
+          <p className="text-base text-muted-foreground-inverse">{form.note}</p>
+          <form
+            className="flex flex-col gap-2 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center"
+            onSubmit={(event) => {
+              event.preventDefault()
+              onSubmit?.(event)
+            }}
+          >
+            <Input
+              type="email"
+              name="email"
+              size="md"
+              autoComplete="email"
+              aria-label={form.emailLabel ?? copy.panel.emailLabel}
+              placeholder={form.placeholder}
+              className={FIELD}
+            />
+            <Button type="submit" variant="secondary" size="md" className="w-full [@container(min-width:40rem)]:w-auto">
+              {form.submitLabel}
+            </Button>
+          </form>
+          {form.smallPrint ? <p className="text-xs text-muted-foreground-inverse">{form.smallPrint}</p> : null}
+        </div>
+
+        <div className="flex min-w-0 flex-col [@container(min-width:64rem)]:flex-1">
+          <div className="flex items-center justify-between gap-4 border-b pb-3">
+            <h2 id={listId} className="min-w-0 text-xs font-medium uppercase text-muted-foreground">
+              {latestLabel ?? copy.latestLabel}
+            </h2>
+            {link ? (
+              <a
+                href={link.href}
+                className="relative shrink-0 text-xs font-medium text-info [outline:none] hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:left-1/2 after:top-1/2 after:h-11 after:w-[max(100%,2.75rem)] after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']"
+              >
+                {link.label}
+              </a>
+            ) : null}
+          </div>
+          {list.length === 0 ? (
+            <p className="py-6 text-center text-sm text-muted-foreground">{emptyLabel ?? copy.emptyLabel}</p>
+          ) : (
+            <ul>
+              {list.map((post, index) => (
+                <li key={index} className="flex">
+                  <a
+                    href={post.href}
+                    aria-labelledby={`${rowId}-${index}`}
+                    className={cn(ROW, "w-full", index === list.length - 1 && "border-b-0")}
+                  >
+                    <div className="relative h-14 w-[72px] shrink-0 overflow-hidden rounded-sm bg-muted [@container(min-width:40rem)]:h-[72px] [@container(min-width:40rem)]:w-24 [@container(min-width:64rem)]:h-[66px] [@container(min-width:64rem)]:w-[88px]">
+                      {post.image ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                          src={post.image.src}
+                          alt={post.image.alt}
+                          loading="lazy"
+                          className={cn(
+                            "absolute inset-0 size-full object-cover transition-transform duration-[180ms] ease-out motion-reduce:transition-none",
+                            THUMB_HOVER
+                          )}
+                        />
+                      ) : null}
+                    </div>
+                    <div className="flex min-w-0 flex-1 flex-col gap-1">
+                      <h3
+                        id={`${rowId}-${index}`}
+                        className={cn(
+                          "text-base font-medium text-foreground transition-colors duration-[180ms] motion-reduce:transition-none",
+                          TITLE_HOVER
+                        )}
+                      >
+                        {post.title}
+                      </h3>
+                      <span className="flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+                        <span>{post.category}</span>
+                        <span aria-hidden="true" className="size-[3px] rounded-full bg-muted-foreground" />
+                        <span>{post.date}</span>
+                        <span aria-hidden="true" className="size-[3px] rounded-full bg-muted-foreground" />
+                        <span>{post.readTime}</span>
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/registry/blocks/blog-cards-newsletter-latest/index.ts

@@ -0,0 +1,6 @@
+export {
+  BlogCardsNewsletterLatest,
+  blogCardsNewsletterLatestCopy,
+  type BlogCardsNewsletterLatestCopy,
+  type BlogCardsNewsletterLatestProps,
+} from "./BlogCardsNewsletterLatest"

package/registry/blocks/blog-cards-numbered-reading-list/BlogCardsNumberedReadingList.tsx

@@ -0,0 +1,275 @@
+import * as React from "react"
+import { ArrowRightIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Numbered Reading List.
+ *
+ * A heading block (an eyebrow and a heading, with an update note at its end)
+ * over a ruled list of numbered articles, on a `muted` band. A row is a large
+ * rank number in the border colour, then the copy: a title, a summary, and
+ * an outline category badge with the read time; at the end an outline icon
+ * button with an arrow. The whole row is one link, named by its title; the
+ * arrow is only drawn and hidden from assistive technology.
+ *
+ * Desktop (Figma 1440) and Tablet (768) set the rank, the copy and the arrow
+ * in one row, the rank 5XL wide. Mobile (360) stacks them: a smaller rank over
+ * the copy, with the arrow under the text.
+ *
+ * Hover and keyboard focus turn the rank from the border colour to the
+ * foreground and the title `info` (180ms), and move the arrow 2px toward the
+ * upper end corner. The arrow is at full strength at rest, as in Figma. The
+ * badge does not move. On Mobile there is no hover; pressing a row dims it to 92%.
+ * Reduced motion turns all of it off. Nothing plays on load or on a timer.
+ *
+ * Arabic mirrors by the page's `dir`: the rank is at the right end of the
+ * row and the arrow is mirrored, `arrow-right` becoming `arrow-left`, and
+ * travels toward the upper left. There are no photographs.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * still follows the window, since an element can't query itself.
+ */
+
+export interface BlogCardsNumberedReadingListPost {
+  /** The title, an `h3`, and the row's accessible name. */
+  title: React.ReactNode
+  /** The summary. */
+  summary: React.ReactNode
+  /** The category badge. */
+  category: React.ReactNode
+  /** The read time, as written: "9 min read". */
+  readTime: React.ReactNode
+  /** Where the row goes. */
+  href: string
+}
+
+export interface BlogCardsNumberedReadingListCopy {
+  /** The small line over the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section heading, an `h2`. */
+  heading: React.ReactNode
+  /** The note at the end of the header. Hidden when empty. */
+  note: React.ReactNode
+  /** The articles, in order; each gets its place number, `01` upward. */
+  posts: BlogCardsNumberedReadingListPost[]
+  /** Shown instead of the rows when `posts` is empty. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsNumberedReadingListCopy> = {
+  en: {
+    eyebrow: "START HERE",
+    heading: "Five posts that explain how we work",
+    note: "Updated monthly",
+    posts: [
+      {
+        title: "Why we rebuilt every token as a Figma variable",
+        summary:
+          "Six months of drift taught us that a hex code in a style is a promise you cannot keep. Here is the migration, and what it cost.",
+        category: "Design Systems",
+        readTime: "9 min read",
+        href: "#",
+      },
+      {
+        title: "A type ramp for two scripts",
+        summary:
+          "Latin and Arabic disagree about x-height, ascenders, and optical size. Building one ramp that serves both.",
+        category: "Typography",
+        readTime: "11 min read",
+        href: "#",
+      },
+      {
+        title: "Mirroring is not flipping",
+        summary: "The layout rules that actually change in RTL — and the ones designers keep mirroring by mistake.",
+        category: "RTL & Arabic",
+        readTime: "10 min read",
+        href: "#",
+      },
+      {
+        title: "What our first design-system survey told us",
+        summary:
+          "142 responses from designers and engineers. The gap between what we documented and what people found.",
+        category: "Research",
+        readTime: "9 min read",
+        href: "#",
+      },
+      {
+        title: "Documenting a component so an agent can use it",
+        summary: "Machine-readable content contracts turned out to make our human docs better too.",
+        category: "Engineering",
+        readTime: "11 min read",
+        href: "#",
+      },
+    ],
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    eyebrow: "ابدأ من هنا",
+    heading: "خمسة مقالات تشرح كيف نعمل",
+    note: "يُحدَّث شهريًا",
+    posts: [
+      {
+        title: "لماذا أعدنا بناء كل رمز تصميمي كمتغيّر في Figma",
+        summary:
+          "ستة أشهر من الانحراف علّمتنا أن كود اللون داخل نمطٍ ما وعدٌ لا يمكن الوفاء به. إليكم قصة الترحيل وما كلّفنا.",
+        category: "أنظمة التصميم",
+        readTime: "قراءة 9 دقائق",
+        href: "#",
+      },
+      {
+        title: "سلّم خطوط لنظامي كتابة",
+        summary:
+          "اللاتينية والعربية تختلفان حول ارتفاع الأحرف والصواعد والحجم البصري. هكذا بنينا سلّمًا واحدًا يخدم الاثنين.",
+        category: "التايبوغرافيا",
+        readTime: "قراءة 11 دقيقة",
+        href: "#",
+      },
+      {
+        title: "الانعكاس ليس مجرد قلب",
+        summary: "قواعد التخطيط التي تتغير فعلًا في RTL، وتلك التي يعكسها المصممون بالخطأ.",
+        category: "العربية وRTL",
+        readTime: "قراءة 10 دقائق",
+        href: "#",
+      },
+      {
+        title: "ما أخبرنا به أول استبيان لنظام التصميم",
+        summary: "142 إجابة من مصممين ومهندسين. الفجوة بين ما وثّقناه وما وجده الناس.",
+        category: "الأبحاث",
+        readTime: "قراءة 9 دقائق",
+        href: "#",
+      },
+      {
+        title: "توثيق المكوّن ليستطيع وكيل ذكي استخدامه",
+        summary: "عقود المحتوى المقروءة آليًا حسّنت وثائقنا البشرية أيضًا.",
+        category: "الهندسة",
+        readTime: "قراءة 11 دقيقة",
+        href: "#",
+      },
+    ],
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsNumberedReadingListCopy = COPY
+
+/*
+ * Every class below is written out whole: Tailwind finds a class by reading
+ * the source, so none is built from pieces. The hover and focus ones are from
+ * Tablet up (Mobile has none).
+ */
+const ROW =
+  "group/row flex flex-col gap-3 border-b py-6 transition-opacity duration-[120ms] motion-reduce:transition-none [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:gap-8 [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:[@container(max-width:39.99rem)]:opacity-[0.92]"
+const RANK_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:text-foreground group-focus-visible/row:[@container(min-width:40rem)]:text-foreground"
+const TITLE_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:text-info group-focus-visible/row:[@container(min-width:40rem)]:text-info"
+const ARROW_MOVE =
+  "rtl:-scale-x-100 transition duration-[180ms] ease-out motion-reduce:transition-none group-hover/row:[@container(min-width:40rem)]:motion-safe:-translate-y-0.5 group-focus-visible/row:[@container(min-width:40rem)]:motion-safe:-translate-y-0.5 group-hover/row:[@container(min-width:40rem)]:motion-safe:ltr:translate-x-0.5 group-hover/row:[@container(min-width:40rem)]:motion-safe:rtl:-translate-x-0.5 group-focus-visible/row:[@container(min-width:40rem)]:motion-safe:ltr:translate-x-0.5 group-focus-visible/row:[@container(min-width:40rem)]:motion-safe:rtl:-translate-x-0.5"
+
+export interface BlogCardsNumberedReadingListProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<BlogCardsNumberedReadingListCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function BlogCardsNumberedReadingList({
+  locale = "en",
+  eyebrow,
+  heading,
+  note,
+  posts,
+  emptyLabel,
+  className,
+  ...props
+}: BlogCardsNumberedReadingListProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const titleId = React.useId()
+  const list = posts ?? copy.posts
+  const lines = { eyebrow: eyebrow ?? copy.eyebrow, note: note ?? copy.note }
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn(
+        "[container-type:inline-size] bg-muted px-4 py-8 md:px-6 md:py-16 lg:px-20 lg:py-24",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-10">
+        <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-8">
+          <div className="flex min-w-0 flex-col gap-2">
+            {lines.eyebrow ? (
+              <p className="text-xs font-medium uppercase text-muted-foreground">{lines.eyebrow}</p>
+            ) : null}
+            <h2
+              id={headingId}
+              className="text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-4xl"
+            >
+              {heading ?? copy.heading}
+            </h2>
+          </div>
+          {lines.note ? <p className="shrink-0 text-sm text-muted-foreground">{lines.note}</p> : null}
+        </div>
+
+        {list.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground">{emptyLabel ?? copy.emptyLabel}</p>
+        ) : (
+          <ol>
+            {list.map((post, index) => (
+              <li key={index} className="flex">
+                <a href={post.href} aria-labelledby={`${titleId}-${index}`} className={cn(ROW, "w-full")}>
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "text-3xl font-semibold tabular-nums text-border transition-colors duration-[180ms] motion-reduce:transition-none [@container(min-width:40rem)]:text-5xl",
+                      RANK_HOVER
+                    )}
+                  >
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  <div className="flex min-w-0 flex-1 flex-col gap-2">
+                    <h3
+                      id={`${titleId}-${index}`}
+                      className={cn(
+                        "text-xl font-semibold text-foreground transition-colors duration-[180ms] motion-reduce:transition-none [@container(min-width:40rem)]:text-2xl",
+                        TITLE_HOVER
+                      )}
+                    >
+                      {post.title}
+                    </h3>
+                    <p className="text-base text-muted-foreground">{post.summary}</p>
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" tone="secondary" size="sm" radius="rounded">
+                        {post.category}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">{post.readTime}</span>
+                    </div>
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      buttonVariants({ variant: "outline", size: "icon-md", radius: "rounded" }),
+                      "pointer-events-none shrink-0 self-start [@container(min-width:40rem)]:self-center"
+                    )}
+                  >
+                    <ArrowRightIcon className={cn("size-4", ARROW_MOVE)} />
+                  </span>
+                </a>
+              </li>
+            ))}
+          </ol>
+        )}
+      </div>
+    </section>
+  )
+}

package/registry/blocks/blog-cards-numbered-reading-list/index.ts

@@ -0,0 +1,7 @@
+export {
+  BlogCardsNumberedReadingList,
+  blogCardsNumberedReadingListCopy,
+  type BlogCardsNumberedReadingListCopy,
+  type BlogCardsNumberedReadingListPost,
+  type BlogCardsNumberedReadingListProps,
+} from "./BlogCardsNumberedReadingList"