import type React from "react"; import type { ReactNode } from "react"; import { Card as PrimitiveCard, CardAction as PrimitiveCardAction, CardContent as PrimitiveCardContent, CardDescription as PrimitiveCardDescription, CardFooter as PrimitiveCardFooter, CardHeader as PrimitiveCardHeader, CardTitle as PrimitiveCardTitle, } from "@/components/registry/primitives/core/card"; import { cn } from "@/lib/registry/cn"; type PrimitiveCardProps = React.ComponentProps; type PrimitiveCardPadding = NonNullable; /** * Pre-baked card appearance presets shared by Sitecore-aware card * variants. Each preset bundles (a) the underlying Card primitive * variant tuple — `elevation` / `style` / `padding` — and (b) the * interaction styling that goes with that look (hover shadow, focus * ring, `group` token for nested hover effects). Cards opt in via a * single `appearance` prop instead of re-deriving the same className * matrix locally per family. * * Individual `elevation` / `style` / `padding` props still win over * the preset values when both are present — useful for one-off tweaks * without abandoning the preset's interaction styling. */ export type ItemCardAppearance = | "elevated" | "outlined" | "inner" | "bare" | "filled"; /** * Optional color band rendered at the top of the card. When set to a * named scheme the band takes the title and renders against the * scheme's saturated background + foreground tokens. `"none"` * (default) keeps the standard header rendering. */ export type ItemCardColorBand = | "none" | "neutral" | "primary" | "secondary" | "tertiary" | "accent" | "accent-2" | "accent-3" | "info" | "success" | "warning" | "destructive"; /** * How the media slot is sized + placed relative to the card padding. * * `none` Media renders inside the padded content area at its * natural display size (default — editorial card with * image inset from card edge). * `fullbleed` Media extends to the card edges, ignoring padding * — the canonical "image-led" treatment. * `icon` Small (~6rem) media at the top-start, useful for * category / feature-card layouts where the image is * decorative rather than the focal point. */ export type ItemCardMediaBleed = "none" | "fullbleed" | "icon"; /** Horizontal alignment of the action row within the card body. */ export type ItemCardActionPlacement = "start" | "end"; type PresetConfig = { elevation?: PrimitiveCardProps["elevation"]; style?: PrimitiveCardProps["style"]; padding?: PrimitiveCardProps["padding"]; className: string; }; const INTERACTION_BASE = "group relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"; const APPEARANCE_PRESETS: Record = { elevated: { elevation: "sm", style: "flat", padding: "sm", className: cn(INTERACTION_BASE, "transition-shadow hover:shadow-md"), }, outlined: { elevation: "sm", style: "outline", padding: "sm", className: cn(INTERACTION_BASE, "transition-shadow hover:shadow-md"), }, inner: { elevation: "none", style: "flat", padding: "sm", className: cn(INTERACTION_BASE, "transition-colors hover:bg-muted/20"), }, bare: { elevation: "none", style: "flat", padding: "md", className: cn( INTERACTION_BASE, "border-transparent bg-transparent shadow-none hover:shadow-none", ), }, filled: { elevation: "none", style: "filled", padding: "md", className: cn(INTERACTION_BASE, "transition-shadow hover:shadow-xs"), }, }; /** * Positive-padding classes used by layout mode. The Card primitive * itself runs `p-0` in layout mode (its `padding` variant produces no * outer padding); the padding lives on inner wrappers below — a media * inset wrapper, a band wrapper, and the content padding wrapper. This * is the same architecture product-card uses: outer card holds the * surface + radius + border + shadow, an inner wrapper holds the * editorial padding. Eliminates the negative-margin tricks the old * layout mode used to escape the Card's outer padding. */ const CONTENT_PADDING_X: Record = { sm: "px-3", md: "px-5", lg: "px-7", }; const CONTENT_PADDING_Y: Record = { sm: "py-3", md: "py-5", lg: "py-7", }; const COLOR_BAND_CLASSES: Record, string> = { neutral: "bg-neutral-background text-neutral", primary: "bg-primary text-primary-foreground", secondary: "bg-secondary text-secondary-foreground", tertiary: "bg-tertiary text-tertiary-foreground", accent: "bg-accent text-accent-foreground", "accent-2": "bg-accent-2 text-accent-2-foreground", "accent-3": "bg-accent-3 text-accent-3-foreground", info: "bg-info text-info-foreground", success: "bg-success text-success-foreground", warning: "bg-warning text-warning-foreground", destructive: "bg-destructive text-destructive-foreground", }; // `title` collides with HTMLAttributes.title (string — tooltip) and // `content` collides with HTMLAttributes.content (string — RDFa). Drop // both from the inherited prop bag so our ReactNode slot overrides // don't intersect into `string & ReactNode`. export type ItemCardProps = Omit & { /** * Pre-baked appearance preset for entity cards. Drives the * underlying primitive's elevation/style/padding plus the matching * interaction styling. Explicit `elevation` / `style` / `padding` * props still override the preset's values. */ appearance?: ItemCardAppearance; /** * Optional color band rendered above the header. When set to a * named scheme the band takes the title (the header's own title * slot is suppressed) and renders against the scheme's saturated * background + foreground tokens. */ colorBand?: ItemCardColorBand; /** Slot for the card's media element (image, video, custom JSX). */ media?: ReactNode; /** How the media is sized / placed relative to the card padding. */ mediaBleed?: ItemCardMediaBleed; /** Optional caption rendered as an overlay band at the bottom of the media. */ mediaCaption?: ReactNode; mediaClassName?: string; mediaCaptionClassName?: string; /** Header slots. When unset the header doesn't render. */ title?: ReactNode; description?: ReactNode; /** Body content slot. */ content?: ReactNode; /** Action row slot — typically one or two CTA buttons. */ actions?: ReactNode; /** Horizontal alignment of the action row. */ actionPlacement?: ItemCardActionPlacement; /** Footer slot rendered below the body. */ footer?: ReactNode; headerClassName?: string; titleClassName?: string; descriptionClassName?: string; contentClassName?: string; footerClassName?: string; }; /** Media slot for layout mode — handles the inset / fullbleed / icon * bleed treatments and the optional caption band. Returns null when no * media is provided. */ function CardMedia({ media, mediaBleed, mediaCaption, mediaClassName, mediaCaptionClassName, px, }: { media: ReactNode; mediaBleed: ItemCardMediaBleed; mediaCaption?: ReactNode; mediaClassName?: string; mediaCaptionClassName?: string; px: string; }) { if (media == null) return null; const hasMediaCaption = mediaCaption != null; const isIconMedia = mediaBleed === "icon"; return (

