@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/gallery-mosaic-statement-tile/GalleryMosaicStatementTile.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Gallery` (42478:479), Type=Mosaic + Statement Tile.
+ *
+ * A full-bleed mosaic of square photos, edge to edge with no gaps, with one
+ * tile in the primary colour that carries the section's heading, a line of
+ * text and a link. The block has no padding and no max width: the mosaic is
+ * the section, and its squares grow with the page.
+ *
+ * Desktop is five columns by two rows, the statement tile in the middle of
+ * the first row, so nine photos show. Tablet is four columns by three rows,
+ * the tile two squares wide at the start of the first row; Mobile is two
+ * columns, the tile across the top. Both show ten photos. The photos are one
+ * list in the same order at every breakpoint: only the tile moves, and
+ * Desktop hides the tenth. The tile is placed in the grid and the photos
+ * flow round it, so the order holds however many photos there are.
+ *
+ * On Tablet and Desktop the tile's heading sits at the top and its text and
+ * link at the bottom; on Mobile the three stack from the top, as in Figma.
+ *
+ * In Arabic the grid runs from the right, as Figma's RTL variants draw it,
+ * with the tile's text right-aligned. 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, so the block lays out for the room it is
+ * given, such as a docs preview narrower than the screen. The base classes
+ * are Figma's Mobile (360); `[@container(min-width:48rem)]:` is its Tablet,
+ * from 768px, and `[@container(min-width:64rem)]:` its Desktop, from
+ * 1024px. The section's own padding still follows the window, since an
+ * element can't query itself.
+ */
+
+export interface GalleryMosaicStatementTileAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface GalleryMosaicStatementTilePhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface GalleryMosaicStatementTileCopy {
+  /** The section's heading, an `h2`, at the top of the statement tile. */
+  heading: React.ReactNode
+  /** The text at the bottom of the tile. */
+  description: React.ReactNode
+  /** The solid secondary button under the text, to the full album. Hidden when null. */
+  action: GalleryMosaicStatementTileAction | null
+  /** Shown in place of the photos when `photos` is an empty list. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", GalleryMosaicStatementTileCopy> = {
+  en: {
+    heading: "Life at Fasla",
+    description: "Two studios, one long table and a lot of coffee. See what a week here looks like.",
+    action: { label: "Open the album", href: "#gallery" },
+    empty: "No photos yet.",
+  },
+  ar: {
+    heading: "الحياة في فاصلة",
+    description: "استوديوهان وطاولة طويلة وكثير من القهوة. اطّلع على شكل أسبوع هنا.",
+    action: { label: "افتح الألبوم", href: "#gallery" },
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+/** Figma's mosaic holds ten photos (Desktop shows the first nine). */
+const SLOTS = 10
+
+export interface GalleryMosaicStatementTileProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<GalleryMosaicStatementTileCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The photos, in Figma's order, which is the same at every breakpoint:
+   * row by row from the start edge, skipping the statement tile. Figma's
+   * mosaic holds ten; Desktop shows the first nine, Tablet and Mobile all
+   * ten. Photos past the tenth are not shown. None by default: ten `muted`
+   * placeholders. An empty list shows the `empty` line in place of the
+   * photos, under the tile.
+   * @default none: `muted` placeholders
+   */
+  photos?: GalleryMosaicStatementTilePhoto[]
+}
+
+export function GalleryMosaicStatementTile({
+  locale = "en",
+  heading,
+  description,
+  action,
+  empty,
+  photos,
+  className,
+  ...props
+}: GalleryMosaicStatementTileProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const link = action === undefined ? copy.action : action
+  const squares: (GalleryMosaicStatementTilePhoto | undefined)[] = (
+    photos ?? Array.from({ length: SLOTS }, () => undefined)
+  ).slice(0, SLOTS)
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background", className)} {...props}>
+      <div className="grid grid-cols-2 [@container(min-width:48rem)]:grid-cols-4 [@container(min-width:64rem)]:grid-cols-5">
+        <div className="col-span-2 flex aspect-[2/1] flex-col gap-3 bg-primary p-6 text-primary-foreground [@container(min-width:48rem)]:justify-between [@container(min-width:64rem)]:col-span-1 [@container(min-width:64rem)]:col-start-3 [@container(min-width:64rem)]:row-start-1 [@container(min-width:64rem)]:aspect-square">
+          <h2 id={headingId} className="text-2xl font-semibold">
+            {heading ?? copy.heading}
+          </h2>
+          <div className="flex flex-col items-start gap-4">
+            <p className="text-sm">{description ?? copy.description}</p>
+            {link ? (
+              <a href={link.href} className={buttonVariants({ variant: "secondary", size: "sm" })}>
+                {link.label}
+              </a>
+            ) : null}
+          </div>
+        </div>
+
+        {squares.length === 0 ? (
+          <p className="col-span-full px-8 py-12 text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          squares.map((photo, index) => (
+            <div
+              key={index}
+              className={cn("relative aspect-square overflow-hidden bg-muted", index === SLOTS - 1 && "[@container(min-width:64rem)]:hidden")}
+            >
+              {photo ? (
+                <img
+                  src={photo.src}
+                  alt={photo.alt}
+                  loading="lazy"
+                  decoding="async"
+                  className="absolute inset-0 size-full object-cover"
+                />
+              ) : 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 galleryMosaicStatementTileCopy = COPY

package/registry/blocks/gallery-mosaic-statement-tile/index.ts

@@ -0,0 +1,8 @@
+export {
+  GalleryMosaicStatementTile,
+  galleryMosaicStatementTileCopy,
+  type GalleryMosaicStatementTileAction,
+  type GalleryMosaicStatementTileCopy,
+  type GalleryMosaicStatementTilePhoto,
+  type GalleryMosaicStatementTileProps,
+} from "./GalleryMosaicStatementTile"

package/registry/blocks/gallery-photo-bento/GalleryPhotoBento.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Gallery` (42478:479), Type=Photo Bento.
+ *
+ * One large hero photo beside a two-by-two of smaller ones, under a header
+ * with an "Open gallery" link. On Desktop the hero takes the start side
+ * (824 of 1248px) and the four tiles stack two-high at the end, the hero as
+ * tall as both rows; on Tablet and phones the hero goes full width on top
+ * and the four tiles sit in two rows under it. The header's link sits at the
+ * end of the row on Desktop, its foot level with the description's, and
+ * drops under the description from Tablet down. No photos come with the
+ * block: pass `photos`, and until then each slot shows a `muted`
+ * placeholder of the same box.
+ *
+ * Heights are Figma's at each breakpoint (hero 240/400/584px, tiles
+ * 120/200/280px) and widths share the row, so between breakpoints the photos
+ * crop rather than change height. Figma's phone leaves 16px between the hero
+ * and the tiles and 24px between the tiles; that is kept.
+ *
+ * In Arabic the hero moves to the right and the tiles fill from the right,
+ * as Figma's RTL variants place them; every side here is a logical one. The
+ * link's arrow points up and to the end, so it turns to up-left in Arabic,
+ * as Figma swaps it. 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, so the 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.
+ */
+
+export interface GalleryPhotoBentoAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface GalleryPhotoBentoPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface GalleryPhotoBentoCopy {
+  /** The short label above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. */
+  description: React.ReactNode
+  /** The solid link to the full gallery, with an arrow. Hidden when null. */
+  action: GalleryPhotoBentoAction | null
+  /** Shown in place of the photos when `photos` is an empty list. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", GalleryPhotoBentoCopy> = {
+  en: {
+    eyebrow: "GALLERY",
+    heading: "A closer look at the studio",
+    description: "Four floors, two cities and one very long table. Here is where the work happens.",
+    action: { label: "Open gallery", href: "#gallery" },
+    empty: "No photos yet.",
+  },
+  ar: {
+    eyebrow: "معرض الصور",
+    heading: "نظرة أقرب إلى الاستوديو",
+    description: "أربعة طوابق ومدينتان وطاولة واحدة طويلة. هنا يحدث العمل.",
+    action: { label: "افتح المعرض", href: "#gallery" },
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+/** Figma's five slots: the hero, then the four tiles row by row. */
+const SLOTS = 5
+
+export interface GalleryPhotoBentoProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<GalleryPhotoBentoCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The five photos, in Figma's order: the hero, then the tiles row by row
+   * from the start (top start, top end, bottom start, bottom end). Leave it
+   * out for `muted` placeholders; an empty list shows `empty`.
+   * @default none: `muted` placeholders
+   */
+  photos?: GalleryPhotoBentoPhoto[]
+}
+
+export function GalleryPhotoBento({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  action,
+  empty,
+  photos,
+  className,
+  ...props
+}: GalleryPhotoBentoProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const link = action === undefined ? copy.action : action
+
+  const photo = (index: number, frame: string) => {
+    const image = photos?.[index]
+    return (
+      <div className={cn("relative min-w-0 overflow-hidden rounded-lg bg-muted", frame)}>
+        {image ? (
+          <img src={image.src} alt={image.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" />
+        ) : null}
+      </div>
+    )
+  }
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] 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-12">
+        <header className="flex flex-col items-start gap-2 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-end [@container(min-width:64rem)]:gap-16">
+          <div className="flex w-full min-w-0 flex-col gap-2 [@container(min-width:64rem)]:flex-1">
+            <p className="text-xs font-medium text-primary">{eyebrow ?? copy.eyebrow}</p>
+            <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-4xl">
+              {heading ?? copy.heading}
+            </h2>
+            <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          </div>
+          {link ? (
+            <a href={link.href} className={buttonVariants()}>
+              {link.label}
+              <ArrowUpRight size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+            </a>
+          ) : null}
+        </header>
+
+        {photos && photos.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <div className="flex flex-col gap-4 [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:flex-row">
+            {photo(0, "h-[240px] [@container(min-width:40rem)]:h-[400px] [@container(min-width:64rem)]:h-[584px] [@container(min-width:64rem)]:flex-[824_1_0%]")}
+            <div className="grid min-w-0 grid-cols-2 gap-6 [@container(min-width:64rem)]:flex-[400_1_0%]">
+              {Array.from({ length: SLOTS - 1 }, (_, tile) => (
+                <React.Fragment key={tile}>{photo(tile + 1, "h-[120px] [@container(min-width:40rem)]:h-[200px] [@container(min-width:64rem)]:h-[280px]")}</React.Fragment>
+              ))}
+            </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 galleryPhotoBentoCopy = COPY

package/registry/blocks/gallery-photo-bento/index.ts

@@ -0,0 +1,8 @@
+export {
+  GalleryPhotoBento,
+  galleryPhotoBentoCopy,
+  type GalleryPhotoBentoAction,
+  type GalleryPhotoBentoCopy,
+  type GalleryPhotoBentoPhoto,
+  type GalleryPhotoBentoProps,
+} from "./GalleryPhotoBento"

package/registry/blocks/gallery-photo-spotlight/GalleryPhotoSpotlight.tsx

@@ -0,0 +1,305 @@
+"use client"
+
+import * as React from "react"
+import { DownloadIcon, ExpandIcon, EyeIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Gallery` (42478:479), Type=Photo Spotlight.
+ *
+ * One photo given the stage: a large 4:3 print with a full-size button in
+ * its top end corner, and beside it a panel with an eyebrow, the photo's
+ * title and a short story, a table of its details between hairlines
+ * (location, date, camera, exposure, series), and two actions: open the
+ * series and download the photo. From Tablet down the panel moves under the
+ * photo, and on a phone the two actions stack at full width.
+ *
+ * On Desktop the photo and the panel share the width in a fluid grid: the
+ * panel takes 20 to 24rem (Figma's 384px at 1440) and the photo the rest,
+ * always 4:3, so it never widens over the text. The panel's three parts
+ * spread over the photo's height, the actions at its foot. Below Desktop
+ * width, where both no longer fit side by side, the panel stacks under the
+ * photo.
+ *
+ * No photo comes with the block: pass `photo`, and until then the print is a
+ * `muted` box with the `empty` line in its centre, and the full-size and
+ * download controls are hidden, as there is nothing to open. The full-size
+ * button links to the photo itself; give `onExpand` to open your own
+ * viewer instead. Download links to `downloadAction.href`, or to the photo.
+ *
+ * In Arabic the photo moves to the left and the panel to the right, and each
+ * detail row mirrors, its label on the right and the value on the left.
+ * Numbers and Latin runs (B, 35, 1/250 s, ISO 200) sit in `<bdi>`, and a
+ * value made of parts (exposure, series) is separate parts with the middle
+ * dot between them, so they read from the right in Arabic. The photograph is
+ * never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container, so the 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.
+ */
+
+export interface GalleryPhotoSpotlightPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface GalleryPhotoSpotlightDetail {
+  /** The row's label, at the start ("Location"). */
+  label: React.ReactNode
+  /** The row's value, at the end. An array is shown as parts joined by middle dots. */
+  value: React.ReactNode | React.ReactNode[]
+}
+
+export interface GalleryPhotoSpotlightAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface GalleryPhotoSpotlightCopy {
+  /** The short label above the heading. */
+  eyebrow: React.ReactNode
+  /** The photo's title, the section's `h2`. */
+  heading: React.ReactNode
+  /** The short story under the heading. */
+  description: React.ReactNode
+  /** The details table, in order. Each row has a `label` and a `value`. */
+  details: GalleryPhotoSpotlightDetail[]
+  /** The solid button: open the series the photo belongs to. */
+  primaryAction: GalleryPhotoSpotlightAction
+  /**
+   * The outline download button. Without an `href` it downloads the photo
+   * itself. Hidden when null, or when there is nothing to download.
+   */
+  downloadAction: { label: React.ReactNode; href?: string } | null
+  /** The full-size button's accessible name. */
+  expandLabel: string
+  /** Shown in the photo's place while there is no photo. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", GalleryPhotoSpotlightCopy> = {
+  en: {
+    eyebrow: "PHOTO OF THE MONTH",
+    heading: "Riverside offices, first light",
+    description:
+      "Taken the morning after the move, before a single desk had been claimed. The glass, the concrete and one very long table.",
+    details: [
+      { label: "Location", value: "Riverside, Building B" },
+      { label: "Date", value: "12 July 2026" },
+      { label: "Camera", value: "Full-frame, 35 mm" },
+      { label: "Exposure", value: ["1/250 s", "f/4", "ISO 200"] },
+      { label: "Series", value: ["New offices", "64 photos"] },
+    ],
+    primaryAction: { label: "Open series", href: "#series" },
+    downloadAction: { label: "Download" },
+    expandLabel: "View full size",
+    empty: "No photo yet.",
+  },
+  ar: {
+    eyebrow: "صورة الشهر",
+    heading: "مكاتب ريفرسايد، أول الضوء",
+    description: "صُوّرت صباح اليوم التالي للانتقال، قبل أن يُحجز أي مكتب. الزجاج والخرسانة وطاولة واحدة طويلة.",
+    details: [
+      {
+        label: "الموقع",
+        value: (
+          <>
+            ريفرسايد، مبنى <bdi dir="ltr">B</bdi>
+          </>
+        ),
+      },
+      {
+        label: "التاريخ",
+        value: (
+          <>
+            <bdi dir="ltr">12</bdi> يوليو <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+      {
+        label: "الكاميرا",
+        value: (
+          <>
+            إطار كامل، <bdi dir="ltr">35</bdi> مم
+          </>
+        ),
+      },
+      {
+        label: "التعريض",
+        value: [
+          <bdi key="shutter" dir="ltr">1/250 s</bdi>,
+          <bdi key="aperture" dir="ltr">f/4</bdi>,
+          <bdi key="iso" dir="ltr">ISO 200</bdi>,
+        ],
+      },
+      {
+        label: "السلسلة",
+        value: [
+          "المكاتب الجديدة",
+          <React.Fragment key="count">
+            <bdi dir="ltr">64</bdi> صورة
+          </React.Fragment>,
+        ],
+      },
+    ],
+    primaryAction: { label: "افتح السلسلة", href: "#series" },
+    downloadAction: { label: "تنزيل" },
+    expandLabel: "عرض بالحجم الكامل",
+    empty: "لا توجد صورة بعد.",
+  },
+}
+
+const ICON = { size: 16, strokeWidth: 1.5, absoluteStrokeWidth: true, "aria-hidden": true } as const
+
+export interface GalleryPhotoSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<GalleryPhotoSpotlightCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The spotlit photo, the block's one slot. None by default: a `muted` box
+   * with the `empty` line.
+   * @default none: `muted` placeholder
+   */
+  photo?: GalleryPhotoSpotlightPhoto
+  /**
+   * Called by the full-size button, which is then a button rather than a
+   * link to the photo. Use it to open your own viewer.
+   */
+  onExpand?: () => void
+}
+
+export function GalleryPhotoSpotlight({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  details,
+  primaryAction,
+  downloadAction,
+  expandLabel,
+  empty,
+  photo,
+  onExpand,
+  className,
+  ...props
+}: GalleryPhotoSpotlightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rows = details ?? copy.details
+  const primary = primaryAction ?? copy.primaryAction
+  const download = downloadAction === undefined ? copy.downloadAction : downloadAction
+  const downloadHref = download ? (download.href ?? photo?.src) : undefined
+  const expand = expandLabel ?? copy.expandLabel
+  // Figma's Icon Button: Solid, Secondary, sm, Rounded, 16px in from the corner.
+  const expandClass = "absolute end-4 top-4"
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto grid w-full max-w-[1248px] gap-6 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:grid-cols-[minmax(0,1fr)_minmax(20rem,24rem)] [@container(min-width:64rem)]:gap-12">
+        <div className="relative flex h-[340px] items-center justify-center overflow-hidden rounded-lg bg-muted [@container(min-width:40rem)]:h-[420px] [@container(min-width:64rem)]:aspect-[4/3] [@container(min-width:64rem)]:h-auto [@container(min-width:64rem)]:self-start">
+          {photo ? (
+            <>
+              <img
+                src={photo.src}
+                alt={photo.alt}
+                loading="lazy"
+                decoding="async"
+                className="absolute inset-0 size-full object-cover"
+              />
+              {onExpand ? (
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon-sm"
+                  radius="rounded"
+                  aria-label={expand}
+                  onClick={onExpand}
+                  className={expandClass}
+                >
+                  <ExpandIcon {...ICON} />
+                </Button>
+              ) : (
+                <a
+                  href={photo.src}
+                  aria-label={expand}
+                  className={buttonVariants({ variant: "secondary", size: "icon-sm", radius: "rounded", className: expandClass })}
+                >
+                  <ExpandIcon {...ICON} />
+                </a>
+              )}
+            </>
+          ) : (
+            <p className="px-4 text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-6 [@container(min-width:64rem)]:justify-between">
+          <div className="flex flex-col gap-4">
+            <p className="text-xs font-medium text-primary">{eyebrow ?? copy.eyebrow}</p>
+            <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+              {heading ?? copy.heading}
+            </h2>
+            <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          </div>
+
+          {rows.length > 0 ? (
+            <dl className="border-t border-border">
+              {rows.map((row, index) => (
+                <div key={index} className="flex items-baseline gap-4 border-b border-border py-3 text-sm">
+                  <dt className="w-24 shrink-0 text-muted-foreground [@container(min-width:40rem)]:w-[120px]">{row.label}</dt>
+                  <dd className="min-w-0 flex-1 text-end font-medium text-foreground">
+                    {Array.isArray(row.value)
+                      ? row.value.map((part, i) => (
+                          <React.Fragment key={i}>
+                            {i > 0 ? (
+                              <span aria-hidden="true" className="mx-1">
+                                ·
+                              </span>
+                            ) : null}
+                            <span className="whitespace-nowrap">{part}</span>
+                          </React.Fragment>
+                        ))
+                      : row.value}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          ) : null}
+
+          <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row">
+            <a href={primary.href} className={buttonVariants({ className: "w-full [@container(min-width:40rem)]:w-auto" })}>
+              <EyeIcon {...ICON} />
+              {primary.label}
+            </a>
+            {download && downloadHref ? (
+              <a
+                href={downloadHref}
+                download
+                className={buttonVariants({ variant: "outline", className: "w-full [@container(min-width:40rem)]:w-auto" })}
+              >
+                <DownloadIcon {...ICON} />
+                {download.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 galleryPhotoSpotlightCopy = COPY

package/registry/blocks/gallery-photo-spotlight/index.ts

@@ -0,0 +1,9 @@
+export {
+  GalleryPhotoSpotlight,
+  galleryPhotoSpotlightCopy,
+  type GalleryPhotoSpotlightAction,
+  type GalleryPhotoSpotlightCopy,
+  type GalleryPhotoSpotlightDetail,
+  type GalleryPhotoSpotlightPhoto,
+  type GalleryPhotoSpotlightProps,
+} from "./GalleryPhotoSpotlight"