Amount Input

1"use client"
2 
3import { useState, useRef, useEffect, useMemo } from "react"
4import { Button } from "@/components/ui/button"
5import { Minus, Plus } from "lucide-react"
6import { cn } from "@/lib/utils"
7import { demoAmountPresets } from "./demo/payment"
8 
9/**
10 * ═══════════════════════════════════════════════════════════════════════════
11 * AmountInputProps
12 * ═══════════════════════════════════════════════════════════════════════════
13 *
14 * Props for an amount input with increment/decrement buttons and preset values.
15 * Supports direct text editing by clicking on the amount.
16 */
17export interface AmountInputProps {
18  data?: {
19    /** Quick-select preset amounts displayed as buttons. */
20    presets?: number[]
21  }
22  actions?: {
23    /** Called when user confirms the selected amount. */
24    onConfirm?: (value: number) => void
25  }
26  appearance?: {
27    /**
28     * Minimum allowed value.
29     * @default 0
30     */
31    min?: number
32    /**
33     * Maximum allowed value.
34     * @default 10000
35     */
36    max?: number
37    /**
38     * Increment/decrement step size for the +/- buttons.
39     * @default 10
40     */
41    step?: number
42    /**
43     * Currency code for formatting the amount display.
44     * @default "EUR"
45     */
46    currency?: string
47    /**
48     * Label text displayed above the input.
49     * @default "Amount"
50     */
51    label?: string
52  }
53  control?: {
54    /**
55     * Controlled value for the amount input.
56     * @default 50
57     */
58    value?: number
59  }
60}
61 
62/**
63 * An amount input with increment/decrement buttons and preset values.
64 * Supports direct text editing by clicking on the amount.
65 *
66 * Features:
67 * - Large centered amount display
68 * - Plus/minus increment buttons
69 * - Preset amount quick-select buttons
70 * - Click-to-edit direct input
71 * - Min/max value clamping
72 * - Configurable step size
73 * - Optional confirm button
74 *
75 * @component
76 * @example
77 * ```tsx
78 * <AmountInput
79 *   data={{ presets: [25, 50, 100, 250] }}
80 *   actions={{
81 *     onChange: (value) => console.log("Amount changed:", value),
82 *     onConfirm: (value) => console.log("Confirmed:", value)
83 *   }}
84 *   appearance={{
85 *     min: 10,
86 *     max: 500,
87 *     step: 5,
88 *     currency: "USD",
89// … truncated