Stats (motion)

"use client"

/**
 * The `stats` demo, with the motion variant swapped in.
 *
 * Identical props: the motion variant only changes which slot components
 * the static section renders through.
 *
 * `"use client"` is required here, not incidental: the motion variant is a
 * client component, and icon components cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { StatsMotion } from "@registry/sections/stats-motion"

import { STATS } from "./content"

export function Demo() {
  return (
    <StatsMotion
      eyebrow="By the numbers"
      title="What the checks actually cover"
      items={STATS}
      variant="card"
    />
  )
}

"use client"

/**
 * StatsMotion — the figures revealed in sequence as they scroll in.
 *
 * The slots render `dl`/`div` rather than `ul`/`li`, because a stats row is a
 * description list. That is why this file does not reuse `StaggerList`.
 *
 * Dependencies: react, @/components/motion/slots, @/components/motion/stagger,
 * @/components/sections/stats.
 */

import type { ReactNode } from "react"

import { StaggerBlock } from "@/components/motion/slots"
import { Stagger } from "@/components/motion/stagger"
import { Stats, type StatsProps } from "@/components/sections/stats"

function StaggerDl({
  className,
  children,
}: {
  className?: string
  children?: ReactNode
}) {
  return (
    <Stagger as="dl" className={className}>
      {children}
    </Stagger>
  )
}

export type StatsMotionProps = Omit<StatsProps, "listAs" | "itemAs">

export function StatsMotion(props: StatsMotionProps) {
  return <Stats {...props} listAs={StaggerDl} itemAs={StaggerBlock} />
}