import type * as React from "react"; import { cn } from "@/lib/utils"; import { BentoMetric } from "./bento-grid"; export interface StatBentoItem { value: React.ReactNode; label: React.ReactNode; /** Trailing unit on the value, keyed to the alternate accent. */ suffix?: React.ReactNode; icon?: React.ReactNode; } interface StatBentoOwnProps { stats: StatBentoItem[]; /** Count each numeric value up from zero on mount. */ animate?: boolean; /** * Element rendered as the grid. Pass `RevealGroup` to stagger the cells: it * animates its direct children, so it has to be the grid rather than wrap it. */ as?: T; } export type StatBentoProps = StatBentoOwnProps & Omit, keyof StatBentoOwnProps>; /** * A standalone strip of headline numbers, not a bento of mixed cells: every child is * a display-weight metric. It stays motion-free so the copied registry source has no * import to resolve. Polymorphic rather than a forwardRef so `as` can carry the props * of whatever element renders the grid. * * Cells take a translucent ink fill rather than `bg-surface`, which would vanish the * moment the strip sits inside a Card that already paints that surface. */ export function StatBento({ className, stats, animate, as, ...props }: StatBentoProps) { const Comp = (as ?? "div") as React.ElementType; return ( {stats.map((stat, index) => ( ))} ); } StatBento.displayName = "StatBento";