Scrub Number

"use client";

import NumberFlow from "@number-flow/react";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionStyle } from "motion/react";
import { useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react";
import { cn } from "@/lib/utils";

export type ScrubNumberProps = {
  label: string;
  /** Controlled value. */
  value?: number;
  /** Value on mount when uncontrolled. */
  defaultValue?: number;
  /** Fires on every step of a drag, every arrow key and every typed commit. */
  onChange?: (value: number) => void;
  /** Fires once when a drag or edit settles. */
  onCommit?: (value: number) => void;
  min?: number;
  max?: number;
  /** Smallest change. Also sets how many decimals show. */
  step?: number;
  /** Text after the number, e.g. "px", "%" or "°". */
  suffix?: string;