Number flip

1"use client";2 3import { useState } from "react";4import type { HTMLAttributes } from "react";5import { ViewTransitionSafe } from "./ViewTransitionSafe";6 7export type NumberFlipProps = Omit<8  HTMLAttributes<HTMLSpanElement>,9  "children"10> & {11  /** The value to display. Changing it rolls the digits that changed. */12  value: number;13  /** Fraction digits shown by the locale formatter. */14  fractionDigits?: number;15  /** Delay later digit columns slightly so the roll cascades. */16  stagger?: boolean;17  /** BCP 47 locale passed to toLocaleString. */18  locale?: string;19};20 21/**22 * Digits roll a full line when the value changes, with an optional stagger.23 * Wrap the state change in startTransition (or runViewTransition) so the24 * roll animates; outside a transition the number simply updates.25 */26export function NumberFlip({27  value,28  fractionDigits = 0,