brackt/app/components/league/StepperInput.tsx

export interface StepperInputProps {
  value: number;
  min: number;
  max: number;
  onChange: (v: number) => void;
  decrementLabel?: string;
  incrementLabel?: string;
}

export function StepperInput({
  value,
  min,
  max,
  onChange,
  decrementLabel = "Decrease",
  incrementLabel = "Increase",
}: StepperInputProps) {
  return (
    <div className="flex items-center gap-3">
      <button
        type="button"
        onClick={() => onChange(Math.max(min, value - 1))}
        className="w-9 h-9 rounded-md border border-input flex items-center justify-center text-lg font-medium hover:bg-accent transition-colors"
        aria-label={decrementLabel}
        disabled={value <= min}
      >
        −
      </button>
      <span className="w-10 text-center text-lg font-semibold tabular-nums">{value}</span>
      <button
        type="button"
        onClick={() => onChange(Math.min(max, value + 1))}
        className="w-9 h-9 rounded-md border border-input flex items-center justify-center text-lg font-medium hover:bg-accent transition-colors"
        aria-label={incrementLabel}
        disabled={value >= max}
      >
        +
      </button>
    </div>
  );
}