import type { ReactNode } from "react"; import { getSourceText } from "@/components/registry/primitives/editables/source-normalizers"; import type { TextSource } from "@/components/registry/primitives/editables/text"; import { cn } from "@/lib/registry/cn"; import { Placeholder } from "@/lib/registry/sitecore"; /** * Empty-state caption shared by every entity carousel / list-grid in * cards-and-lists. Author-supplied `message` wins; otherwise the * variant-supplied fallback (e.g. "Articles") renders, with the * `is-empty-hint` marker so editing-mode tooling can target it. * * The default outer wrapper is a muted centered caption. Pass * `className` to swap it for a different shell — e.g. a dashed-border * placeholder card — without losing the screen-reader marker. */ export function EmptyHint({ message, children, className, }: { message?: TextSource; children?: ReactNode; className?: string; }) { const text = getSourceText(message); return (

{text ?? children}

); } /** * Placeholder + children fallback slot used when no items are bound but * the section is composed via Sitecore Pages chrome. Under the SDK, * `` resolves the rendering tree. In Storybook / non-Sitecore * runtimes, the `fallback` (React children) renders directly. */ export function ComposedSlot({ placeholderKey, rendering, fallback, className, }: { placeholderKey: string; rendering?: unknown; fallback?: ReactNode; className?: string; }) { if (rendering) { return (

{/* @ts-expect-error — rendering is opaque here; SDK validates at runtime */}

); } return

{fallback}

; } export interface ListingSectionProps { /** * Variant slug — e.g. `"articles-carousel"`, `"person-list-grid"`. * Used as the section's `data-slot` and the trailing className token * that previews and editing chrome key on. Required. */ slot: string; /** * Optional family prefix class — e.g. `"articles"`, `"persons"`. When * present, the section emits `component `; omit it * and the section emits `component ` (used by variants that * collapse family + slug into one token, like `media-carousel`). * * Plurality is independent of the slot: persons-family variants pass * `entityName="persons"` with `slot="person-carousel"`. */ entityName?: string; /** Section element id, mirrors the standard section-component contract. */ id?: string; /** Extra classes appended to the section root. */ className?: string; /** * Surface tone classes applied to the section root. Defaults to * `bg-background text-foreground` — pass a band override (e.g. * `"bg-muted text-foreground"`) to tint the section. */ surfaceClassName?: string; /** * Tailwind max-width utility for the inner wrapper. Defaults to * `max-w-6xl` to match the existing card listings; override when a * variant needs a narrower or wider canvas. */ innerMaxWidth?: string; /** * Opt the section out of the constrained `container` + max-width * pair entirely. The outer wrapper becomes `w-full py-12 md:py-16` * and the inner becomes `w-full px-4`, matching the media-carousel * `FullBleed` variant. `innerMaxWidth` is ignored in this mode. */ fullBleed?: boolean; /** * Optional full-bleed content rendered inside the `

` but * ABOVE the constrained container + max-width inner pair. Used by * locations-carousel's `MapAbove` variant for the map slot, and * by media-carousel-style sections that surface a full-width * banner above the carousel body. */ beforeContainer?: ReactNode; /** * Inner contents — typically the `` / `` * call, a ``, or an `` depending on which * data path is active. */ children: ReactNode; } /** * Shared shell for the `*Carousel` / `*ListGrid` family in cards-and-lists. * Renders the `

` + responsive `container` + max-width inner * wrapper that every variant repeated. The caller picks what fills the * inner — usually a small conditional that picks between an items * renderer, a ``, and an ``. * * RTL-safe (no physical left/right), mobile-first padding, and the * surface tone classes are kept here so card consumers can't drift. */ export interface ListingSectionRootProps { /** Same as `ListingSection.slot` — drives `data-slot` and the trailing className token. */ slot: string; /** Optional family prefix class — emits `component ` when set. */ entityName?: string; id?: string; className?: string; surfaceClassName?: string; children: ReactNode; } /** * Just the `

` chrome — `component w-full` * + surface tone + `data-slot`. Shared between `ListingSection` (which * adds the constrained container + max-width inner) and bespoke * layouts like `FeatureSpotlightLayout` that own their own inner * wrappers but still want consistent section-root semantics. */ export function ListingSectionRoot({ slot, entityName, id, className, surfaceClassName = "bg-background text-foreground", children, }: ListingSectionRootProps) { return (

{children}

); } export function ListingSection({ slot, entityName, id, className, surfaceClassName = "bg-background text-foreground", innerMaxWidth = "max-w-6xl", fullBleed, beforeContainer, children, }: ListingSectionProps) { return ( {beforeContainer}

{children}

); }

Listing Section

Showcase

Listing Section