Stats

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Grid, type GridProps } from "@/components/editorial/grid"

/**
 * A list of `Stat` items laid out by `Grid`, rendered as a `ul`. It defaults
 * to 3 columns and the large gap. Like `Grid`, its columns follow the width
 * it is given, so size its parent to narrow it. `className` lands on the
 * list.
 */
function StatGroup({
  cols = 3,
  gap = "lg",
  ...props
}: ComponentProps<"ul"> & {
  /**
   * The most columns, 3 by default. They step up as the list's space
   * widens, the way `Grid`'s do.
   */
  cols?: GridProps["cols"]
  /**
   * Space between stats: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
   * is the default.
   */
  gap?: GridProps["gap"]
}) {
  return (
    <Grid
      data-slot="stat-group"
      render={<ul role="list" />}
      cols={cols}
      gap={gap}
      // Grid's props are typed for its default div; this group renders a list.
      {...(props as Omit<GridProps, "cols" | "gap">)}
    />
  )
}

// card sets the stat on a filled panel; rule sets a line down its left side.
const statVariants = cva("grid content-start gap-2", {
  variants: {
    /**
     * The stat style. `default` (the default) adds nothing. `card` sets it
     * on a `rounded-xl` panel with 32px padding, filled with `muted`, or
     * with `card` and `card-foreground` text in dark mode. `rule` draws a
     * 1px line in `border` down its left side, 24px from the text.
     */
    variant: {
      default: "",
      card: "rounded-xl bg-muted p-8 dark:bg-card dark:text-card-foreground",
      rule: "border-l border-border pl-6",
    },
  },
  defaultVariants: { variant: "default" },
})

/**
 * One figure and its label, as an `li` inside `StatGroup`. Holds a
 * `StatValue` and a `StatLabel`, stacked with 8px gaps.
 *
 * `card` sets it on a filled, rounded panel with 32px padding. `rule` draws a
 * line down its left side.
 */
function Stat({
  className,
  variant = "default",
  ...props
}: ComponentProps<"li"> & VariantProps<typeof statVariants>) {
  return (
    <li
      data-slot="stat"
      data-variant={variant}
      className={cn(statVariants({ variant }), className)}
      {...props}
    />
  )
}

/** The figure itself, such as a number or a percentage, in large type. */
function StatValue({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-value"
      className={cn("font-display text-[2rem]/10 tracking-tight", className)}
      {...props}
    />
  )
}

/** The text that says what the figure measures. */
function StatLabel({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-label"
      className={cn("text-base/7 text-pretty", className)}
      {...props}
    />
  )
}

export { StatGroup, Stat, StatValue, StatLabel }

pnpm dlx shadcn add @01orbital/stats

npx shadcn add @01orbital/stats

yarn shadcn add @01orbital/stats

bunx --bun shadcn add @01orbital/stats

pnpm dlx shadcn add @01orbital/eyebrow @01orbital/heading @01orbital/section

npx shadcn add @01orbital/eyebrow @01orbital/heading @01orbital/section

yarn shadcn add @01orbital/eyebrow @01orbital/heading @01orbital/section

bunx --bun shadcn add @01orbital/eyebrow @01orbital/heading @01orbital/section