@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/blog-cards-overlay-photo-trio/BlogCardsOverlayPhotoTrio.tsx

@@ -0,0 +1,279 @@
+import * as React from "react"
+import { ArrowRightIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Overlay Photo Trio.
+ *
+ * A section header (an eyebrow and a heading, with a ghost "All stories"
+ * button at the end) over three tall photo cards. Each card is one photo
+ * filling its frame, with a caption plate along the bottom: the category and
+ * the read time in small capitals, a title and a summary, all in white on a
+ * dark scrim. The summary is on show at rest. The whole card is the link,
+ * named by its title.
+ *
+ * Desktop (Figma 1440) puts the three cards in a row, 520 tall. Tablet (768)
+ * puts two portrait cards, 460 tall, side by side and a landscape third across
+ * the full width, 380 tall, with a shorter caption. Mobile (360) is one column
+ * of three cards, 420 tall.
+ *
+ * Hover and keyboard focus scale the photo from 1.00 to 1.06 behind its clip
+ * (400ms), darken the scrim from 62% to 72% and lift the caption's text 8px (6px on
+ * the wide Tablet card, whose caption is shorter). Nothing fades in or out and
+ * nothing staggers or reveals on scroll. On Mobile there is no hover;
+ * pressing a card darkens the scrim to 72% and the photo stays still. Reduced
+ * motion turns all of it off.
+ *
+ * The scrim is dark and the text light in both modes, as Figma draws them: a
+ * photograph does not change with the theme. In light mode that is the
+ * inverse tokens, `background-inverse` and `foreground-inverse`; in dark mode
+ * the page's own `background` and `foreground` hold the same two colours, so
+ * `dark:` switches to them. The block needs the `theme-inverse` item.
+ *
+ * Arabic mirrors by the page's `dir`: the card order, the header and the
+ * caption. 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 BlogCardsOverlayPhotoTrioPost {
+  /** The photo filling the card. Without one the card is a `muted` placeholder of the same size. */
+  image?: { src: string; alt: string }
+  /** The category, shown in capitals in English. */
+  category: React.ReactNode
+  /** The read time, as written: "10 min". */
+  readTime: React.ReactNode
+  /** The title, an `h3`, and the card's link. */
+  title: React.ReactNode
+  /** The summary, on show at rest. */
+  summary: React.ReactNode
+  /** Where the card goes. */
+  href: string
+}
+
+export interface BlogCardsOverlayPhotoTrioCopy {
+  /** The small line over the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section heading, an `h2`. */
+  heading: React.ReactNode
+  /** The ghost button at the end of the header. Hidden when there is no label. */
+  action: { label: React.ReactNode; href: string }
+  /** The cards, in reading order. */
+  posts: BlogCardsOverlayPhotoTrioPost[]
+  /** Shown instead of the cards when `posts` is empty. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsOverlayPhotoTrioCopy> = {
+  en: {
+    eyebrow: "STORIES",
+    heading: "Deep dives from the studio",
+    action: { label: "All stories", href: "#" },
+    posts: [
+      {
+        category: "RTL & Arabic",
+        readTime: "10 min",
+        title: "Mirroring is not flipping",
+        summary: "The layout rules that actually change in RTL — and the ones designers keep mirroring by mistake.",
+        href: "#",
+      },
+      {
+        category: "Foundations",
+        readTime: "5 min",
+        title: "Motion, with restraint",
+        summary:
+          "Three durations and two curves cover almost everything. Everything else is a special case that needs a reason.",
+        href: "#",
+      },
+      {
+        category: "Typography",
+        readTime: "7 min",
+        title: "Specimens are for arguing",
+        summary: "A specimen that only flatters the typeface is useless. Build the one that shows where it fails.",
+        href: "#",
+      },
+    ],
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    eyebrow: "قصص",
+    heading: "غوص عميق من الاستوديو",
+    action: { label: "كل القصص", href: "#" },
+    posts: [
+      {
+        category: "العربية وRTL",
+        readTime: "10 دقائق",
+        title: "الانعكاس ليس مجرد قلب",
+        summary: "قواعد التخطيط التي تتغير فعلًا في RTL، وتلك التي يعكسها المصممون بالخطأ.",
+        href: "#",
+      },
+      {
+        category: "الأساسيات",
+        readTime: "5 دقائق",
+        title: "رموز الحركة وضبط النفس",
+        summary: "ثلاث مدد ومنحنيان يغطيان كل شيء تقريبًا. وما عدا ذلك حالة خاصة تحتاج مبررًا.",
+        href: "#",
+      },
+      {
+        category: "التايبوغرافيا",
+        readTime: "7 دقائق",
+        title: "عيّنات الخطوط وُجدت لنجادلها",
+        summary: "العينة التي تجامل الخط بلا فائدة. ابنِ العينة التي تكشف مواضع فشله.",
+        href: "#",
+      },
+    ],
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsOverlayPhotoTrioCopy = COPY
+
+/*
+ * The scrim is dark in both modes: the inverse tokens in light, the page's own
+ * in dark. 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); Mobile's press darkens the scrim.
+ */
+const SCRIM = "bg-background-inverse/[0.62] dark:bg-background/[0.62]"
+const SCRIM_DARKER =
+  "group-hover/card:[@container(min-width:40rem)]:bg-background-inverse/[0.72] group-hover/card:[@container(min-width:40rem)]:dark:bg-background/[0.72] group-focus-visible/card:[@container(min-width:40rem)]:bg-background-inverse/[0.72] group-focus-visible/card:[@container(min-width:40rem)]:dark:bg-background/[0.72] group-active/card:[@container(max-width:39.99rem)]:bg-background-inverse/[0.72] group-active/card:[@container(max-width:39.99rem)]:dark:bg-background/[0.72]"
+const PHOTO_HOVER =
+  "group-hover/card:[@container(min-width:40rem)]:motion-safe:scale-[1.06] group-focus-visible/card:[@container(min-width:40rem)]:motion-safe:scale-[1.06]"
+const CAPTION_LIFT =
+  "group-hover/card:[@container(min-width:40rem)]:motion-safe:-translate-y-2 group-focus-visible/card:[@container(min-width:40rem)]:motion-safe:-translate-y-2"
+/** The wide card's caption is shorter on Tablet, so it lifts 6px there and 8px elsewhere. */
+const WIDE_CAPTION_LIFT =
+  "group-hover/card:[@container(min-width:40rem)_and_(max-width:63.99rem)]:motion-safe:-translate-y-1.5 group-focus-visible/card:[@container(min-width:40rem)_and_(max-width:63.99rem)]:motion-safe:-translate-y-1.5 group-hover/card:[@container(min-width:64rem)]:motion-safe:-translate-y-2 group-focus-visible/card:[@container(min-width:64rem)]:motion-safe:-translate-y-2"
+
+export interface BlogCardsOverlayPhotoTrioProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<BlogCardsOverlayPhotoTrioCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function BlogCardsOverlayPhotoTrio({
+  locale = "en",
+  eyebrow,
+  heading,
+  action,
+  posts,
+  emptyLabel,
+  className,
+  ...props
+}: BlogCardsOverlayPhotoTrioProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const titleId = React.useId()
+  const list = posts ?? copy.posts
+  const header = { eyebrow: eyebrow ?? copy.eyebrow, action: action ?? copy.action }
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      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-12">
+        <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">
+            {header.eyebrow ? (
+              <p className="text-xs font-medium uppercase text-muted-foreground">{header.eyebrow}</p>
+            ) : null}
+            <h2
+              id={headingId}
+              className="text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-4xl"
+            >
+              {heading ?? copy.heading}
+            </h2>
+          </div>
+          {header.action.label ? (
+            <a
+              href={header.action.href}
+              className={cn(
+                buttonVariants({ variant: "ghost", size: "sm" }),
+                "w-full shrink-0 [@container(min-width:40rem)]:w-auto"
+              )}
+            >
+              {header.action.label}
+              <ArrowRightIcon aria-hidden="true" className="size-4 rtl:-scale-x-100" />
+            </a>
+          ) : null}
+        </div>
+
+        {list.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground">{emptyLabel ?? copy.emptyLabel}</p>
+        ) : (
+          <ul className="grid grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-3">
+            {list.map((post, index) => {
+              // An odd last card spans the row on Tablet, landscape and with a shorter caption.
+              const wide = list.length % 2 === 1 && index === list.length - 1
+              return (
+                <li key={index} className={cn("flex", wide && "[@container(min-width:40rem)_and_(max-width:63.99rem)]:col-span-2")}>
+                  <a
+                    href={post.href}
+                    aria-labelledby={`${titleId}-${index}`}
+                    className={cn(
+                      "group/card relative isolate flex h-[420px] w-full flex-col justify-end overflow-hidden rounded-lg bg-muted [@container(min-width:40rem)]:h-[460px] [@container(min-width:64rem)]:h-[520px]",
+                      wide && "[@container(min-width:40rem)_and_(max-width:63.99rem)]:h-[380px]",
+                      "[outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                    )}
+                  >
+                    {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 -z-10 size-full object-cover transition-transform duration-[400ms] ease-out motion-reduce:transition-none",
+                          PHOTO_HOVER
+                        )}
+                      />
+                    ) : null}
+                    <div className="relative">
+                      <div
+                        aria-hidden="true"
+                        className={cn(
+                          "absolute inset-0 transition-colors duration-[400ms] ease-out motion-reduce:transition-none",
+                          SCRIM,
+                          SCRIM_DARKER
+                        )}
+                      />
+                      <div
+                        className={cn(
+                          "relative flex flex-col gap-3 p-6 text-foreground-inverse transition-transform duration-[400ms] ease-out dark:text-foreground motion-reduce:transition-none",
+                          wide ? WIDE_CAPTION_LIFT : CAPTION_LIFT
+                        )}
+                      >
+                        <p className="flex items-center gap-2 text-xs font-medium uppercase">
+                          <span>{post.category}</span>
+                          <span aria-hidden="true" className="size-[3px] rounded-full bg-current" />
+                          <span>{post.readTime}</span>
+                        </p>
+                        <h3 id={`${titleId}-${index}`} className="text-xl font-semibold [@container(min-width:40rem)]:text-2xl">
+                          {post.title}
+                        </h3>
+                        <p className="text-sm">{post.summary}</p>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}

package/registry/blocks/blog-cards-overlay-photo-trio/index.ts

@@ -0,0 +1,7 @@
+export {
+  BlogCardsOverlayPhotoTrio,
+  blogCardsOverlayPhotoTrioCopy,
+  type BlogCardsOverlayPhotoTrioCopy,
+  type BlogCardsOverlayPhotoTrioPost,
+  type BlogCardsOverlayPhotoTrioProps,
+} from "./BlogCardsOverlayPhotoTrio"

package/registry/blocks/blog-cards-post-carousel-with-controls/BlogCardsPostCarouselWithControls.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem, useCarousel } from "../../ui/carousel/carousel"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Post Carousel with Controls.
+ *
+ * A row of post cards that scrolls sideways, on the page background. A header
+ * with an eyebrow, a title and a pair of arrow buttons at its end (an outline
+ * back arrow and a solid forward one); under it the cards, 320 wide and 24
+ * apart, each a `card` panel with a cover, a category, a title and a line of
+ * date and read time; under them the Carousel atom's dots. Each card is one
+ * link named by its title.
+ *
+ * The track is the Carousel atom, as Gallery's rail is: a real scroll-snap
+ * scroller, so touch, trackpad and the keyboard all work, and the direction
+ * comes from the page's `dir`. A step is one card and its gap (344px), and the
+ * card that shows only in part is the sign that there is more. The arrows stop at
+ * the ends (they are `aria-disabled` there, and stay focusable) and the dots are buttons that jump to a view.
+ * There is no autoplay: the track moves only when the reader drags, presses an
+ * arrow or a dot, or uses the keys. Reduced motion jumps to the card at once.
+ *
+ * Desktop (Figma 1440) shows the 320px cards in a 1280 stage. Tablet (768) shows
+ * the same cards in a 720 stage, so the step is still 344px. Mobile (360) makes
+ * the cards 280 wide, so the step is 304px and one card shows with a 24px peek;
+ * the arrows move under the heading.
+ *
+ * Arabic mirrors by the page's `dir`: the track runs right to left, so the first
+ * card is at the right and the peek is on the left. The Next button is the
+ * solid one on the left, with an arrow pointing left, and Previous is the
+ * outline one on the right, with an arrow pointing right. 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 BlogCardsPostCarouselWithControlsPost {
+  /** The cover. Without one the cover is a placeholder of the same size. */
+  image?: { src: string; alt: string }
+  /** The category. */
+  category: React.ReactNode
+  /** The title, an `h3`, and the card's accessible name. */
+  title: React.ReactNode
+  /** The date, as written: "Aug 4, 2026". */
+  date: React.ReactNode
+  /** The read time, as written: "6 min read". */
+  readTime: React.ReactNode
+  /** Where the card goes. */
+  href: string
+}
+
+export interface BlogCardsPostCarouselWithControlsCopy {
+  /** The small line over the title. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section title, an `h2`, which names the carousel. */
+  heading: React.ReactNode
+  /** The back button's accessible name. */
+  previousLabel: string
+  /** The forward button's accessible name. */
+  nextLabel: string
+  /** The cards, in order. */
+  posts: BlogCardsPostCarouselWithControlsPost[]
+  /** Shown instead of the carousel when `posts` is empty. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsPostCarouselWithControlsCopy> = {
+  en: {
+    eyebrow: "MORE FROM THE BLOG",
+    heading: "Keep scrolling sideways",
+    previousLabel: "Previous posts",
+    nextLabel: "Next posts",
+    posts: [
+      { category: "FOUNDATIONS", title: "The 8-point grid is not a religion", date: "Aug 4, 2026", readTime: "6 min read", href: "#" },
+      { category: "PRODUCT", title: "The empty state is a product decision", date: "Jun 16, 2026", readTime: "6 min read", href: "#" },
+      { category: "RESEARCH", title: "What our first design-system survey told us", date: "May 26, 2026", readTime: "9 min read", href: "#" },
+      { category: "RESEARCH", title: "Reading the room: research at Fasla", date: "Mar 31, 2026", readTime: "7 min read", href: "#" },
+      { category: "COMPANY", title: "Where our design system goes next", date: "Jan 27, 2026", readTime: "6 min read", href: "#" },
+    ],
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    eyebrow: "المزيد من المدونة",
+    heading: "تابع التمرير جانبياً",
+    previousLabel: "المقالات السابقة",
+    nextLabel: "المقالات التالية",
+    posts: [
+      { category: "الأساسيات", title: "شبكة الثماني نقاط ليست عقيدة", date: "4 أغسطس 2026", readTime: "قراءة 6 دقائق", href: "#" },
+      { category: "المنتج", title: "الحالة الفارغة قرار منتج", date: "16 يونيو 2026", readTime: "قراءة 6 دقائق", href: "#" },
+      { category: "الأبحاث", title: "ما أخبرنا به أول استبيان لنظام التصميم", date: "26 مايو 2026", readTime: "قراءة 9 دقائق", href: "#" },
+      { category: "الأبحاث", title: "قراءة المشهد: الأبحاث في فاصلة", date: "31 مارس 2026", readTime: "قراءة 7 دقائق", href: "#" },
+      { category: "الشركة", title: "إلى أين يتجه نظام تصميمنا", date: "27 يناير 2026", readTime: "قراءة 6 دقائق", href: "#" },
+    ],
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsPostCarouselWithControlsCopy = COPY
+
+/** The arrows draw `arrow-left` and `arrow-right`; the nearest `dir` mirrors them, so Next points left in Arabic. */
+const ICON = "[&:dir(rtl)]:-scale-x-100"
+
+/**
+ * Figma's pair: an outline back arrow and a solid forward one. At the ends an
+ * arrow is `aria-disabled`, not `disabled`: it looks disabled (the Button's own
+ * `aria-disabled` styles) and a press does nothing, but it stays focusable, so
+ * keyboard focus is not thrown out of the controls when the last card is reached.
+ */
+function Controls({ previousLabel, nextLabel }: { previousLabel: string; nextLabel: string }) {
+  const { activeIndex, lastIndex, scrollTo } = useCarousel()
+  const atStart = activeIndex <= 0
+  const atEnd = activeIndex >= lastIndex
+  return (
+    <div className="flex shrink-0 gap-2">
+      <Button
+        variant="outline"
+        size="icon-lg"
+        radius="rounded"
+        aria-label={previousLabel}
+        aria-disabled={atStart || undefined}
+        onClick={() => {
+          if (!atStart) scrollTo(activeIndex - 1)
+        }}
+      >
+        <ArrowLeftIcon aria-hidden="true" className={cn("size-4", ICON)} />
+      </Button>
+      <Button
+        size="icon-lg"
+        radius="rounded"
+        aria-label={nextLabel}
+        aria-disabled={atEnd || undefined}
+        onClick={() => {
+          if (!atEnd) scrollTo(activeIndex + 1)
+        }}
+      >
+        <ArrowRightIcon aria-hidden="true" className={cn("size-4", ICON)} />
+      </Button>
+    </div>
+  )
+}
+
+export interface BlogCardsPostCarouselWithControlsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<BlogCardsPostCarouselWithControlsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** The card to start on. The first, by default. */
+  defaultActiveIndex?: number
+  /** Called with the index of the card at the start of the view whenever it changes. */
+  onActiveIndexChange?: (index: number) => void
+}
+
+export function BlogCardsPostCarouselWithControls({
+  locale = "en",
+  eyebrow,
+  heading,
+  previousLabel,
+  nextLabel,
+  posts,
+  emptyLabel,
+  defaultActiveIndex = 0,
+  onActiveIndexChange,
+  className,
+  ...props
+}: BlogCardsPostCarouselWithControlsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const titleId = React.useId()
+  const list = posts ?? copy.posts
+  const line = eyebrow ?? copy.eyebrow
+
+  const header = (
+    <div className="flex min-w-0 flex-col gap-2">
+      {line ? <p className="text-xs font-medium uppercase text-muted-foreground">{line}</p> : null}
+      <h2
+        id={headingId}
+        className="text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-4xl"
+      >
+        {heading ?? copy.heading}
+      </h2>
+    </div>
+  )
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      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 w-full max-w-[1280px]">
+        {list.length === 0 ? (
+          <div className="flex flex-col gap-8">
+            {header}
+            <p className="text-center text-sm text-muted-foreground">{emptyLabel ?? copy.emptyLabel}</p>
+          </div>
+        ) : (
+          <Carousel
+            aria-labelledby={headingId}
+            defaultActiveIndex={defaultActiveIndex}
+            onActiveIndexChange={onActiveIndexChange}
+            className="flex flex-col gap-8"
+          >
+            <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-8">
+              {header}
+              <Controls previousLabel={previousLabel ?? copy.previousLabel} nextLabel={nextLabel ?? copy.nextLabel} />
+            </div>
+
+            <CarouselContent className="gap-6">
+              {list.map((post, index) => (
+                <CarouselItem key={index} className="flex basis-[280px] [@container(min-width:40rem)]:basis-[320px]">
+                  <a
+                    href={post.href}
+                    aria-labelledby={`${titleId}-${index}`}
+                    className="flex w-full flex-col overflow-hidden rounded-lg border bg-card [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                  >
+                    <div className="relative aspect-[280/158] w-full overflow-hidden bg-muted [@container(min-width:40rem)]:aspect-[320/180]">
+                      {post.image ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img src={post.image.src} alt={post.image.alt} loading="lazy" className="absolute inset-0 size-full object-cover" />
+                      ) : null}
+                    </div>
+                    <div className="flex flex-col gap-2 p-5">
+                      <span className="text-xs font-medium uppercase text-muted-foreground">{post.category}</span>
+                      <h3 id={`${titleId}-${index}`} className="text-lg font-semibold text-foreground">
+                        {post.title}
+                      </h3>
+                      <span className="flex items-center gap-2 text-xs text-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>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+
+            <CarouselDots />
+          </Carousel>
+        )}
+      </div>
+    </section>
+  )
+}

package/registry/blocks/blog-cards-post-carousel-with-controls/index.ts

@@ -0,0 +1,6 @@
+export {
+  BlogCardsPostCarouselWithControls,
+  blogCardsPostCarouselWithControlsCopy,
+  type BlogCardsPostCarouselWithControlsCopy,
+  type BlogCardsPostCarouselWithControlsProps,
+} from "./BlogCardsPostCarouselWithControls"