import { isEmptySource } from "@/components/registry/primitives/editables/source-normalizers"; import { Text, type TextSource, } from "@/components/registry/primitives/editables/text"; import { cn } from "@/lib/registry/cn"; /** * Small uppercase line rendered above a title — the editorial "eyebrow" * treatment. Two visual modes: * * - `text` (default) — small uppercase prose tinted by `colorScheme`. * - `badge` — pill-shaped chip with a soft-surface fill + saturated * label text, both keyed to `colorScheme`. * * Source-driven via the `value` field. In editing mode the slot stays * mounted with an EditPlaceholder stub even when the source is empty so * authors can click into it from Pages. * * Shared across the registry — promo, article-header, hero overlays — * so the visual vocabulary stays consistent and a future treatment * change happens in one place. Keep this block source-driven; surfaces * that need extra chrome around the eyebrow should compose around it. */ const EYEBROW_TEXT_COLOR: Record = { primary: "text-primary", "primary-gradient": "text-primary", secondary: "text-secondary", "secondary-gradient": "text-secondary", tertiary: "text-tertiary", accent: "text-accent", "accent-2": "text-accent-2", "accent-3": "text-accent-3", info: "text-info", success: "text-success", warning: "text-warning", destructive: "text-destructive", }; const EYEBROW_BADGE_SURFACE: Record = { primary: "bg-primary-background text-primary", "primary-gradient": "bg-primary-background text-primary", secondary: "bg-secondary-background text-secondary", "secondary-gradient": "bg-secondary-background text-secondary", tertiary: "bg-tertiary-background text-tertiary", accent: "bg-accent-background text-accent", "accent-2": "bg-accent-2-background text-accent-2", "accent-3": "bg-accent-3-background text-accent-3", info: "bg-info-background text-info", success: "bg-success-background text-success", warning: "bg-warning-background text-warning", destructive: "bg-destructive-background text-destructive", }; export type EyebrowStyle = "text" | "badge"; export type EyebrowAlign = "start" | "center" | "end"; export interface EyebrowProps { /** Sitecore single-line text source. */ value: TextSource | undefined; /** * Brand scheme. Unset (or `none` / `neutral`) renders the text mode * at reduced opacity inheriting the surface foreground, and the * badge mode on the neutral muted surface. Any other scheme tints * the eyebrow with the matching role color. */ colorScheme?: string; /** * Visual treatment. Accepts the typed union OR a raw Sitecore enum * string (any value other than `"badge"` is treated as `"text"`). * Defaults to `text`. */ style?: EyebrowStyle | string; /** * Inline-axis alignment of the eyebrow itself within its parent * column. Logical, RTL-safe. Defaults to `start`. */ align?: EyebrowAlign; /** * Pages-editing mode flag. When `true` the eyebrow slot stays * mounted (with an EditPlaceholder stub) so the author can click * into an empty source. */ isEditing?: boolean; /** Placeholder label shown in the Pages stub. Defaults to `"Eyebrow"`. */ placeholder?: string; /** Optional escape-hatch className applied to the wrapping element. */ className?: string; } function alignClass(align: EyebrowAlign): string { if (align === "center") return "text-center"; if (align === "end") return "text-end"; return "text-start"; } function resolveTextTint(colorScheme: string | undefined): string { if (!colorScheme) return "opacity-70"; const normalized = colorScheme.trim().toLowerCase(); if (normalized === "none" || normalized === "neutral") return "opacity-70"; return EYEBROW_TEXT_COLOR[normalized] ?? "opacity-70"; } function resolveBadgeSurface(colorScheme: string | undefined): string { if (!colorScheme) return "bg-muted text-muted-foreground"; const normalized = colorScheme.trim().toLowerCase(); if (normalized === "none" || normalized === "neutral") return "bg-muted text-muted-foreground"; return EYEBROW_BADGE_SURFACE[normalized] ?? "bg-muted text-muted-foreground"; } /** * Shared editorial eyebrow. Returns `null` when there's no value and * the parent isn't in editing mode — callers don't need to guard. */ export function Eyebrow({ value, colorScheme, style = "text", align = "start", isEditing, placeholder = "Eyebrow", className, }: EyebrowProps) { const hasValue = value != null && !isEmptySource(value); if (!hasValue && !isEditing) return null; const isBadge = typeof style === "string" && style.trim().toLowerCase() === "badge"; const wrapperClass = cn("w-full", alignClass(align), className); if (isBadge) { return (

); } return (

); } export default Eyebrow;

Eyebrow

Showcase

Eyebrow