"use client"; import * as React from "react"; import { motion } from "motion/react"; /* ── sound ── */ let _a: AudioContext, _b: AudioBuffer; const tick = () => { if (typeof window === "undefined") return; if (!_a) { _a = new AudioContext(); _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate); const d = _b.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4; } const s = _a.createBufferSource(); s.buffer = _b; const g = _a.createGain(); g.gain.value = 0.08; s.connect(g).connect(_a.destination); s.start(); }; /* ── theme ── */ const CSS = ` .ni{ --ni-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62)); --ni-border:rgba(0,0,0,0.06); --ni-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8); --ni-dim:rgba(0,0,0,0.42); --ni-mid:rgba(0,0,0,0.55); --ni-hi:rgba(0,0,0,0.88); --ni-focus:rgba(0,0,0,0.12); --ni-btn:rgba(0,0,0,0.03); --ni-btn-h:rgba(0,0,0,0.07); --ni-sep:rgba(0,0,0,0.06) } .dark .ni,[data-theme="dark"] .ni{ --ni-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); --ni-border:rgba(255,255,255,0.07); --ni-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04); --ni-dim:rgba(255,255,255,0.28); --ni-mid:rgba(255,255,255,0.5); --ni-hi:rgba(255,255,255,0.88); --ni-focus:rgba(255,255,255,0.12); --ni-btn:rgba(255,255,255,0.03); --ni-btn-h:rgba(255,255,255,0.07); --ni-sep:rgba(255,255,255,0.06) }`; /* ── types ── */ interface CorrectNumberInputProps { label?: string; hint?: string; defaultValue?: number; min?: number; max?: number; step?: number; onChange?: (value: number) => void; sound?: boolean; style?: React.CSSProperties; } /* ── component ── */ export default function CorrectNumberInput({ label = "Amount", hint, defaultValue = 0, min, max, step = 1, onChange, sound = true, style, }: CorrectNumberInputProps) { const [value, setValue] = React.useState(defaultValue); const [focused, setFocused] = React.useState(false); const inputRef = React.useRef(null); const hasValue = value !== 0 || focused; const clamp = (v: number) => { let n = v; if (min !== undefined) n = Math.max(min, n); if (max !== undefined) n = Math.min(max, n); return n; }; const setVal = (v: number) => { const c = clamp(v); setValue(c); onChange?.(c); }; const increment = () => { const next = clamp(value + step); if (next !== value) { if (sound) tick(); setVal(next); } }; const decrement = () => { const next = clamp(value - step); if (next !== value) { if (sound) tick(); setVal(next); } }; return ( <>