App patterns

"use client";

// Vendored from apps/console/src/components/animated-number.tsx for the
// /patterns showcase (kept in sync by hand until internal-ui takes the
// `@number-flow/react` dependency and promotes it — see patterns page).

import NumberFlow, { type Format } from "@number-flow/react";
import { cn } from "@general-design-company/internal-ui/lib/utils";

/** Full-cents USD, the same output shape as `formatUsd`. */
export const USD: Format = {
  style: "currency",
  currency: "USD",
};

/** Whole-dollar USD for headline figures, matching `formatUsdCompact`. */
export const USD_COMPACT: Format = {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
};

type AnimatedNumberProps = {
  /** The value to display. Changing this rolls each digit to the new value. */
  value: number;
  /** Intl format options for the rendered figure (e.g. `USD`, `USD_COMPACT`). */
  format?: Format;
  prefix?: string;
  suffix?: string;
  className?: string;
};

/**
 * A figure whose digits roll in place (odometer style) whenever the value
 * changes, via NumberFlow. NumberFlow honors `prefers-reduced-motion` on its
 * own, so a reduced-motion user sees the target value with no animation.
 */
export function AnimatedNumber({
  value,
  format,
  prefix,
  suffix,
  className,
}: AnimatedNumberProps) {
  return (
    <NumberFlow
      value={value}
      format={format}
      prefix={prefix}
      suffix={suffix}
      className={cn("tabular-nums", className)}
    />
  );
}