Amount Pad

"use client";

import {
  AnimatePresence,
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
} from "motion/react";
import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type AmountPadProps = {
  /** Controlled amount as typed, e.g. "1250.5". Empty string is nothing entered. */
  value?: string;
  /** Amount on mount when uncontrolled. */
  defaultValue?: string;
  /** Fires on every change with the typed string and its number. */
  onChange?: (value: string, amount: number) => void;
  /** Text before the number. */
  currency?: string;
  /** Digits allowed after the decimal point. 0 turns the point off. */
  decimals?: number;
  /** Largest amount. Going past it bounces the extra digit off and shows the limit. */