{media} {hasMediaCaption && (

{mediaCaption}

)}

); } function hasAnyLayoutSlot(props: ItemCardProps): boolean { return ( props.media != null || props.title != null || props.description != null || props.content != null || props.actions != null || props.footer != null || props.mediaCaption != null || (props.colorBand != null && props.colorBand !== "none") ); } /** * Shared card wrapper for entity-style cards. Lives in building blocks * so Sitecore cards and non-Sitecore blocks can compose the same shell. * * Two modes — chosen automatically by which props are set: * * **Wrapper mode** (no slot props set): renders the primitive Card * around `children`. Callers compose the card body by hand using the * re-exported atoms (`ItemCardHeader`, `ItemCardTitle`, …). The * Card's own `padding` variant applies normally. * * **Layout mode** (any of `media` / `title` / `description` / * `content` / `actions` / `footer` / `mediaCaption` / non-`none` * `colorBand` set): renders the standard card composition — media, * color band, header, content + actions, footer — into the slots * provided. The Card runs `p-0` here (no outer padding); media at * `fullbleed` fills the card naturally, media at `none` (inset) * sits in a padded wrapper, and the editorial content lives in a * final padded wrapper. No negative margins anywhere — the * product-card / location-card pattern, generalized. */ export function ItemCard({ appearance, elevation, style, padding, colorScheme, className, colorBand = "none", media, mediaBleed = "none", mediaCaption, mediaClassName, mediaCaptionClassName, title, description, content, actions, actionPlacement = "start", footer, headerClassName, titleClassName, descriptionClassName, contentClassName, footerClassName, children, ...rest }: ItemCardProps) { const preset = appearance ? APPEARANCE_PRESETS[appearance] : undefined; const resolvedElevation = elevation ?? preset?.elevation; const resolvedStyle = style ?? preset?.style; const resolvedPadding = padding ?? preset?.padding; const useLayout = hasAnyLayoutSlot({ media, title, description, content, actions, footer, mediaCaption, colorBand, }); // Wrapper mode — backward-compatible with the original ItemCard API. if (!useLayout) { return ( {children} ); } // Layout mode. const bandActive = colorBand !== "none"; const hasActions = actions != null; const hasFooter = footer != null; // Title in the header only when it's not consumed by the band. const hasHeader = (!bandActive && title != null) || description != null; const hasContent = content != null; const hasInnerWrapper = bandActive || hasHeader || hasContent || hasActions || hasFooter; // Resolve the effective padding axis — falls back to `lg` to match // the primitive Card's own default so the inset wrappers look // proportional even when neither preset nor explicit prop is set. const layoutPadding: PrimitiveCardPadding = resolvedPadding ?? "lg"; const px = CONTENT_PADDING_X[layoutPadding]; const py = CONTENT_PADDING_Y[layoutPadding]; return ( {bandActive && (

{title}

)} {hasInnerWrapper && (

{hasHeader && ( {!bandActive && title != null && ( {title} )} {description != null && ( {description} )} )} {(hasContent || hasActions) && ( {content} {hasActions && ( {actions} )} )} {hasFooter && ( {footer} )}

)} {children} ); } export const ItemCardHeader = PrimitiveCardHeader; export const ItemCardTitle = PrimitiveCardTitle; export const ItemCardDescription = PrimitiveCardDescription; export const ItemCardAction = PrimitiveCardAction; export const ItemCardContent = PrimitiveCardContent; export const ItemCardFooter = PrimitiveCardFooter; // Compatibility aliases for incremental migration from primitive Card imports. export const Card = ItemCard; export const CardHeader = ItemCardHeader; export const CardTitle = ItemCardTitle; export const CardDescription = ItemCardDescription; export const CardAction = ItemCardAction; export const CardContent = ItemCardContent; export const CardFooter = ItemCardFooter;

Item Card

Showcase

Item Card