"use client"; import React, { useState, useRef, type ButtonHTMLAttributes } from "react"; export interface DepthButtonProps extends ButtonHTMLAttributes { children: React.ReactNode; variant?: "default" | "accent" | "destructive"; depth?: number; size?: "default" | "icon"; sound?: boolean; onTouchStart?: React.TouchEventHandler; onTouchEnd?: React.TouchEventHandler; onTouchCancel?: React.TouchEventHandler; } export function DepthButton({ children, variant = "default", depth = 4, size = "default", sound = true, className, style, disabled, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onTouchCancel, ...props }: DepthButtonProps) { const [pressed, setPressed] = useState(false); const [hovered, setHovered] = useState(false); const audioCtxRef = useRef(null); const releaseSoundArmedRef = useRef(false); function playMechanicalPhase(phase: "press" | "release") { if (!sound) return; try { const AudioCtx = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext; if (!audioCtxRef.current || audioCtxRef.current.state === "closed") { audioCtxRef.current = new AudioCtx(); } const ctx = audioCtxRef.current; const schedule = () => { const sampleRate = ctx.sampleRate; const duration = phase === "press" ? 0.04 : 0.026; const decayExp = phase === "press" ? 7 : 11; const noiseAmp = phase === "press" ? 0.72 : 0.48; const lpHz = phase === "press" ? 2800 : 5500; const gainLinear = phase === "press" ? 0.56 : 0.4; const buf = ctx.createBuffer(1, Math.floor(sampleRate * duration), sampleRate); const data = buf.getChannelData(0); for (let i = 0; i < data.length; i++) { const t = i / data.length; data[i] = (Math.random() * 2 - 1) * Math.pow(1 - t, decayExp) * noiseAmp; } const src = ctx.createBufferSource(); src.buffer = buf; const lp = ctx.createBiquadFilter(); lp.type = "lowpass"; lp.frequency.value = lpHz; const gain = ctx.createGain(); gain.gain.value = gainLinear; src.connect(lp); lp.connect(gain); gain.connect(ctx.destination); src.start(); }; if (ctx.state === "suspended") { ctx.resume().then(schedule); } else { schedule(); } } catch { } } const isAccent = variant === "accent"; const isDestructive = variant === "destructive"; const isIcon = size === "icon"; const faceTransform = pressed ? `translateY(${depth}px)` : hovered ? "translateY(-2px)" : "translateY(0px)"; const faceTransition = pressed ? "transform 55ms ease, box-shadow 55ms ease" : "transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 200ms ease"; return ( ); } export default DepthButton;